/* ============================================================================
   GESTIONALE NUBES — dashboard-v2.css (Step 9 — 06/05/2026)
   Restyle Asana-style adattato ai 3 colori brand (Blocco D 04/05).
   Caricato DOPO main.css + branding.css → ne fa override mirato.
   Tocca: sidebar (220px), topbar minimale, dashboard home.
   NON tocca: bolla Nai (FAB), chat Nai (nai-chat.css / nai-chat-3b.css).
   ============================================================================ */

/* ============================================================================
   1. TOKEN LOCALI + OVERRIDE GLOBALI
   ============================================================================ */
:root {
    --d2-sidebar-w:        220px;
    --d2-bg:               #f7f8fa;
    --d2-card:             #ffffff;
    --d2-border:           #ebedf0;
    --d2-border-soft:      #f0f2f5;
    --d2-text:             #1e2030;
    --d2-text-muted:       #6b7180;
    --d2-text-faint:       #9aa0a6;

    --d2-blu:              #40447b;
    --d2-blu-d:            #2e3160;
    --d2-blu-soft:         #e8e9f3;
    --d2-aqua:             #49b7af;
    --d2-aqua-d:           #36948c;
    --d2-aqua-soft:        #dff5f3;
    --d2-pink:             #c6226b;
    --d2-pink-d:           #a51a59;
    --d2-pink-soft:        #fde0eb;

    --d2-shadow-soft:      0 1px 2px rgba(20,22,40,.05), 0 2px 8px rgba(20,22,40,.04);
    --d2-shadow-hover:     0 2px 4px rgba(20,22,40,.06), 0 8px 20px rgba(20,22,40,.07);
    --d2-radius:           12px;
    --d2-radius-sm:        8px;
}

/* Sfondo pagina più chiaro e neutro (era #f0f2f7) */
body { background-color: var(--d2-bg) !important; }

/* ============================================================================
   2. SIDEBAR — 220px, blu Nubes, 2 loghi affiancati, voci con icone line-style
   ============================================================================ */
.sidebar {
    width: var(--d2-sidebar-w) !important;
    background: var(--d2-blu) !important;
    box-shadow: 1px 0 0 rgba(0,0,0,.04), 2px 0 12px rgba(20,22,40,.05) !important;
}
.main-panel {
    margin-left: var(--d2-sidebar-w) !important;
}

/* Sidebar brand area — 2 loghi con divider verticale (Blocco D) */
.sidebar-brand {
    padding: 18px 14px !important;
    min-height: 70px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.sb-logo img { max-height: 30px !important; }
.sb-divider { height: 24px !important; background: rgba(255,255,255,.20) !important; }

/* Sezioni nav: label discrete */
.nav-section-title {
    font-size: 0.62rem !important;
    letter-spacing: 1.5px !important;
    color: rgba(255,255,255,.42) !important;
    padding: 14px 18px 4px !important;
    margin-top: 6px !important;
    font-weight: 700 !important;
}

/* Voci nav: pill bianca semitrasparente al hover/active, no nav-icon box */
.sidebar-nav-item {
    padding: 8px 14px !important;
    margin: 1px 8px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,.78) !important;
    border-left: none !important;
    gap: 10px !important;
}
.sidebar-nav-item:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}
.sidebar-nav-item.active {
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-left: none !important;
}
.sidebar-nav-item.active::before { display: none !important; }

/* Icone nav: nessun box, solo icona linea */
.sidebar-nav-item .nav-icon {
    width: 18px !important;
    height: 18px !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-size: 0.92rem !important;
    color: inherit !important;
    flex-shrink: 0;
}
.sidebar-nav-item.active .nav-icon,
.sidebar-nav-item:hover .nav-icon {
    background: transparent !important;
    color: #fff !important;
}

/* Footer sidebar utente: avatar circolare iniziali */
.sidebar-footer {
    padding: 12px 14px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    gap: 10px !important;
}
.sidebar-user-avatar {
    width: 34px !important;
    height: 34px !important;
    background: var(--d2-aqua) !important;
    font-size: 0.8rem !important;
}
/* Super admin: avatar turchese (già di default sopra) — coerente con mockup */
.sidebar-user-avatar.is-superadmin { background: var(--d2-aqua) !important; }
.sidebar-user-avatar.is-admin { background: var(--d2-pink) !important; }

.sidebar-user-name { font-size: 0.78rem !important; }
.sidebar-user-role { font-size: 0.65rem !important; color: rgba(255,255,255,.5) !important; }
.sidebar-logout {
    color: rgba(255,255,255,.5) !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    transition: background .15s, color .15s !important;
}
.sidebar-logout:hover {
    color: #fff !important;
    background: rgba(255,255,255,.10) !important;
}

/* ============================================================================
   3. TOPBAR — minimale, greeting + data a sinistra, icone "quadratini" a destra
   ============================================================================ */
.topbar {
    height: 68px !important;
    background: #fff !important;
    border-bottom: 1px solid var(--d2-border) !important;
    box-shadow: none !important;
    padding: 0 26px !important;
    gap: 14px !important;
}

/* Greeting block (sostituisce il vecchio topbar-page-title) */
.topbar-greeting {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
    gap: 1px;
}
.topbar-greeting .tg-date {
    font-size: 0.7rem;
    color: var(--d2-text-faint);
    font-weight: 500;
    letter-spacing: 0.2px;
    margin: 0;
}
.topbar-greeting .tg-hello {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--d2-text);
    margin: 0;
}
.topbar-greeting .tg-hello strong { color: var(--d2-blu); font-weight: 700; }

/* Nascondi il vecchio page-title: non serve più, c'è la greeting */
.topbar-page-title { display: none !important; }

/* Search: ridotta, ammorbidita */
.topbar-search-input {
    width: 220px !important;
    background: var(--d2-bg) !important;
    border: 1px solid var(--d2-border) !important;
    border-radius: 8px !important;
    padding: 7px 14px 7px 34px !important;
    font-size: 0.83rem !important;
}
.topbar-search-input:focus {
    width: 260px !important;
    background: #fff !important;
    border-color: var(--d2-blu) !important;
    box-shadow: 0 0 0 3px rgba(64,68,123,.10) !important;
}

/* Quadratini icona a destra (notifiche + chat admin) */
.topbar-icon-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    background: var(--d2-bg) !important;
    border: 1px solid var(--d2-border) !important;
    color: var(--d2-text-muted) !important;
    font-size: 0.92rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .15s ease !important;
    text-decoration: none !important;
    margin: 0 4px 0 0 !important;
}
.topbar-icon-btn:hover {
    background: #fff !important;
    border-color: var(--d2-blu) !important;
    color: var(--d2-blu) !important;
    transform: translateY(-1px);
}
.topbar-badge {
    position: absolute;
    top: -3px !important;
    right: -3px !important;
    min-width: 16px !important;
    height: 16px !important;
    background: var(--d2-pink) !important; /* dot magenta come da mockup */
    font-size: 0.6rem !important;
    border: 2px solid #fff !important;
    box-sizing: content-box;
}

/* User pill: più discreta */
.topbar-user {
    border: 1px solid var(--d2-border) !important;
    background: #fff !important;
    padding: 4px 10px 4px 4px !important;
}
.topbar-user-avatar {
    width: 28px !important;
    height: 28px !important;
    background: var(--d2-blu) !important;
    font-size: 0.7rem !important;
}
.topbar-user-name { font-size: 0.8rem !important; }

/* ============================================================================
   4. CONTENT WRAPPER — più aria
   ============================================================================ */
.content-wrapper {
    padding: 28px 32px 40px !important;
}

/* ============================================================================
   5. DASHBOARD — Quick Actions (5 card colorate)
   ============================================================================ */
.qa-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 26px;
}
.qa-card {
    background: var(--d2-card);
    border: 1px solid var(--d2-border);
    border-radius: var(--d2-radius);
    padding: 16px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    color: var(--d2-text);
    transition: all .18s ease;
    cursor: pointer;
}
.qa-card:hover {
    border-color: var(--d2-blu);
    color: var(--d2-text);
    transform: translateY(-2px);
    box-shadow: var(--d2-shadow-hover);
}
.qa-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.qa-icon i { font-size: 0.95rem; }

/* Varianti colore (ciclo nei 3 brand + soft tints) */
.qa-icon.qa-blu       { background: var(--d2-blu);       color: #fff; }
.qa-icon.qa-aqua      { background: var(--d2-aqua);      color: #fff; }
.qa-icon.qa-pink      { background: var(--d2-pink);      color: #fff; }
.qa-icon.qa-blu-soft  { background: var(--d2-blu-soft);  color: var(--d2-blu); }
.qa-icon.qa-aqua-soft { background: var(--d2-aqua-soft); color: var(--d2-aqua-d); }
.qa-icon.qa-blu-soft i,
.qa-icon.qa-aqua-soft i { color: inherit !important; } /* batte la regola FA inline */

.qa-label {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--d2-text);
}

/* ============================================================================
   6. DASHBOARD — KPI strip (4 card)
   ============================================================================ */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 26px;
}
.kpi-card {
    background: var(--d2-card);
    border: 1px solid var(--d2-border);
    border-radius: var(--d2-radius);
    padding: 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none !important;
    color: var(--d2-text);
    transition: all .18s ease;
    position: relative;
}
.kpi-card:hover {
    border-color: var(--d2-blu);
    box-shadow: var(--d2-shadow-hover);
    transform: translateY(-1px);
    color: var(--d2-text);
}
.kpi-card .kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.kpi-card .kpi-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.82rem;
    background: var(--d2-blu-soft);
    color: var(--d2-blu);
    flex-shrink: 0;
}
.kpi-card .kpi-icon i { color: inherit !important; }
.kpi-card.kpi-aqua .kpi-icon { background: var(--d2-aqua-soft); color: var(--d2-aqua-d); }
.kpi-card.kpi-pink .kpi-icon { background: var(--d2-pink-soft); color: var(--d2-pink-d); }

.kpi-card .kpi-arrow {
    color: var(--d2-text-faint);
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity .15s, transform .15s;
}
.kpi-card:hover .kpi-arrow { opacity: 1; transform: translateX(2px); }

.kpi-card .kpi-value {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--d2-text);
    margin: 4px 0 0 0;
}
.kpi-card .kpi-value.is-active { color: var(--d2-blu); }
.kpi-card .kpi-label {
    font-size: 0.75rem;
    color: var(--d2-text-muted);
    font-weight: 500;
    margin: 0;
}

/* ============================================================================
   7. DASHBOARD — 2 pannelli (1.4 : 1) "Lezioni di oggi" + "Scadenze vicine"
   ============================================================================ */
.dash-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 18px;
    align-items: start;
    margin-bottom: 26px;
}
.dash-panel {
    background: var(--d2-card);
    border: 1px solid var(--d2-border);
    border-radius: var(--d2-radius);
    padding: 22px;
    box-shadow: var(--d2-shadow-soft);
}
.dash-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d2-border-soft);
}
.dash-panel-head .dp-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--d2-text);
    margin: 0;
    flex: 1;
}
.dash-panel-head .dp-count {
    background: var(--d2-blu-soft);
    color: var(--d2-blu);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 10px;
    letter-spacing: 0.3px;
}
.dash-panel-head .dp-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--d2-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dash-panel-head .dp-link:hover { color: var(--d2-blu); }
.dash-panel-head .dp-link i { font-size: 0.65rem; }

/* Lezione row — barra verticale brand + corpo + pillola brand a destra */
.lesson-row {
    display: grid;
    grid-template-columns: auto 60px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--d2-border-soft);
}
.lesson-row:last-child { border-bottom: none; }
.lesson-bar {
    width: 4px;
    height: 36px;
    border-radius: 2px;
    background: var(--d2-aqua); /* nubes default */
}
.lesson-bar.is-esplo { background: var(--d2-pink); }
.lesson-time {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--d2-blu);
    line-height: 1.15;
    text-align: center;
    background: var(--d2-blu-soft);
    border-radius: 6px;
    padding: 4px 6px;
}
.lesson-time .lt-end {
    display: block;
    font-size: 0.66rem;
    font-weight: 500;
    color: var(--d2-text-faint);
    margin-top: 1px;
}
.lesson-info { min-width: 0; }
.lesson-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--d2-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lesson-meta {
    font-size: 0.72rem;
    color: var(--d2-text-muted);
    margin-top: 2px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lesson-meta i { width: 12px; font-size: 0.7rem; opacity: 0.7; }
.lesson-brand {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 9px;
    border-radius: 10px;
    background: var(--d2-aqua-soft);
    color: var(--d2-aqua-d);
}
.lesson-brand.is-esplo { background: var(--d2-pink-soft); color: var(--d2-pink-d); }
.lesson-action {
    background: var(--d2-blu);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none !important;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.lesson-action:hover { background: var(--d2-blu-d); color: #fff; }

/* Scadenza row — border-left colorato per priorità */
.scad-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    margin-bottom: 8px;
    background: var(--d2-bg);
    border: 1px solid var(--d2-border-soft);
    border-left-width: 3px;
    border-radius: var(--d2-radius-sm);
    text-decoration: none !important;
    color: var(--d2-text);
    transition: all .15s ease;
}
.scad-row:last-child { margin-bottom: 0; }
.scad-row:hover {
    background: #fff;
    border-color: var(--d2-border);
    transform: translateX(2px);
}
.scad-row.is-today  { border-left-color: var(--d2-pink); }
.scad-row.is-soon   { border-left-color: var(--d2-aqua); } /* 3-7 gg (era ambra) */
.scad-row.is-far    { border-left-color: var(--d2-blu); }  /* 7+ gg */
.scad-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--d2-border);
    font-size: 0.78rem;
    color: var(--d2-text-muted);
}
.scad-row.is-today .scad-icon { background: var(--d2-pink-soft); color: var(--d2-pink-d); border-color: transparent; }
.scad-row.is-soon  .scad-icon { background: var(--d2-aqua-soft); color: var(--d2-aqua-d); border-color: transparent; }
.scad-row.is-far   .scad-icon { background: var(--d2-blu-soft);  color: var(--d2-blu);    border-color: transparent; }
.scad-icon i { color: inherit !important; }

.scad-body { flex: 1; min-width: 0; }
.scad-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--d2-text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scad-sub {
    font-size: 0.7rem;
    color: var(--d2-text-muted);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scad-when {
    font-size: 0.7rem;
    font-weight: 700;
    text-align: right;
    flex-shrink: 0;
    line-height: 1.2;
}
.scad-row.is-today .scad-when { color: var(--d2-pink-d); }
.scad-row.is-soon  .scad-when { color: var(--d2-aqua-d); }
.scad-row.is-far   .scad-when { color: var(--d2-blu); }

/* Empty state */
.dp-empty {
    text-align: center;
    padding: 28px 12px;
    color: var(--d2-text-faint);
}
.dp-empty i { font-size: 1.8rem; opacity: 0.35; margin-bottom: 10px; display: block; }
.dp-empty p { font-size: 0.84rem; font-weight: 500; margin: 0; }

/* ============================================================================
   8. DASHBOARD — Pannello secondario "Slide corsi" (declassato sotto)
   ============================================================================ */
.dash-secondary {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 18px;
    align-items: start;
}
.slide-quick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--d2-border-soft);
    border-radius: var(--d2-radius-sm);
    margin-bottom: 6px;
    text-decoration: none !important;
    color: var(--d2-text);
    transition: background .15s, border-color .15s;
}
.slide-quick-item:last-child { margin-bottom: 0; }
.slide-quick-item:hover {
    background: var(--d2-bg);
    border-color: var(--d2-border);
    color: var(--d2-text);
}
.slide-quick-icon {
    width: 28px; height: 28px;
    background: var(--d2-blu-soft);
    color: var(--d2-blu);
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.slide-quick-icon i { color: inherit !important; }
.slide-quick-name {
    flex: 1; min-width: 0;
    font-size: 0.8rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slide-quick-arrow { color: var(--d2-text-faint); font-size: 0.7rem; }

/* ── Variante deck (Step 9 — patch slide_decks dal DB) ──
   slide-quick-item con sottoriga meta + pillola brand a destra. */
.slide-deck-item {
    gap: 12px;
}
.slide-deck-item.is-esplo .slide-quick-icon {
    background: var(--d2-pink-soft);
    color: var(--d2-pink-d);
}
.slide-deck-body {
    flex: 1;
    min-width: 0;
}
.slide-deck-body .slide-quick-name {
    line-height: 1.25;
}
.slide-deck-meta {
    font-size: 0.7rem;
    color: var(--d2-text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slide-deck-brand {
    flex-shrink: 0;
    /* il resto degli stili viene da branding.css (.brand-badge / .brand-badge-*) */
}

.slides-search {
    width: 100%;
    padding: 7px 12px;
    border: 1px solid var(--d2-border);
    border-radius: var(--d2-radius-sm);
    background: var(--d2-bg);
    font-size: 0.82rem;
    margin-bottom: 12px;
    outline: none;
    font-family: inherit;
}
.slides-search:focus {
    background: #fff;
    border-color: var(--d2-blu);
}

/* Box Report Staff — declassato, discreto */
.report-staff-mini {
    background: var(--d2-card);
    border: 1px solid var(--d2-border);
    border-left: 3px solid var(--d2-pink);
    border-radius: var(--d2-radius-sm);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    color: var(--d2-text);
    transition: all .15s ease;
}
.report-staff-mini:hover {
    background: var(--d2-pink-soft);
    color: var(--d2-pink-d);
    transform: translateX(2px);
}
.report-staff-mini .rs-icon {
    width: 32px; height: 32px;
    background: var(--d2-pink-soft);
    color: var(--d2-pink);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.report-staff-mini .rs-icon i { color: inherit !important; }
.report-staff-mini .rs-body { flex: 1; min-width: 0; }
.report-staff-mini .rs-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--d2-text);
}
.report-staff-mini .rs-sub {
    font-size: 0.7rem;
    color: var(--d2-text-muted);
}
.report-staff-mini:hover .rs-title,
.report-staff-mini:hover .rs-sub { color: var(--d2-pink-d); }

/* ============================================================================
   9. RESPONSIVE
   ============================================================================ */
@media (max-width: 1200px) {
    .qa-row { grid-template-columns: repeat(3, 1fr); }
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .dash-grid { grid-template-columns: 1fr; }
    .dash-secondary { grid-template-columns: 1fr; }
}
@media (max-width: 992px) {
    /* Sidebar resta 220 anche su tablet (era 220 di default in main.css) */
    .topbar-search { display: none !important; }
}
@media (max-width: 768px) {
    /* Sidebar va off-canvas (regola di main.css resta valida) */
    .main-panel { margin-left: 0 !important; }
    .content-wrapper { padding: 18px 16px 32px !important; }
    .topbar { padding: 0 16px !important; height: 60px !important; }
    .topbar-greeting .tg-hello { font-size: 0.95rem; }
    .topbar-greeting .tg-date { font-size: 0.65rem; }
    .topbar-icon-btn { width: 34px !important; height: 34px !important; }
    .qa-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .qa-card { padding: 12px 12px; }
    .qa-icon { width: 34px; height: 34px; }
    .qa-label { font-size: 0.78rem; }
    .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kpi-card { padding: 14px; }
    .kpi-card .kpi-value { font-size: 1.4rem; }
    .dash-panel { padding: 16px; }
    .lesson-row {
        grid-template-columns: 4px 56px 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
    }
    .lesson-brand,
    .lesson-action {
        grid-column: 2 / 4;
        justify-self: start;
        margin-top: 4px;
    }
    .lesson-brand { grid-row: 2; }
    .lesson-action { grid-row: 2; justify-self: end; }
    .topbar-user-name { display: none !important; }
}
@media (max-width: 480px) {
    .qa-row { grid-template-columns: 1fr; }
    .kpi-row { grid-template-columns: 1fr; }
    .topbar-greeting .tg-hello { font-size: 0.88rem; }
}

/* ============================================================================
   10. ANIMAZIONI ENTRATA — riusa fadeInUp di main.css (.animate-in)
   ============================================================================ */
/* niente di nuovo: home.php userà già le classi animate-in / animate-delay-* */