/* ═══════════════════════════════════════
   Seolution Platform — Main Styles
   Inspired by GeoSize UI
═══════════════════════════════════════ */

/* ─── SIDEBAR ─────────────────────────── */
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    transition: all 0.2s;
    text-decoration: none;
}
.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}
.nav-link.active {
    background-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-weight: 600;
}
.sidebar-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, 0.45);
    padding: 0 0.75rem;
    margin-bottom: 0.375rem;
}

/* ─── FLASH MESSAGES ──────────────────── */
.flash-success { background: #dcf5e6; color: #0a6f37; border: 1px solid #b6e8c8; }
.flash-danger  { background: #fde6e9; color: #a8001a; border: 1px solid #f5b0bc; }
.flash-warning { background: #fff3d6; color: #7a4d00; border: 1px solid #f0d587; }
.flash-info    { background: #e0f5f8; color: #037e93; border: 1px solid #9dd8e2; }

/* ─── KEYWORD TYPE BADGES ─────────────── */
.kw-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    white-space: nowrap;
}
.kw-type-informativa   { background: #e0f5f8; color: #037e93; }
.kw-type-blog          { background: #e8f4e8; color: #2d7a2d; }
.kw-type-transazionale { background: #fde6e9; color: #a8001a; }
.kw-type-commerciale   { background: #fff3d6; color: #7a4d00; }
.kw-type-navigazionale { background: #eef2f7; color: #193e52; }

/* ─── DIFFICULTY BADGES ───────────────── */
.diff-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    font-family: monospace;
}
.diff-low  { background: #dcf5e6; color: #0a6f37; }
.diff-med  { background: #fff3d6; color: #7a4d00; }
.diff-high { background: #fde6e9; color: #a8001a; }

/* ─── KEYWORD SELECT BUTTON ───────────── */
.kw-select-btn {
    border-color: #e0f5f8;
    color: #037e93;
    background: white;
}
.kw-select-btn:hover {
    background: #e0f5f8;
}
.kw-select-btn.selected {
    background: #037e93;
    color: white;
    border-color: #037e93;
}

/* ─── LINE CLAMP ──────────────────────── */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── SCROLLBAR ───────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ─── RESPONSIVE ──────────────────────── */
@media (max-width: 768px) {
    #sidebar { transform: translateX(-100%); transition: transform 0.3s ease; }
    #sidebar.open { transform: translateX(0); }
    main { margin-left: 0 !important; }
}

/* ─── ANIMATIONS ──────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* ─── PERFORMANCE (liste lunghe pre-analisi) ───────────────
   Le card delle pagine fuori dallo schermo non vengono renderizzate:
   evita scatti durante lo scroll e velocizza il caricamento iniziale
   quando ci sono molte pagine/keyword nel DOM. */
.page-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 120px;
}

/* ─── TABLES ──────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 2px solid #f3f4f6;
}
.data-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #f9fafb;
    font-size: 13px;
    vertical-align: middle;
}
.data-table tr:hover td { background: #f9fafb; }
.data-table tr:last-child td { border-bottom: none; }

/* ─── LOADING SPINNER ─────────────────── */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e0f5f8;
    border-top-color: #037e93;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ─── ROLE BADGES ─────────────────────── */
.role-admin { background: #fff3d6; color: #7a4d00; }
.role-user  { background: #e0f5f8; color: #037e93; }