/* ============================================================
   OPENDESK24 — DESIGN TOKENS (feat/design-tokens)
   ----------------------------------------------------------------
   Fonte di verità unica per la nuova palette neutra + accento teal.
   Caricato PER PRIMO da base.html così tutti i CSS successivi
   (style.css, ui-tokens.css, ui-components.css, ui-premium.css, …)
   ereditano questi valori e possono solo restringere il loro scope.

   ── REGOLE FORTI (decisione finale Domenico) ──
   • Base neutra chiara stile settore; dark quasi-nero neutro.
   • Accent teal (#0E7490) per brand+link; sidebar fissa fuori dai temi.
   • Semantica colori INVARIATA: verde=positivo, rosso=negativo,
     ambra=parziale/priorità.
   • INTOCCABILI in questa PR:
        – calendari (.occupancy-calendar, .scadenze-calendar-card,
          .cal-light-scope, .calendar-grid, .gantt-table,
          .mob-gantt-table, .checkout-table, .cal-card)
        – mobile completo (body.mob-body resta col suo --mob-*)
   • NIENTE rimozione del CSS legacy in questa PR — pulizia in PR
     separata. Dove ui-premium.css o style.css vincono in specificità
     si modifica alla fonte, NON qui.
   ============================================================ */


/* ============================================================
   1) TOKEN CORE — Light  (default :root su tema chiaro o assente)
   ────────────────────────────────────────────────────────────
   Scope: tutto desktop (esclude body.mob-body).
   ============================================================ */

html[data-theme="light"] body:not(.mob-body),
html:not([data-theme="dark"]) body:not(.mob-body) {
  --bg:           #FAFAFA;
  --surface:      #FFFFFF;
  --surface-2:    #F9FAFB;
  --text:         #18181B;
  --text-2:       #52525B;
  --text-muted:   #A1A1AA;
  --border:       #E5E7EB;

  --accent:       #0E7490;
  --accent-hover: #0C6379;
  --link:         #0E7490;

  --success-bg:   #DCFCE7;
  --success-fg:   #166534;
  --warn-bg:      #FEF3C7;
  --warn-fg:      #92400E;
  --danger-bg:    #FEE2E2;
  --danger-fg:    #991B1B;
  --danger-solid: #DC2626;

  --row-hover:    #F3F4F6;

  /* Chat messaggistica (PR-M1): bolle theme-aware, niente hex grezzi nel template */
  --msg-bubble-ospite:         #F1F3F6;
  --msg-bubble-ospite-text:    #18181B;
  --msg-bubble-struttura:      #E7F1FF;
  --msg-bubble-struttura-text: #0C4A6E;

  /* Toggle (off/on) */
  --toggle-off-bg:   #D4D4D8;
  --toggle-off-knob: #FFFFFF;
  --toggle-on-bg:    var(--accent);
  --toggle-on-knob:  #FFFFFF;

  /* Focus ring (accessibility — visibile sempre, mai disabilitato) */
  --focus-ring:      0 0 0 3px rgba(14,116,144,0.30);

  color-scheme: light;
}


/* ============================================================
   2) TOKEN CORE — Dark  ([data-theme="dark"])
   ============================================================ */

html[data-theme="dark"] body:not(.mob-body) {
  --bg:           #101113;
  --surface:      #1A1B1E;
  --surface-2:    #1E1F23;
  --text:         #F4F4F5;
  --text-2:       #A1A1AA;
  --text-muted:   #6B7280;
  --border:       #2E2F33;

  --accent:       #0E7490;        /* stesso teal: contrasto OK su bg scuro */
  --accent-hover: #0C6379;
  --link:         #22D3EE;

  --success-bg:   #14532D;
  --success-fg:   #86EFAC;
  --warn-bg:      #78350F;
  --warn-fg:      #FCD34D;
  --danger-bg:    #7F1D1D;
  --danger-fg:    #FCA5A5;
  --danger-solid: #B91C1C;

  --row-hover:    #232428;

  /* Chat messaggistica (PR-M1): bolle dark con testo leggibile (contrasto AA) */
  --msg-bubble-ospite:         #2A2B2F;
  --msg-bubble-ospite-text:    #F4F4F5;
  --msg-bubble-struttura:      #103D52;
  --msg-bubble-struttura-text: #CDEBFA;

  --toggle-off-bg:   #3F3F46;
  --toggle-off-knob: #18181B;
  --toggle-on-bg:    var(--accent);
  --toggle-on-knob:  #FFFFFF;

  --focus-ring:      0 0 0 3px rgba(14,116,144,0.45);

  color-scheme: dark;
}


/* ============================================================
   3) SIDEBAR  (FISSA — fuori dai temi)
   ────────────────────────────────────────────────────────────
   Identica in light e dark. Lo scope è la sidebar fisica della UI.
   Mantiene compatibilità con i selettori esistenti (.sidebar,
   .desktop-sidebar, ecc.). I valori sotto sono i token ufficiali —
   le regole component-level (sotto §5) li applicano.
   ============================================================ */

body:not(.mob-body) {
  --sidebar-bg:             #16171A;
  --sidebar-item:           #9CA0A6;
  --sidebar-active:         #FFFFFF;
  --sidebar-active-accent:  #06B6D4;
  --sidebar-hover:          #1F2023;
}


/* ============================================================
   4) BOOTSTRAP MAP  (token → CSS variables di Bootstrap)
   ────────────────────────────────────────────────────────────
   Solo le variabili che il framework legge a runtime; non
   riscriviamo qui le regole .btn/.alert/.modal — quelle stanno
   sotto §5 e in ui-tokens.css legacy.
   ============================================================ */

html[data-theme="light"] body:not(.mob-body),
html:not([data-theme="dark"]) body:not(.mob-body) {
  --bs-body-bg:           var(--bg);
  --bs-body-color:        var(--text);
  --bs-border-color:      var(--border);
  --bs-secondary-bg:      var(--surface-2);
  --bs-tertiary-bg:       var(--surface-2);
  --bs-link-color:        var(--link);
  --bs-link-hover-color:  var(--accent-hover);
}

html[data-theme="dark"] body:not(.mob-body) {
  --bs-body-bg:           var(--bg);
  --bs-body-color:        var(--text);
  --bs-border-color:      var(--border);
  --bs-secondary-bg:      var(--surface-2);
  --bs-tertiary-bg:       var(--surface-2);
  --bs-link-color:        var(--link);
  --bs-link-hover-color:  #67E8F9;
}


/* ============================================================
   5) APPLICAZIONE COMPONENTI
   ────────────────────────────────────────────────────────────
   Selettori sotto sono scoped a `body:not(.mob-body)` per non
   toccare mai mobile. Le esclusioni `:not()` per i calendari
   (e mobile) vivono qui in modo esplicito. Dove serve battere
   ui-premium.css uso `!important` con motivazione esplicita.
   ============================================================ */


/* ── 5.0 Page background + corpo ─────────────────────────── */
body:not(.mob-body) {
  background: var(--bg) !important;
  color: var(--text);
}


/* ── 5.1 TITOLI PAGINA  (FIX: titoli invisibili) ─────────────
   In prod ho visto:
     • "May 2026" (calendario): NON tocchiamo (escluso calendari).
     • "Gestione Proprietario": h5 dentro card legacy con colore
       hardcoded grigio chiaro → invisibile in light.
     • "Prenotazione #N": h1/h2 senza colore esplicito → eredita
       legacy chiaro → invisibile.
   Soluzione: i titoli h1-h6 nel main content prendono `var(--text)`
   in entrambi i temi, escludendo i 7 scope calendario.
*/
body:not(.mob-body) :is(h1, h2, h3, h4, h5, h6):not(
   .occupancy-calendar *,
   .scadenze-calendar-card *,
   .cal-light-scope *,
   .calendar-grid *,
   .gantt-table *,
   .mob-gantt-table *,
   .checkout-table *,
   .cal-card *
) {
  color: var(--text);
}


/* ── 5.2 CARD / METRIC CARD ──────────────────────────────── */
body:not(.mob-body) .card,
body:not(.mob-body) .card-clean,
body:not(.mob-body) .od-card,
body:not(.mob-body) .metric-card {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
body:not(.mob-body) .card-header,
body:not(.mob-body) .card-footer {
  background-color: var(--surface-2);
  border-color: var(--border);
}


/* ── 5.3 TABELLE  (header surface-2, hover row-hover) ──── */
body:not(.mob-body) .table:not(
   .occupancy-calendar *,
   .scadenze-calendar-card *,
   .cal-light-scope *,
   .calendar-grid *,
   .gantt-table *,
   .mob-gantt-table *,
   .checkout-table *,
   .cal-card *
) {
  --bs-table-bg:           var(--surface);
  --bs-table-color:        var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg:     var(--row-hover);
  --bs-table-hover-color:  var(--text);
  --bs-table-striped-bg:   var(--surface-2);
  --bs-table-striped-color: var(--text);
}
body:not(.mob-body) .table thead {
  background-color: var(--surface-2);
  color: var(--text-2);
}


/* ── 5.4 BOTTONI  (primario=accent, secondario=surface+border, danger) ── */
body:not(.mob-body) .btn-primary {
  --bs-btn-bg:           var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-color:        #FFFFFF;
  --bs-btn-hover-bg:     var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-hover-color:  #FFFFFF;
  --bs-btn-active-bg:    var(--accent-hover);
  --bs-btn-active-border-color: var(--accent-hover);
  --bs-btn-focus-shadow-rgb: 14,116,144;
}
body:not(.mob-body) .btn-secondary,
body:not(.mob-body) .btn-outline-secondary {
  --bs-btn-bg:           var(--surface);
  --bs-btn-color:        var(--text);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg:     var(--row-hover);
  --bs-btn-hover-color:  var(--text);
  --bs-btn-hover-border-color: var(--border);
}
body:not(.mob-body) .btn-danger {
  --bs-btn-bg:           var(--danger-solid);
  --bs-btn-color:        #FFFFFF;
  --bs-btn-border-color: var(--danger-solid);
  --bs-btn-hover-bg:     #B91C1C;
  --bs-btn-hover-border-color: #B91C1C;
}
/* btn-dark legacy → mappato sul primary token per coerenza */
body:not(.mob-body) .btn-dark {
  --bs-btn-bg:           var(--text);
  --bs-btn-border-color: var(--text);
  --bs-btn-color:        var(--bg);
  --bs-btn-hover-bg:     var(--text-2);
  --bs-btn-hover-border-color: var(--text-2);
}


/* ── 5.5 INPUT / SELECT / TEXTAREA ──────────────────────── */
body:not(.mob-body) .form-control,
body:not(.mob-body) .form-select,
body:not(.mob-body) textarea.form-control {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
body:not(.mob-body) .form-control:focus,
body:not(.mob-body) .form-select:focus,
body:not(.mob-body) textarea.form-control:focus {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
body:not(.mob-body) .form-control::placeholder,
body:not(.mob-body) textarea.form-control::placeholder {
  color: var(--text-muted);
}
/* Form labels — leggibilità */
body:not(.mob-body) .form-label {
  color: var(--text-2);
}


/* ── 5.6 TOGGLE  (Bootstrap form-switch + i nostri custom) ── */
body:not(.mob-body) .form-switch .form-check-input {
  background-color: var(--toggle-off-bg);
  border-color: var(--toggle-off-bg);
  background-image: linear-gradient(var(--toggle-off-knob),
                                    var(--toggle-off-knob));
}
body:not(.mob-body) .form-switch .form-check-input:checked {
  background-color: var(--toggle-on-bg);
  border-color: var(--toggle-on-bg);
  background-image: linear-gradient(var(--toggle-on-knob),
                                    var(--toggle-on-knob));
}
body:not(.mob-body) .form-check-input:focus {
  box-shadow: var(--focus-ring);
}


/* ── 5.7 BADGE STATI (semantica invariata) ──────────────── */
body:not(.mob-body) .badge.bg-success,
body:not(.mob-body) .bg-success-subtle {
  background-color: var(--success-bg) !important;
  color: var(--success-fg) !important;
}
body:not(.mob-body) .badge.bg-warning,
body:not(.mob-body) .bg-warning-subtle {
  background-color: var(--warn-bg) !important;
  color: var(--warn-fg) !important;
}
body:not(.mob-body) .badge.bg-danger,
body:not(.mob-body) .bg-danger-subtle {
  background-color: var(--danger-bg) !important;
  color: var(--danger-fg) !important;
}


/* ── 5.8 ALERT  ────────────────────────────────────────────
   Backup di sicurezza sopra il fix MESSAGE_TAGS della PR #103
   (ERROR → danger). Token coerenti col tema. */
body:not(.mob-body) .alert-success {
  background-color: var(--success-bg);
  color: var(--success-fg);
  border-color: var(--success-bg);
}
body:not(.mob-body) .alert-warning {
  background-color: var(--warn-bg);
  color: var(--warn-fg);
  border-color: var(--warn-bg);
}
body:not(.mob-body) .alert-danger,
body:not(.mob-body) .alert-error {
  background-color: var(--danger-bg);
  color: var(--danger-fg);
  border-color: var(--danger-bg);
}
body:not(.mob-body) .alert-info {
  background-color: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}


/* ── 5.9 MODALE  (FIX trasparenza modal Nuova Prenotazione) ──
   Bootstrap default per .modal-content è bianco, ma le
   `.modal-content { style="..." }` inline (es. nel template
   prenotazioni.html) potrebbero non avere background → in light
   pareva trasparente sopra il backdrop chiaro. Fissiamo:
*/
body:not(.mob-body) .modal-content {
  background-color: var(--surface) !important;
  color: var(--text);
  border: 1px solid var(--border);
}
body:not(.mob-body) .modal-header,
body:not(.mob-body) .modal-footer {
  border-color: var(--border);
}
body:not(.mob-body) .modal-backdrop.show {
  background-color: rgba(0,0,0,0.5);
  opacity: 1;
}


/* ── 5.10 LINK  (testo + colori) ────────────────────────── */
body:not(.mob-body) a:not(.btn):not(.nav-link):not(.dropdown-item):not(
   .sidebar a,
   .desktop-sidebar a
) {
  color: var(--link);
}
body:not(.mob-body) a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: var(--accent-hover);
}


/* ── 5.11 PAGINA PRENOTAZIONI LIGHT INCOERENTE (FIX) ──────
   Il container principale di /prenotazioni/ usava un fondo grigio
   freddo legacy che stonava col resto del light. Forziamo --bg per
   il main wrapper (escluso mobile + calendari). */
body:not(.mob-body) .main-wrapper,
body:not(.mob-body) .page-content {
  background-color: var(--bg);
  color: var(--text);
}


/* ── 5.12 SIDEBAR — applicazione token fissi ────────────── */
body:not(.mob-body) .sidebar,
body:not(.mob-body) .desktop-sidebar {
  background-color: var(--sidebar-bg);
  color: var(--sidebar-item);
}
body:not(.mob-body) .sidebar a,
body:not(.mob-body) .desktop-sidebar a {
  color: var(--sidebar-item);
}
body:not(.mob-body) .sidebar a:hover,
body:not(.mob-body) .desktop-sidebar a:hover {
  background-color: var(--sidebar-hover);
  color: var(--sidebar-active);
}
body:not(.mob-body) .sidebar a.active,
body:not(.mob-body) .desktop-sidebar a.active,
body:not(.mob-body) .sidebar a.nav-active,
body:not(.mob-body) .desktop-sidebar a.nav-active {
  color: var(--sidebar-active);
  border-left-color: var(--sidebar-active-accent);
}


/* ============================================================
   6) FOCUS RING globale (accessibilità)
   ============================================================ */
body:not(.mob-body) :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* ============================================================
   7) WIN-CASCADE — body bg + titoli + sidebar
   ────────────────────────────────────────────────────────────
   `tokens.css` è il PRIMO <link> caricato in base.html, MA i
   blocchi inline `<style id="od-dark-critical">` e
   `od-sidebar-critical-final` arrivano DOPO i <link> → vincono
   in source order. Per battere la cascata legacy senza toccare
   tutti i CSS:
     - le regole inline di base.html sono state aggiornate alla
       fonte (var(--…) al posto degli hex hardcoded);
     - QUI, in coda al tokens.css, dichiariamo regole con scope
       html[data-theme="…"] body:not(.mob-body) per forzare
       background del body anche dove altri CSS provassero a
       sovrascriverlo.
   ============================================================ */

html[data-theme="light"] body:not(.mob-body),
html:not([data-theme="dark"]) body:not(.mob-body) {
  background-color: var(--bg) !important;
}
html[data-theme="dark"] body:not(.mob-body) {
  background-color: var(--bg) !important;
  background-image: none !important;
}

/* aside.sidebar — fissa, fuori dai temi. La regola inline di
   base.html è già stata aggiornata; questo è il backup. */
body:not(.mob-body) aside.sidebar,
body:not(.mob-body) .desktop-sidebar {
  background: var(--sidebar-bg) !important;
  background-image: none !important;
}


/* ============================================================
   8) LEGACY ALIASING — ridefinisco i nomi storici sopra i nuovi
   ────────────────────────────────────────────────────────────
   Molti file legacy (ui-tokens.css, ui-premium.css, design-
   system-apply.css) usano `--sb-bg`, `--sb-text`, `--sb-bg-top`
   ecc. con i vecchi valori navy hardcoded. Ridefinendoli QUI
   con scope `body:not(.mob-body)` (NON .mob-body!), tutte le
   regole legacy che leggono `var(--sb-bg)` ereditano
   automaticamente i nuovi valori — senza dover toccare quei
   file.
   ============================================================ */

body:not(.mob-body) {
  /* Sidebar legacy aliases (era #243A5E navy → ora #16171A) */
  --sb-bg:           var(--sidebar-bg);
  --sb-bg-top:       var(--sidebar-bg);
  --sb-bg-active:    var(--sidebar-hover);
  --sb-border:       var(--border);
  --sb-text:         var(--sidebar-item);
  --sb-text-muted:   var(--text-muted);
  --sb-text-active:  var(--sidebar-active);
  --sb-hover-bg:     var(--sidebar-hover);
  --sb-active-bg:    var(--sidebar-hover);
  --sb-section-text: var(--text-muted);
  --sb-accent:       var(--sidebar-active-accent);
  --p-bg-sidebar:    var(--sidebar-bg);

  /* Header/footer/tfoot card delle pagine usano --surface-soft (light
     #f9fafb fallback) e --border-color (#e5e7eb). In dark facevano
     bg chiaro su card chiara → testo invisibile (caso "Confronto per
     struttura"). Aliasati ai token dark-aware. */
  --surface-soft:    var(--surface-2);
  --border-color:    var(--border);
}

/* Titoli card visibili in dark (caso "Confronto per struttura"
   col vecchio --text-primary navy invisibile su --bg dark). */
html[data-theme="dark"] body:not(.mob-body) .card-clean :is(h1,h2,h3,h4,h5,h6),
html[data-theme="dark"] body:not(.mob-body) .od-card    :is(h1,h2,h3,h4,h5,h6),
html[data-theme="dark"] body:not(.mob-body) .dash-table-card :is(h1,h2,h3,h4,h5,h6) {
  color: var(--text) !important;
}


/* ============================================================
   FINE — il resto della cascata (style.css → ui-premium.css)
   eredita questi token. Le pulizie legacy sono in PR separata.
   ============================================================ */