/* ── TEMA NAVY HIGH-CONTRAST — SinergiaScuola AI ── */
    html { height:100%; }
    body { background:#0a1228; font-family:'Inter',system-ui,sans-serif; margin:0; color:#f0f4ff; min-height:100vh; display:flex; flex-direction:column; font-size:15px; }
    #ai-orb { position:fixed; top:0; left:0; width:100vw; height:100vh; pointer-events:none; z-index:0; opacity:.5; }

    /* ── SFONDO TECH (come login/setup) — solo decorativo, dietro al contenuto ── */
    .admin-tech-bg { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
    .admin-tech-bg .tg-grid {
      position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(56,189,248,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56,189,248,.055) 1px, transparent 1px);
      background-size:44px 44px;
    }
    .admin-tech-bg .tg-amb-1 { position:absolute; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle,rgba(56,189,248,.07) 0%,transparent 70%); top:-220px; left:-140px; animation:tgAmbPulse 9s ease-in-out infinite alternate; }
    .admin-tech-bg .tg-amb-2 { position:absolute; width:640px; height:640px; border-radius:50%; background:radial-gradient(circle,rgba(139,92,246,.05) 0%,transparent 70%); bottom:-280px; right:-200px; animation:tgAmbPulse 11s ease-in-out .5s infinite alternate; }
    @keyframes tgAmbPulse { from{opacity:.7;transform:scale(1)} to{opacity:1;transform:scale(1.08)} }
    @media (prefers-reduced-motion: reduce) { .admin-tech-bg .tg-amb-1, .admin-tech-bg .tg-amb-2 { animation:none; } }
    /* .tg-scan RIMOSSA: era una riga alta UN PIXEL che scendeva dallalto in basso ogni 9
       secondi (effetto "scansione"). Un movimento che non dice niente e si ripete allinfinito non
       e atmosfera: e una distrazione - e ruba lattenzione allunica cosa che si deve muovere
       davvero, cioe la sfera quando lAI sta lavorando. */
    /* header e contenuto sopra lo sfondo */
    .app-header { z-index:300; }
    .app-body { position:relative; z-index:1; }

    /* Bootstrap overrides dark */
    .text-muted { color:var(--text-3) !important; }
    .bg-light { background:#0a1628 !important; }
    .rounded-3 { border-radius:10px !important; }
    .modal-content { background:#162947 !important; border:1px solid rgba(99,179,237,.35) !important; color:#f0f4ff !important; }
    .modal-header { border-bottom:1px solid rgba(99,179,237,.20) !important; }
    .modal-footer { border-top:1px solid rgba(99,179,237,.20) !important; }
    .dropdown-menu { background:#162947; border:1px solid rgba(99,179,237,.30); }
    .dropdown-item { color:#f0f4ff; }
    .dropdown-item:hover { background:rgba(99,179,237,.12); color:#93c5fd; }
    .list-group-item { background:#162947; border-color:rgba(99,179,237,.20); color:#f0f4ff; }
    .table { --bs-table-bg:transparent; --bs-table-border-color:rgba(99,179,237,.15); color:#f0f4ff; }

    /* Input ora/data leggibili sul tema scuro (icona orologio/calendario chiara) */
    input[type="time"], input[type="date"], input[type="datetime-local"],
    input[type="month"], input[type="week"] { color-scheme: dark; }
    input[type="time"]::-webkit-calendar-picker-indicator,
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
      filter: invert(1) brightness(1.8); opacity:.8; cursor:pointer;
    }

    /* ── HEADER navy autorevole ──
       72px sul computer (logo e sfera a 56, con 8px di respiro sopra e sotto); 60px sul telefono,
       dove lo spazio verticale e' prezioso e il logo e' comunque 38px (v. il @media piu' sotto).

       ATTENZIONE: questo numero NON vive da solo. La barra LATERALE ci si aggancia in due punti
       (`top` e `height:calc(100vh - X)`), e sul telefono anche il velo del menu. Cambiare solo
       questo li sfasa — e NON DA' ERRORE: resta una fessura scoperta, e te ne accorgi guardando.
       (E' successo davvero mentre facevo questa modifica: la sidebar era gia' a 72 e la barra
       ancora a 60. Dodici pixel di buco, trovati dal test e non dall'occhio.) */
    .app-header {
      height:72px;
      background:#0a1228;
      display:flex; align-items:center; gap:0;
      position:sticky; top:0; z-index:300;
      border-bottom:1px solid rgba(125,211,252,.22);
      box-shadow:0 2px 24px rgba(0,0,0,.35);
      padding:0 16px 0 0;
      flex-shrink:0;
    }
    .hd-left { display:flex; align-items:center; gap:10px; flex-shrink:0; }
    .logo-wrap { display:flex; align-items:center; gap:8px; }
    .logo-mark { width:36px; height:36px; border-radius:9px; background:linear-gradient(135deg,#1d4ed8,#0e7490); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 2px 10px rgba(29,78,216,.35); }
    .logo-name { font-size:15px; font-weight:800; color:white; letter-spacing:-.4px; white-space:nowrap; }
    .logo-name .ai { background:linear-gradient(135deg,#93c5fd,#67e8f9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .hd-brand { font-size:20px; font-weight:800; color:#fff; letter-spacing:-.5px; white-space:nowrap; line-height:1; }
    .hd-brand-accent { background:linear-gradient(135deg,#7dd3fc,#818cf8 55%,#ec4899); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    /* STRISCIA "DOVE VADO ADESSO": guida il dirigente al prossimo passo (prima il setup, poi le
       cose da sistemare/sapere). Vuota => sparisce (barra pulita). Scorre solo se c'e' piu' di una
       voce; si ferma col mouse sopra; niente moto se l'utente ha chiesto "riduci animazioni". Sta
       tra il logo e la sfera centrale, quindi si ferma prima del centro (max-width). Su schermi
       stretti sparisce (gli stessi avvisi restano nel "Percorso" e nel "Controlla configurazione"). */
    .hd-todo { display:none; align-items:center; gap:8px; flex:0 1 auto; min-width:0;
      /* Larghezza limitata a fermarsi PRIMA della sfera centrale (che galleggia a meta' barra):
         il bordo destro resta a sinistra del centro, cosi' il testo non finisce mai sotto la sfera. */
      max-width:min(400px, calc(50vw - 260px)); margin:0 16px; height:30px; padding:0 10px; box-sizing:border-box;
      background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:999px; overflow:hidden; }
    .hd-todo-ico { color:#7dd3fc; font-size:13px; flex-shrink:0; }
    /* >>> UNA FRASE TAGLIATA A META' SENZA DIRLO (31 ago 2026) <<<
       Misurato guidando il browser: la striscia mostrava «18 classi ricevono meno minuti di
       quelli previsti dal pia» e finiva li'. Nessun puntino, nessun modo di sapere che mancava
       qualcosa - e soprattutto spariva il «-> apri», cioe' l'unica cosa che diceva come leggere
       il resto. Un avviso illeggibile che non sembra illeggibile e' peggio di un avviso assente:
       chi legge crede che sia tutto li' e conclude che il programma scrive male.
       Adesso: il testo si accorcia con i puntini, «apri» non si accorcia mai, e il titolo al
       passaggio del mouse porta la frase intera. */
    .hd-todo-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1 1 auto; }
    .hd-todo-view { position:relative; flex:1 1 auto; min-width:0; overflow:hidden; height:100%; display:flex; align-items:center; }
    /* Una voce alla volta: sta ferma ~5s (il tempo di leggerla E cliccarla), poi dissolve nella
       prossima. Niente marquee continuo: un bersaglio in movimento non si clicca. */
    .hd-todo-track { display:flex; align-items:center; white-space:nowrap; transition:opacity .22s ease; min-width:0; max-width:100%; }
    .hd-todo-item { background:none; border:none; cursor:pointer; font-family:inherit; font-size:12px;
      font-weight:700; white-space:nowrap; display:inline-flex; align-items:center; gap:7px; padding:0;
      min-width:0; max-width:100%; }
    .hd-todo-item > i { flex-shrink:0; }
    .hd-todo-item .hd-todo-go { color:rgba(255,255,255,.45); font-weight:600; flex-shrink:0; }
    .hd-todo-item:hover .hd-todo-go { color:#7dd3fc; }
    @media (max-width:1100px){ .hd-todo{ display:none !important; } }
    @media (prefers-reduced-motion:reduce){ .hd-todo-track{ transition:none; } }
    .hd-nav { display:none; }
    .mnav-btn { display:none; }
    .mnav-sep { display:none; }
    .nav-sub  { display:none; }
    .sidebar-toggle-btn { background:transparent; border:none; color:rgba(255,255,255,.75); cursor:pointer; padding:0 14px; display:flex; align-items:center; justify-content:center; font-size:20px; height:60px; flex-shrink:0; transition:.15s; }
    .sidebar-toggle-btn:hover { color:#fff; background:rgba(255,255,255,.08); }
    #nav-istituto { display:none !important; }
    #scuola-footer { display:none !important; }
    /* Sync pill: fisso in basso a destra.
       right:92px (non 14px): nello stesso angolo c'e' il pulsante tondo dell'assistente AI
       (#ai-assistant, z-index 800 contro i 299 di qui), che gli passava sopra e ne copriva
       meta'. Chi guardava non riusciva a leggere se il foglio era sincronizzato — cioe'
       proprio l'informazione per cui quel badge esiste. Ora gli sta accanto, non sotto. */
    /* Il posizionamento e' del GRUPPO (pastiglia "Foglio aggiornato" + pulsante "Apri il
       Foglio"): cosi' i due viaggiano insieme e restano affiancati ovunque. */
    /* >>> UNA STRISCIA CHE GALLEGGIA SOPRA LA PAGINA LA COPRE, PER FORZA (26 ago 2026) <<<
       Stava `position:fixed` in BASSO A DESTRA, cioe' sopra la colonna di lavoro: cosa
       copriva dipendeva solo da dove eri arrivato a scorrere. Misurato in schermata: una volta
       in mezzo alla tabella dei plessi, una volta sul pulsante «Modifica orario», una volta
       sopra «Da fare adesso» e su «SELEZIONA CLASSE».
       Ho provato prima a rimpicciolirlo (76px invece di 265) e poi a farlo scansare di 42px
       quando aveva un comando sotto: rimpicciolito copriva meno, scansato copriva ALTRO. Era
       un rincorrersi, e voleva dire che la strada era sbagliata: un riquadro fisso sopra una
       pagina fitta prima o poi becca sempre qualcosa.
       Ora sta nella BARRA LATERALE, in fondo. La barra e' larga 220px, fissa, e contiene solo
       navigazione: li' non c'e' niente da coprire, a nessuna altezza di scorrimento. Le due
       pastiglie si impilano una sull'altra perche' 220px non ne reggono due affiancate.
       Rimettere il gruppo nella barra IN ALTO non si poteva: e' piena (a 1440px restano 25
       pixel liberi, a 1280 tredici). Misurato, non supposto. */
    #foglio-group {
      position:fixed !important; left:14px; bottom:18px; right:auto; z-index:299;
      flex-direction:column; align-items:stretch; gap:6px; width:192px;
    }
    #foglio-group > * { justify-content:center; }
    /* Col proprietario c'e' anche «Centro AI» nello stesso angolo: si sale sopra di lui. */
    body.ss-owner #foglio-group { bottom:64px; }
    /* Barra laterale ridotta a icone: il gruppo si stringe con lei e resta sulla sua colonna. */
    body.ss-sb-collapsed #foglio-group { width:auto; }
    body.ss-sb-collapsed #foglio-group #btn-apri-foglio span,
    body.ss-sb-collapsed #foglio-group #sync-time { display:none; }
    #sync-pill { font-size:10px !important; padding:3px 9px !important; border-radius:20px !important; }
    #btn-apri-foglio { font-size:10px !important; padding:3px 9px !important; border-radius:20px !important; }
    #btn-apri-foglio:hover { background:rgba(56,189,248,.22) !important; color:#bae6fd !important; }
    /* Nome istituto fisso in basso al centro */
    #scuola-footer { position:fixed; bottom:12px; left:50%; transform:translateX(-50%); z-index:299; font-size:11px; font-weight:700; color:var(--text-4); white-space:nowrap; pointer-events:none; }
    .mnav-btn-ai { background:linear-gradient(135deg,#1d4ed8,#0e7490) !important; color:white !important; border-radius:8px !important; border-bottom:none !important; height:42px !important; padding:0 18px !important; margin:0 0 0 8px !important; box-shadow:0 2px 14px rgba(29,78,216,.40); flex-shrink:0; font-size:15px !important; font-weight:700 !important; }
    .hd-sep { width:1px; height:22px; background:rgba(255,255,255,.15); flex-shrink:0; margin:0 10px; }
    /* >>> IL NOME DELLA SCUOLA SI DEVE POTER LEGGERE (18 ago 2026) <<<
       Era tagliato a 160px: "Istituto Omnicomprensivo di Collaudo" si fermava a meta' parola,
       e l'ha visto l'utente ("non si legge nemmeno il nome dell'istituto nella barra sopra").
       Centosessanta pixel a 13px in semigrassetto sono circa venticinque lettere, e i nomi veri
       delle scuole italiane sono quasi tutti piu' lunghi: "Istituto Comprensivo Statale ...",
       "I.I.S.S. ...". Cioe' il taglio non era un caso limite, era il caso NORMALE.
       Ora lo spazio segue la finestra (fino a 34 lettere o un quarto della larghezza, quello che
       viene prima): su uno schermo largo il nome ci sta tutto, su uno stretto si accorcia invece
       di spingere fuori i pulsanti. E chi resta tagliato si legge col titolo, che app-core mette
       insieme al nome. */
    .hd-school { font-size:13px; font-weight:600; color:rgba(255,255,255,.90); max-width:min(34ch, 26vw); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex-shrink:1; min-width:0; }
    .hd-anno { font-size:12px; font-weight:600; color:rgba(255,255,255,.65); flex-shrink:0; letter-spacing:.2px; }
    .hd-right { display:flex; align-items:center; gap:10px; font-size:14px; flex-shrink:0; padding-left:12px; border-left:1px solid rgba(255,255,255,.15); }
    .hd-user { color:rgba(255,255,255,.90); white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis; font-size:14px; font-weight:600; }
    .btn-hd-logout { background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); color:#ffffff; padding:7px 16px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:.2s; font-family:inherit; white-space:nowrap; }
    .btn-hd-logout:hover { background:rgba(255,255,255,.20); color:white; }
    @keyframes ss-guida-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.7);} 50%{box-shadow:0 0 0 6px rgba(248,113,113,0);} }
    #guida-badge.ss-pulse { animation:ss-guida-pulse 1.2s ease-in-out 4; }

    /* ── RESPONSIVE MOBILE ── */
    @media (max-width:768px) {
      .app-header { padding:0 8px 0 0; }
      .logo-wrap img { height:38px !important; }
      .hd-right { gap:6px; padding-left:6px; }
      .hd-user,.hd-school,.hd-anno { display:none; }
      #foglio-group,#btn-reconnect-google { display:none !important; }
      .ss-card { margin-bottom:12px; }
      .ss-card-body { padding:14px; }
      .dir-kpis { grid-template-columns:repeat(2,1fr); gap:8px; }
      .dir-kpi-num { font-size:24px; }
      .cfg-tab { font-size:13px; padding:8px 14px; }
    }
    @media (max-width:480px) {
      .logo-wrap img { height:34px !important; }
      .hd-brand { display:none; }
      .dir-kpis { grid-template-columns:repeat(2,1fr); }
      .dir-kpi  { padding:10px 12px; gap:10px; }
      .dir-kpi-ico { width:38px; height:38px; font-size:17px; }
      .ss-card-body { padding:10px; }
      .cfg-tab { font-size:12px; padding:7px 10px; }
    }

    /* ── DRAWER NOTIZIE MINISTERIALI — GIORNALINO ── */
    .news-drawer { position:fixed;top:0;right:-500px;width:460px;max-width:100vw;height:100vh;height:100dvh;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);background:#fafaf7;color:#1a1a1a;border-left:1px solid #d1c9b8;z-index:9999;transition:right .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(0,0,0,.55); }
    .news-drawer.open { right:0; }
    .news-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.50);z-index:9998; }
    .news-overlay.show { display:block; }
    /* Bottone filtro categoria */
    /* I filtri delle notizie erano alti 27px e stanno in fila attaccati: col dito si prende
       quello sbagliato. Portati a 36 (8 ago 2026). La gemella sta in view_docente.html. */
    .news-cat-btn { display:inline-flex;align-items:center;min-height:36px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.10);color:#555;border-radius:5px;padding:4px 11px;font-size:11px;font-weight:700;cursor:pointer;transition:.15s;font-family:'Georgia',serif;letter-spacing:.3px;text-transform:uppercase; }
    .news-cat-btn:hover,.news-cat-btn.active { background:#1d4ed8;color:#fff;border-color:#1d4ed8; }
    /* Campana header */
    /* La campanella era 35x32: sta nella barra in cima, si preme col pollice (8 ago 2026). */
    .news-bell { position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;background:transparent;border:none;color:rgba(255,255,255,.80);cursor:pointer;padding:6px 8px;border-radius:8px;transition:.2s;line-height:1; }
    .news-bell:hover { background:rgba(255,255,255,.10);color:white; }
    .news-bell-badge { position:absolute;top:2px;right:2px;background:#3b82f6;color:white;border-radius:50%;width:15px;height:15px;font-size:9px;font-weight:700;line-height:15px;text-align:center;display:none; }
    /* Testata (masthead) */
    .gn-masthead { padding:18px 20px 12px;border-bottom:3px double #1a1a1a;background:#fafaf7;flex-shrink:0; }
    .gn-title { font-family:'Georgia',serif;font-size:26px;font-weight:900;color:#0a0a0a;letter-spacing:-.5px;line-height:1;text-align:center; }
    .gn-sub { font-size:10px;color:#555;text-align:center;margin-top:3px;letter-spacing:.8px;text-transform:uppercase;font-family:system-ui,sans-serif; }
    .gn-date { font-size:10px;color:#777;text-align:center;margin-top:5px;font-style:italic; }
    .gn-rule { border-top:1px solid #1a1a1a;margin-top:10px; }
    /* Separatore sezione */
    .gn-section-hd { display:flex;align-items:center;gap:8px;padding:10px 16px 6px;flex-shrink:0; }
    .gn-section-label { font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#fff;padding:2px 8px;border-radius:3px;white-space:nowrap;font-family:system-ui,sans-serif; }
    .gn-section-line { flex:1;height:1px;background:#ccc; }
    /* Articolo in evidenza (primo) */
    .gn-featured { display:block;text-decoration:none;padding:16px 18px 14px;border-bottom:2px solid #1a1a1a;background:#fafaf7;transition:background .15s; }
    .gn-featured:hover { background:#f0ede8; }
    .gn-feat-category { font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:7px;font-family:system-ui,sans-serif; }
    .gn-feat-title { font-family:'Georgia',serif;font-size:18px;font-weight:700;color:#0a0a0a;line-height:1.35;margin-bottom:8px; }
    .gn-feat-date { font-size:10px;color:#666;margin-bottom:8px;font-style:italic; }
    .gn-feat-cta { font-size:11px;color:#1d4ed8;font-weight:700;letter-spacing:.3px;font-family:system-ui,sans-serif; }
    .gn-divider { height:1px;background:rgba(0,0,0,.08);margin:0 16px; }
    /* Articoli normali */
    .gn-item { display:block;text-decoration:none;padding:12px 18px;border-bottom:1px solid #e8e4dc;background:#fafaf7;transition:background .15s; }
    .gn-item:hover { background:#f0ede8; }
    .gn-item-badge { display:inline-block;font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;padding:2px 7px;border-radius:3px;margin-bottom:5px;font-family:system-ui,sans-serif; }
    .gn-item-title { font-family:'Georgia',serif;font-size:14px;font-weight:700;color:#111;line-height:1.4;margin-bottom:3px; }
    .gn-item-date { font-size:10px;color:#777;font-style:italic; }
    /* Loading / empty */
    .news-loading { color:#6b6b6b;text-align:center;padding:48px 20px;font-size:13px;background:#fafaf7; }
    .news-empty { color:#6b6b6b;text-align:center;padding:48px 20px;font-size:13px;background:#fafaf7; }
    .news-spin { font-size:22px;display:block;margin-bottom:10px;animation:spin 1s linear infinite; }
    @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
    /* Search */
    .news-search { flex:1;border:1px solid rgba(0,0,0,.15);border-radius:5px;padding:4px 9px;font-size:11px;color:#333;background:#fff;font-family:inherit; }
    .news-search::placeholder { color:#aaa; }

    /* ── LAYOUT (sidebar + contenuto) ── */
    .app-layout { display:flex; align-items:flex-start; flex:1; }

    /* ── SIDEBAR ── */
    /* Overlay mobile: nascosto su desktop (le regole complete sono nel blocco <=768px) */
    .sidebar-mobile-overlay { display:none; }
    /* FISSA alla finestra (NON sticky): sticky si "rompe" in silenzio se un antenato prende un
       overflow/height particolare e la barra ricomincia a scorrere col contenuto. `position:fixed`
       e' ancorata alla viewport e NON puo' scorrere in nessun caso. Il contenuto (.app-body) viene
       spostato a destra con `margin-left` pari alla larghezza della barra (220 -> 64 se compressa). */
    /* `--ss-topbar-offset` (0 quando non c'e' nessuna striscia sopra la barra): la scrive
       core/demo-banner.js misurando se stessa. Senza, la barra laterale della DEMO parte da
       72px mentre l'intestazione e' gia' scesa di una quarantina di pixel, e le due si
       accavallano. Stessa cura della sfera, v. core/ss-orb.js. */
    .sidebar { width:220px; flex-shrink:0; background:#0a1228; border-right:1px solid rgba(125,211,252,.15); display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; transition:width .22s cubic-bezier(.4,0,.2,1); z-index:200; position:fixed; top:calc(72px + var(--ss-topbar-offset, 0px)); left:0; height:calc(100vh - 72px - var(--ss-topbar-offset, 0px));
      /* >>> DUE COSE NELLO STESSO ANGOLO IN BASSO A SINISTRA (31 ago 2026) <<<
         Misurato guidando il browser: «Apri il Foglio», la pastiglia «Foglio aggiornato alle...»
         e il campo «Cerca / Ctrl+K» finivano uno sopra l'altro, testo su testo. Le prime due
         sono `position:fixed` in fondo a questa colonna (v. #foglio-group qui sotto), la terza
         sta nel flusso della barra con `margin-top:auto`, cioe' schiacciata in fondo: nessuna
         delle due sa dell'altra, e si prendono lo stesso posto.
         Il gruppo del foglio non si puo' togliere dal fisso (sul telefono vive in un altro
         angolo ancora), quindi il posto glielo si RISERVA: la colonna finisce prima, e la voce
         «Cerca» si ferma sopra. 76px = due pastiglie da 22 impilate, 6 di stacco, 18 di fondo,
         piu' un dito di respiro. */
      padding-bottom:76px; }
    /* Col proprietario il gruppo sale (sotto c'e' «Centro AI»): serve piu' spazio riservato. */
    body.ss-owner .sidebar { padding-bottom:124px; }
    /* Barra ridotta a icone: le due pastiglie restano, ma strette. Lo spazio serve lo stesso. */
    .sidebar::-webkit-scrollbar { display:none; }
    .sidebar.collapsed { width:64px; }
    /* offset del contenuto quando la barra e' compressa a 64px (desktop >1100) */
    .app-layout.sb-collapsed .app-body { margin-left:64px; }
    .snav { display:flex; flex-direction:column; flex:1; padding:8px 0; }
    .snav-group { padding:0; }
    .snav-label { font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-4); padding:10px 16px 3px; white-space:nowrap; overflow:hidden; display:block; }
    .snav-item { display:flex; align-items:center; gap:11px; padding:9px 16px; cursor:pointer; font-size:13.5px; font-weight:500; color:rgba(255,255,255,.72); background:transparent; border:none; border-left:3px solid transparent; width:100%; text-align:left; transition:.13s; white-space:nowrap; font-family:inherit; overflow:hidden; }
    .snav-item:hover { background:rgba(255,255,255,.07); color:#fff; border-left-color:rgba(59,130,246,.30); }
    .snav-item.active { color:#93c5fd; background:rgba(59,130,246,.13); border-left-color:#3b82f6; font-weight:600; }
    .snav-item i { font-size:16px; flex-shrink:0; width:20px; text-align:center; }
    .snav-lbl { overflow:hidden; text-overflow:ellipsis; }
    .snav-sep { height:1px; background:rgba(255,255,255,.07); margin:5px 12px; }
    .snav-bottom { padding:6px 0; border-top:1px solid rgba(255,255,255,.07); margin-top:auto; flex-shrink:0; }
    .sidebar.collapsed .snav-lbl { display:none; }
    .sidebar.collapsed .snav-label { display:none; }
    .sidebar.collapsed .snav-item { padding:11px 0; justify-content:center; gap:0; }
    .sidebar.collapsed .snav-item:hover { border-left-color:transparent; }
    .sidebar.collapsed .snav-sep { margin:4px 8px; }

    /* ── COMMAND PALETTE ── */
    .cp-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:9990; backdrop-filter:blur(3px); }
    .cp-overlay.show { display:block; }
    .cp-modal { display:none; position:fixed; top:18%; left:50%; transform:translateX(-50%); width:600px; max-width:calc(100vw - 32px); background:#0f2042; border:1px solid rgba(99,179,237,.30); border-radius:14px; box-shadow:0 24px 80px rgba(0,0,0,.70),0 0 0 1px rgba(59,130,246,.12); z-index:9991; overflow:hidden; animation:cpFadeIn .13s ease; }
    .cp-modal.show { display:block; }
    @keyframes cpFadeIn { from { opacity:0; transform:translateX(-50%) translateY(-8px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
    .cp-search-bar { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid rgba(99,179,237,.15); }
    .cp-search-icon { color:var(--text-4); font-size:16px; flex-shrink:0; }
    .cp-input { flex:1; background:transparent; border:none; outline:none; font-size:16px; color:#f0f4ff; font-family:inherit; }
    .cp-input::placeholder { color:var(--text-4); }
    .cp-esc { font-size:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:4px; padding:2px 6px; color:var(--text-4); font-family:inherit; cursor:pointer; flex-shrink:0; }
    .cp-results { max-height:360px; overflow-y:auto; padding:6px; scrollbar-width:thin; scrollbar-color:rgba(59,130,246,.25) transparent; }
    .cp-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; cursor:pointer; transition:.1s; border:1px solid transparent; }
    .cp-item:hover, .cp-item.focused { background:rgba(59,130,246,.13); border-color:rgba(59,130,246,.25); }
    .cp-item i { font-size:16px; color:#60a5fa; flex-shrink:0; width:20px; text-align:center; }
    .cp-item-text { flex:1; }
    .cp-item-label { font-size:14px; font-weight:600; color:#f0f4ff; }
    .cp-item-sub { font-size:11px; color:var(--text-4); margin-top:1px; }
    .cp-empty { text-align:center; padding:32px 16px; color:rgba(255,255,255,.50); font-size:13px; }
    .cp-footer { display:flex; gap:16px; padding:8px 14px; border-top:1px solid rgba(99,179,237,.10); }
    .cp-footer span { font-size:11px; color:var(--text-4); display:flex; align-items:center; gap:4px; }
    .cp-footer kbd { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:3px; padding:1px 5px; font-size:10px; font-family:inherit; color:rgba(255,255,255,.50); }

    /* Body — scroll interno, la pagina esterna non scorre */
    .app-body { flex:1; min-width:0; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:24px 24px 80px; box-sizing:border-box; margin-left:220px; transition:margin-left .22s cubic-bezier(.4,0,.2,1); }
    .app-body::-webkit-scrollbar { width:6px; }
    .app-body::-webkit-scrollbar-track { background:rgba(255,255,255,.03); }
    .app-body::-webkit-scrollbar-thumb { background:rgba(59,130,246,.35); border-radius:3px; }

    /* Tabs */
    .cfg-tabs { display:flex; gap:2px; background:#0c1a2e; border:1px solid rgba(59,130,246,.20); border-radius:12px; padding:3px; margin-bottom:20px; overflow-x:auto; }
    .cfg-tab { flex-shrink:0; padding:10px 20px; border-radius:9px; border:none; background:transparent; font-size:15px; font-weight:600; color:rgba(255,255,255,.70); cursor:pointer; display:flex; align-items:center; gap:7px; transition:.2s; font-family:inherit; white-space:nowrap; }
    .cfg-tab:hover { background:rgba(59,130,246,.08); color:rgba(255,255,255,.90); }
    .cfg-tab.active { background:rgba(59,130,246,.15); color:#93c5fd; box-shadow:0 0 0 1px rgba(59,130,246,.35),0 0 12px rgba(59,130,246,.10); }
    .cfg-tab-ai { margin-left:auto; background:linear-gradient(135deg,#1d4ed8,#0e7490) !important; color:white !important; box-shadow:0 0 16px rgba(29,78,216,.35); }
    .cfg-tab-ai:hover { opacity:.9; }

    /* ── CARDS — SinergiaScuola signature ── */
    .ss-card { background:linear-gradient(145deg,#0d1e35 0%,#0a1628 55%,#08152a 100%); border-radius:14px; border:1px solid rgba(59,130,246,.22); border-top:2px solid rgba(59,130,246,.55); box-shadow:0 4px 28px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.03); overflow:clip; margin-bottom:20px; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
    .ss-card:hover { transform:translateY(-3px); border-color:rgba(59,130,246,.50); border-top-color:rgba(99,179,237,.90); box-shadow:0 12px 40px rgba(0,0,0,.65),0 0 30px rgba(59,130,246,.18),inset 0 1px 0 rgba(255,255,255,.05); }
    .ss-card-hd { padding:16px 20px; border-bottom:1px solid rgba(59,130,246,.14); display:flex; align-items:center; justify-content:space-between; background:linear-gradient(90deg,rgba(29,78,216,.10) 0%,rgba(8,145,178,.05) 60%,transparent 100%); }
    .ss-card-title { font-size:15px; font-weight:700; color:#ffffff; display:flex; align-items:center; gap:7px; letter-spacing:-.2px; }
    .ss-card-body { padding:22px; }
    .ss-card-ft { padding:14px 20px; background:rgba(59,130,246,.04); border-top:1px solid rgba(59,130,246,.12); display:flex; justify-content:flex-end; gap:8px; }

    /* ── CARD RICHIUDIBILE: <details class="ss-card"> + <summary class="ss-card-hd"> ──
       Il triangolino nativo di <summary> sparisce da solo quando l'intestazione e' un flex (ed e'
       il caso di .ss-card-hd), quindi la freccia va messa a mano: sta in fondo a destra e gira
       all'apertura, cosi' si capisce che il riquadro si apre. Con il pannello chiuso togliamo
       anche la riga sotto l'intestazione, che altrimenti sembra un bordo tagliato a meta'. */
    details.ss-card > summary { cursor:pointer; list-style:none; }
    details.ss-card > summary::-webkit-details-marker { display:none; }
    details.ss-card > summary::marker { content:""; }
    details.ss-card:not([open]) > summary { border-bottom:none; }
    .ss-det-chevron { transition:transform .2s ease; }
    details.ss-card[open] .ss-det-chevron { transform:rotate(180deg); }

    /* ── DIRIGENTE — Quadro di Comando ─────────────────────────── */
    .dir-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 20px; background:linear-gradient(135deg,#0f1a30,#16243f); border:1px solid rgba(59,130,246,.22); border-radius:14px; margin-bottom:16px; box-shadow:0 4px 24px rgba(0,0,0,.35); }
    .dir-topbar-title { font-size:16px; font-weight:800; color:#fff; letter-spacing:-.2px; display:flex; align-items:center; gap:11px; }
    /* CINQUE colonne, non quattro: i numeri della giornata sono cinque da quando c'e' "In
       attesa" (chi non ha ancora risposto - finche' non risponde, la classe e' scoperta).
       Con la griglia a 4 il quinto andava a capo da solo, e un numero che sta su una riga
       tutta sua sembra un errore di impaginazione, non un dato. */
    .dir-kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:16px; }
    @media (max-width:1250px){ .dir-kpis { grid-template-columns:repeat(3,1fr); } }
    .dir-kpi { display:flex; align-items:center; gap:14px; padding:15px 18px; border-radius:14px; border:1px solid rgba(255,255,255,.07); background:#0c1830; transition:transform .2s,border-color .2s; }
    .dir-kpi:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.16); }
    .dir-kpi-ico { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0; }
    .dir-kpi-num { font-size:32px; font-weight:900; line-height:1; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; background:linear-gradient(135deg,#e2e8f0 0%,#93c5fd 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .dir-kpi-lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:rgba(255,255,255,.55); }
    .dir-kpi-sub { font-size:10px; color:rgba(255,255,255,.50); margin-top:2px; }
    /* Categorie dirigente (livello 1) */
    #dir-cat-row { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
    .dir-cat-tab { display:inline-flex; align-items:center; gap:7px; padding:9px 20px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.09); color:rgba(255,255,255,.82); font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; transition:all .18s; flex-shrink:0; }
    .dir-cat-tab:hover { background:rgba(255,255,255,.16); color:#fff; border-color:rgba(59,130,246,.45); }
    .dir-cat-tab.active { background:linear-gradient(135deg,#1d4ed8,#0e7490); color:#fff; border-color:transparent; box-shadow:0 3px 18px rgba(29,78,216,.50); }
    .dir-cat-tab i { font-size:15px; }
    /* Sottotab dirigente (livello 2) */
    .dir-tabs { display:flex; gap:4px; overflow-x:auto; padding:5px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:12px; margin-bottom:16px; }
    .dir-tabs::-webkit-scrollbar { height:6px; }
    .dir-tabs::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:3px; }
    .dir-tab { flex-shrink:0; display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:9px; border:none; background:transparent; color:rgba(255,255,255,.62); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; transition:all .15s; }
    .dir-tab:hover { background:rgba(255,255,255,.08); color:#fff; }
    .dir-tab.active { background:rgba(29,78,216,.12); color:#1d4ed8; box-shadow:0 0 0 1px rgba(29,78,216,.35); }
    .dir-tab i { font-size:13px; }
    .dir-tab .dir-tab-badge { font-size:10px; font-weight:800; background:#ef4444; color:#fff; border-radius:10px; padding:0 6px; min-width:16px; text-align:center; }
    .dir-section { display:flex; flex-direction:column; gap:12px; animation:dirFade .25s ease; }
    @keyframes dirFade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }
    .dir-pane { background:#0a1628; border:1px solid rgba(59,130,246,.20); border-top:2px solid rgba(59,130,246,.45); border-radius:14px; padding:18px 20px; box-shadow:0 4px 28px rgba(0,0,0,.50); }
    .dir-pane-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.07); flex-wrap:wrap; }
    .dir-pane-title { font-size:15px; font-weight:800; color:#f0f4ff; display:flex; align-items:center; gap:9px; }
    .dir-pane-title i { font-size:17px; }
    .dir-pane-desc { font-size:11px; color:rgba(255,255,255,.55); margin-top:2px; font-weight:500; }
    @media (max-width:900px){ .dir-kpis { grid-template-columns:repeat(2,1fr); } }
    @media (max-width:600px){
      .dir-kpis { grid-template-columns:repeat(2,1fr); gap:8px; }
      .dir-kpi { padding:10px 12px; gap:10px; }
      .dir-kpi-ico { width:36px; height:36px; font-size:17px; }
      .dir-kpi-num { font-size:22px; }
      .dir-tab { padding:7px 10px; font-size:12px; gap:5px; }
      .dir-tab i { display:none; }
      .dir-pane { padding:12px 14px; }
      .dir-pane-hd { flex-direction:column; align-items:flex-start; gap:8px; }
      /* Filtri registro: input a larghezza piena su mobile */
      #panel-dir .dir-pane-hd .form-control-sm { width:100% !important; }
      /* Tabella Registro: trasforma in card impilate (come panel-gestione) */
      #panel-dir .ss-table { min-width:0; }
      #panel-dir .ss-table thead { display:none; }
      #panel-dir .ss-table tr { display:block; border:1px solid rgba(59,130,246,.18); border-radius:10px; margin-bottom:10px; padding:10px 12px; background:#0c1830; }
      #panel-dir .ss-table td { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:13px; }
      #panel-dir .ss-table td:last-child { border-bottom:none; }
      #panel-dir .ss-table td::before { content:attr(data-label); font-size:11px; font-weight:700; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.4px; margin-right:8px; flex-shrink:0; }
      #panel-dir .ss-table td:not([data-label])::before { content:none; }
      #panel-dir .ss-table td[colspan] { justify-content:center; }
      #panel-dir .ss-table td[colspan]::before { content:none; }
    }
    /* Category tabs: padding ridotto su schermi molto stretti */
    @media (max-width:400px){
      .dir-cat-tab { padding:7px 12px; font-size:13px; gap:5px; }
    }

    /* Buttons */
    .btn-ss { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:9px; border:none; font-size:14px; font-weight:600; cursor:pointer; transition:.2s; font-family:inherit; }
    .btn-ss:disabled { opacity:.35; cursor:not-allowed; }
    .btn-ss-primary { background:linear-gradient(135deg,#1d4ed8,#1e40af); color:white; box-shadow:0 0 16px rgba(29,78,216,.35),0 2px 6px rgba(0,0,0,.30); }
    .btn-ss-primary:hover:not(:disabled) { background:linear-gradient(135deg,#1d4ed8,#1e40af); /* scurisce (6.70): prima schiariva a 5.17, meno del riempimento */ transform:translateY(-1px); box-shadow:0 0 24px rgba(29,78,216,.50); }
    .btn-ss-success { background:linear-gradient(135deg,#065f46,#047857); color:white; box-shadow:0 0 16px rgba(5,150,105,.30); }
    .btn-ss-success:hover:not(:disabled) { background:linear-gradient(135deg,#10b981,#059669); transform:translateY(-1px); }
    .btn-ss-danger  { background:linear-gradient(135deg,#dc2626,#b91c1c); color:white; box-shadow:0 0 16px rgba(220,38,38,.30); }
    .btn-ss-danger:hover:not(:disabled)  { background:linear-gradient(135deg,#ef4444,#dc2626); transform:translateY(-1px); }
    .btn-ss-outline { background:rgba(255,255,255,.05); border:1px solid rgba(59,130,246,.30); color:#93c5fd; }
    .btn-ss-outline:hover:not(:disabled) { background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.60); color:#60a5fa; }
    .btn-ss-ai { background:linear-gradient(135deg,#1d4ed8,#0e7490); color:white; box-shadow:0 0 20px rgba(29,78,216,.40); }
    .btn-ss-ai:hover:not(:disabled) { box-shadow:0 0 30px rgba(29,78,216,.60); transform:translateY(-1px); }
    .btn-ss-sm { padding:6px 12px; font-size:13px; border-radius:7px; }
    .btn-ss-lg { padding:11px 22px; font-size:15px; }
    .btn-ss-full { width:100%; justify-content:center; }

    /* Form */
    .ss-label { display:block; font-size:13px; font-weight:700; color:rgba(255,255,255,.70); letter-spacing:.4px; text-transform:uppercase; margin-bottom:6px; }
    .form-control,.form-select,.form-control-sm { border-radius:8px !important; border-color:rgba(59,130,246,.30) !important; background:#0c1a2e !important; font-size:15px !important; font-family:'Inter',sans-serif !important; color:#f0f4ff !important; }
    .form-control::placeholder { color:var(--text-4) !important; }
    .form-control:focus,.form-select:focus { border-color:#3b82f6 !important; background:#0c1a2e !important; box-shadow:0 0 0 3px rgba(59,130,246,.20),0 0 16px rgba(59,130,246,.08) !important; color:#ffffff !important; }
    .form-select option { background:#0c1a2e; color:#e2e8f0; }
    .font-monospace { color:#60a5fa !important; }

    /* Table */
    .ss-table { width:100%; border-collapse:collapse; font-size:14px; }
    .ss-table th { padding:12px 16px; font-size:13px; font-weight:700; color:rgba(255,255,255,.65); letter-spacing:.4px; text-transform:uppercase; background:#0d1f35; border-bottom:1px solid rgba(59,130,246,.20); text-align:left; position:sticky; top:0; z-index:5; }
    .ss-table td { padding:14px 16px; border-bottom:1px solid rgba(59,130,246,.10); vertical-align:middle; color:#f0f4ff; font-size:15px; }
    .ss-table tr:last-child td { border-bottom:none; }
    .ss-table tbody tr:hover td { background:rgba(59,130,246,.07); }

    /* Badge */
    .ss-badge { display:inline-flex; align-items:center; gap:3px; padding:3px 9px; border-radius:5px; font-size:11px; font-weight:700; }
    .ss-badge-warn    { background:rgba(217,119,6,.15); color:#fbbf24; border:1px solid rgba(217,119,6,.30); }
    .ss-badge-danger  { background:rgba(220,38,38,.15); color:#f87171; border:1px solid rgba(220,38,38,.30); }
    .ss-badge-success { background:rgba(5,150,105,.15); color:#34d399; border:1px solid rgba(5,150,105,.30); }
    .ss-badge-info    { background:rgba(2,132,199,.15); color:#38bdf8; border:1px solid rgba(2,132,199,.30); }
    .ss-badge-brand   { background:rgba(29,78,216,.20); color:#93c5fd; border:1px solid rgba(29,78,216,.40); }

    /* Progress */
    .ss-progress { height:6px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; }
    .ss-progress-fill { height:100%; border-radius:99px; transition:width .7s cubic-bezier(.22,1,.36,1); }

    /* Score ring */
    .score-ring { width:84px; height:84px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:conic-gradient(var(--ring-color,#1d4ed8) var(--ring-pct,0%), rgba(255,255,255,.08) 0%); box-shadow:inset 0 0 0 10px #0a1628,0 0 20px rgba(29,78,216,.25); }
    .score-val { font-size:18px; font-weight:800; color:#ffffff; line-height:1; }
    .score-lbl { font-size:9px; font-weight:700; color:rgba(255,255,255,.50); letter-spacing:.5px; text-transform:uppercase; }

    /* Alert */
    .ss-alert { padding:12px 14px; border-radius:10px; display:flex; align-items:flex-start; gap:10px; font-size:13px; margin-bottom:16px; }
    .ss-alert-info    { background:rgba(2,132,199,.12); border:1px solid rgba(2,132,199,.30); color:#7dd3fc; }
    .ss-alert-ai      { background:rgba(29,78,216,.12); border:1px solid rgba(29,78,216,.30); color:#93c5fd; }
    .ss-alert-warn    { background:rgba(217,119,6,.12); border:1px solid rgba(217,119,6,.30); color:#fbbf24; }
    .ss-alert-success { background:rgba(5,150,105,.12); border:1px solid rgba(5,150,105,.30); color:#34d399; }

    /* Editor sticky */
    .sticky-col { position:sticky; left:0; background:#0a1628; z-index:5; }
    .clickable-cell:hover { background:rgba(59,130,246,.12) !important; cursor:pointer; outline:2px solid rgba(59,130,246,.50); outline-offset:-2px; }

    /* Day pills */
    .day-pill { padding:7px 16px; border-radius:8px; border:1px solid rgba(59,130,246,.25); background:rgba(255,255,255,.04); color:rgba(255,255,255,.75); font-size:13px; font-weight:700; cursor:pointer; transition:.2s; font-family:inherit; }
    .day-pill:hover { border-color:rgba(59,130,246,.55); color:#60a5fa; background:rgba(59,130,246,.08); }
    .day-pill.active { background:rgba(59,130,246,.18); border-color:#3b82f6; color:#93c5fd; box-shadow:0 0 12px rgba(59,130,246,.20); }

    /* Tag input */
    .tag-box { min-height:72px; padding:8px 10px; border:1px solid rgba(59,130,246,.25); border-radius:10px; background:#0c1a2e; display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; cursor:text; transition:.2s; }
    .tag-box:focus-within { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15),0 0 16px rgba(59,130,246,.08); }
    .tag-chip { display:inline-flex; align-items:center; gap:5px; background:rgba(29,78,216,.20); border:1px solid rgba(59,130,246,.35); color:#93c5fd; padding:4px 10px; border-radius:6px; font-size:12px; font-weight:600; white-space:nowrap; }
    .tag-chip-x { background:none; border:none; color:var(--text-4); cursor:pointer; font-size:14px; line-height:1; padding:0; transition:.1s; }
    .tag-chip-x:hover { color:#f87171; }
    .tag-input { border:none; outline:none; font-size:13px; font-family:inherit; flex:1; min-width:120px; background:transparent; padding:2px 4px; color:#e2e8f0; }
    .tag-input::placeholder { color:var(--text-4); }

    /* AI Chat */
    .chat-msg { display:flex; margin-bottom:6px; }
    .chat-msg.chat-user { justify-content:flex-end; }
    .chat-msg.chat-ai   { justify-content:flex-start; }
    .chat-bubble-user { background:linear-gradient(135deg,#1d4ed8,#0e7490); color:white; padding:10px 14px; border-radius:14px 14px 4px 14px; font-size:13px; max-width:75%; line-height:1.5; box-shadow:0 0 16px rgba(29,78,216,.35); }
    .chat-bubble-ai { background:#0c1a2e; border:1px solid rgba(59,130,246,.20); color:#e2e8f0; padding:10px 14px; border-radius:4px 14px 14px 14px; font-size:13px; max-width:85%; line-height:1.6; white-space:pre-wrap; }
    .chat-bubble-ai b { color:#93c5fd; }
    .chat-thinking { background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.20); color:rgba(255,255,255,.55); padding:10px 14px; border-radius:4px 14px 14px 14px; font-size:13px; font-style:italic; }
    .chat-quick-btn { text-align:left; background:rgba(255,255,255,.04); border:1px solid rgba(59,130,246,.20); border-radius:8px; padding:8px 10px; font-size:12px; color:rgba(255,255,255,.75); cursor:pointer; transition:.2s; font-family:inherit; width:100%; }
    .chat-quick-btn:hover { background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.40); color:#93c5fd; }
    /* Suggerimenti AI */
    .sugg-card { background:rgba(59,130,246,.07); border:1px solid rgba(59,130,246,.20); border-radius:12px; padding:12px 14px; display:flex; align-items:flex-start; gap:12px; transition:.2s; }
    .sugg-card:hover { background:rgba(59,130,246,.13); border-color:rgba(59,130,246,.38); }
    .sugg-cat { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:2px 8px; border-radius:20px; }
    .sugg-cat-orario      { background:rgba(99,102,241,.18); color:#a5b4fc; }
    .sugg-cat-sostituzioni{ background:rgba(249,115,22,.18);  color:#fb923c; }
    .sugg-cat-docenti     { background:rgba(34,197,94,.18);   color:#86efac; }
    .sugg-cat-ai          { background:rgba(139,92,246,.18);  color:#c4b5fd; }
    .sugg-cat-interfaccia { background:rgba(6,182,212,.18);   color:#67e8f9; }
    .sugg-cat-notifiche   { background:rgba(234,179,8,.18);   color:#fde047; }
    .sugg-cat-altro       { background:rgba(148,163,184,.18); color:#cbd5e1; }
    .sugg-stato { font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; }
    .sugg-stato-ricevuto    { background:rgba(59,130,246,.18); color:#93c5fd; }
    .sugg-stato-in_analisi  { background:rgba(234,179,8,.18);  color:#fde047; }
    .sugg-stato-implementato{ background:rgba(34,197,94,.18);  color:#86efac; }
    .sugg-stato-scartato    { background:rgba(239,68,68,.18);  color:#fca5a5; }
    .ai-stat-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid rgba(59,130,246,.10); font-size:12px; }
    .ai-stat-row:last-child { border-bottom:none; }
    .ai-stat-label { color:rgba(255,255,255,.55); }
    .ai-stat-val { font-weight:700; color:#ffffff; }

    /* Separatori */
    .section-sep { height:1px; background:rgba(59,130,246,.12); margin:20px 0; }

    /* Editor modale */
    #modalEd .table { --bs-table-bg:transparent; --bs-table-border-color:rgba(59,130,246,.15); color:#e2e8f0; }
    #modalEd .table thead { --bs-table-bg:#0d1f35; }
    #modalEd .bg-white { background:#0a1628 !important; }
    #modalEd .sticky-top { background:#0d1f35 !important; }

    /* Sync pill states */
    @keyframes spin { to { transform:rotate(360deg); } }
    .sync-syncing { background:rgba(29,78,216,.15) !important; border-color:rgba(29,78,216,.35) !important; color:#93c5fd !important; }
    .sync-ok      { background:rgba(16,185,129,.12) !important; border-color:rgba(16,185,129,.30) !important; color:#34d399 !important; }
    .sync-error   { background:rgba(220,38,38,.12) !important; border-color:rgba(220,38,38,.30) !important; color:#f87171 !important; }

    /* AI insight box */
    .ai-insight { background:rgba(59,130,246,.14); border:1px solid rgba(59,130,246,.28); border-radius:14px; padding:16px; display:flex; align-items:center; gap:12px; box-shadow:0 0 20px rgba(59,130,246,.08); }
    .ai-insight-icon { width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,#1d4ed8,#0e7490); display:flex; align-items:center; justify-content:center; color:white; font-size:16px; flex-shrink:0; box-shadow:0 0 16px rgba(29,78,216,.40); }
    /* AI vote buttons */
    .ai-vote-btn { background:none;border:none;cursor:pointer;font-size:13px;opacity:.5;padding:2px 4px;border-radius:4px;transition:opacity .15s; }
    .ai-vote-btn:hover { opacity:1; }

    /* Metric cards */
    .metric-card { background:#0a1628; border:1px solid rgba(59,130,246,.18); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:10px; transition:transform .25s ease,box-shadow .25s ease; }
    .metric-card:hover { transform:translateY(-3px); border-color:rgba(59,130,246,.40); box-shadow:0 8px 30px rgba(0,0,0,.40),0 0 20px rgba(59,130,246,.12); }
    .metric-label { font-size:11px; font-weight:700; color:rgba(255,255,255,.50); letter-spacing:.5px; text-transform:uppercase; }
    .metric-value { font-size:28px; font-weight:800; color:#ffffff; letter-spacing:-.5px; line-height:1; }
    .metric-sub { font-size:12px; color:rgba(255,255,255,.50); }

    /* ── WELCOME OVERLAY ── */
    @keyframes twinkle { 0% { opacity:var(--op,.6); transform:scale(1); } 100% { opacity:calc(var(--op,.6)*.3); transform:scale(.7); } }
    @keyframes sunPulse { 0% { opacity:.6; transform:translateX(-50%) scale(1); } 100% { opacity:.9; transform:translateX(-50%) scale(1.12); } }
    @keyframes floatUp  { 0% { transform:translateY(0); } 100% { transform:translateY(-8px); } }
    .nav-sub { display:block; font-size:11px; font-weight:500; color:rgba(255,255,255,.65); text-transform:none; letter-spacing:0; line-height:1.2; margin-top:3px; }
    .mnav-btn:hover .nav-sub, .mnav-btn.active .nav-sub { color:rgba(255,255,255,.90); }

    /* ── LAPTOP 1280px: sidebar collassa automaticamente ── */
    @media (max-width:1280px) {
      .hd-school { display:none; }
      .hd-sep { margin:0 4px; }
    }
    /* ── LAPTOP 1100px ── */
    @media (max-width:1100px) {
      .hd-user { display:none; }
      .btn-hd-logout .logout-lbl { display:none; }
      .btn-hd-logout .logout-icon { display:inline-block !important; }
      .btn-hd-logout { padding:7px 10px; }
      #foglio-group { display:none !important; }
      .sidebar:not(.sidebar-force-open) { width:64px; }
      .sidebar:not(.sidebar-force-open) .snav-lbl { display:none; }
      .sidebar:not(.sidebar-force-open) .snav-label { display:none; }
      .sidebar:not(.sidebar-force-open) .snav-item { padding:11px 0; justify-content:center; gap:0; }
      .sidebar:not(.sidebar-force-open) .snav-sep { margin:4px 8px; }
      .sidebar.sidebar-force-open { width:220px; box-shadow:4px 0 24px rgba(0,0,0,.45); z-index:201; }
      .sidebar.sidebar-force-open .snav-lbl { display:inline; }
      .sidebar.sidebar-force-open .snav-label { display:block; }
      .sidebar.sidebar-force-open .snav-item { padding:9px 16px; justify-content:flex-start; gap:11px; }
      .sidebar.sidebar-force-open .snav-sep { margin:5px 12px; }
      /* barra compatta 64px: il contenuto parte da 64. Il "force-open" (220px) e' un OVERLAY con
         ombra sopra il contenuto -> NON sposta il margine (resta 64). */
      .app-body { padding:16px 14px 40px; margin-left:64px; }
    }
    /* ── TABLET 900px ── */
    @media (max-width:900px) {
      .hd-anno { display:none; }
      .app-body { padding:12px 10px 40px; }
    }
    /* ── MOBILE 768px: sidebar a drawer ── */
    @media (max-width:768px) {
      .sidebar { position:fixed; top:calc(72px + var(--ss-topbar-offset, 0px)); left:0; height:calc(100vh - 72px - var(--ss-topbar-offset, 0px)); width:220px; transform:translateX(-100%); transition:transform .25s cubic-bezier(.4,0,.2,1); box-shadow:none; }
      .sidebar.mobile-open { transform:translateX(0); box-shadow:4px 0 32px rgba(0,0,0,.60); }
      /* Drawer mobile largo 220px: mostra SEMPRE le etichette (il blocco <=1100 le nasconde) */
      .sidebar .snav-lbl { display:inline; }
      .sidebar .snav-label { display:block; }
      .sidebar .snav-item { padding:9px 16px; justify-content:flex-start; gap:11px; }
      .sidebar.collapsed { width:220px; }
      .sidebar.collapsed .snav-lbl { display:inline; }
      .sidebar.collapsed .snav-label { display:block; }
      .sidebar.collapsed .snav-item { padding:9px 16px; justify-content:flex-start; gap:11px; }
      .sidebar.collapsed .snav-sep { margin:5px 12px; }
      .sidebar-mobile-overlay { display:none; position:fixed; inset:0; top:calc(60px + var(--ss-topbar-offset, 0px)); background:rgba(0,0,0,.50); z-index:199; }
      /* SUL TELEFONO LA BARRA RESTA 60px. Sul computer e 72 (logo e sfera a 56), ma li lo
         spazio verticale e prezioso e il logo e comunque 38px: 72px sarebbero 12 pixel rubati
         alla griglia oraria per niente. Il velo del menu qui sopra parte da 60: se la barra
         fosse 72 anche sul telefono, resterebbe una fessura scoperta. */
      .app-header { height:60px; }
      .sidebar { top:calc(60px + var(--ss-topbar-offset, 0px)) !important; height:calc(100vh - 60px - var(--ss-topbar-offset, 0px)) !important; }
      .sidebar-mobile-overlay.show { display:block; }
      /* sul telefono la barra e' un drawer che scivola SOPRA: il contenuto occupa tutta la larghezza */
      .app-body { padding:10px 8px 24px; margin-left:0; }
      .cp-modal { top:10%; }
    }

    /* ════════════════════════════════════════════════════════════
       MOBILE — Assenze & Sostituzioni semplici da telefono
       Le tabelle larghe diventano schede impilate (data-label).
    ════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* Form nuova richiesta: campi data impilati e comodi */
      #panel-gestione .row.g-2 > .col { flex: 0 0 100%; max-width: 100%; }
      #panel-gestione .form-control,
      #panel-gestione .form-select { font-size: 16px; min-height: 46px; } /* 16px = niente zoom iOS */
      #panel-gestione .ss-card-hd { flex-wrap: wrap; gap: 8px; }
      #panel-gestione .ss-card-hd .btn-ss { width: 100%; justify-content: center; }
      #panel-gestione .ss-card-hd .ss-card-title { width: 100%; }

      /* Tabelle → schede impilate (etichetta sopra, valore sotto) */
      #panel-gestione .ss-table { min-width: 0; }
      #panel-gestione .ss-table thead { display: none; }
      #panel-gestione .ss-table tr {
        display: block; margin-bottom: 10px; padding: 6px 4px;
        border: 1px solid var(--border); border-radius: 12px;
        background: var(--surface-2);
      }
      #panel-gestione .ss-table td {
        display: block; padding: 6px 12px; border: none; text-align: left;
      }
      #panel-gestione .ss-table td::before {
        content: attr(data-label);
        display: block; margin-bottom: 2px;
        font-size: 10px; font-weight: 800; text-transform: uppercase;
        letter-spacing: .5px; color: var(--text-3);
      }
      /* Celle senza etichetta (azioni/checkbox) e righe vuote */
      #panel-gestione .ss-table td:not([data-label])::before { content: none; }
      #panel-gestione .ss-table td[colspan] { text-align: center; }
      #panel-gestione .ss-table td[colspan]::before { content: none; }

      /* Pulsanti d'azione grandi e pieni */
      #panel-gestione .btn-ss-lg { min-height: 50px; font-size: 15px; }

      /* Supplenza lunga + sostituzione manuale: form responsive */
      #card-supplenza-lunga .form-control,
      #card-supplenza-lunga .form-select,
      #card-sog-manuale .form-control,
      #card-sog-manuale .form-select { font-size: 16px; min-height: 46px; }
      #card-supplenza-lunga .ss-card-body,
      #card-sog-manuale .ss-card-body { padding: 14px !important; }
      /* slot sostituzione manuale: select pieno su mobile */
      #sog-slots-container .sog-slot-row { padding: 8px 0; }
      #sog-slots-container .sog-slot-row:active { background: rgba(255,255,255,.04); border-radius: 8px; }
      #sog-slots-container .sog-sostituto-slot { width: 100%; min-height: 46px; font-size: 16px; }
    }

    /* ════════════════════════════════════════════════════════════════
       PREMIUM REFINEMENT — 26 giu 2026 ("il massimo", palette approvata)
       Restyle COMPLETO verso il look premium "calmo": superfici piatte,
       bordi sottili uniformi, ombre morbide, blu var(--accent), niente bagliori.
       SOLO CSS — NON tocca DOM/JS. REVERSIBILE: rimuovere questo blocco.
       Token: bg=var(--bg) elev=var(--surface) card=var(--surface-2) box=var(--surface-3) primary=var(--accent)
       ════════════════════════════════════════════════════════════════ */

    /* — superfici base — */
    body { background:linear-gradient(170deg,var(--bg) 0%,var(--bg-2) 50%,#10182b 100%) fixed; }
    .admin-tech-bg .tg-grid { opacity:.42; }
    .app-body::-webkit-scrollbar-thumb { background:rgba(59,130,246,.30); }

    /* — header: barra colore landing (#0a1228) — */
    .app-header { background:#0a1228; border-bottom:1px solid rgba(125,211,252,.20);
      box-shadow:0 1px 0 rgba(255,255,255,.03),0 4px 18px rgba(0,0,0,.30); }

    /* — sidebar: colore landing (#0a1228) — */
    .sidebar { background:#0a1228; border-right:1px solid rgba(125,211,252,.14); }
    .snav-item:hover { background:rgba(255,255,255,.05); border-left-color:rgba(59,130,246,.30); }
    .snav-item.active { color:#93c5fd; background:rgba(59,130,246,.15); border-left-color:var(--accent); }

    /* — tab principali — */
    .cfg-tabs { background:var(--surface); border:1px solid rgba(255,255,255,.07); border-radius:14px; }
    .cfg-tab.active { background:rgba(59,130,246,.16); color:#93c5fd; box-shadow:none; }
    .cfg-tab-ai { background:linear-gradient(135deg,var(--accent-fill),#1d4ed8) !important;  /* bianco sopra: 5.17 nel punto piu chiaro (era 3.68) */ box-shadow:0 4px 14px rgba(37,99,235,.35) !important; margin-left:0 !important; }

    /* — CARD: piatta, bordo sottile uniforme, ombra morbida, hover senza glow — */
    .ss-card { background:var(--surface-2); border:1px solid rgba(255,255,255,.07); border-top:1px solid rgba(255,255,255,.07);
      border-radius:16px; box-shadow:0 4px 16px rgba(0,0,0,.30); }
    .ss-card:hover { transform:none; border-color:rgba(59,130,246,.32); border-top-color:rgba(59,130,246,.32);
      box-shadow:0 8px 26px rgba(0,0,0,.42); }
    .ss-card-hd  { border-bottom:1px solid rgba(255,255,255,.06); }
    .ss-card-ft  { background:rgba(255,255,255,.02); border-top:1px solid rgba(255,255,255,.06); }
    .ss-card-title { color:#fff; }

    /* — DIRIGENTE: topbar, kpi, categorie, sottotab, pane — */
    .dir-topbar { background:var(--surface-2); border:1px solid rgba(255,255,255,.07); border-radius:16px; box-shadow:0 4px 16px rgba(0,0,0,.30); }
    .dir-kpi     { background:var(--surface-2); border:1px solid rgba(255,255,255,.07); border-radius:14px; box-shadow:0 4px 14px rgba(0,0,0,.25); }
    .dir-kpi:hover { transform:none; border-color:rgba(59,130,246,.28); }
    .dir-kpi-num { background:none; -webkit-text-fill-color:#fff; color:#fff; letter-spacing:-1px; }
    .dir-cat-tab { background:var(--surface-3); border:1px solid rgba(255,255,255,.08); }
    .dir-cat-tab.active { background:linear-gradient(135deg,var(--accent-fill),#1d4ed8);  /* 5.17, era 3.68 */ border-color:transparent; box-shadow:0 4px 16px rgba(37,99,235,.40); }
    .dir-tabs { background:var(--surface); border:1px solid rgba(255,255,255,.07); }
    .dir-tab.active { background:rgba(59,130,246,.16); color:#ffffff; box-shadow:none; }
    .dir-pane { background:var(--surface-2); border:1px solid rgba(255,255,255,.07); border-top:1px solid rgba(255,255,255,.07);
      border-radius:16px; box-shadow:0 4px 16px rgba(0,0,0,.30); }

    /* — BOTTONI: stesso blu, ombre morbide (niente glow) — */
    .btn-ss-primary { background:linear-gradient(135deg,var(--accent-fill),#1d4ed8);  /* 5.17, era 3.68 */ box-shadow:0 4px 14px rgba(37,99,235,.35); }
    .btn-ss-primary:hover:not(:disabled) { background:linear-gradient(135deg,#1d4ed8,#1e40af);  /* 6.70: scurisce, prima SCHIARIVA a 2.54 */ box-shadow:0 6px 20px rgba(37,99,235,.45); }
    .btn-ss-success { box-shadow:0 4px 14px rgba(16,185,129,.28); }
    .btn-ss-danger  { box-shadow:0 4px 14px rgba(239,68,68,.28); }
    .btn-ss-ai { background:linear-gradient(135deg,var(--accent-fill),#0e7490);  /* 5.17, era 3.68 */ box-shadow:0 4px 16px rgba(59,130,246,.40); }
    .btn-ss-ai:hover:not(:disabled) { box-shadow:0 6px 22px rgba(59,130,246,.55); transform:translateY(-1px); }
    .btn-ss-outline { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14); color:#93c5fd; }

    /* — FORM: input su superficie elevata, bordo visibile — */
    .form-control,.form-select,.form-control-sm { background:var(--surface-2) !important; border-color:rgba(255,255,255,.22) !important; border-radius:10px !important; color:#f0f4ff !important; }
    .form-control:focus,.form-select:focus { border-color:var(--accent) !important; background:var(--surface-2) !important; box-shadow:0 0 0 3px rgba(59,130,246,.22) !important; }
    .form-select option { background:var(--surface-2); color:#f0f4ff; }
    input[type="date"],input[type="time"],input[type="datetime-local"] { -webkit-appearance:none; appearance:none; background:var(--surface-2) !important; color:#f0f4ff !important; }

    /* — TABELLE — */
    .ss-table th { background:var(--surface); border-bottom:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.62); }
    .ss-table td { border-bottom:1px solid rgba(255,255,255,.06); }
    .ss-table tbody tr:hover td { background:rgba(59,130,246,.06); }

    /* — BADGE: pillole più morbide — */
    .ss-badge { border-radius:20px; padding:4px 11px; }

    /* — BARRE DI AVANZAMENTO — */
    .ss-progress { background:var(--surface-3); }
    .ss-progress-fill { background:linear-gradient(90deg,var(--accent),var(--accent-2)); }

    /* — COMMAND PALETTE — */
    .cp-modal { background:var(--surface); border:1px solid rgba(255,255,255,.10); }
    .cp-search-bar { border-bottom:1px solid rgba(255,255,255,.07); }
    .cp-item:hover, .cp-item.focused { background:rgba(59,130,246,.14); border-color:rgba(59,130,246,.25); }

    /* — MODALI bootstrap — */
    .modal-content { background:var(--surface-2) !important; border:1px solid rgba(255,255,255,.10) !important; }
    .dropdown-menu { background:var(--surface); border:1px solid rgba(255,255,255,.10); }
    .list-group-item { background:var(--surface-2); border-color:rgba(255,255,255,.07); }

    /* — MICRO-RIFINITURE (font-smoothing, focus accessibile, scrollbar, feedback) — */
    body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
    .ss-card-title, .dir-pane-title, .dir-topbar-title { letter-spacing:-.3px; }
    /* focus da tastiera: regola globale :focus-visible in styles.css */
    /* feedback al click */
    .btn-ss:active:not(:disabled) { transform:translateY(1px); }
    /* scrollbar coerente in tutta la pagina */
    * { scrollbar-width:thin; scrollbar-color:rgba(59,130,246,.30) transparent; }
    ::-webkit-scrollbar { width:8px; height:8px; }
    ::-webkit-scrollbar-thumb { background:rgba(59,130,246,.30); border-radius:6px; }
    ::-webkit-scrollbar-thumb:hover { background:rgba(59,130,246,.45); }
    ::-webkit-scrollbar-track { background:transparent; }
    /* righe tabella con transizione morbida */
    .ss-table tbody tr td { transition:background .12s ease; }

    /* — SOSTITUZIONE MANUALE — */
    #sog-slots-container .sog-slot-row { border-top:1px solid rgba(255,255,255,.09); padding-top:12px; margin-top:4px; }
    #sog-slots-container .sog-slot-row:first-child { border-top:none; margin-top:0; }
    #sog-slots-container .sog-sost-info { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:6px; }
    #sog-slots-container .sog-sostituto-slot { max-width:280px; }

    /* ===================================================================
       MOBILE IMPROVEMENTS -- 27 giu 2026
       Obiettivo: dashboard usabile su telefono anche per il dirigente
       che vuole controllare le sostituzioni fuori ufficio.
       =================================================================== */

    /* Touch: niente hover-lift (evita spostamenti involontari col dito) */
    @media (hover: none) {
      .ss-card:hover  { transform:none !important; box-shadow:0 4px 16px rgba(0,0,0,.30) !important; border-color:rgba(255,255,255,.07) !important; }
      .dir-kpi:hover  { transform:none !important; }
      .btn-ss-primary:hover:not(:disabled) { transform:none !important; }
      .btn-ss-ai:hover:not(:disabled)      { transform:none !important; }
    }

    @media (max-width: 768px) {
      /* Card header: titolo + bottone si impilano se non c'e' spazio */
      .ss-card-hd { flex-wrap:wrap; gap:8px; }

      /* Griglia plesso/classe: select senza min-width fisso */
      #panel-griglia .form-select { min-width:0 !important; width:100%; }
      /* Griglia: forzare scroll orizzontale sul contenuto */
      #griglia-wrap  { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }

      /* Candidati sostituti: bottoni in testa alla card vanno su due righe */
      #box-candidati .ss-card-hd > div { flex-wrap:wrap; }
      #box-candidati .ss-card-hd .btn-ss { flex:1 1 120px; justify-content:center; }

      /* Abbonamento badge: nasconde contatore docenti, mostra solo piano */
      #abb-badge-docenti { display:none !important; }
      #abbonamento-badge { font-size:9px; padding:2px 7px; gap:3px; }

      /* Modali Bootstrap: margini piu' stretti */
      .modal-dialog { margin:8px !important; }

      /* AI assistant: non copre la sidebar toggle */
      #ai-assistant { right:12px; bottom:60px; }

      /* Pastiglia "Centro AI" (la vede solo il proprietario della piattaforma): nasce da
         app-core.js con bottom:18px scritto NELLO STILE dell'elemento, quindi sul telefono
         si sedeva sopra la barra di navigazione e copriva OGGI e SOSTITUZIONI. Uno stile
         scritto sull'elemento vince su qualunque foglio: qui serve !important. */
      #link-centro-ai { bottom:calc(68px + env(safe-area-inset-bottom, 0px)) !important; }

    }

    @media (max-width: 480px) {
      /* Card header: bottoni a larghezza piena */
      .ss-card-hd .ss-card-title { flex:1 0 100%; }
      .ss-card-hd .btn-ss:not(.btn-ss-sm) { width:100%; justify-content:center; }
      .ss-card-hd { padding:10px 12px; }

      /* Input/select: 16px previene lo zoom automatico su iOS */
      .form-control, .form-select, input[type="text"], input[type="date"],
      input[type="time"], input[type="number"], textarea { font-size:16px !important; }

      /* Cfg tabs: piu' compatte */
      .cfg-tabs { gap:1px; padding:2px; border-radius:10px; }
      .cfg-tab   { font-size:11px; padding:7px 8px; gap:4px; }
      .cfg-tab i { font-size:13px; }

      /* Griglia filtri: bottoni PDF a piena larghezza.
         `flex:1` vuol dire base ZERO piu' crescita: i cinque bottoni si dividevano in parti
         uguali l'unica riga disponibile, 62 pixel l'uno, e restavano monconi con scritto
         "PDF" e il resto a capo su tre righe. La larghezza piena si ottiene dalla BASE, non
         dalla crescita: 46% = due per riga, e l'ultimo si prende la riga tutta per se'. */
      #panel-griglia .ss-card-body > div:last-child { width:100%; }
      #panel-griglia .ss-card-body .btn-ss { flex:1 1 46%; justify-content:center; min-width:0; }

      /* Panel struttura tabelle JS: gia' hanno overflow-x:auto ma puo' mancare su alcune versioni */
      #panel-config .ss-table,
      #panel-configurazione .ss-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    }

    /* ────────────────────────────────────────────────────────────────
       BOTTOM NAVIGATION BAR — mobile only (<=768px)
       Sostituisce il pattern hamburger+drawer con 1 tap diretto.
       5 sezioni: Sostituzioni / Istituto / Griglia / Dirigente / Config
       ──────────────────────────────────────────────────────────────── */
    .mobile-bottom-nav { display:none; }

    @media (max-width:768px) {
      .mobile-bottom-nav {
        display:flex;
        position:fixed; bottom:0; left:0; right:0;
        height:56px;
        background:var(--surface);
        border-top:1px solid rgba(255,255,255,.10);
        z-index:250;
        box-shadow:0 -4px 20px rgba(0,0,0,.40);
        /* safe area iPhone (notch/home indicator) */
        padding-bottom:env(safe-area-inset-bottom, 0px);
      }
      .mbn-item {
        flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap:3px; min-height:56px;
        background:transparent; border:none; cursor:pointer;
        color:var(--text-4); font-size:9px; font-weight:700;
        font-family:inherit; letter-spacing:.3px; text-transform:uppercase;
        transition:color .15s;
        padding:4px 2px;
        -webkit-tap-highlight-color:transparent;
      }
      .mbn-item i { font-size:22px; line-height:1; }
      .mbn-item.active { color:#93c5fd; }
      .mbn-item.active i { filter:drop-shadow(0 0 5px rgba(59,130,246,.55)); }
      /* Feedback tap: leggero flash */
      .mbn-item:active { color:#ffffff; background:rgba(59,130,246,.10); }

      /* Spazio extra in fondo per non nascondere contenuto sotto la nav bar */
      .app-body { padding-bottom:72px !important; }
      footer#ss-global-footer { padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)) !important; }

      /* Sync pill sopra la bottom nav (era display:none).
         right:70px come sul desktop: anche qui il pulsante tondo dell'AI stava nello stesso
         angolo e copriva meta' badge. */
      #foglio-group {
        display:flex !important;
        bottom:62px !important;
        right:70px !important;
      }
      /* Sul telefono lo spazio e' poco: resta l'icona del foglio, senza la parola - ma in un
         tondo da 44px, che e' la misura sotto la quale il dito non prende. */
      #sync-pill { font-size:9px !important; padding:2px 7px !important; }
      #btn-apri-foglio span { display:none; }
      #btn-apri-foglio {
        min-width:44px; min-height:44px; padding:0 !important; border-radius:999px !important;
        justify-content:center; font-size:17px !important;
      }

      /* Input 16px su TUTTI i device <=768px: previene lo zoom automatico iOS
         (su iPhone qualsiasi input < 16px triggera un zoom page) */
      .form-control, .form-select, .form-control-sm,
      input[type="text"], input[type="date"], input[type="time"],
      input[type="number"], input[type="email"], input[type="tel"],
      textarea { font-size:16px !important; }

      /* Touch targets nei snav-item del drawer: almeno 44px */
      .snav-item { min-height:46px; }
      .snav-bottom .snav-item { min-height:46px; }

      /* Tabelle nei pannelli struttura: scroll orizzontale */
      #panel-config .ss-table    { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
      #panel-dir    .ss-table    { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }

      /* Pulsanti card-header: almeno 44px di altezza per tap comodo */
      .ss-card-hd .btn-ss { min-height:44px; }

      /* Footer mobile: testo compatto */
      footer#ss-global-footer { font-size:11px; }
    }

    @media (max-width:480px) {
      /* Guida + Esci: solo icona su schermi molto stretti */
      .btn-hd-logout .logout-lbl  { display:none; }
      .btn-hd-logout .logout-icon { display:inline-block !important; }
      .btn-hd-logout { padding:7px 10px; }
    }

    /* ────────────────────────────────────────────────────────────────
       UI POLISH — 27 giu 2026
       Fix: slot checkboxes dark theme, candidati table mobile,
       empty state icons, motivi badge readability.
       ────────────────────────────────────────────────────────────── */

    /* Slot ore checkboxes — Bootstrap btn-outline su sfondo scuro */
    #slot-checkboxes .btn-outline-secondary {
      background:rgba(255,255,255,.04) !important;
      border-color:rgba(255,255,255,.22) !important;
      color:rgba(255,255,255,.75) !important;
    }
    #slot-checkboxes .btn-outline-secondary:hover {
      background:rgba(255,255,255,.10) !important;
      border-color:var(--text-4) !important;
      color:#f0f4ff !important;
    }
    #slot-checkboxes .btn-outline-primary {
      background:rgba(59,130,246,.12) !important;
      border-color:rgba(59,130,246,.50) !important;
      color:#93c5fd !important;
    }
    #slot-checkboxes .btn-outline-primary:hover {
      background:rgba(59,130,246,.22) !important;
      color:#bfdbfe !important;
    }

    /* Candidati: mobile — mostra solo colonne essenziali (checkbox, docente, materie, score) */
    @media (max-width:768px) {
      #tb-candidati th:nth-child(3),
      #tb-candidati td:nth-child(3),
      #tb-candidati th:nth-child(6),
      #tb-candidati td:nth-child(6),
      #tb-candidati th:nth-child(7),
      #tb-candidati td:nth-child(7) { display:none; }
      /* Slot ore: touch target piu' ampio */
      #slot-checkboxes .btn { min-height:40px; padding:8px 12px !important; }
    }

    /* Empty state nelle tabelle: icona leggermente piu' visibile */
    .ss-table td[colspan] { color:var(--text-4) !important; }
    .ss-table td[colspan] i { opacity:.50 !important; }

    /* ────────────────────────────────────────────────────────────────
       TYPOGRAPHY & DENSITY — 27 giu 2026
       1. Font 14px: piu' denso e professionale (era 15px)
       2. Bootstrap color utilities allineate al design system dark
       3. Tabelle: padding ridotto, font-size coerente
       4. Card body desktop: 22px -> 18px (piu' compatto)
       5. avviso-recupero: box invece di testo inline
       ──────────────────────────────────────────────────────────────── */

    /* 1. Font base */
    body { font-size:14px; }

    /* 2. Bootstrap color utilities -> design system */
    .text-primary { color:#60a5fa !important; }
    .text-success { color:#34d399 !important; }
    .text-warning { color:#fbbf24 !important; }
    .text-danger  { color:#f87171 !important; }
    .text-info    { color:#38bdf8 !important; }

    /* 3. Tabelle: densita' + coerenza font */
    .ss-table td { padding:10px 14px; font-size:14px; }
    .ss-table th { padding:9px 14px; }

    /* 4. Card body desktop: padding piu' compatto */
    @media (min-width:769px) {
      .ss-card-body { padding:18px 20px; }
    }

    /* 5. Avviso recupero permessi: box coerente invece di testo inline */
    #avviso-recupero {
      padding:8px 12px !important;
      background:rgba(245,158,11,.07) !important;
      border:1px solid rgba(245,158,11,.22) !important;
      border-radius:8px !important;
      font-size:12px !important;
      color:#fcd34d !important;
      line-height:1.5 !important;
    }

/* ── Lista candidati sostituzioni: su smartphone diventa una lista di SCHEDE ──
   (usa i data-label delle <td>; etichetta sopra il valore → niente scroll orizzontale) */
@media (max-width: 640px) {
  #tb-candidati thead { display: none; }
  #tb-candidati, #tb-candidati tbody, #tb-candidati tr, #tb-candidati td { display: block; width: 100%; }
  #tb-candidati tr { position: relative; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; margin-bottom: 10px; padding: 10px 12px 12px; background: rgba(255,255,255,.025); }
  #tb-candidati td { border: none !important; padding: 7px 2px 0; }
  #tb-candidati td::before { content: attr(data-label); display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color:var(--text-4); font-weight: 700; margin-bottom: 4px; }
  #tb-candidati td[data-label='Docente']::before, #tb-candidati td[data-label='Seleziona']::before { display: none; }
  #tb-candidati td[data-label='Docente'] { padding: 2px 36px 4px 0; }
  #tb-candidati td[data-label='Seleziona'] { position: absolute; top: 10px; right: 12px; width: auto; padding: 0; }
}

/* ── Plessi & Classi: su smartphone ogni riga-plesso diventa una SCHEDA ──
   Così i pulsanti Modifica/Elimina (3ª colonna) restano sempre visibili,
   senza scroll orizzontale. Le righe-intestazione di gruppo (tipo scuola) restano. */
@media (max-width: 640px) {
  table:has(> tbody#tb-plessi) thead { display: none; }
  #tb-plessi, #tb-plessi tbody, #tb-plessi tr, #tb-plessi td { display: block; width: 100%; }
  #tb-plessi tr { border: 1px solid rgba(255,255,255,.12); border-radius: 12px; margin-bottom: 10px; padding: 8px 10px; background: rgba(255,255,255,.03); }
  /* riga-intestazione gruppo tipo scuola (un solo td in colspan): niente bordo-scheda */
  #tb-plessi tr:has(> td[colspan]) { border: none; background: none; margin: 12px 0 2px; padding: 0; }
  #tb-plessi td { border: none !important; padding: 6px 2px; }
  /* la colonna azioni (ultima) ha text-align:right inline → a sinistra su mobile, ben visibile */
  #tb-plessi td:last-child { text-align: left !important; padding-top: 8px; }
}

/* ── Parametri Orario: card-classe a piena larghezza su smartphone ── */
@media (max-width: 640px) {
  #params-classi-container [style*="flex:1;min-width:180px"] {
    min-width: 100% !important;
    max-width: 100% !important;
  }
  /* fasce orario: time-select wrap su schermi piccoli */
  #orecfg-matrix [style*="display:flex;align-items:center;gap:4px;flex-shrink:0"] {
    flex-wrap: wrap;
    gap: 3px !important;
  }
}

.plesso-row:hover { background: rgba(255,255,255,.025) !important; }