/* ============================================================
   TH3G Dashboard — Stylesheet
   Stile: AGICAP / SaaS moderno, palette azzurra
   ============================================================ */

:root {
  /* Backgrounds & surfaces — bianco puro (allineato al logo).
     `--surface` e `--surface-hover` puntano ai token condivisi: i valori
     chiari erano GIÀ identici (#ffffff / #eef2f7), quindi in chiaro non
     cambia un pixel, e in scuro si ribaltano da soli. */
  --bg:              #ffffff;
  --surface:         var(--ds-surface);
  --panel-bg:        #f8fafc;   /* pannelli dashboard: bianco leggermente scuro */
  --surface-2:       #f1f5f9;
  --surface-hover:   var(--ds-surface-hover);

  /* Borders — anche questi già allineati ai token (--border differiva di
     1/255 su un canale: impercettibile, ora unificato). */
  --border:          var(--ds-border);
  --border-strong:   var(--ds-border-strong);
  /* Bordo dei form control (input/select/textarea) a riposo: calibrato a
     3.14:1 su bianco per WCAG 1.4.11 (componenti UI ≥ 3:1). --border-strong
     (1.52:1) è troppo chiaro su surface bianca e rende il campo invisibile.
     In scuro il token vale #6b7997 → 3.22:1, stesso criterio rispettato. */
  --field-border:    var(--ds-field-border);

  /* Text — slate. muted/subtle ora dai token: variazione impercettibile in
     chiaro (e leggermente più contrastata), ribaltamento gratis in scuro. */
  --text:            var(--ds-text);
  --text-soft:       var(--ds-text-soft);
  --text-muted:      var(--ds-text-muted);
  --text-subtle:     var(--ds-text-faint);

  /* Accent — AGICAP blue.
     Due ruoli distinti, perché in scuro NON possono essere lo stesso colore:
       --accent      = riempimento (sfondo bottoni) → sopra ci va testo bianco
       --accent-ink  = accento come TESTO/BORDO su una superficie di pagina
     In chiaro coincidono (#2563eb va bene in entrambi i ruoli: bianco su di
     esso 5.17:1, e lui su bianco 5.17:1). In scuro divergono: #2563eb come
     testo su navy fa 3.35:1 (illeggibile), mentre schiarirlo per il testo
     romperebbe il bianco sul bottone. Vedi il blocco scuro più sotto. */
  --accent:          #2563eb;
  --accent-ink:      var(--accent);
  --accent-hover:    #1d4ed8;
  --accent-light:    #3b82f6;
  --accent-soft:     rgba(37, 99, 235, 0.10);
  --accent-softer:   rgba(37, 99, 235, 0.05);

  /* Semantici */
  --success:         #10b981;
  --danger:          #dc2626;
  --danger-soft:     rgba(220, 38, 38, 0.12);   /* anello focus stato-errore */
  --warning:         #f59e0b;

  /* Sidebar — deep navy */
  --sidebar-bg:      #0f172a;
  /* Testata del logo: bianca perché th3g-logo.jpg è un JPEG — niente canale
     alpha, quindi si porta dietro un fondo bianco opaco. In chiaro la banda
     bianca ci si fonde e non si vede la giunzione.
     In scuro non si può invertire il logo: il marchio contiene rosso, teal e
     verde oltre al wordmark nero, e invertirlo falserebbe i colori del brand.
     Quindi in scuro la banda torna scura e il logo va su una PIASTRA bianca
     arrotondata che lo abbraccia: si legge come una scelta (un chip di brand)
     invece che come una lastra bianca capitata lì.
     Fix definitivo = un logo knockout (PNG/SVG trasparente, wordmark chiaro):
     quando esiste, basta rimettere --brand-plate-bg a transparent in scuro. */
  --sidebar-brand-bg: #ffffff;
  --brand-plate-bg:   transparent;
  --brand-plate-pad:  0;
  --brand-plate-r:    0;
  /* Piastra per i loghi con fondo opaco dentro i widget (vedi .panel-logo) */
  --logo-plate-bg:    transparent;
  --logo-plate-pad:   0;
  --logo-plate-r:     0;
  --sidebar-fg:      #e2e8f0;
  --sidebar-muted:   rgba(226, 232, 240, 0.5);
  --sidebar-hover:   rgba(255, 255, 255, 0.04);
  --sidebar-active:  rgba(59, 130, 246, 0.15);
  --sidebar-border:  rgba(255, 255, 255, 0.08);

  /* Shadows */
  /* Ombre → design system condiviso (tokens.css). Valori identici. */
  --shadow-sm:  var(--ds-shadow-sm);
  --shadow-md:  var(--ds-shadow-md);
  --shadow-lg:  var(--ds-shadow-lg);

  /* Radii */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;

  /* Font → design system condiviso (tokens.css). */
  --font: var(--ds-font-sans);

  /* ── Primitive del tema scuro, specifiche della dashboard ────────────────
     Solo ciò che NON arriva già dai token condivisi. Definite una volta qui
     (inerti in chiaro), consumate dai due blocchi di mapping più sotto: così
     scuro-esplicito e scuro-di-sistema non possono divergere. */
  --d-bg:            #0b1120;   /* pagina: il piano più profondo             */
  --d-panel-bg:      #111a2e;   /* pannelli: rialzati, non affondati         */
  --d-surface-2:     #16213a;
  --d-accent-ink:    #60a5fa;   /* accento come testo → 5.54:1 nel peggiore  */
  --d-accent-hover:  #3b82f6;   /* in scuro l'hover SCHIARISCE              */
  --d-accent-soft:   rgba(96, 165, 250, 0.16);
  --d-accent-softer: rgba(96, 165, 250, 0.08);
  --d-success:       #34d399;   /* 7.32:1 */
  --d-danger:        #f87171;   /* il #dc2626 chiaro fa 2.91:1 in scuro: no  */
  --d-danger-soft:   rgba(248, 113, 113, 0.16);
  --d-sidebar-hover: rgba(255, 255, 255, 0.06);
  --d-sidebar-active: rgba(96, 165, 250, 0.20);
  --d-news-thumb:    linear-gradient(135deg, #16213a 0%, #1e2b47 100%);

  /* Placeholder miniatura news: in chiaro un grigio-blu tenue. */
  --news-thumb-bg:   linear-gradient(135deg, #f5f7fa 0%, #e5e9ef 100%);

  /* ── Widget Sole 24 Ore — carta salmone (chiaro), valori originali ────── */
  --s24-bg:         #f7e5d0;
  --s24-card:       var(--surface);
  --s24-border:     #ecd3b4;
  --s24-head:       linear-gradient(180deg, #fcefdd 0%, #f7e5d0 100%);
  --s24-eyebrow:    #8b5a3c;
  --s24-title:      #2b1a0d;
  --s24-link:       #a14300;
  --s24-rule:       #c44d00;
  --s24-link-soft:  rgba(161, 67, 0, 0.10);
  --s24-item-hover: rgba(161, 67, 0, 0.06);
  --s24-dot:        rgba(139, 90, 60, 0.35);
  --s24-dot-hover:  rgba(139, 90, 60, 0.6);

  /* ── Sole 24 Ore — carta sepia (scuro). Contrasti verificati sulla testata
     #33220f: titolo 12.17:1 · eyebrow 6.66:1 · link 6.51:1; filo card 5.34:1. */
  --d-s24-bg:         #2a1c10;
  --d-s24-card:       #3a2716;
  --d-s24-border:     #4a3520;
  --d-s24-head:       linear-gradient(180deg, #33220f 0%, #2a1c10 100%);
  --d-s24-eyebrow:    #d9a066;
  --d-s24-title:      #f5e3cd;
  --d-s24-link:       #f0925a;
  --d-s24-rule:       #e8863c;
  --d-s24-link-soft:  rgba(240, 146, 90, 0.16);
  --d-s24-item-hover: rgba(240, 146, 90, 0.10);
  --d-s24-dot:        rgba(217, 160, 102, 0.35);
  --d-s24-dot-hover:  rgba(217, 160, 102, 0.65);

  /* ── Badge "soft": inchiostro scuro su tinta translucida (chiaro) ─────────
     È il pattern che si rompe più silenziosamente in scuro: la tinta resta
     translucida e si compone col fondo scuro, ma l'inchiostro scuro sopra
     diventa illeggibile. In scuro l'inchiostro va SCHIARITO e la tinta un
     filo più opaca. Contrasti verificati componendo la tinta sul fondo. */
  --badge-done-ink:   #15803d;  --badge-done-bg:   rgba(22,163,74,.12);
  --badge-custom-ink: #7c3aed;  --badge-custom-bg: rgba(124,58,237,.12);
  --due-over-ink:  #b91c1c;  --due-over-bg:  rgba(220,38,38,.10);  --due-over-bd:  rgba(220,38,38,.25);
  --due-today-ink: #b45309;  --due-today-bg: rgba(245,158,11,.12); --due-today-bd: rgba(245,158,11,.30);
  --due-soon-ink:  #9a4d02;  --due-soon-bg:  rgba(251,191,36,.12); --due-soon-bd:  rgba(251,191,36,.30);

  /* Varianti scure — inchiostro verificato ≥6.3:1 sulla tinta composita */
  --d-badge-done-ink:   #4ade80;  --d-badge-done-bg:   rgba(22,163,74,.18);
  --d-badge-custom-ink: #c4b5fd;  --d-badge-custom-bg: rgba(124,58,237,.22);
  --d-due-over-ink:  #fca5a5;  --d-due-over-bg:  rgba(220,38,38,.18);  --d-due-over-bd:  rgba(248,113,113,.38);
  --d-due-today-ink: #fcd34d;  --d-due-today-bg: rgba(245,158,11,.18); --d-due-today-bd: rgba(251,191,36,.40);
  --d-due-soon-ink:  #fde68a;  --d-due-soon-bg:  rgba(251,191,36,.16); --d-due-soon-bd:  rgba(253,230,138,.36);
}

/* ── Dashboard in scuro: mapping ─────────────────────────────────────────────
   Nota sulla sidebar: in chiaro è l'UNICA superficie navy, e il contrasto con
   la pagina bianca è ciò che la rende un piano a sé. In scuro quel trucco non
   funziona più — navy su navy sparirebbe (1.05:1 contro lo sfondo pagina).
   Quindi in scuro la sidebar diventa il piano "rialzato" standard
   (--ds-surface, più CHIARO della pagina) con un bordo pieno a delimitarla:
   la profondità la fa la luminosità, non l'ombra. L'identità navy non si
   perde, perché in scuro è l'intera applicazione a essere navy. */

/* ---- Palette d'accento (selettore riservato ai superadmin) -------------------
   `data-accent` sul <html> (via Theme::attr → Accent). Ogni palette ridefinisce
   l'accento chiaro E i `--d-accent-*` che il blocco dark qui sotto consuma: per
   questo DEVE stare PRIMA del blocco `[data-theme="dark"]` (stessa specificità,
   vince la regola più in basso → in scuro passano i valori --d-accent-*).
   'default' = nessun blocco (resta il blu di :root). Fill scuri (700) per avere
   testo bianco leggibile sul bottone. */
:root[data-accent="emerald"] {
  --accent: #047857; --accent-hover: #065f46; --accent-light: #10b981;
  --accent-soft: color-mix(in srgb, #047857 10%, transparent);
  --accent-softer: color-mix(in srgb, #047857 5%, transparent);
  --d-accent-ink: #34d399; --d-accent-hover: #10b981;
  --d-accent-soft: color-mix(in srgb, #34d399 16%, transparent);
  --d-accent-softer: color-mix(in srgb, #34d399 8%, transparent);
}
:root[data-accent="violet"] {
  --accent: #6d28d9; --accent-hover: #5b21b6; --accent-light: #8b5cf6;
  --accent-soft: color-mix(in srgb, #6d28d9 10%, transparent);
  --accent-softer: color-mix(in srgb, #6d28d9 5%, transparent);
  --d-accent-ink: #a78bfa; --d-accent-hover: #8b5cf6;
  --d-accent-soft: color-mix(in srgb, #a78bfa 16%, transparent);
  --d-accent-softer: color-mix(in srgb, #a78bfa 8%, transparent);
}
:root[data-accent="rose"] {
  --accent: #be123c; --accent-hover: #9f1239; --accent-light: #f43f5e;
  --accent-soft: color-mix(in srgb, #be123c 10%, transparent);
  --accent-softer: color-mix(in srgb, #be123c 5%, transparent);
  --d-accent-ink: #fb7185; --d-accent-hover: #f43f5e;
  --d-accent-soft: color-mix(in srgb, #fb7185 16%, transparent);
  --d-accent-softer: color-mix(in srgb, #fb7185 8%, transparent);
}
:root[data-accent="amber"] {
  --accent: #b45309; --accent-hover: #92400e; --accent-light: #f59e0b;
  --accent-soft: color-mix(in srgb, #b45309 10%, transparent);
  --accent-softer: color-mix(in srgb, #b45309 5%, transparent);
  --d-accent-ink: #fbbf24; --d-accent-hover: #f59e0b;
  --d-accent-soft: color-mix(in srgb, #fbbf24 16%, transparent);
  --d-accent-softer: color-mix(in srgb, #fbbf24 8%, transparent);
}
:root[data-accent="teal"] {
  --accent: #0f766e; --accent-hover: #115e59; --accent-light: #14b8a6;
  --accent-soft: color-mix(in srgb, #0f766e 10%, transparent);
  --accent-softer: color-mix(in srgb, #0f766e 5%, transparent);
  --d-accent-ink: #2dd4bf; --d-accent-hover: #14b8a6;
  --d-accent-soft: color-mix(in srgb, #2dd4bf 16%, transparent);
  --d-accent-softer: color-mix(in srgb, #2dd4bf 8%, transparent);
}

@media screen {
  :root[data-theme="dark"] {
    --bg:              var(--d-bg);
    --panel-bg:        var(--d-panel-bg);
    --surface-2:       var(--d-surface-2);

    --accent-ink:      var(--d-accent-ink);
    --accent-hover:    var(--d-accent-hover);
    --accent-light:    var(--d-accent-ink);
    --accent-soft:     var(--d-accent-soft);
    --accent-softer:   var(--d-accent-softer);

    --success:         var(--d-success);
    --danger:          var(--d-danger);
    --danger-soft:     var(--d-danger-soft);

    --sidebar-bg:      var(--ds-surface);
    --sidebar-fg:      var(--ds-text);
    --sidebar-muted:   var(--ds-text-muted);
    --sidebar-hover:   var(--d-sidebar-hover);
    --sidebar-active:  var(--d-sidebar-active);
    --sidebar-border:  var(--ds-border);

    --sidebar-brand-bg: var(--ds-surface);
    /* Piastra bianca DISATTIVATA: serviva perche' il logo TH3G e' un JPG con
       fondo opaco. Qui il marchio e' un PNG trasparente e ha una variante
       schiarita per il tema scuro (image/logo-dark.png), quindi la piastra
       farebbe solo una lastra bianca dietro un logo gia' leggibile — ed e'
       esattamente il caso previsto dal commento a inizio file. */
    --brand-plate-bg:   transparent;
    --brand-plate-pad:  0;
    --brand-plate-r:    0;
    --logo-plate-bg:    #ffffff;
    --logo-plate-pad:   4px 7px;
    --logo-plate-r:     var(--r-sm);

    --news-thumb-bg:   var(--d-news-thumb);

    --s24-bg:         var(--d-s24-bg);
    --s24-card:       var(--d-s24-card);
    --s24-border:     var(--d-s24-border);
    --s24-head:       var(--d-s24-head);
    --s24-eyebrow:    var(--d-s24-eyebrow);
    --s24-title:      var(--d-s24-title);
    --s24-link:       var(--d-s24-link);
    --s24-rule:       var(--d-s24-rule);
    --s24-link-soft:  var(--d-s24-link-soft);
    --s24-item-hover: var(--d-s24-item-hover);
    --s24-dot:        var(--d-s24-dot);
    --s24-dot-hover:  var(--d-s24-dot-hover);

    --badge-done-ink:   var(--d-badge-done-ink);   --badge-done-bg:   var(--d-badge-done-bg);
    --badge-custom-ink: var(--d-badge-custom-ink); --badge-custom-bg: var(--d-badge-custom-bg);
    --due-over-ink:  var(--d-due-over-ink);  --due-over-bg:  var(--d-due-over-bg);  --due-over-bd:  var(--d-due-over-bd);
    --due-today-ink: var(--d-due-today-ink); --due-today-bg: var(--d-due-today-bg); --due-today-bd: var(--d-due-today-bd);
    --due-soon-ink:  var(--d-due-soon-ink);  --due-soon-bg:  var(--d-due-soon-bg);  --due-soon-bd:  var(--d-due-soon-bd);
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg:              var(--d-bg);
    --panel-bg:        var(--d-panel-bg);
    --surface-2:       var(--d-surface-2);

    --accent-ink:      var(--d-accent-ink);
    --accent-hover:    var(--d-accent-hover);
    --accent-light:    var(--d-accent-ink);
    --accent-soft:     var(--d-accent-soft);
    --accent-softer:   var(--d-accent-softer);

    --success:         var(--d-success);
    --danger:          var(--d-danger);
    --danger-soft:     var(--d-danger-soft);

    --sidebar-bg:      var(--ds-surface);
    --sidebar-fg:      var(--ds-text);
    --sidebar-muted:   var(--ds-text-muted);
    --sidebar-hover:   var(--d-sidebar-hover);
    --sidebar-active:  var(--d-sidebar-active);
    --sidebar-border:  var(--ds-border);

    --sidebar-brand-bg: var(--ds-surface);
    /* Piastra bianca DISATTIVATA: serviva perche' il logo TH3G e' un JPG con
       fondo opaco. Qui il marchio e' un PNG trasparente e ha una variante
       schiarita per il tema scuro (image/logo-dark.png), quindi la piastra
       farebbe solo una lastra bianca dietro un logo gia' leggibile — ed e'
       esattamente il caso previsto dal commento a inizio file. */
    --brand-plate-bg:   transparent;
    --brand-plate-pad:  0;
    --brand-plate-r:    0;
    --logo-plate-bg:    #ffffff;
    --logo-plate-pad:   4px 7px;
    --logo-plate-r:     var(--r-sm);

    --news-thumb-bg:   var(--d-news-thumb);

    --s24-bg:         var(--d-s24-bg);
    --s24-card:       var(--d-s24-card);
    --s24-border:     var(--d-s24-border);
    --s24-head:       var(--d-s24-head);
    --s24-eyebrow:    var(--d-s24-eyebrow);
    --s24-title:      var(--d-s24-title);
    --s24-link:       var(--d-s24-link);
    --s24-rule:       var(--d-s24-rule);
    --s24-link-soft:  var(--d-s24-link-soft);
    --s24-item-hover: var(--d-s24-item-hover);
    --s24-dot:        var(--d-s24-dot);
    --s24-dot-hover:  var(--d-s24-dot-hover);

    --badge-done-ink:   var(--d-badge-done-ink);   --badge-done-bg:   var(--d-badge-done-bg);
    --badge-custom-ink: var(--d-badge-custom-ink); --badge-custom-bg: var(--d-badge-custom-bg);
    --due-over-ink:  var(--d-due-over-ink);  --due-over-bg:  var(--d-due-over-bg);  --due-over-bd:  var(--d-due-over-bd);
    --due-today-ink: var(--d-due-today-ink); --due-today-bg: var(--d-due-today-bg); --due-today-bd: var(--d-due-today-bd);
    --due-soon-ink:  var(--d-due-soon-ink);  --due-soon-bg:  var(--d-due-soon-bg);  --due-soon-bd:  var(--d-due-soon-bd);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv11", "ss01";
  letter-spacing: -0.005em;
  line-height: 1.5;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }

/* ============================================================
   LOGIN
   ============================================================ */
.page-login {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  position: relative;
}

.login-wrap {
  width: 100%;
  max-width: 400px;
  position: relative;
  z-index: 1;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2.5rem 2.25rem;
  box-shadow: var(--shadow-md);
}

.login-title {
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}
.login-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0 0 2rem;
}

.field { display: block; margin-bottom: 1.25rem; }

.field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-soft);
  margin-bottom: 0.4rem;
}

.field input {
  width: 100%;
  border: 1px solid var(--field-border);
  background: var(--surface);
  padding: 0.625rem 0.875rem;
  font-size: 1rem;            /* 16px — evita l'auto-zoom su iOS */
  outline: none;
  border-radius: var(--r-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus {
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Disabled (es. campi bloccati durante il submit) */
.field input:disabled {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
}
/* Stato errore: il JS imposta aria-invalid="true" sul campo in errore */
.field input[aria-invalid="true"] {
  border-color: var(--danger);
}
.field input[aria-invalid="true"]:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

/* Password field + toggle mostra/nascondi */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 3rem; }
.password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--r-md);
  transition: color 0.15s;
}
.password-toggle:hover { color: var(--text-soft); }
.password-toggle:focus-visible {
  outline: none;
  color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-error {
  min-height: 1.2em;
  margin: -0.6rem 0 0.8rem;
  color: var(--danger);
  font-size: 0.8125rem;
}

.btn-primary {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--r-md);
  transition: background 0.15s, transform 0.05s;
  margin-top: 0.25rem;
}
.btn-primary:hover { background: var(--accent-hover); }
/* Focus da tastiera: stesso anello degli altri controlli (.field input,
   .password-toggle) per coerenza. :focus-visible → l'anello appare solo
   con Tab, non al click del mouse. */
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

/* Spinner stato caricamento */
.btn-primary.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.btn-primary.is-loading::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---- Verifica in due passaggi (2FA) ---- */
.code-input {
  text-align: center;
  font-size: 1.5rem !important;
  font-weight: 600;
  letter-spacing: 0.5em;
  padding-left: 0.5em !important;   /* compensa il letter-spacing per centrare */
  font-variant-numeric: tabular-nums;
}
.checkbox-field {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8125rem;
  color: var(--text-soft);
  margin-bottom: 1.25rem;
  cursor: pointer;
  user-select: none;
}
.checkbox-field input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
  cursor: pointer;
  flex: none;
}
.twofa-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
}
.link-btn {
  background: none;
  border: none;
  padding: 0.25rem 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent-ink);
  cursor: pointer;
  border-radius: var(--r-sm, 6px);
}
.link-btn:hover { text-decoration: underline; }
.link-btn:disabled { color: var(--text-muted); cursor: not-allowed; text-decoration: none; }
.link-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Logo login — formato orizzontale, firma in basso a destra */
.login-signature {
  position: fixed;
  right: 1.75rem;
  bottom: 1.25rem;
  width: 180px;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 640px) {
  .login-card { padding: 2rem 1.5rem; }
  .login-signature { width: 130px; right: 1rem; bottom: 1rem; }
}

/* ============================================================
   DASHBOARD LAYOUT
   ============================================================ */

.page-dashboard {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

/* ---- Sidebar ------------------------------------------------ */
.sidebar {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  transition: width .2s ease;
  position: relative;
  z-index: 20;
}

.sidebar-brand {
  padding: 1.25rem 1rem;
  background: var(--sidebar-brand-bg);
  border-bottom: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Bottone hamburger per collassare la sidebar */
.sidebar-toggle {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}
.sidebar-toggle:hover {
  background: rgba(15, 23, 42, 0.05);
  color: var(--accent-ink);
  border-color: rgba(15, 23, 42, 0.08);
}
.sidebar-toggle svg { width: 20px; height: 20px; }

/* Button invisibile che rende il logo cliccabile (tasto Home) */
.sidebar-brand-btn {
  background: var(--brand-plate-bg);
  border-radius: var(--brand-plate-r);
  border: none;
  padding: var(--brand-plate-pad);
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease, transform 0.1s ease;
  border-radius: 4px;
}
.sidebar-brand-btn:hover   { opacity: 0.85; }
.sidebar-brand-btn:active  { transform: scale(0.98); }
.sidebar-brand-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Logo sidebar — formato orizzontale, riempie in larghezza */
.sidebar-logo {
  width: 100%;
  max-width: 240px;
  max-height: 60px;
  height: auto;
  display: block;
  object-fit: contain;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
}

.nav-section-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  padding: 0 1.25rem;
  margin: 1rem 0 0.4rem;
}
.sidebar-nav > .nav-section-label:first-child { margin-top: 0.2rem; }

.nav-list { list-style: none; margin: 0; padding: 0 0.5rem; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  color: rgba(226, 232, 240, 0.82);
  cursor: pointer;
  border-radius: var(--r-md);
  transition: background 0.15s, color 0.15s;
  user-select: none;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
}
.nav-item:hover:not(.is-locked) {
  background: var(--sidebar-hover);
  color: #fff;
}
.nav-item.is-active {
  background: var(--sidebar-active);
  color: #fff;
  font-weight: 500;
}
.nav-item.is-locked { opacity: 0.38; cursor: not-allowed; }

/* ---- Riordino del menu con drag&drop (solo superadmin) ----
 * Le voci sono draggable="true" solo per il superadmin; lo spostamento è
 * consentito DENTRO la stessa lista (gruppo o sottogruppo), così i sottogruppi
 * restano contigui e il menu ricaricato torna identico a come lo si è lasciato. */
.nav-item[draggable="true"] { cursor: grab; }
.nav-item[draggable="true"]:active { cursor: grabbing; }
.nav-item.is-dragging { opacity: 0.4; }
/* Linea di inserimento: mostra dove finirà la voce trascinata. */
.nav-item.drop-before { box-shadow: inset 0 2px 0 0 var(--accent, #7c3aed); }
.nav-item.drop-after  { box-shadow: inset 0 -2px 0 0 var(--accent, #7c3aed); }
.sidebar-nav.is-reordering .nav-item { transition: none; }
/* Conferma discreta del salvataggio, in fondo alla sidebar. */
.menu-order-toast {
  position: fixed; left: 12px; bottom: 12px; z-index: 60;
  background: rgba(17, 24, 39, 0.96); color: #fff;
  font-size: 0.78rem; font-weight: 600; line-height: 1.35;
  padding: 8px 12px; border-radius: var(--r-md); max-width: 240px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.menu-order-toast.err { background: #b91c1c; }

.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-icon  { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.9; }
.nav-item.is-active .nav-icon { opacity: 1; }
.ic-lock { width: 12px; height: 12px; opacity: 0.6; flex-shrink: 0; }

/* ---- "Comprimi / Espandi tutto" ---------------------------
 * Comando unico sopra i gruppi. Sta APPICCICATO in alto (sticky): con tutti
 * i gruppi aperti la lista è più alta della sidebar, e un comando che devi
 * risalire a cercare non lo usa nessuno. È volutamente piccolo e in grigio:
 * è un attrezzo, non una voce di menu — non deve competere con i moduli. */
.nav-allctl {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding: 0 0.6rem 0.35rem;
  background: var(--sidebar-bg);
}
.nav-allctl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.3rem 0.5rem;
  background: none;
  border: 0;
  border-radius: var(--r-md);
  color: var(--sidebar-muted);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  /* Niente maiuscolo spaziato: quello è il linguaggio delle INTESTAZIONI di
     sezione, e faceva leggere il comando come un titolo da saltare. */
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-allctl-btn:hover { background: var(--sidebar-hover); color: var(--sidebar-fg); }
.nav-allctl-ic { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s ease; }
/* Una sola icona per due azioni: doppio chevron in su = comprimi; ribaltato
   (scaleY) punta in giù = espandi. Il verso è l'azione. */
.nav-allctl-btn.is-expand .nav-allctl-ic { transform: scaleY(-1); }
/* Nel drawer mobile il comando è un bersaglio da dito, non da mouse. */
@media (max-width: 900px) {
  .nav-allctl { padding: 0 0.5rem 0.25rem; }
  .nav-allctl-btn { min-height: 44px; padding: 0 0.75rem; }
}

/* ---- Gruppi accordion (voci principali del menu) ---------- */
.nav-group { margin-top: 0.35rem; }
.sidebar-nav > .nav-group:first-child { margin-top: 0.1rem; }

/* Un gruppo CHIUSO che contiene la sezione aperta resta acceso e mostra un
   punto d'accento: chiudendo tutto non si perde il "dove sono". Il punto è
   colore, quindi accanto c'è la stessa informazione in testo per gli screen
   reader (.nav-group-flag), che compare solo in questo stato. */
.nav-group-flag { display: none; }
.nav-group.has-current.is-collapsed > .nav-group-toggle {
  color: var(--sidebar-fg);
  background: var(--sidebar-active);
}
.nav-group.has-current.is-collapsed .nav-group-flag { display: inline; }
.nav-group.has-current.is-collapsed .nav-group-name::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--accent, #3b82f6);
  vertical-align: middle;
}

.nav-group-toggle {
  width: calc(100% - 1rem);
  margin: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  color: var(--sidebar-fg);
  font-family: inherit;
  font-size: 0.95rem;      /* nome del menu "in grande", più dei moduli (0.875rem) */
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  border-radius: var(--r-md);
  transition: background 0.15s, color 0.15s;
}
.nav-group-toggle:hover { background: var(--sidebar-hover); }
.nav-group-name { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-group-chevron {
  width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6;
  transition: transform 0.2s ease;
}
.nav-group.is-collapsed .nav-group-chevron { transform: rotate(-90deg); }

/* Corpo a tendina: animazione fluida via grid-template-rows 1fr↔0fr */
.nav-group-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease;
}
.nav-group.is-collapsed .nav-group-body { grid-template-rows: 0fr; }
.nav-group-body > .nav-list { overflow: hidden; padding-top: 0.2rem; }

/* Sottogruppi annidati dentro un gruppo (es. Corporate → Report) */
.nav-subgroup { list-style: none; margin-top: 0.15rem; }
.nav-subgroup-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  padding: 0.35rem 0.75rem 0.2rem;
}
.nav-sublist { list-style: none; margin: 0; padding: 0; }
.nav-sublist .nav-item { margin-left: 0.6rem; }   /* rientro per mostrare l'annidamento */

/* Badge rosso con counter (es. messaggi non letti) */
.nav-item { position: relative; }
.nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #dc2626;
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--sidebar-bg);
  flex-shrink: 0;
}
/* Sidebar stretta: il badge diventa un pallino rosso sopra l'icona */
html.sidebar-collapsed .nav-badge {
  position: absolute;
  top: 4px; right: 10px;
  min-width: 10px;
  width: 10px; height: 10px;
  padding: 0;
  font-size: 0;     /* nasconde il numero */
  border-radius: 50%;
  margin-left: 0;
}

/* ============================================================
   Sidebar COLLAPSED — solo icone, con hover-peek che espande
   ============================================================ */
html.sidebar-collapsed .sidebar { width: 72px; }

/* Con sidebar stretta il logo orizzontale non ha senso: lo nascondiamo
   e lasciamo solo il bottone hamburger centrato (come Gmail/Drive). */
html.sidebar-collapsed .sidebar-logo,
html.sidebar-collapsed .sidebar-brand-btn { display: none; }
html.sidebar-collapsed .sidebar-brand {
  padding: 1rem 0;
  justify-content: center;
}
html.sidebar-collapsed .nav-label,
html.sidebar-collapsed .nav-section-label,
html.sidebar-collapsed .ic-lock,
html.sidebar-collapsed .user-meta,
html.sidebar-collapsed .btn-logout { display: none; }
html.sidebar-collapsed .nav-list   { padding: 0 0.4rem; }
html.sidebar-collapsed .nav-item   {
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 3px auto;
  border-radius: 12px;   /* rounded-square morbido: niente aspetto "squadrato" */
}
html.sidebar-collapsed .user-row   { justify-content: center; padding: 0.5rem 0; }
html.sidebar-collapsed .sidebar-footer { padding: 0.6rem; }
/* In modalità solo-icone mostriamo SEMPRE tutti i moduli come icone (anche dei
   gruppi lasciati chiusi nell'accordion) e nascondiamo le intestazioni dei
   gruppi. All'hover le intestazioni ricompaiono come divisori (vedi sotto), così
   l'overlay è ordinato a gruppi come la sidebar aperta senza nascondere icone.
   NB: `.nav-group` nel selettore serve a battere `.nav-group.is-collapsed …{0fr}`. */
html.sidebar-collapsed .nav-group-toggle { display: none; }
/* Niente "Comprimi/Espandi tutto" a sole icone (né in hover-peek): lì i gruppi
   non sono a fisarmonica, sono divisori — un comando che non muove nulla. */
html.sidebar-collapsed .nav-allctl { display: none; }
html.sidebar-collapsed .nav-group .nav-group-body { grid-template-rows: 1fr; }
html.sidebar-collapsed .nav-subgroup-label { display: none; }
html.sidebar-collapsed .nav-sublist .nav-item { margin: 3px auto; }

/* Hover-peek (solo desktop): da collassata la sidebar è un overlay FISSO largo
   72px — "chiusa resta chiusa", il contenuto non si sposta. Passandoci sopra
   col mouse si espande SOPRA il contenuto per mostrare le etichette; togliendo
   il mouse si richiude. NB: solo :hover (niente :focus-within, che al clic
   avrebbe tenuto la sidebar aperta finché l'elemento cliccato restava a fuoco). */
@media (min-width: 901px) {
  html.sidebar-collapsed .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 40;
  }
  html.sidebar-collapsed .main { margin-left: 72px; }

  /* Backdrop: aprendo la sidebar in overlay il contenuto si oscura appena, così
     l'espansione si legge come un menù a comparsa e non come una sovrapposizione. */
  html.sidebar-collapsed .main::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .28);
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  html.sidebar-collapsed:not(.peek-off) .sidebar:hover ~ .main::before { opacity: 1; }

  /* Durante l'hover la sidebar espansa mostra già il logo e coprirebbe quello
     della topbar lasciandone spuntare un bordo: lo rendiamo invisibile senza
     togliere spazio (il saluto non si sposta). */
  html.sidebar-collapsed:not(.peek-off) .sidebar:hover ~ .main .topbar-brand { opacity: 0; }

  html.sidebar-collapsed:not(.peek-off) .sidebar:hover {
    width: 264px;
    box-shadow: 18px 0 48px rgba(15, 23, 42, .38);
  }
  html.sidebar-collapsed:not(.peek-off) .sidebar:hover .sidebar-brand { padding: 1.25rem 1rem; justify-content: space-between; }
  html.sidebar-collapsed:not(.peek-off) .sidebar:hover .sidebar-logo { display: block; }
  html.sidebar-collapsed:not(.peek-off) .sidebar:hover .sidebar-brand-btn { display: flex; }
  html.sidebar-collapsed:not(.peek-off) .sidebar:hover .nav-label,
  html.sidebar-collapsed:not(.peek-off) .sidebar:hover .nav-subgroup-label { display: block; }
  /* Intestazioni dei gruppi (Generale, HR, Admin & Finance…): ricompaiono
     all'hover come DIVISORI (tutte le icone restano visibili). In peek non
     servono da accordion, quindi niente freccetta e non cliccabili. */
  html.sidebar-collapsed:not(.peek-off) .sidebar:hover .nav-group-toggle {
    display: flex;
    pointer-events: none;
    cursor: default;
  }
  html.sidebar-collapsed:not(.peek-off) .sidebar:hover .nav-group-chevron { display: none; }
  html.sidebar-collapsed:not(.peek-off) .sidebar:hover .user-meta,
  html.sidebar-collapsed:not(.peek-off) .sidebar:hover .btn-logout { display: initial; }
  html.sidebar-collapsed:not(.peek-off) .sidebar:hover .nav-list { padding: 0 0.6rem; }
  html.sidebar-collapsed:not(.peek-off) .sidebar:hover .nav-item {
    justify-content: flex-start;
    width: auto; height: auto;
    margin: 2px 0;
    padding: 0.55rem 0.7rem;
    border-radius: var(--r-md);
    gap: 0.7rem;
  }
  html.sidebar-collapsed:not(.peek-off) .sidebar:hover .nav-sublist .nav-item { margin: 2px 0 2px 0.6rem; }
  html.sidebar-collapsed:not(.peek-off) .sidebar:hover .user-row { justify-content: flex-start; padding: 0.5rem 0.6rem; }
}

/* Mobile: sidebar diventa overlay laterale */
@media (max-width: 900px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
  }
  html.sidebar-open .sidebar { transform: translateX(0); }
  html.sidebar-open .sidebar-backdrop { display: block; }/* scrim quando il drawer è aperto */
  html.sidebar-collapsed .sidebar { width: 280px; }  /* su mobile non ha senso "stretta" */
  html.sidebar-collapsed .sidebar .nav-label,
  html.sidebar-collapsed .sidebar .user-meta,
  html.sidebar-collapsed .sidebar .btn-logout { display: initial; }
  html.sidebar-collapsed .sidebar .nav-label { display: block; }
  html.sidebar-collapsed .sidebar .nav-item { justify-content: flex-start; width: auto; height: auto; margin: 0 0 2px; padding: 0.55rem 0.75rem; border-radius: var(--r-md); }
  /* Nel drawer mobile l'accordion resta attivo: header visibile e corpo che
     rispetta lo stato aperto/chiuso (annulla le regole solo-icone del desktop). */
  html.sidebar-collapsed .sidebar .nav-allctl { display: flex; }
  html.sidebar-collapsed .sidebar .nav-group-toggle { display: flex; }
  html.sidebar-collapsed .sidebar .nav-group-body { grid-template-rows: 1fr; }
  html.sidebar-collapsed .sidebar .nav-group.is-collapsed .nav-group-body { grid-template-rows: 0fr; }
  html.sidebar-collapsed .sidebar .nav-subgroup-label { display: block; }
  html.sidebar-collapsed .sidebar .nav-sublist .nav-item { margin-left: 0.6rem; }
}

.sidebar-footer {
  padding: 1rem;
  border-top: 1px solid var(--sidebar-border);
}

.user-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.5rem;
  margin-bottom: 0.35rem;
  border-radius: var(--r-md);
}

.user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}

.user-meta { min-width: 0; flex: 1; }
.user-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-role {
  font-size: 0.7rem;
  color: var(--sidebar-muted);
  margin-top: 0.1rem;
}

.btn-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-decoration: none;
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.85);
  font-size: 0.8125rem;
  border-radius: var(--r-md);
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  border: none;
  width: 100%;
  font-family: inherit;
}
.btn-logout:hover {
  background: rgba(220, 38, 38, 0.18);
  color: #fff;
}

/* ---- Main / Topbar ----------------------------------------- */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  padding: 1.15rem 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/* Clock spinto all'estrema destra; brand + greeting restano raggruppati a sinistra */
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }

/* Hamburger topbar — apre il drawer; visibile SOLO su mobile (≤900px) */
.topbar-menu {
  display: none;
  flex-shrink: 0;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--r-md);
  transition: background 0.15s, color 0.15s;
}
.topbar-menu:hover { background: var(--surface-2); color: var(--text); }
.topbar-menu:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.topbar-menu svg { width: 22px; height: 22px; }

/* Scrim del drawer — sotto la sidebar (z 20), sopra il contenuto */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 18;
}

/* Hamburger visibile su mobile — DEVE stare dopo la regola base .topbar-menu,
   altrimenti il `display:none` di base (più avanti nel sorgente) vince nel cascade. */
@media (max-width: 900px) {
  .topbar-menu { display: inline-flex; }
}

/* ============================================================
   DASHBOARD — RESPONSIVE CONTENUTO (mobile)
   ============================================================ */
@media (max-width: 640px) {
  .topbar { padding: 0.8rem 1rem; gap: 0.6rem; }
  .topbar-brand img { height: 30px; }
  .crumb { font-size: 0.7rem; }
  .greeting { font-size: 1.05rem; }
  .clock { text-align: right; }
  .clock-date { font-size: 0.72rem; }

  .view { padding: 1rem !important; }
  .stat-strip { margin-bottom: 1rem; }
  .stat { min-width: 0; max-width: none; width: 100%; }

  .panel-head { padding: 0.85rem 1rem; }
  .panel-title { font-size: 1rem; }

  /* Form To-Do: niente più overflow — input a tutta riga, il resto va a capo */
  .todo-form { flex-wrap: wrap; padding: 0.8rem 1rem; gap: 0.5rem; }
  .todo-form .todo-input { flex: 1 1 100%; min-width: 0; }
  .todo-form .todo-tag-input,
  .todo-form .todo-due-input { flex: 1 1 auto; min-width: 0; }
  .todo-form button[type="submit"] { flex: 0 0 auto; }
}

/* Brand nella topbar — appare SOLO quando la sidebar e` chiusa */
.topbar-brand {
  display: none;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  align-items: center;
  border-radius: 6px;
  transition: opacity 0.15s, transform 0.08s;
}
.topbar-brand:hover  { opacity: 0.85; }
.topbar-brand:active { transform: scale(0.97); }
.topbar-brand img {
  height: 40px; width: auto; display: block;
}
html.sidebar-collapsed .topbar-brand { display: inline-flex; }

.crumb {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.1rem;
}
.greeting {
  margin: 0;
  font-weight: 600;
  font-size: 1.125rem;
}
.greeting em { font-style: normal; color: var(--accent-ink); }

.clock { text-align: right; }

/* Impostazioni è ora un modulo a sé (/settings) embeddato via iframe */
.clock-date {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: capitalize;
}
.clock-time {
  display: block;
  margin-top: 0.1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

/* ---- Viste ------------------------------------------------- */
.view {
  display: none;
  padding: 2rem 2.5rem 3.5rem;
  overflow-y: auto;
  flex: 1;
}
/* Su schermi larghi centriamo il contenuto con un max-width per evitare
   che la griglia di widget si stiri a tutto lo schermo (disarmonica). */
.view > * { max-width: 1600px; margin-left: auto; margin-right: auto; width: 100%; }
@media (max-width: 1100px) {
  .view { padding: 1.5rem 1.25rem; }
}
.view.is-active { display: flex; flex-direction: column; }

/* Stat strip — "Eventi oggi" (ora cliccabile) */
.stat-strip {
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}

.stat {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  padding: 1rem 1.25rem;
  min-width: 220px;
  max-width: 260px;
  border-radius: var(--r-lg);
  position: relative;
  box-shadow: var(--shadow-sm);
  display: block;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.stat-clickable {
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.stat-clickable:hover {
  border-color: var(--accent-ink);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.stat-clickable:active { transform: translateY(0); }
.stat-clickable:focus-visible {
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.stat-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}
.stat-arrow {
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  color: var(--accent-ink);
  font-size: 0.85rem;
}
.stat-clickable:hover .stat-arrow {
  opacity: 1;
  transform: translateX(2px);
}

.stat-value {
  font-size: 1.875rem;
  font-weight: 600;
  margin-top: 0.25rem;
  color: var(--text);
  line-height: 1.2;
}
.stat-accent {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* ---- Stat variant: Agenda (icona + data + sub) ---- */
.stat-agenda {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 280px;
  max-width: 340px;
  padding: 1.1rem 1.25rem;
}
.stat-agenda .stat-icon {
  width: 42px; height: 42px;
  padding: 9px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  flex-shrink: 0;
}
.stat-agenda .stat-body    { flex: 1; min-width: 0; }
.stat-agenda .stat-value   {
  font-size: 1.1rem; font-weight: 600;
  margin-top: 0.15rem;
  text-transform: capitalize;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-agenda .stat-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}
/* Su stat-agenda il pallino in alto a destra non serve */
.stat-agenda .stat-accent { display: none; }

/* ============================================================
   Griglia widget personalizzabile
   ------------------------------------------------------------
   Sostituisce la vecchia .grid-2x2 (2 colonne × 2 righe fisse,
   min-height: 1040px). Quel modello non regge più: il numero di
   widget ora lo decide l'utente, quindi le righe sono implicite
   e alte --wg-row invece che due `1fr` che si spartiscono
   un'altezza decisa a priori.

   L'altezza di riga è FISSA e non 1fr: con righe elastiche,
   aggiungere il quinto widget avrebbe rimpicciolito i quattro
   già presenti: cambi una cosa, se ne muovono altre quattro.

   L'ORDINE VISIVO È `order`, NON L'ORDINE DEI FIGLI.
   Il widget Agenda contiene un iframe di Google Calendar, e
   spostare un iframe nel DOM lo ricarica. Con `order` i nodi
   non si spostano mai: si riordina la pittura, non l'albero.
   Vedi assets/js/widgets.js.
   ============================================================ */
.wg-grid {
  --wg-row: 500px;         /* ≈ la mezza altezza della vecchia 2x2 (1040/2) */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: var(--wg-row);
  gap: 1.25rem;
  margin-bottom: 2.5rem;   /* respiro sotto l'ultimo widget (workaround al
                              collasso del padding-bottom nel flex scroll) */
}

/* --wg-span: 1 = metà, 2 = piena. Lo scrive il JS da data-w. */
.wg {
  grid-column: span var(--wg-span, 1);
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
}
.wg > .panel { flex: 1; min-width: 0; }
/* Una tessera parcheggiata è nel DOM ma fuori dalla griglia. Serve la regola
   esplicita: `display: flex` qui sopra è uno stile d'AUTORE e vince sul
   `display:none` che l'attributo [hidden] eredita dallo user-agent. Senza,
   i widget rimossi resterebbero visibili in griglia E offerti nel vassoio.
   `.wg[hidden]` (specificità 0,2,0) batte `.wg` (0,1,0): niente !important. */
.wg[hidden] { display: none; }

@media (max-width: 1100px) {
  .wg-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(380px, auto);
  }
  /* In colonna singola "larga" non vuole dire niente: ogni tessera è già
     piena. Senza questo, span 2 su una griglia a 1 colonna sborda. */
  .wg { grid-column: span 1; }
}

/* ---- Barra della dashboard --------------------------------
   Occupa lo spazio della vecchia .stat-strip. A riposo contiene
   un solo bottone defilato: la personalizzazione è disponibile,
   non invadente. Chi viene qui per leggere i widget non deve
   pagare pegno per una funzione che userà due volte l'anno. */
.dash-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.25rem 0 1.25rem;
  min-height: 2rem;
  flex-shrink: 0;
}
.dash-bar-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
}
.dash-bar-right {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-soft);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* Come per .wg: `display: inline-flex` è stile d'autore e scavalca il
   display:none di [hidden]. Senza questa riga, "Ripristina" e "Fine"
   (che nascono hidden) resterebbero visibili anche fuori dalla modifica. */
.dash-btn[hidden] { display: none; }
.dash-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.dash-btn:hover { background: var(--surface-hover); color: var(--text); }
.dash-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.dash-btn-primary {
  background: var(--accent);
  color: var(--text-onbrand, #fff);
  border-color: var(--accent);
}
.dash-btn-primary:hover { background: var(--accent-hover); color: var(--text-onbrand, #fff); }

.dash-btn-quiet { border-color: var(--border-strong); }
.dash-btn-quiet:hover { background: var(--surface-hover); }

/* ---- Suggerimento di primo accesso -------------------------
   Compare una volta sola, sopra la griglia, e se ne va per
   sempre. Sta su .surface con un bordo hairline, non su una
   fascia colorata: non è un allarme né una promozione, è una
   frase detta a voce normale. Il colore lo porta solo la
   pastiglia dell'icona. */
.dash-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  margin: 0 0 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  animation: dash-tip-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Trappola nota (vedi .wg / .dash-btn / .sc-item): `display: flex` è stile
   d'autore e batte il display:none ereditato da [hidden]. */
.dash-tip[hidden] { display: none; }

@keyframes dash-tip-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.dash-tip-ic {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.dash-tip-ic svg { width: 18px; height: 18px; }

.dash-tip-body { flex: 1 1 16rem; min-width: 0; }
.dash-tip-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.15rem;
}
.dash-tip-msg {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  max-width: 68ch;
  text-wrap: pretty;
}
.dash-tip-msg strong { color: var(--text-soft); font-weight: 600; }

.dash-tip-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* Sotto i 720px la riga di bottoni a destra strozza il testo: passa sotto,
   allineata a sinistra come il resto del blocco. */
@media (max-width: 720px) {
  .dash-tip { flex-wrap: wrap; }
  .dash-tip-actions { margin-left: 0; width: 100%; }
  .dash-tip-actions .dash-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- Guida della modalità modifica -------------------------
   Tre affordance, tre frasi. Vive solo dentro "Personalizza":
   fuori di lì sarebbe istruzioni per un'azione che non stai
   facendo. Icone identiche a quelle dei .wg-tool sui riquadri,
   così la frase e il bottone si riconoscono l'uno nell'altra. */
.wg-guide {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  padding: 0.7rem 0.9rem;
  margin: -0.35rem 0 1.25rem;
  background: var(--accent-softer);
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-md);
}
.wg-guide[hidden] { display: none; }

.wg-guide-step {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: var(--text-soft);
}
.wg-guide-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent-ink);
}
.wg-guide-ic svg { width: 13px; height: 13px; }

@media (prefers-reduced-motion: reduce) {
  .dash-tip { animation: none; }
}

/* ---- Edit mode --------------------------------------------
   La griglia in modifica si distingue senza travestirsi: le
   tessere restano quelle, prendono una maniglia e un bordo
   d'accento. Niente scuotimento "alla iOS": è decorazione che
   non dice nulla che il cursore già non dica, e su una griglia
   di dati diventa nausea. */
.wg-grid.is-editing .wg > .panel {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow-sm);
}

.wg-tools {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}
.wg-tools[hidden] { display: none; }

.wg-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.wg-tool svg { width: 16px; height: 16px; }
.wg-tool:hover { background: var(--surface-hover); color: var(--text); }
.wg-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wg-tool[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.wg-del:hover { background: var(--danger-soft); color: var(--danger); }

.wg-grip { cursor: grab; touch-action: none; }   /* touch-action: il browser non deve scrollare mentre trascini */
.wg-grip:active { cursor: grabbing; }

/* Tessera in volo. `fixed` la stacca dal flusso: la griglia si richiude
   sotto e le altre tessere fanno FLIP nello spazio liberato. */
.wg.is-dragging {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.35);
  transform: scale(1.015);
  opacity: 0.95;
}
.wg.is-dragging > .panel { border-color: var(--accent); }

body.wg-dragging { cursor: grabbing; user-select: none; }

/* Durante il trascinamento gli iframe (Meteo, Agenda, riquadri personalizzati…)
   NON devono catturare il puntatore. Su Chromium, quando il cursore entra sopra
   un iframe cross-origin la pointer-capture del drag si interrompe: il pointermove
   smette di arrivare e la tessera "scatta". Neutralizzarli qui rende il riordino
   fluido; è reversibile — a fine drag `wg-dragging` sparisce e gli iframe tornano
   interattivi. Vale per QUALSIASI iframe in pagina, non solo per quello trascinato. */
body.wg-dragging iframe { pointer-events: none; }

/* ---- Vassoio dei widget disponibili -----------------------
   L'alternativa era un modale-catalogo. Ma il modale copre
   proprio la griglia che stai componendo, e ti costringe a
   ricordare com'era mentre scegli. Qui griglia e vassoio sono
   due metà della stessa scena: togli una tessera e la vedi
   ricomparire qui sotto. */
.wg-tray {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-bottom: 2.5rem;
}
.wg-tray[hidden] { display: none; }

.wg-tray-head {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-soft);
  margin: 0 0 0.15rem;
}
.wg-tray-sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0 0 0.9rem;
}

.wg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}

.wg-card {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.8rem;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.wg-card[hidden] { display: none; }

.wg-card-ic {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.wg-card-ic svg { width: 17px; height: 17px; }

.wg-card-body { min-width: 0; flex: 1; }
.wg-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.wg-card-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0.1rem 0 0;
  text-wrap: pretty;
}

.wg-card-add {
  flex-shrink: 0;
  align-self: center;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent-ink);
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.wg-card-add:hover { background: var(--accent-soft); border-color: var(--accent-ink); }
.wg-card-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.wg-tray-empty {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
}
.wg-tray-empty[hidden] { display: none; }

/* ---- Dashboard senza widget -------------------------------
   Stato legittimo: si può togliere tutto. Insegna come uscirne
   invece di dire "niente da mostrare". */
.wg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  padding: 3.5rem 1.5rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  margin-bottom: 2.5rem;
}
.wg-empty[hidden] { display: none; }
.wg-empty-title { font-size: 1rem; font-weight: 600; margin: 0; }
.wg-empty-msg {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
}

/* ---- Riga di stato (annunci per screen reader + errori) ----
   Non è visually-hidden: se un salvataggio fallisce lo devono
   sapere tutti, non solo chi usa uno screen reader. A riposo è
   vuota e non occupa spazio. */
.wg-live {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
}
.wg-live:empty { display: none; }
.wg-live.is-error {
  color: var(--danger);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .dash-btn, .wg-tool, .wg-card-add { transition: none; }
  .wg.is-dragging { transform: none; }
}

/* ---- Widget Notifiche / Messaggi ---------------------------
   La lista notifiche riusa .notif-item/.ni-* della campanella:
   stessa notifica, stesso aspetto ovunque. Qui c'è solo il
   contenitore e ciò che la campanella non ha. */
.nw-list, .mw-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Scheletro di caricamento: tre righe della stessa forma degli elementi
   veri, così l'arrivo dei dati non fa saltare il pannello. */
.nw-skel { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.5rem; }
.nw-skel span {
  height: 30px;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-hover) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: nw-shimmer 1.4s ease-in-out infinite;
}
.nw-skel span:nth-child(2) { width: 85%; }
.nw-skel span:nth-child(3) { width: 70%; }

@keyframes nw-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nw-skel span { animation: none; }
}

/* Un pannello alto 500px con tre parole in mezzo si legge come "rotto", non
   come "vuoto". L'icona dà un centro di gravità alla scena e l'azione dice
   cosa si può fare adesso: il vuoto diventa il posto in cui si impara il
   riquadro, non un buco in attesa che arrivi qualcosa. */
.nw-empty {
  margin: auto;
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nw-empty-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
}
.nw-empty-ic svg { width: 21px; height: 21px; }
.nw-empty-title { font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.2rem; }
.nw-empty-msg {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
  max-width: 34ch;
  text-wrap: pretty;
}
.nw-empty-act {
  margin-top: 0.9rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent-ink);
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.nw-empty-act:hover { background: var(--accent-soft); border-color: var(--accent-ink); }
.nw-empty-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.mw-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.mw-item:hover { background: var(--surface-hover); }
.mw-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.mw-av {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-onbrand, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.mw-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.mw-top  { display: flex; align-items: baseline; gap: 0.4rem; }
.mw-who  { font-size: 0.8125rem; color: var(--text); font-weight: 600; }
.mw-conv { font-size: 0.75rem; color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-time { font-size: 0.75rem; color: var(--text-subtle); margin-left: auto; flex-shrink: 0; }
/* Anteprima su una riga: un messaggio lungo non deve allungare la tessera. */
.mw-txt {
  font-size: 0.8125rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Widget Collegamenti rapidi ----------------------------
   Struttura: .panel-head (titolo + ricerca) › .sc-body (lo
   scroll) › N × .sc-group (intestazione + .sc-grid).
   Lo scroll sta sul BODY, non sulla griglia: con i gruppi le
   griglie sono più d'una e ognuna col proprio scroll sarebbe
   un labirinto. */
.sc-head { flex-wrap: wrap; gap: 0.75rem 1rem; }

/* Campo di ricerca: si allarga se c'è spazio, va a capo sotto il titolo
   quando la tessera è stretta (widget a metà larghezza, o mobile). */
.sc-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 15rem;
  margin-left: auto;
}
.sc-search-ic {
  position: absolute;
  left: 0.6rem;
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}
.sc-search-input {
  width: 100%;
  min-width: 0;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: var(--r-sm);
  padding: 0.45rem 0.5rem 0.45rem 1.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Il placeholder è testo che si deve leggere, non un grigio decorativo:
   --text-muted è calibrato ≥4.5:1, --text-subtle no. */
.sc-search-input::placeholder { color: var(--text-muted); opacity: 1; }
.sc-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* La ✕ nativa di Chrome su input[type=search] è grigio chiaro e minuscola:
   la teniamo, ma resa visibile quanto il resto. */
.sc-search-input::-webkit-search-cancel-button { cursor: pointer; }

.sc-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  /* Calibrati sul caso reale: con questi valori gli 11 moduli di un utente
     tipo (4 gruppi) stanno dentro i 420px del pannello senza scorrere.
     Allargandoli si torna a nascondere l'ultimo reparto sotto il bordo. */
  gap: 0.6rem;
  align-content: start;
}

.sc-group { min-width: 0; }
/* Come .wg e .dash-btn: `display` d'autore batte il display:none che [hidden]
   eredita dallo user-agent. Senza queste due righe un gruppo filtrato via
   resterebbe visibile. Vale per OGNI classe con display:* che viene nascosta
   con l'attributo hidden. */
.sc-group[hidden] { display: none; }

.sc-group-name {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
  margin: 0 0 0.35rem;
  padding: 0 0.15rem;
}

.sc-grid {
  display: grid;
  /* auto-fit e non auto-fill: se un gruppo ha un modulo solo, la sua riga si
     allarga invece di lasciare tre colonne vuote accanto. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.35rem;
  align-content: start;
}

.sc-noresult {
  margin: auto;
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-wrap: pretty;
}
.sc-noresult[hidden] { display: none; }
.sc-noresult-btn {
  display: block;
  margin: 0.6rem auto 0;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent-ink);
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.sc-noresult-btn:hover { background: var(--accent-soft); border-color: var(--accent-ink); }
.sc-noresult-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Riga, non poster verticale.
   La tessera quadrata icona-sopra/nome-sotto costava 86px di altezza a testa:
   con i gruppi (ognuno apre una riga nuova, anche se contiene un modulo solo)
   gli 11 moduli di un utente tipo sforavano il pannello di 200px — due interi
   reparti finivano sotto il bordo, invisibili senza scorrere. In riga la
   stessa tessera sta in 44px e i quattro gruppi ci stanno tutti.
   In piu' le etichette lunghe si leggono davvero: "Censimento Societa' e
   Persone fisiche" andava a capo tre volte in una colonna da 116px. */
.sc-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  min-height: 44px;      /* bersaglio comodo anche col pollice (WCAG 2.5.8) */
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: none;
  font-family: inherit;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
/* Stessa trappola di .wg/.dash-btn/.sc-group: `display: flex` qui sopra è
   stile d'AUTORE e vince sul display:none che [hidden] eredita dallo
   user-agent. Senza, una tessera filtrata via dalla ricerca resterebbe in
   griglia. Non rimuovere. */
.sc-item[hidden] { display: none; }
/* Sull'hover si tingono FONDO e BORDO, non il testo. Portare anche
   l'etichetta su --accent-ink la lasciava a 4.31:1 sul proprio fondo tinto
   (misurato): sotto la soglia AA per un testo da 13px, e proprio nel momento
   in cui l'utente la sta leggendo per decidere se cliccare. L'accento resta
   sull'icona, che ha una regola sua e come elemento grafico basta 3:1. */
.sc-item:hover { background: var(--accent-soft); border-color: var(--accent-ink); color: var(--text); }
.sc-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sc-ic { color: var(--accent-ink); display: inline-flex; flex-shrink: 0; }
.sc-ic svg { width: 18px; height: 18px; }
.sc-txt { min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.sc-lbl {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  min-width: 0;
  text-wrap: pretty;
}
/* Qualificatore (sub_group): sta sotto il nome e in tono minore, perche' non
   e' il nome del modulo — e' il reparto che lo rende riconoscibile fra tre
   "Calendario". Su una riga sola, troncato: e' un indizio, non un titolo. */
.sc-sub {
  font-size: 0.6875rem;
  line-height: 1.2;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Nessuna regola di hover sul qualificatore: smorzarlo con opacity lo portava
   a 2.93:1, illeggibile. Resta --text-muted, che sul fondo appena tinto
   dell'hover continua a stare sopra 4.5:1. */
.sc-empty { margin: auto; padding: 1.5rem; text-align: center; font-size: 0.875rem; color: var(--text-muted); }
.sc-empty p { margin: 0; }
.sc-empty .sc-empty-sub { font-size: 0.8125rem; margin-top: 0.25rem; color: var(--text-subtle); }

/* Badge "aggiungi alla home" sul collegamento rapido. Vive solo in modalità
   Personalizza: fuori da lì il collegamento fa il suo mestiere (naviga) e il
   badge non c'è. In edit mode un clic sulla tessera AGGIUNGE il modulo alla
   home (la navigazione è soppressa da widgets.js). */
.sc-item { position: relative; }
.sc-add {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: none;                 /* comparsa solo in edit mode, vedi sotto */
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--text-onbrand, #fff);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
}
.sc-add svg { width: 14px; height: 14px; }
.sc-add-check { display: none; }
.wg-grid.is-editing .sc-add { display: inline-flex; }
/* Il badge e' in overlay sulla riga: senza spazio riservato finirebbe sopra
   la coda delle etichette lunghe. Solo in edit mode, cioe' solo quando c'e'. */
.wg-grid.is-editing .sc-item { padding-right: 2.1rem; }
/* Già in home: il badge diventa una spunta e la tessera si smorza, così si
   vede a colpo d'occhio cosa è già stato aggiunto. */
.wg-grid.is-editing .sc-item.is-added { opacity: 0.55; }
.sc-item.is-added .sc-add { background: var(--success, #16a34a); }
.sc-item.is-added .sc-add-plus  { display: none; }
.sc-item.is-added .sc-add-check { display: inline-block; }
/* In edit mode il collegamento non naviga più: lo dice il cursore. */
.wg-grid.is-editing .sc-item { cursor: copy; }
.wg-grid.is-editing .sc-item.is-added { cursor: default; }

/* ---- Widget Scorciatoia a un modulo (modcard) --------------
   La griglia dà a ogni tessera una riga alta (500px): la scorciatoia non è una
   barretta persa in un box vuoto ma un POSTER verticale, centrato — un launcher
   del modulo. Icona grande, nome, gruppo e il pulsante "Apri". Nessun iframe:
   naviga al modulo interno (data-nav). */
.modcard-panel { overflow: hidden; padding: 0; }
.modcard {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 24px;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: center;
  color: var(--text);
  cursor: pointer;
  transition: background 0.14s;
}
.modcard:hover { background: var(--surface-hover); }
.modcard:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.modcard-ic {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.modcard-ic svg { width: 32px; height: 32px; }
.modcard-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  max-width: 100%;
  text-wrap: balance;
}
.modcard-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.modcard-go {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 9px 16px;
  border-radius: 999px;
}
.modcard-go svg { width: 15px; height: 15px; }

/* ---- Widget Riquadro personalizzato (embed) ----------------
   Un iframe che riempie la tessera. Il titolo tronca su una riga
   (un URL o un nome lungo non deve allargare l'intestazione). */
.embed-widget { overflow: hidden; }
.embed-head-txt { min-width: 0; }        /* permette il troncamento del titolo */
.embed-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.embed-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background: var(--surface-2);   /* si vede finché l'iframe carica / se resta bianco */
}
.embed-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Widget "Immagine" (logo/stemma personale). contain = intera con margini,
   cover = riempie il riquadro ritagliando i bordi. */
.img-widget { overflow: hidden; }
.img-body {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--surface-2); padding: 8px;
}
.img-el { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.img-widget[data-fit="cover"] .img-body { padding: 0; }
.img-widget[data-fit="cover"] .img-el { width: 100%; height: 100%; object-fit: cover; }

/* Modalità "scorciatoia": per i siti che non si incorniciano (YouTube, testate…)
   il riquadro diventa una tessera cliccabile che apre il sito in una scheda. */
.embed-widget.is-link .embed-frame { display: none; }
.embed-widget:not(.is-link) .embed-shortcut { display: none; }
.embed-shortcut {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; text-decoration: none; color: var(--text);
  transition: background .14s;
}
.embed-shortcut:hover { background: var(--surface-hover); }
.embed-sc-ic {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
}
.embed-sc-ic svg { width: 22px; height: 22px; }
.embed-sc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.embed-sc-name { font-size: 0.95rem; font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.embed-sc-host { font-size: 0.8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.embed-sc-go {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.82rem; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); padding: 7px 12px; border-radius: 999px;
}
.embed-sc-go svg { width: 14px; height: 14px; }
.embed-shortcut:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

/* Scheda "Crea": tratteggiata, si distingue dalle schede-widget piene
   perché è un'azione (creare), non un widget da trascinare. */
.wg-card-new { border-style: dashed; }
.wg-card-ic-dashed { background: var(--surface-2); color: var(--accent-ink); }
.wg-card-new.is-disabled { opacity: 0.6; }
.wg-card-add:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Dialog crea/modifica riquadro -------------------------
   <dialog> nativo: centrato dal browser, focus-trap e Esc gratis.
   Lo stiliamo solo nell'aspetto, non nel comportamento. */
.wg-dlg {
  width: min(30rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--panel-bg);
  color: var(--text);
  box-shadow: 0 24px 60px -18px rgba(15, 23, 42, 0.45);
}
.wg-dlg::backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

/* Modale di conferma To-Do (riusa il guscio .wg-dlg) — sostituisce confirm() */
.td-confirm .td-confirm-form { padding: 1.35rem 1.4rem 1.25rem; display: flex; flex-direction: column; }
.td-confirm-hd { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.td-confirm-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-ink);
}
.td-confirm-ic svg { width: 21px; height: 21px; }
.td-confirm-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.td-confirm-msg { margin: 0 0 1.2rem; font-size: 0.9rem; line-height: 1.55; color: var(--text-soft); }
.td-confirm-msg:empty { display: none; margin: 0; }
.td-confirm-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }

/* Sotto-attività (gerarchia padre-figlio nella To-Do) */
.todo-sub { margin-left: 1.9rem; }
.todo-sub .todo-grip { visibility: hidden; }        /* i figli non si trascinano tra i padri */
.todo-sub .todo-text { font-size: 0.9rem; }
.todo-collapse {
  flex: 0 0 auto; width: 22px; height: 22px; margin-right: -2px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--text-muted); cursor: pointer;
  border-radius: 6px; transition: transform .15s, background .12s, color .12s;
}
/* Le righe SENZA freccetta riservano lo stesso spazio: altrimenti i task con
   sotto-attività partivano 32px più a destra di tutti gli altri e le caselle
   non erano in colonna. Uno spaziatore vuoto costa meno di riposizionare la
   freccetta fuori dal flusso, e non tocca l'allineamento verticale. */
.todo-item:not(.todo-parent)::before {
  content: ""; flex: 0 0 auto; width: 22px; margin-right: -2px;
}
.todo-collapse svg { width: 15px; height: 15px; }
.todo-collapse:hover { background: var(--surface-hover); color: var(--text); }
.todo-parent.collapsed .todo-collapse { transform: rotate(-90deg); }
.todo-subprog {
  display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 800;
  color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px;
}
.todo-subprog.full { color: var(--success, #16a34a); background: var(--success-soft, rgba(22,163,74,.13)); }

/* Input nel modale di conferma (es. nome del task padre) */
.td-confirm-input {
  width: 100%; box-sizing: border-box; margin: 0 0 1.15rem; padding: 0.55rem 0.7rem;
  font: inherit; font-size: 0.92rem; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); outline: none; transition: border-color .12s, box-shadow .12s;
}
.td-confirm-input:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.td-confirm-input.shake { animation: td-shake .35s; }
@keyframes td-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.wg-dlg-form { padding: 1.25rem; display: flex; flex-direction: column; }
.wg-dlg-title { font-size: 1.0625rem; font-weight: 700; margin: 0 0 1rem; }

.wg-dlg-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 0.3rem;
}
.wg-dlg-label:not(:first-of-type) { margin-top: 0.9rem; }
.wg-dlg-opt { font-weight: 400; color: var(--text-muted); }

.wg-dlg-input {
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.7rem;
  width: 100%;
}
.wg-dlg-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.wg-dlg-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0.4rem 0 0;
  text-wrap: pretty;
}
.wg-dlg-err {
  font-size: 0.8125rem;
  color: var(--danger);
  font-weight: 500;
  margin: 0.5rem 0 0;
}
.wg-dlg-err[hidden] { display: none; }

.wg-dlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .wg-dlg::backdrop { backdrop-filter: none; }
}

/* ---- Panel ------------------------------------------------ */
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  box-shadow: var(--shadow-sm);
}

.panel-full {
  flex: 1;
  min-height: 0;
}

.panel-head {
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.panel-eyebrow {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}
.panel-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.2rem 0 0;
}
.panel-meta {
  font-size: 0.8125rem;
  color: var(--text-soft);
}
.panel-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  text-decoration: none;
  color: var(--accent-ink);
  font-weight: 500;
  padding: 0.35rem 0.65rem;
  border-radius: var(--r-sm);
  transition: background 0.15s;
  background: none; border: 0; cursor: pointer; font-family: inherit;   /* anche come <button> */
}
.panel-link:hover { background: var(--accent-soft); }
.panel-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.panel-head-right { display: inline-flex; align-items: center; gap: 0.5rem; }

/* ---- News ticker (Sole 24 Ore / Fisco e Tasse) ----------- */
.news-ticker {
  flex: 1 1 auto;
  position: relative;
  padding: 0.75rem 0.9rem 0.4rem;
  min-height: 220px;
  overflow: hidden;
  display: flex;
}
.news-ticker-loading,
.news-ticker-error {
  color: var(--text-subtle);
  font-size: 0.85rem;
  text-align: center;
}
.news-ticker-error .news-ticker-retry {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  font: inherit; font-size: 12px;
  color: var(--accent-ink);
  cursor: pointer;
}
.news-ticker-retry:hover { background: var(--accent-soft); }

/* Layout full-cover: la foto prende tutto il ticker, titolo sovraimposto
   in basso su gradient scuro (stile card Reuters/Bloomberg). */
.news-ticker-item {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  text-decoration: none;
  color: #fff;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.news-ticker-item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,0.55) 65%,
    rgba(0,0,0,0.92) 100%
  );
  pointer-events: none;
}

.news-ticker-thumb {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  background: rgba(0,0,0,0.04);
}
.news-ticker-thumb-empty {
  display: grid; place-items: center;
  font-size: 48px;
  color: rgba(255,255,255,0.85);
  background: linear-gradient(135deg, #8b5a3c 0%, #a14300 100%);
  width: 100%; height: 100%;
}

.news-ticker-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.1rem;
  z-index: 2;
}
.news-ticker-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff !important;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.35rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.9);
}
.news-ticker-meta {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.95) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* Crossfade fra notizia "in uscita" e "in entrata" */
.news-ticker-item.is-leaving {
  opacity: 0;
  transform: translateY(-4px);
}
.news-ticker-item.is-entering {
  opacity: 0;
  transform: translateY(6px);
}

/* Dots indicatori posizione */
.news-ticker-dots {
  display: flex; justify-content: center;
  gap: 6px;
  padding: 8px 0 14px;
  flex-shrink: 0;
}
.news-dot {
  width: 6px; height: 6px; border-radius: 50%;
  padding: 0; border: none;
  background: var(--border-strong);
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.news-dot:hover   { background: var(--text-subtle); }
.news-dot.active {
  background: var(--accent);
  transform: scale(1.3);
}

/* Vista fullscreen: GRID di card (un articolo per card), non un ticker
   a rotazione. Ogni card ha foto + titolo + meta. */
.panel-full .news-ticker.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
  align-items: stretch;
  padding: 1.4rem 1.75rem;
  min-height: 0;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.news-card {
  display: flex; flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.news-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.news-card-thumb {
  width: 100%; height: 160px;
  object-fit: cover;
  background: rgba(0,0,0,0.04);
  display: block;
}
.news-card-thumb-empty {
  display: grid; place-items: center;
  font-size: 40px;
  color: var(--text-subtle);
  background: var(--news-thumb-bg);
}
.news-card-body {
  padding: 0.85rem 1rem 1rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  flex: 1;
}
.news-card-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-meta {
  font-size: 0.72rem;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-top: auto;
}

/* La card del tema Sole ha un accento arancio sulla border-top */
.news-widget[data-news-source="sole24"] .news-card {
  border-top: 3px solid var(--s24-rule);
  background: var(--s24-card);
}

/* Logo editoriale della fonte in sostituzione del title testuale */
.panel-logo {
  display: block;
  height: 30px;
  width: auto;
  max-width: 170px;
  margin-top: 0.1rem;
}
.panel-full .panel-logo { height: 44px; max-width: 240px; }

/* sole24.png ha il canale alpha e sta bene sulla carta sepia; fiscoetasse.png
   NO: è un PNG a fondo bianco opaco, che in scuro diventerebbe una lastra
   bianca a caso nell'angolo del widget. Stessa cura del logo di sidebar: una
   piastra bianca che lo abbraccia, così sembra voluto. In chiaro le variabili
   valgono transparent/0 e non cambia niente. */
.news-widget[data-news-source="fiscoetasse"] .panel-logo {
  background: var(--logo-plate-bg);
  padding: var(--logo-plate-pad);
  border-radius: var(--logo-plate-r);
  box-sizing: content-box;
}

/* ---- Tema Sole 24 Ore: rosa salmone tipico dei quotidiani finanziari ----
   Il salmone è l'identità della testata (è il colore della carta), quindi in
   scuro NON si appiattisce a grigio: diventa una carta "sepia" profonda, che
   resta riconoscibilmente Sole 24 e smette di essere una lastra chiara in
   mezzo a una UI scura. Tutti i valori passano dalle variabili --s24-*, così
   il ribaltamento vive nei due blocchi di mapping in cima al file. */
.news-widget[data-news-source="sole24"] {
  background: var(--s24-bg);
  border-color: var(--s24-border);
}
.news-widget[data-news-source="sole24"] .panel-head {
  background: var(--s24-head);
  border-bottom-color: var(--s24-border);
}
.news-widget[data-news-source="sole24"] .panel-eyebrow {
  color: var(--s24-eyebrow);
  font-weight: 600;
}
.news-widget[data-news-source="sole24"] .panel-title { color: var(--s24-title); }
/* NB: news-ticker-title e news-ticker-meta restano bianchi (testo sovraimposto
   alla foto, vedi `.news-ticker-item` + gradient scuro). */
.news-widget[data-news-source="sole24"] .panel-link        { color: var(--s24-link); }
.news-widget[data-news-source="sole24"] .panel-link:hover  { background: var(--s24-link-soft); }
.news-widget[data-news-source="sole24"] .news-ticker-item:hover {
  background: var(--s24-item-hover);
}
.news-widget[data-news-source="sole24"] .news-dot          { background: var(--s24-dot); }
.news-widget[data-news-source="sole24"] .news-dot:hover    { background: var(--s24-dot-hover); }
.news-widget[data-news-source="sole24"] .news-dot.active   { background: var(--s24-link); }

/* ---- Todo widget ------------------------------------------ */
.todo-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.todo-add-row { display: flex; align-items: center; gap: 0.5rem; }
.todo-add-btn {
  flex: 0 0 auto; width: 38px; height: 38px; border: none; background: var(--accent);
  color: #fff; cursor: pointer; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.todo-add-btn svg { width: 18px; height: 18px; }
.todo-add-btn:hover { background: var(--accent-hover); }
.todo-add-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.todo-form .todo-add-row .todo-input {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--field-border);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: var(--surface);
  outline: none;
  border-radius: var(--r-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.todo-form .todo-input:focus {
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.todo-form .todo-tag-input {
  border: 1px solid var(--field-border);
  background: var(--surface);
  padding: 0.45rem 0.6rem;
  font-size: 0.8125rem;
  outline: none;
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--text-soft);
}
.todo-form button[type="submit"] {
  width: 36px; height: 36px;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: background 0.15s;
  border-radius: var(--r-md);
  font-weight: 400;
}
.todo-form button[type="submit"]:hover { background: var(--accent-hover); }

.todo-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  overflow-y: auto;
  flex: 1;
}
.todo-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-md);
  transition: background 0.15s;
}
.todo-item:hover { background: var(--surface-hover); }
/* Separatore sottile tra i task (look "lista" professionale) */
.todo-item:not(:last-child)::after {
  content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0;
  height: 1px; background: var(--border); opacity: .55; pointer-events: none;
}
/* Maniglia di riordino righe (drag su/giù) — visibile all'hover */
.todo-grip {
  flex-shrink: 0; align-self: center; display: inline-flex; align-items: center;
  margin: 0 -0.15rem 0 -0.3rem; color: var(--text-subtle); cursor: grab;
  opacity: 0; transition: opacity .12s, color .12s;
}
.todo-grip svg { width: 16px; height: 16px; }
.todo-item:hover .todo-grip { opacity: .5; }
.todo-grip:hover { color: var(--text-soft); opacity: .9; }
.todo-grip:active { cursor: grabbing; }
@media (hover: none) { .todo-grip { opacity: .45; } }
.todo-item.todo-dragging { opacity: .45; background: var(--surface-hover); }
.todo-item.todo-drop-above { box-shadow: inset 0 2px 0 0 var(--accent); }
.todo-item.todo-drop-below { box-shadow: inset 0 -2px 0 0 var(--accent); }

.todo-check {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--field-border);
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
  border-radius: 5px;
}
.todo-check:checked {
  background: var(--accent);
  border-color: var(--accent-ink);
}
.todo-check:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 0px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.todo-body { flex: 1; min-width: 0; }
.todo-text {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  word-wrap: break-word;
}
.todo-item.is-done .todo-text {
  text-decoration: line-through;
  color: var(--text-subtle);
  font-weight: 400;
}
.todo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.4rem;
}
/* Data di creazione: metadato discreto */
.todo-created { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.68rem; color: var(--text-subtle); }
.todo-created svg { width: 12px; height: 12px; opacity: .85; }
/* "Completata da …": chip verde di conferma */
.todo-doneby { display: inline-flex; align-items: center; gap: 0.28rem; font-size: 0.68rem; font-weight: 700; color: var(--badge-done-ink); background: var(--badge-done-bg); padding: 0.1rem 0.5rem; border-radius: 999px; }
.todo-doneby svg { width: 12px; height: 12px; }
.todo-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.todo-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Pill scadenza con color-coding secondo quanto manca */
.todo-due {
  display: inline-flex; align-items: center;
  font-size: 0.7rem; font-weight: 600;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.todo-due-overdue { color: var(--due-over-ink); background: var(--due-over-bg); border-color: var(--due-over-bd); }
.todo-due-today   { color: var(--due-today-ink); background: var(--due-today-bg); border-color: var(--due-today-bd); }
.todo-due-soon    { color: var(--due-soon-ink); background: var(--due-soon-bg); border-color: var(--due-soon-bd); }
.todo-due-future  { color: var(--text-muted); background: var(--surface-2); border-color: var(--border); }
.todo-item.is-done .todo-due { opacity: .55; }

/* Input date nel form create */
.todo-form .todo-due-input {
  border: 1px solid var(--field-border);
  background: var(--surface);
  padding: 0.42rem 0.55rem;
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--text-soft);
  outline: none;
  border-radius: var(--r-md);
  cursor: pointer;
  min-width: 0;
  max-width: 140px;
}
.todo-form .todo-due-input:focus {
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Edit in-place: textarea inline al posto del testo */
.todo-edit-input {
  width: 100%;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--accent-ink);
  border-radius: var(--r-sm);
  padding: 0.25rem 0.45rem;
  outline: none;
  resize: none;
  overflow-y: auto;
  box-shadow: 0 0 0 3px var(--accent-soft);
}


.todo-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ---- To-Do condivise: chip opzioni, menu, filtro, badge, autore, picker ---- */
/* Riga chip: Categoria · Scadenza · Condivisione */
.todo-opts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.todo-opt {
  position: relative; display: inline-flex; align-items: center; gap: 0.4rem;
  font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.34rem 0.7rem; cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.todo-opt:hover { border-color: var(--accent-ink); color: var(--text-soft); }
.todo-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.todo-opt .ic { display: inline-flex; line-height: 0; }
.todo-opt .ic svg { width: 15px; height: 15px; }
.todo-opt .cx { width: 12px; height: 12px; opacity: .55; }
.todo-opt.is-set { border-color: transparent; color: var(--accent-ink); background: var(--accent-soft); }
.todo-opt.is-set .cx { opacity: .8; }

/* Pulsante "Usa modello": azione, non un filtro → riempito d'accento, staccato
   dalle chip. Compare solo con una categoria che ha task predefiniti. */
.todo-tpl-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto;
  font: inherit; font-size: 0.75rem; font-weight: 700; color: var(--text-onbrand, #fff);
  background: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  padding: 0.34rem 0.75rem; cursor: pointer; transition: background .15s, border-color .15s;
}
.todo-tpl-btn[hidden] { display: none; }
.todo-tpl-btn:hover { background: var(--accent-hover, var(--accent-ink)); border-color: var(--accent-hover, var(--accent-ink)); }
.todo-tpl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.todo-tpl-btn .ic { display: inline-flex; line-height: 0; }
.todo-tpl-btn .ic svg { width: 15px; height: 15px; }
.todo-tpl-n { font-size: 0.72rem; font-weight: 800; background: rgba(255,255,255,.24); border-radius: 999px; padding: 0 6px; line-height: 1.5; }
/* La chip Scadenza contiene un input date trasparente che copre la chip */
.todo-opt-date .todo-due-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0;
}

/* Menu popover (condivisione / categoria) — riusa .todo-pop */
.todo-mrow { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0.55rem; border-radius: var(--r-sm); cursor: pointer; }
.todo-mrow:hover { background: var(--surface-hover); }
.todo-mrow.disabled { opacity: .55; cursor: not-allowed; }
.todo-mrow .mic { flex-shrink: 0; display: inline-flex; line-height: 0; color: var(--text-muted); margin-top: 1px; }
.todo-mrow .mic svg { width: 17px; height: 17px; }
.todo-mrow.active .mic { color: var(--accent-ink); }
.todo-mrow .mt { display: flex; flex-direction: column; min-width: 0; }
.todo-mrow .mt b { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.todo-mrow .mt span { font-size: 0.7rem; color: var(--text-muted); }
.todo-mrow .mck { margin-left: auto; color: var(--accent-ink); display: inline-flex; line-height: 0; align-self: center; }

/* Chip visibilità obbligatoria: finché non scegli, spicca */
.todo-opt.required { border-color: var(--accent-ink); border-style: dashed; color: var(--accent-ink); background: var(--accent-soft); }
.todo-opt.required:hover { border-style: dashed; }
@keyframes todoShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.todo-opt.shake { animation: todoShake .32s ease; }
@media (prefers-reduced-motion: reduce) { .todo-opt.shake { animation: none; } }

/* Date-picker moderno (calendario custom) — riusa .todo-pop */
.todo-cal { width: 256px; padding: 10px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-title { font-size: 0.85rem; font-weight: 800; color: var(--text); text-transform: capitalize; }
.cal-nav { background: none; border: 0; cursor: pointer; color: var(--text-muted); padding: 5px; border-radius: var(--r-sm); display: inline-flex; line-height: 0; }
.cal-nav:hover { background: var(--surface-hover); color: var(--text); }
.cal-nav svg { width: 18px; height: 18px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-wd { font-size: 0.6rem; font-weight: 700; color: var(--text-subtle); text-align: center; padding: 4px 0; text-transform: uppercase; }
.cal-day { aspect-ratio: 1; border: 0; background: none; cursor: pointer; border-radius: var(--r-sm); font: inherit; font-size: 0.78rem; color: var(--text); display: flex; align-items: center; justify-content: center; transition: background .12s; }
.cal-day:hover { background: var(--accent-soft); }
.cal-day.today { font-weight: 800; color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.cal-day.sel { background: var(--accent); color: #fff; font-weight: 700; }
.cal-day.sel:hover { background: var(--accent-hover); }
.cal-day.blank { visibility: hidden; cursor: default; }
.cal-foot { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.cal-foot button { flex: 1; font: inherit; font-size: 0.72rem; font-weight: 700; padding: 7px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); }
.cal-foot button:hover { background: var(--surface-hover); }
.cal-foot .cal-clear { color: var(--danger); }

/* Barra filtro Tutti / Personali / Condivisi */
.todo-filter { display: flex; gap: 0.3rem; padding: 0.6rem 1rem 0; }
.todo-fbtn {
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); font: inherit; font-size: 0.75rem; font-weight: 600;
  padding: 0.28rem 0.7rem; border-radius: 999px; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.todo-fbtn:hover { background: var(--surface-hover); color: var(--text-soft); }
.todo-fbtn.is-active { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.todo-fbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Badge visibilità sul task */
.todo-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.5rem;
  border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.todo-badge.reparto { color: var(--accent-ink); background: var(--accent-soft); }
.todo-badge.custom  { color: var(--badge-custom-ink); background: var(--badge-custom-bg); }

/* Autore (task condivisi da altri) */
.todo-author { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; color: var(--text-muted); }
.todo-av {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.6rem; font-weight: 800; letter-spacing: .02em;
  position: relative; overflow: hidden;
}
/* La foto sta SOPRA le iniziali e le copre; se non carica, il JS la rimuove e
   sotto restano le iniziali. Inquadratura alta: i volti stanno in cima allo scatto. */
.todo-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.todo-item.not-mine { background: linear-gradient(90deg, var(--accent-softer, var(--surface-2)) 0, transparent 60%); }

/* Bottone nota (accanto a condividi/elimina) */
/* Azioni riga (nota / condividi / elimina) — pulsanti-icona coerenti, SEMPRE visibili */
.todo-act {
  flex-shrink: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; color: var(--text-subtle);
  transition: color 0.15s, background 0.15s;
}
.todo-act svg { width: 15px; height: 15px; }
.todo-act:hover { background: var(--surface-2); color: var(--text); }
.todo-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.todo-act-note:hover, .todo-act-share:hover { color: var(--accent-ink); background: var(--accent-soft); }
.todo-act-note.has { color: var(--accent-ink); }   /* nota presente: indicatore in accent */
.todo-act-del:hover { color: var(--danger); background: rgba(220, 38, 38, 0.09); }
/* Editor nota */
.todo-note-pop { width: 288px; }
.todo-note-input {
  width: 100%; min-height: 96px; resize: vertical; box-sizing: border-box;
  font-family: inherit; font-size: 0.82rem; line-height: 1.45; color: var(--text);
  background: var(--surface); border: 1px solid var(--field-border); border-radius: var(--r-sm);
  padding: 8px 10px; outline: none;
}
.todo-note-input:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Testo task cliccabile + anteprima nota (stile Keep) */
.todo-text { cursor: pointer; }
.todo-note-snippet {
  font-size: 0.78rem; color: var(--text-muted); margin-top: 3px; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4;
}

/* Provenienza di una sotto-attività condivisa da sola: dice a quale lista
   appartiene, che altrimenti non si saprebbe (il padre non è condiviso). */
.todo-parent-hint {
  font-size: 0.74rem; color: var(--text-muted); margin-top: 3px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Scheda dettaglio task (apribile, stile Google Keep) ---- */
.todo-detail-back {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1300;
  display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px;
}
.todo-detail {
  width: 100%; max-width: 540px; background: var(--surface); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px;
  animation: tdIn .16s cubic-bezier(.2,.7,.2,1);
}
@keyframes tdIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .todo-detail { animation: none; } }
.td-top { display: flex; align-items: center; gap: 12px; }
.td-top .todo-check { margin-top: 0; }
.td-title {
  flex: 1; min-width: 0; border: 0; background: none; font-family: inherit;
  font-size: 1.15rem; font-weight: 700; color: var(--text); outline: none; padding: 2px 0;
}
.todo-detail.is-done .td-title { text-decoration: line-through; color: var(--text-subtle); }
.td-note {
  border: 0; background: none; resize: none; outline: none; font-family: inherit;
  font-size: 0.95rem; line-height: 1.55; color: var(--text-soft); min-height: 56px; padding: 0;
}
.td-note::placeholder, .td-title::placeholder { color: var(--text-subtle); }
.td-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.td-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 0.72rem; color: var(--text-subtle); padding-top: 10px; border-top: 1px solid var(--border); }
.td-foot { display: flex; align-items: center; gap: 10px; }
.td-spacer { flex: 1; }
.td-del { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; color: var(--text-muted); font: inherit; font-size: 0.82rem; font-weight: 600; padding: 7px 11px; border-radius: var(--r-sm); }
.td-del svg { width: 15px; height: 15px; }
.td-del:hover { color: var(--danger); background: rgba(220, 38, 38, .09); }
.td-close { background: var(--accent); color: #fff; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.85rem; padding: 9px 20px; border-radius: var(--r-md); }
.td-close:hover { background: var(--accent-hover); }
.td-close:focus-visible, .td-del:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Toolbar: filtro + vista + categorie -------------------- */
.todo-toolbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.6rem 1rem 0; flex-shrink: 0; }
.todo-toolbar .todo-filter { padding: 0; }
.todo-toolbar-right { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.todo-cats-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  font: inherit; font-size: 0.75rem; font-weight: 600; padding: 0.32rem 0.65rem;
  border-radius: 999px; cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.todo-cats-btn svg { width: 14px; height: 14px; }
.todo-cats-btn:hover { border-color: var(--accent-ink); color: var(--accent-ink); background: var(--accent-soft); }
.todo-cats-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.todo-viewswitch { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px; gap: 2px; }
.todo-vbtn {
  display: inline-flex; align-items: center; gap: 0.35rem; border: 0; background: none;
  color: var(--text-muted); font: inherit; font-size: 0.75rem; font-weight: 600;
  padding: 0.28rem 0.65rem; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s;
}
.todo-vbtn svg { width: 14px; height: 14px; }
.todo-vbtn:hover { color: var(--text); }
.todo-vbtn.is-active { background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.todo-vbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Pill di fase (vista lista) */
.todo-phase {
  display: inline-flex; align-items: center; font-size: 0.66rem; font-weight: 700;
  padding: 0.1rem 0.5rem; border-radius: 999px; white-space: nowrap; color: var(--pc, var(--text-muted));
  background: color-mix(in srgb, var(--pc, #64748b) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc, #64748b) 26%, transparent);
}

/* Righe "azione" nei menu (crea/gestisci categoria) */
.todo-mrow.action .mt b { font-weight: 600; color: var(--accent-ink); }
.todo-mrow.action .mic { color: var(--accent-ink); }
.todo-mrow.sep { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 0.6rem; }

/* ---- Vista Bacheca (kanban) -------------------------------- */
.todo-board { display: flex; gap: 12px; padding: 12px 14px 14px; overflow-x: auto; overflow-y: hidden; flex: 1; align-items: stretch; min-height: 0; }
.tk-col {
  flex: 1 1 0; min-width: 250px; display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  min-height: 0; transition: border-color .15s, background .15s;
}
.tk-col.tk-over { border-color: var(--accent-ink); background: var(--accent-soft); }
.tk-col-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border); font-size: 0.78rem; font-weight: 800; color: var(--text); }
.tk-col-head .tk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pc); flex-shrink: 0; }
.tk-col-head .tk-col-t { flex: 1; min-width: 0; }
.tk-col-head .tk-col-n { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0.03rem 0.45rem; }
.tk-col-body { flex: 1; overflow-y: auto; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; min-height: 60px; }
.tk-empty { text-align: center; color: var(--text-subtle); font-size: 0.9rem; padding: 0.9rem 0; opacity: .6; }

.tk-card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 0.6rem 0.7rem; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, border-color .15s, opacity .1s;
}
.tk-card:hover { border-color: var(--accent-ink); box-shadow: var(--shadow-md); }
.tk-card[draggable="true"] { cursor: grab; }
.tk-card.tk-drag { opacity: .45; }
.tk-card.not-mine { background: linear-gradient(90deg, var(--accent-softer, var(--surface-2)) 0, var(--surface) 60%); }
.tk-card-t { font-size: 0.82rem; font-weight: 600; color: var(--text); line-height: 1.35; word-break: break-word; }
.tk-card.is-done .tk-card-t { text-decoration: line-through; color: var(--text-subtle); }
.tk-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.45rem; }
.tk-card-meta .tk-note { display: inline-flex; color: var(--text-subtle); }
.tk-card-meta .tk-note svg { width: 13px; height: 13px; }
.tk-card-foot { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem; }
.tk-card-foot .todo-av { width: 20px; height: 20px; font-size: 0.62rem; }
.tk-done-av { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--success); }

/* ---- Selettore fase nella scheda dettaglio ------------------ */
.td-status { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.td-status-lbl { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.td-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.td-seg-btn { border: 0; background: none; font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); padding: 0.3rem 0.7rem; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.td-seg-btn:hover:not(:disabled) { color: var(--text); }
.td-seg-btn.active { background: var(--surface); color: var(--pc); box-shadow: var(--shadow-sm); }
.td-seg-btn:disabled { opacity: .55; cursor: default; }
.td-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- Modale gestione categorie personali -------------------- */
.todo-cat-back { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1300; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; }
.todo-cat-mgr {
  width: 100%; max-width: 440px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; max-height: 84vh;
  animation: tdIn .16s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) { .todo-cat-mgr { animation: none; } }
.tcm-head { display: flex; align-items: flex-start; gap: 10px; }
.tcm-head h3 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--text); }
.tcm-head p { margin: 2px 0 0; font-size: 0.76rem; color: var(--text-muted); }
.tcm-x { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--text-subtle); display: inline-flex; padding: 4px; border-radius: var(--r-sm); }
.tcm-x svg { width: 18px; height: 18px; }
.tcm-x:hover { background: var(--surface-2); color: var(--text); }
.tcm-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.tcm-empty { font-size: 0.8rem; color: var(--text-muted); padding: 8px 2px; }
.tcm-addlbl { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-subtle); margin-top: 4px; }
.tcm-row { display: flex; align-items: center; gap: 8px; }
.tcm-sw { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; transition: box-shadow .12s; }
.tcm-sw:hover { box-shadow: 0 0 0 2px var(--accent); }
.tcm-name { flex: 1; min-width: 0; border: 1px solid var(--field-border); background: var(--surface); border-radius: var(--r-sm); padding: 0.45rem 0.6rem; font: inherit; font-size: 0.85rem; color: var(--text); outline: none; }
.tcm-name:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.tcm-del { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: var(--r-sm); color: var(--text-subtle); cursor: pointer; }
.tcm-del svg { width: 15px; height: 15px; }
.tcm-del:hover { color: var(--danger); background: rgba(220, 38, 38, .09); }
.tcm-add-btn { flex-shrink: 0; border: 0; background: var(--accent); color: #fff; font: inherit; font-weight: 700; font-size: 0.8rem; padding: 0.45rem 0.9rem; border-radius: var(--r-sm); cursor: pointer; }
.tcm-add-btn:hover { background: var(--accent-hover); }
.tcm-foot { display: flex; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--border); }
.tcm-done { background: var(--accent); color: #fff; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.85rem; padding: 0.5rem 1.2rem; border-radius: var(--r-md); }
.tcm-done:hover { background: var(--accent-hover); }

/* Popover colore + mini-form nuova categoria */
.todo-colors { width: 214px; padding: 10px; }
.tc-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.tc-sw { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; transition: transform .1s, box-shadow .1s; }
.tc-sw:hover { transform: scale(1.14); }
.tc-sw.sel { box-shadow: 0 0 0 2px var(--accent); }
.tc-custom { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--text-soft); cursor: pointer; }
.tc-custom input[type="color"] { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: var(--r-sm); background: none; cursor: pointer; padding: 0; }
.todo-catnew { width: 244px; }
.tcn-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.tcn-name { flex: 1; min-width: 0; border: 1px solid var(--field-border); background: var(--surface); border-radius: var(--r-sm); padding: 0.4rem 0.55rem; font: inherit; font-size: 0.82rem; color: var(--text); outline: none; }
.tcn-name:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---- Pagina Impostazioni ----------------------------------- */
/* Il pannello fa da pagina: niente sfondo/bordo, così le sezioni-card non
   risultano superfici annidate. */
/* `display: block` e non il flex ereditato da .panel: questa vista è un
   documento che scorre, non una colonna flex. Da flex-container il contenuto
   non si restringeva sotto la propria larghezza naturale e su schermi stretti
   veniva TAGLIATO a destra (overflow-x nascosto, quindi senza nemmeno una
   barra di scorrimento a segnalarlo). Difetto preesistente, emerso misurando. */
.settings-root { display: block; overflow-y: auto; padding: 0; background: transparent; border: 0; box-shadow: none; }
/* Tetto largo abbastanza per TRE colonne comode e contenuto CENTRATO: con
   `margin: 0` tutto lo spazio avanzato si accumulava a destra, e questa era
   l'unica vista del progetto con un limite di larghezza. Un tetto serve
   comunque — senza, su un monitor grande le schede diventano cinque colonne
   strette e l'occhio deve attraversare mezzo schermo per leggere una frase. */
.settings-wrap { max-width: 1560px; margin: 0 auto; padding: 26px 26px 40px; }
/* Impaginato a COLONNE, non a righe. Con una griglia ogni riga prende
   l'altezza della scheda più alta — «Aspetto» è il doppio delle altre — e
   sotto le vicine resta un vuoto grande quanto loro: era questo a far
   sembrare la pagina sballata, e ogni scheda nuova lo peggiorava.
   Le colonne fanno scorrere le schede una sotto l'altra riempiendo i buchi.
   Due colonne e non tre: dentro i 1180px del contenitore, a tre le
   descrizioni andavano a capo ogni quattro parole. */
/* `columns: <larghezza>` invece di un numero fisso: il browser ne mette
   quante ne stanno, quindi 1 su telefono, 2 su portatile, 3 su monitor largo,
   senza breakpoint da mantenere. 430px è la soglia sotto cui le descrizioni
   iniziano ad andare a capo ogni poche parole. */
.settings-grid { columns: 430px; column-gap: 16px; }
/* ⚠️ Sotto la soglia serve `columns: auto`: una larghezza di colonna fissa
   impone al contenitore una larghezza MINIMA pari a quella colonna, e su un
   telefono da 430px il contenuto sfondava il viewport di 30px. */
@media (max-width: 760px) { .settings-grid { columns: auto; } }
.settings-hd { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; margin-bottom: 26px; border-bottom: 1px solid var(--border); }
.settings-hd-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-ink); }
.settings-hd-ic svg { width: 22px; height: 22px; }
.settings-title { margin: 0; font-size: 1.4rem; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.settings-sub { margin: 2px 0 0; font-size: 0.88rem; color: var(--text-muted); }

.settings-block { padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  /* Con le colonne una scheda non deve MAI spezzarsi a metà fra due colonne. */
  break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 16px; }
.settings-block-hd { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.settings-block-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-soft); }
.settings-block-ic svg { width: 18px; height: 18px; }
.settings-block-txt { flex: 1; min-width: 0; }
.settings-block-txt h2 { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--text); }
.settings-block-txt p { margin: 3px 0 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }
.settings-block.is-soon { opacity: .7; }
.settings-block.is-soon .settings-block-hd { margin-bottom: 0; }
.settings-soon { align-self: center; flex-shrink: 0; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-ink); background: var(--accent-soft); padding: 0.25rem 0.6rem; border-radius: 999px; }

/* ---- Cambio tema: dissolvenza ---------------------------------------------
   Fallback per i browser senza View Transitions API: si abilitano le
   transizioni di colore solo per la durata del cambio (la classe la mette e
   la toglie settings.js). Tenerle sempre accese rallenterebbe ogni hover di
   tutta la dashboard, che è il motivo per cui non stanno nel CSS di base.
   Solo proprietà di paint — niente layout — quindi non c'è thrash. */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color var(--ds-theme-tr), border-color var(--ds-theme-tr),
              color var(--ds-theme-tr), fill var(--ds-theme-tr), box-shadow var(--ds-theme-tr) !important;
}
@media (prefers-reduced-motion: reduce) {
  .theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after { transition: none !important; }
  /* Anche il crossfade nativo va disattivato: startViewTransition non guarda
     da sé la preferenza di movimento. */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Solo per screen reader: toglie l'elemento dal flusso visivo mantenendolo
   nell'albero di accessibilità (niente display:none, che lo nasconderebbe
   anche agli screen reader). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- Aspetto: scelta del tema --------------------------------------------
   Tre schede con una mini-dashboard disegnata nei colori veri di ciascun
   tema: si sceglie guardando il risultato, non leggendo un'etichetta.
   Sotto c'è una <input type="radio"> vera — così frecce, Home/End, tab e
   il raggruppamento per screen reader arrivano dal browser invece che da
   JS riscritto a mano (e peggio). */
.set-th { border: 0; padding: 0; margin: 0; min-width: 0; }
.set-th-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.set-th-opt { position: relative; display: block; cursor: pointer; }
/* Il radio resta focusabile e nell'albero a11y: lo nascondiamo alla vista,
   non all'assistive tech. Il focus lo disegna .set-th-card. */
.set-th-opt input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}

.set-th-card {
  display: block; padding: 8px 8px 7px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color .16s cubic-bezier(.22,1,.36,1), background .16s cubic-bezier(.22,1,.36,1);
}
.set-th-opt:hover .set-th-card { border-color: var(--border-strong); background: var(--surface-hover); }

/* Il contorno della miniatura è disegnato DENTRO l'SVG (vedi themeMock()):
   segue il raggio esatto e resta coerente col taglio diagonale di "Sistema",
   cosa che un box-shadow inset non riusciva a fare (lasciava archi sbavati
   agli angoli). */
.set-th-mock { display: block; width: 100%; height: auto; border-radius: 5px; }

.set-th-name {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 7px; font-size: 0.78rem; font-weight: 600; color: var(--text-soft);
}
.set-th-ic { display: inline-flex; line-height: 0; }
.set-th-ic svg { width: 13px; height: 13px; }

/* Selezionato: bordo in accento + anello. Non solo colore — la scheda scelta
   cambia anche peso del testo, così la selezione non dipende dalla vista
   cromatica (a11y 1.4.1: non affidarsi al solo colore). */
.set-th-opt input:checked + .set-th-card {
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--surface);
}
.set-th-opt input:checked + .set-th-card .set-th-name { color: var(--accent-ink); font-weight: 800; }

.set-th-opt input:focus-visible + .set-th-card {
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 5px var(--accent-softer);
}

.set-th-hint {
  margin: 10px 0 0; font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; min-height: 1.1em;
}
.set-th-hint.is-err { color: var(--danger); }

/* Palette d'accento (superadmin) — pastiglie colore */
.set-ac { border: 0; padding: 16px 0 0; margin: 16px 0 0; border-top: 1px dashed var(--border); }
.set-ac-lg { padding: 0; font-size: 0.82rem; font-weight: 700; color: var(--text-soft); display: flex; align-items: center; gap: 8px; }
.set-ac-badge { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-ink); background: var(--accent-soft); border-radius: 5px; padding: 2px 6px; }
.set-ac-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.set-ac-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; width: 56px; }
.set-ac-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.set-ac-sw { width: 34px; height: 34px; border-radius: 50%; background: var(--sw); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface), 0 0 0 2px var(--sw) inset; transition: box-shadow .15s, transform .15s; }
.set-ac-sw svg { width: 17px; height: 17px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .12s, transform .12s; }
.set-ac-opt:hover .set-ac-sw { transform: scale(1.06); }
.set-ac-opt input:checked + .set-ac-sw { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw); }
.set-ac-opt input:checked + .set-ac-sw svg { opacity: 1; transform: scale(1); }
.set-ac-opt input:focus-visible + .set-ac-sw { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw), 0 0 0 6px var(--accent-soft); }
.set-ac-name { font-size: 0.72rem; color: var(--text-muted); }
.set-ac-opt input:checked ~ .set-ac-name { color: var(--text); font-weight: 700; }
.set-ac-hint { margin: 12px 0 0; font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .set-th-card { transition: none; }
}

/* Sotto i ~380px tre miniature diventano illeggibili: si impilano. */
@media (max-width: 380px) {
  .set-th-grid { grid-template-columns: 1fr; }
}

/* Notifiche: riga con interruttore */
.set-nt-row { display: flex; align-items: center; gap: 14px; }
.set-nt-txt { flex: 1; min-width: 0; }
.set-nt-name { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.set-nt-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.set-switch {
  position: relative; flex-shrink: 0; width: 42px; height: 24px; padding: 0;
  border: 0; border-radius: 999px; background: var(--border-strong); cursor: pointer; transition: background .16s;
}
.set-switch-k {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform .16s;
}
.set-switch.is-on { background: var(--accent); }
.set-switch.is-on .set-switch-k { transform: translateX(18px); }
.set-switch:disabled { opacity: .55; cursor: not-allowed; }
.set-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Lista categorie: righe con inline-edit e cestino su hover */
.set-cat-list { display: flex; flex-direction: column; gap: 2px; }
.set-cat-msg { font-size: 0.85rem; color: var(--text-muted); padding: 10px 2px; }
.set-cat-row { display: flex; align-items: center; gap: 12px; padding: 5px 8px 5px 6px; border-radius: var(--r-md); transition: background .12s; }
.set-cat-row:hover { background: var(--surface-2); }
.set-cat-sw { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border), var(--shadow-sm); cursor: pointer; padding: 0; transition: box-shadow .12s, transform .1s; }
.set-cat-sw:hover { box-shadow: 0 0 0 2px var(--accent); transform: scale(1.06); }
.set-cat-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.set-cat-name { flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; border-radius: var(--r-sm); padding: 0.5rem 0.6rem; font: inherit; font-size: 0.9rem; font-weight: 500; color: var(--text); outline: none; transition: border-color .12s, background .12s, box-shadow .12s; }
.set-cat-name:hover { border-color: var(--border); }
.set-cat-name:focus { border-color: var(--accent-ink); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.set-cat-del { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: var(--r-sm); color: var(--text-subtle); cursor: pointer; opacity: 0; transition: opacity .12s, color .12s, background .12s; }
.set-cat-row:hover .set-cat-del, .set-cat-del:focus-visible { opacity: 1; }
.set-cat-del svg { width: 16px; height: 16px; }
.set-cat-del:hover { color: var(--danger); background: rgba(220, 38, 38, .09); }
@media (hover: none) { .set-cat-del { opacity: 1; } }   /* touch: cestino sempre visibile */

/* Modello di categoria: pulsante + editor collassabile dei task predefiniti */
.set-cat-tplbtn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; font: inherit; font-size: 0.78rem; font-weight: 600;
  color: var(--text-soft); cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.set-cat-tplbtn svg { width: 14px; height: 14px; }
.set-cat-tplbtn:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.set-cat-tplbtn.has { color: var(--accent-ink); border-color: var(--accent-soft); background: var(--accent-soft); }
.set-cat-tpln { font-size: 0.72rem; font-weight: 800; background: var(--accent-ink); color: var(--text-onbrand, #fff); border-radius: 999px; padding: 0 6px; line-height: 1.5; }
.set-cat-row.is-open { background: var(--surface-2); }
.set-cat-tpl { margin: 2px 8px 12px 34px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.set-cat-tpl[hidden] { display: none; }
.set-cat-tpl-hint { margin: 0 0 8px; font-size: 0.8rem; color: var(--text-muted); }
.set-cat-tpl-hint b { color: var(--text-soft); font-weight: 700; }
.set-cat-tpl-ta {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
  padding: 8px 10px; font: inherit; font-size: 0.875rem; line-height: 1.6; color: var(--text);
  outline: none; transition: border-color .12s, box-shadow .12s;
}
.set-cat-tpl-ta:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.set-cat-tpl-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.set-cat-tpl-save, .set-cat-tpl-now {
  font: inherit; font-size: 0.8rem; font-weight: 600; padding: 7px 13px; border-radius: var(--r-sm); cursor: pointer;
  transition: background .12s, border-color .12s, opacity .12s;
}
.set-cat-tpl-save { border: 0; background: var(--accent); color: var(--text-onbrand, #fff); }
.set-cat-tpl-save:hover { background: var(--accent-hover, var(--accent-ink)); }
.set-cat-tpl-now { border: 1px solid var(--border-strong, var(--border)); background: var(--surface); color: var(--text-soft); }
.set-cat-tpl-now:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.set-cat-tpl-now:disabled { opacity: 0.55; cursor: default; }
.set-cat-tpl-msg { font-size: 0.8rem; color: var(--success, #16a34a); font-weight: 600; }

/* Dispositivi fidati (2FA): righe con nome device, dettagli e revoca */
.set-td-list { display: flex; flex-direction: column; gap: 6px; }
.set-td-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.set-td-row.is-current { border-color: var(--accent-ink); background: var(--accent-soft); }
.set-td-ic { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--surface-2); color: var(--text-soft); }
.set-td-ic svg { width: 17px; height: 17px; }
.set-td-txt { flex: 1; min-width: 0; }
.set-td-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.set-td-badge { font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-ink); background: var(--surface); border: 1px solid var(--accent-ink); padding: 0.1rem 0.5rem; border-radius: 999px; }
.set-td-meta { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.set-td-del { flex-shrink: 0; border: 1px solid var(--border); background: none; border-radius: var(--r-sm); padding: 0.4rem 0.7rem; font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--text-soft); cursor: pointer; transition: color .12s, background .12s, border-color .12s; }
.set-td-del:hover { color: var(--danger); border-color: var(--danger); background: rgba(220, 38, 38, .07); }
.set-td-del:disabled { opacity: .5; cursor: not-allowed; }
.set-td-all { align-self: center; flex-shrink: 0; border: 1px solid var(--border); background: none; border-radius: var(--r-sm); padding: 0.4rem 0.7rem; font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--text-soft); cursor: pointer; transition: color .12s, border-color .12s; }
.set-td-all:hover { color: var(--danger); border-color: var(--danger); }

/* Riga "aggiungi categoria" */
.set-cat-add { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 8px 2px 6px; border-top: 1px dashed var(--border); }
.set-cat-add .set-cat-name { border: 1px solid var(--field-border); background: var(--surface); font-weight: 400; }
.set-cat-add .set-cat-name:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.set-cat-addbtn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--accent); color: #fff; font: inherit; font-weight: 700; font-size: 0.85rem; padding: 0.55rem 1.05rem; border-radius: var(--r-md); cursor: pointer; transition: background .15s; }
.set-cat-addbtn svg { width: 15px; height: 15px; }
.set-cat-addbtn:hover { background: var(--accent-hover); }
.set-cat-addbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) { .settings-wrap { padding: 18px 16px 34px; } }

/* ---- Campanella notifiche (topbar) ---- */
/* Filtro Business Unit in testata (solo superadmin). Riusa la stessa grammatica
   del popup notifiche: stesso raggio, stessa ombra, stesso z-index. */
.bufilter { position: relative; display: inline-flex; }
/* A RIPOSO non ha contenitore: "tutte le società" è lo stato normale e non deve
   pesare quanto la campanella. Il bordo compare al passaggio del mouse (dice che
   è cliccabile) e quando il filtro è attivo (dice che i dati sono parziali). */
.bufilter-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 999px;
  padding: 6px 10px; color: var(--text-soft); font-size: 13px; font-weight: 500;
  font-family: inherit; transition: background .15s, color .15s, border-color .15s;
}
.bufilter-btn:hover { background: var(--surface-2); color: var(--text); }
.bufilter-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bufilter-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.bufilter-caret { width: 14px !important; height: 14px !important; opacity: .55; }
/* Pallini delle società selezionate: portano il colore della tabella
   `business_units`, lo stesso che si vede nella tendina. */
.bufilter-dots { display: inline-flex; gap: 3px; }
.bufilter-dots:empty { display: none; }
.bufilter-bdot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
/* Filtro attivo: la testata deve dirlo a colpo d'occhio, altrimenti si scambia
   una vista ristretta per dati mancanti.
   UNA società → tutto nel SUO colore (`--bu`, impostato dal JS).
   PIÙ società → contorno neutro: scegliere il colore di una sola fra tre
   sarebbe arbitrario e farebbe credere che il filtro sia su quella. */
.bufilter.is-on .bufilter-btn {
  font-weight: 600;
  border-color: var(--bu, var(--accent));
  color: var(--bu, var(--accent-ink));
  background: color-mix(in srgb, var(--bu, var(--accent)) 9%, transparent);
}
.bufilter.is-on.is-multi .bufilter-btn {
  border-color: var(--border);
  color: var(--text);
  background: var(--surface-2);
}
/* Badge numerico: normalmente muto, prende il posto dell'etichetta quando la
   testata si stringe, così un filtro attivo non diventa invisibile. */
.bufilter-btn-count {
  display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1;
  align-items: center; justify-content: center;
}
.bufilter-pop {
  position: absolute; top: calc(100% + 8px); right: 0; width: 258px; max-width: 90vw;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 1200; padding: 6px;
  transform-origin: top right; animation: bufilter-in .14s ease-out;
}
.bufilter-pop[hidden] { display: none; }
@keyframes bufilter-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
/* Salvataggio in corso: la lista non accetta altri click finché la pagina non ricarica. */
.bufilter-pop.is-busy .bufilter-list { pointer-events: none; opacity: .5; }
.bufilter-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 8px 10px 6px; }
.bufilter-list { max-height: 280px; overflow-y: auto; }
/* Caricamento / elenco vuoto / errore: la tendina non si apre mai su un vuoto muto. */
.bufilter-msg { margin: 0; padding: 10px; font-size: 13px; color: var(--text-muted); }
.bufilter-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 13.5px; color: var(--text); }
.bufilter-item:hover { background: var(--surface-hover); }
.bufilter-item input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.bufilter-item input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* All'apertura il focus va sulla prima voce: evidenziamo la RIGA solo quando il
   focus è da tastiera, altrimenti col mouse sembrerebbe già selezionata. */
.bufilter-item:has(input:focus-visible) { background: var(--surface-hover); }
.bufilter-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
/* "Tutte le BU": pallino vuoto, non è una BU ma l'assenza di filtro. */
.bufilter-dot-all { border: 1.5px dashed var(--text-muted); }
.bufilter-sep { height: 1px; background: var(--border); margin: 4px 10px; }
.bufilter-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--border); margin-top: 4px; padding: 8px 4px 2px 10px;
}
.bufilter-summary { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.bufilter-apply {
  flex-shrink: 0; background: var(--accent); color: #fff; border: 0; border-radius: var(--r-sm);
  padding: 7px 14px; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: background .15s, opacity .15s;
}
.bufilter-apply:hover:not(:disabled) { background: var(--accent-hover); }
.bufilter-apply:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Disabilitato = nessuna modifica da salvare: resta leggibile ma inerte. */
.bufilter-apply:disabled { opacity: .4; cursor: default; }
@media (prefers-reduced-motion: reduce) { .bufilter-pop { animation: none; } }
@media (max-width: 780px) {
  .bufilter-btn-label { display: none; }
  .bufilter-btn-count:not([hidden]) { display: inline-flex; }
  /* Bersagli tattili: 44px minimi, la riga da 33px si sbagliava a colpire. */
  .bufilter-item { padding: 12px 10px; font-size: 14.5px; }
  .bufilter-item input { width: 18px; height: 18px; }
  .bufilter-apply { padding: 11px 16px; }
  .bufilter-list { max-height: 50vh; }
}

.notif { position: relative; display: inline-flex; }
.notif-bell {
  position: relative; background: none; border: 0; cursor: pointer; color: var(--text-soft);
  padding: 8px; border-radius: var(--r-md); display: inline-flex; transition: background .15s, color .15s;
}
.notif-bell:hover { background: var(--surface-2); color: var(--text); }
.notif-bell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.notif-bell svg { width: 20px; height: 20px; }
.notif-bell.has { color: var(--accent-ink); }
.notif-badge {
  position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface);
}
.notif-badge[hidden] { display: none; }

/* Badge "non letti" sulla voce Messenger della sidebar */
.nav-chat-badge {
  margin-left: auto; flex-shrink: 0;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-chat-badge[hidden] { display: none; }
html.sidebar-collapsed .nav-chat-badge {
  position: absolute; top: 3px; right: 3px; margin: 0;
  min-width: 16px; height: 16px; padding: 0 4px; font-size: 9.5px;
  box-shadow: 0 0 0 2px var(--surface);
}
.notif-pop {
  position: absolute; top: calc(100% + 8px); right: 0; width: 330px; max-width: 90vw;
  max-height: 400px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 1200; padding: 6px;
}
.notif-pop[hidden] { display: none; }
.notif-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 8px 10px 6px; }
.notif-item { display: flex; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); align-items: flex-start; }
.notif-item:hover { background: var(--surface-hover); }
.notif-item.unseen { background: var(--accent-soft); }
.ni-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.ni-ic svg { width: 16px; height: 16px; }
.ni-ic.share { background: var(--accent); }
.ni-ic.done { background: #16a34a; }
.ni-ic.trip { background: #0d9488; }
.ni-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ni-txt { font-size: 13px; line-height: 1.35; color: var(--text); }
.ni-time { font-size: 11px; color: var(--text-subtle); }
.notif-empty { padding: 26px 10px; text-align: center; font-size: 13px; color: var(--text-muted); }

/* Popover selezione colleghi (ad-hoc) — position:fixed per uscire da overflow */
.todo-pop {
  position: fixed; z-index: 1400; width: 260px; max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: 0 12px 32px -8px rgba(15,23,42,.35);
  padding: 0.5rem;
}
.todo-pop-head { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; padding: 0.25rem 0.4rem 0.4rem; }
.todo-pop-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.45rem; border-radius: var(--r-sm); cursor: pointer; font-size: 0.82rem; color: var(--text); }
.todo-pop-item:hover { background: var(--surface-hover); }
.todo-pop-item input { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.todo-pop-item .todo-av { width: 22px; height: 22px; font-size: 0.62rem; }
.todo-pop-item .rep { margin-left: auto; font-size: 0.66rem; color: var(--text-muted); }
.todo-pop-actions { display: flex; gap: 0.4rem; padding: 0.5rem 0.4rem 0.2rem; position: sticky; bottom: 0; background: var(--surface); }
.todo-pop-actions button { flex: 1; font: inherit; font-size: 0.76rem; font-weight: 700; padding: 0.4rem; border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--border); }
.todo-pop-ok { background: var(--accent); color: #fff; border-color: var(--accent-ink) !important; }
.todo-pop-ok:hover { background: var(--accent-hover); }
.todo-pop-cancel { background: var(--surface); color: var(--text-soft); }
.todo-pop-empty { padding: 1rem 0.5rem; text-align: center; font-size: 0.78rem; color: var(--text-muted); }

/* ---- Iframe hosts ----------------------------------------- */
.iframe-host {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--surface-2);
  overflow: hidden;
}
.iframe-host iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---- News fallback ---------------------------------------- */
.news-fallback {
  position: absolute;
  inset: 0;
  background: var(--panel-bg);
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.nf-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}
.nf-head-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}
.nf-head-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  text-decoration: none;
  background: var(--accent);
  color: #fff;
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-md);
  font-weight: 500;
  transition: background 0.15s;
}
.nf-head-btn:hover { background: var(--accent-hover); }

.nf-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  overflow-y: auto;
  margin-bottom: 0.75rem;
}

.nf-item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  padding: 0.75rem 0.5rem;
  border-radius: var(--r-md);
  transition: background 0.15s;
}
.nf-item:hover { background: var(--surface-hover); }
.nf-cat {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent-ink);
  margin-bottom: 0.25rem;
  letter-spacing: 0.02em;
}
.nf-title {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text);
  font-weight: 500;
}
.nf-item:hover .nf-title { color: var(--accent-hover); }

.nf-note {
  padding: 0.85rem 1rem;
  background: var(--surface-2);
  font-size: 0.8125rem;
  color: var(--text-soft);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  line-height: 1.55;
  flex-shrink: 0;
}
.nf-note a { color: var(--accent-ink); text-decoration: none; font-weight: 500; }
.nf-note a:hover { text-decoration: underline; }

/* ---- Placeholder (coming soon) ---------------------------- */
.panel-placeholder {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  flex: 1;
  min-height: 60vh;
}
.placeholder-icon {
  width: 56px; height: 56px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
  font-weight: 600;
}
.placeholder-title {
  font-weight: 600;
  font-size: 1.375rem;
  margin: 0;
}
.placeholder-msg {
  margin: 0.5rem 0 1.5rem;
  color: var(--text-muted);
  max-width: 420px;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.placeholder-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-soft);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

/* ---- Scrollbar -------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); background-clip: padding-box; }

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  background-clip: padding-box;
}

/* ============================================================
   ADMIN PANEL (.ap-*) — usa i design token, niente hex inline
   ============================================================ */
.ap-root {
  padding: 1.5rem;
  background: var(--surface);
  border-radius: var(--r-lg);
}
.ap-icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* Tabs */
.ap-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.ap-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.ap-tab:hover { color: var(--text-soft); }
.ap-tab.active { color: var(--accent-ink); border-bottom-color: var(--accent); }
.ap-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

/* Toolbar */
.ap-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ap-search-wrap { position: relative; flex: 1; min-width: 220px; }
.ap-search-wrap .ap-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); pointer-events: none; }
.ap-search-wrap .ap-input { padding-left: 38px; width: 100%; }

.ap-input, .ap-select {
  padding: 9px 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ap-input:focus, .ap-select:focus {
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ap-input::placeholder { color: var(--text-subtle); }

/* Combobox reparto: dropdown custom (sostituisce il <datalist> nativo) */
.ap-combo { position: relative; }
.ap-combo .ap-input { width: 100%; box-sizing: border-box; padding-right: 34px; cursor: pointer; }
.ap-combo-caret {
  position: absolute; right: 7px; top: 19px; transform: translateY(-50%);
  background: none; border: 0; padding: 4px; cursor: pointer; color: var(--text-muted);
  display: inline-flex; line-height: 0; transition: transform .18s ease, color .15s;
}
.ap-combo-caret svg { width: 16px; height: 16px; }
.ap-combo.open .ap-combo-caret { transform: translateY(-50%) rotate(180deg); color: var(--accent-ink); }
.ap-combo-pop {
  position: fixed; z-index: 1100; min-width: 170px; max-height: 244px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 5px; animation: apComboIn .13s ease-out;
}
.ap-combo-pop[hidden] { display: none; }
@keyframes apComboIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ap-combo-opt {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 14px; color: var(--text); cursor: pointer;
}
.ap-combo-opt:hover, .ap-combo-opt.active { background: var(--surface-hover); }
.ap-combo-opt .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ap-combo-opt .chk { margin-left: auto; color: var(--accent-ink); display: none; line-height: 0; }
.ap-combo-opt.selected { font-weight: 700; }
.ap-combo-opt.selected .chk { display: inline-flex; }
.ap-combo-empty { padding: 10px 12px; font-size: 12.5px; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .ap-combo-pop { animation: none; } .ap-combo-caret { transition: none; } }

/* Buttons */
.ap-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.ap-btn-primary { background: var(--accent); color: #fff; }
.ap-btn-primary:hover { background: var(--accent-hover); }
.ap-btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border-strong); font-weight: 500; }
.ap-btn-ghost:hover { background: var(--surface-2); color: var(--text-soft); }
.ap-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Table */
.ap-tablewrap { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.ap-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ap-table thead tr { background: var(--panel-bg); text-align: left; }
.ap-table th { padding: 12px 14px; font-weight: 600; color: var(--text-soft); }
.ap-table th.ap-th-right { text-align: right; }
.ap-table td { padding: 12px 14px; color: var(--text-soft); }
.ap-table tbody tr { border-top: 1px solid var(--border); }
.ap-table-empty { padding: 40px; text-align: center; color: var(--text-muted); }
.ap-table-error { padding: 40px; text-align: center; color: var(--danger); }

/* ---- Tab Attività utenti (registro accessi + monitoraggio) ---- */
/* Contenitore: "ap-activity" e non "ap-act" (quella è il bottone-icona 32x32). */
.ap-activity { display: block; width: 100%; min-width: 0; }
.ap-act-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ap-act-counts { font-size: 0.9rem; color: var(--text-muted); }
.ap-act-counts b { color: var(--text); font-weight: 800; }
.ap-act-counts b.sens { color: var(--danger); }
.ap-act-clock-wrap { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--text-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.ap-act-clock-wrap svg { width: 15px; height: 15px; flex-shrink: 0; }
.ap-act-clock-wrap b { color: var(--text); font-weight: 800; letter-spacing: .02em; }
.ap-act-monitor { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 14px; background: var(--surface-2); }
.ap-act-monitor-h { font-size: 0.85rem; font-weight: 700; color: var(--text-soft); margin-bottom: 10px; }
.ap-act-monitor-h span { font-weight: 400; color: var(--text-muted); }
.ap-act-users { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-act-uchip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: inherit; font-size: 0.8rem; padding: 5px 10px 5px 8px;
  border: 1px solid var(--border); background: var(--surface); border-radius: 999px; color: var(--text-soft);
  transition: border-color .12s, background .12s, color .12s;
}
.ap-act-uchip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); transition: background .12s; }
.ap-act-uchip .nm { font-weight: 600; color: var(--text); }
.ap-act-uchip .rl { font-size: 0.7rem; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .03em; }
.ap-act-uchip .ev { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); background: var(--surface-2); border-radius: 999px; padding: 0 6px; }
.ap-act-uchip:hover { border-color: var(--accent-ink); }
.ap-act-uchip.on { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.ap-act-uchip.on .dot { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }
.ap-act-uchip.on .nm { color: var(--danger); }
.ap-act-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.ap-act-filters .ap-select { min-width: 190px; }
.ap-act-filters .ap-input { flex: 1; min-width: 180px; }
.ap-act-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-soft); white-space: nowrap; cursor: pointer; }
.ap-act-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden auto; max-height: 60vh; }
.ap-act-row {
  display: grid; grid-template-columns: 128px 1.4fr 54px 3fr 120px; align-items: center; gap: 10px;
  padding: 8px 12px; font-size: 0.82rem; border-top: 1px solid var(--border); color: var(--text);
}
.ap-act-row:first-child { border-top: 0; }
.ap-act-row .t { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ap-act-row .u { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-act-row .u i { font-style: normal; font-weight: 400; font-size: 0.7rem; color: var(--text-subtle); margin-left: 6px; text-transform: uppercase; }
.ap-act-row .m { font-size: 0.68rem; font-weight: 800; text-align: center; color: var(--text-muted); background: var(--surface-2); border-radius: 5px; padding: 2px 0; }
.ap-act-row .m-post, .ap-act-row .m-patch, .ap-act-row .m-delete, .ap-act-row .m-put { color: var(--accent-ink); background: var(--accent-soft); }
.ap-act-row .p { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ap-act-row .p .what { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.84rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-act-row .p .what b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.ap-act-row .p .raw { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.72rem; color: var(--text-subtle); }
.ap-act-row .p .raw em { font-style: normal; color: var(--text-muted); }
.ap-act-row .verb { flex-shrink: 0; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; border-radius: 5px; padding: 2px 7px; line-height: 1.5; }
.ap-act-row .verb.v-open { color: var(--text-muted); background: var(--surface-2); }
.ap-act-row .verb.v-edit { color: var(--accent-ink); background: var(--accent-soft); }
.ap-act-row .verb.v-move { color: var(--accent-ink); background: var(--accent-soft); }
.ap-act-row .verb.v-del  { color: var(--danger); background: var(--danger-soft); }
.ap-act-row .verb.v-dl   { color: var(--danger); background: var(--danger-soft); }
.ap-act-row .verb.v-sec  { color: var(--danger); background: var(--danger-soft); }
/* Consultazione di un'area sensibile: notevole ma non allarmante — il rosso
   resta a chi porta via davvero un file. */
.ap-act-row .verb.v-view { color: var(--warning-ink, #92400e); background: var(--warning-soft, #fef3c7); }
.ap-act-row .p .badge { font-family: inherit; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; color: var(--danger); background: var(--danger-soft); border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.ap-act-row .p .badge.badge-soft { color: var(--warning-ink, #92400e); background: var(--warning-soft, #fef3c7); }
.ap-act-row .ip { color: var(--text-subtle); font-variant-numeric: tabular-nums; font-size: 0.75rem; text-align: right; }
.ap-act-row.is-sens { background: var(--danger-soft); }
.ap-act-empty { color: var(--text-muted); font-size: 0.85rem; }
@media (max-width: 720px) {
  .ap-act-row { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .ap-act-row .m, .ap-act-row .ip { display: none; }
  .ap-act-row .p { grid-column: 1 / -1; }
}

/* --- Tab "Sessioni/CSRF": registro delle richieste respinte (419) ----------
   Riusa l'impianto del tab Attività (.ap-activity) e ne cambia solo le colonne
   e i colori dei motivi. Solo token del tema: niente colori fissi, così il
   pannello resta leggibile anche in scuro. */
.ap-csrf-note {
  font-size: 0.82rem; line-height: 1.5; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2); padding: 10px 12px; margin-bottom: 12px;
}
.ap-csrf-note b { color: var(--text); font-weight: 700; }
.ap-csrf-note b.ok { color: var(--success, #15803d); }
.ap-csrf-note b.ko { color: var(--danger); }

.ap-csrf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ap-csrf-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit;
  font-size: 0.78rem; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  transition: border-color .12s, background .12s, color .12s;
}
.ap-csrf-chip .nm { font-weight: 600; }
.ap-csrf-chip .n { font-size: 0.7rem; font-weight: 800; background: var(--surface-2); border-radius: 999px; padding: 0 6px; color: var(--text-muted); }
.ap-csrf-chip:hover { border-color: var(--border-strong); }
.ap-csrf-chip.on { border-color: var(--accent-ink); background: var(--accent-soft); color: var(--accent-ink); }
.ap-csrf-chip.r-bad .n { color: var(--danger); background: var(--danger-soft); }
.ap-csrf-chip.r-bad.on { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.ap-csrf-chip.clear { border-style: dashed; }

.ap-csrf-row {
  display: grid; grid-template-columns: 128px 1.2fr 54px 3fr 120px; align-items: center; gap: 10px;
  padding: 8px 12px; font-size: 0.82rem; border-top: 1px solid var(--border); color: var(--text);
}
.ap-csrf-row:first-child { border-top: 0; }
.ap-csrf-row .t { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ap-csrf-row .u { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-csrf-row .u i { font-style: italic; font-weight: 400; color: var(--text-subtle); }
.ap-csrf-row .m { font-size: 0.68rem; font-weight: 800; text-align: center; color: var(--text-muted); background: var(--surface-2); border-radius: 5px; padding: 2px 0; }
.ap-csrf-row .m-post, .ap-csrf-row .m-patch, .ap-csrf-row .m-delete, .ap-csrf-row .m-put { color: var(--accent-ink); background: var(--accent-soft); }
.ap-csrf-row .p { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ap-csrf-row .p .what { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-csrf-row .p .raw { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.72rem; color: var(--text-subtle); }
.ap-csrf-row .rsn { flex-shrink: 0; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; border-radius: 5px; padding: 2px 7px; line-height: 1.5; cursor: help; }
.ap-csrf-row .rsn.r-info { color: var(--text-muted); background: var(--surface-2); }
.ap-csrf-row .rsn.r-warn { color: var(--warning-ink, #92400e); background: var(--warning-soft, #fef3c7); }
.ap-csrf-row .rsn.r-bad  { color: var(--danger); background: var(--danger-soft); }
.ap-csrf-row .p .badge { font-size: 0.65rem; font-weight: 800; color: var(--danger); background: var(--danger-soft); border-radius: 4px; padding: 1px 5px; }
.ap-csrf-row .ip { color: var(--text-subtle); font-variant-numeric: tabular-nums; font-size: 0.75rem; text-align: right; }
.ap-csrf-row.is-bad { background: var(--danger-soft); }
@media (max-width: 720px) {
  .ap-csrf-row { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .ap-csrf-row .m, .ap-csrf-row .ip { display: none; }
  .ap-csrf-row .p { grid-column: 1 / -1; }
}

.ap-user-cell { display: flex; align-items: center; gap: 10px; }
.ap-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.ap-user-name { font-weight: 600; color: var(--text); }

.ap-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid transparent; }

/* Action buttons (icon-only, tap target ≥ 44px hit area via padding) */
.ap-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  cursor: pointer;
  margin-left: 4px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ap-act:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.ap-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ap-act-danger:hover { color: var(--danger); border-color: var(--danger); }

/* Modal */
.ap-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.ap-modal-card {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 26px;
  width: 520px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.ap-modal-card.ap-modal-sm { width: 420px; }
.ap-modal-card.ap-modal-md { width: 480px; }
.ap-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ap-modal-title { font-size: 18px; color: var(--text); }
.ap-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background 0.15s, color 0.15s;
}
.ap-modal-close:hover { background: var(--surface-2); color: var(--text); }
.ap-modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ap-modal-note { color: var(--text-muted); font-size: 14px; margin: 0 0 14px; }

/* Form */
.ap-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ap-field { margin-bottom: 12px; }
.ap-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
.ap-label-hint { text-transform: none; color: var(--text-muted); font-weight: 400; }
.ap-field .ap-input, .ap-field .ap-select { width: 100%; box-sizing: border-box; }
.ap-input-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ap-err { color: var(--danger); font-size: 13px; margin-bottom: 10px; }
.ap-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* Modules list */
.ap-mod-list { max-height: 400px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px; }
.ap-mod-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.ap-mod-item:last-child { border-bottom: none; }
.ap-mod-item.is-public { cursor: not-allowed; }
.ap-mod-item input { width: 16px; height: 16px; accent-color: var(--accent); }
.ap-mod-label { font-weight: 600; color: var(--text); font-size: 13.5px; }
.ap-mod-public { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--success); margin-top: 2px; }
/* Intestazione di sezione (menu group) nella lista permessi */
.ap-mod-group { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: 11px 12px 5px; background: var(--surface-2); }
.ap-mod-group:first-child { padding-top: 6px; }
/* Checkbox "master": seleziona tutti i sotto-moduli della sezione */
.ap-mod-group-check { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
/* Sotto-moduli leggermente rientrati sotto la loro sezione */
.ap-mod-item.is-sub .ap-mod-label { padding-left: 4px; }
/* Selettore livello lettura/modifica per area (accanto al checkbox) */
.ap-mod-level { flex-shrink: 0; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; cursor: pointer; }
.ap-mod-level:disabled { opacity: .4; }

/* Business Unit nel dialog permessi: i moduli dicono A COSA accede,
   la BU dice QUALI RIGHE vede dentro quei moduli. */
.ap-bu-box { border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px; margin-bottom: 12px; }
.ap-bu-box:empty { display: none; }
.ap-bu-state { margin: 8px 12px; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.ap-bu-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 12px 12px; }
.ap-bu-list.is-off { opacity: .45; }
.ap-bu-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.ap-bu-list.is-off .ap-bu-chip { cursor: default; }
.ap-bu-chip input { width: 15px; height: 15px; accent-color: var(--accent); }
.ap-bu-chip:has(input:checked) { border-color: var(--accent); }

/* Toast */
.ap-toast {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--text);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r-md);
  font-size: 14px;
  z-index: 1100;
  box-shadow: var(--shadow-lg);
}

/* Stats */
.ap-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
.ap-stat-card { padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.ap-stat-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.ap-stat-value { font-size: 26px; font-weight: 800; margin-top: 6px; }
.ap-card { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 20px; }
.ap-card-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
.ap-bar { background: var(--accent); border-radius: 3px 3px 0 0; }
.ap-progress { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.ap-progress-fill { height: 100%; background: var(--accent); }

/* Log list */
.ap-log-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.ap-log-item { padding: 14px 18px; display: flex; gap: 14px; align-items: flex-start; border-top: 1px solid var(--border); }
.ap-log-item:first-child { border-top: none; }
.ap-log-icon { display: flex; flex: 0 0 auto; }
.ap-state-loading, .ap-state-empty { padding: 40px; text-align: center; color: var(--text-muted); }
.ap-state-error { padding: 40px; text-align: center; color: var(--danger); }

@media (max-width: 640px) {
  .ap-grid-2 { grid-template-columns: 1fr; }
  .ap-modal-card { padding: 20px; }
}


/* ------------------------------------------------------------
 * Assistente AI viaggi — righe fornitore LLM (Impostazioni, solo admin).
 * Accento BLU della dashboard (--accent-ink), non il teal di BizTravel:
 * questa è la pagina Impostazioni del gestionale, non il modulo.
 * ------------------------------------------------------------ */
.set-aip { display: flex; flex-direction: column; gap: 8px; }
.aip-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); transition: border-color .15s, background .15s;
}
.aip-opt:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.aip-opt.is-active { border-color: var(--accent-ink); background: var(--accent-soft); }
.aip-opt input { accent-color: var(--accent-ink); width: 18px; height: 18px; flex-shrink: 0; }
.aip-txt { flex: 1; min-width: 0; }
.aip-name { display: block; font-size: 0.95rem; font-weight: 600; color: var(--text); }
.aip-name em { font-style: normal; font-size: 0.75rem; font-weight: 600; color: var(--accent-ink); }
.aip-model { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.aip-key { font-size: 0.75rem; white-space: nowrap; }
.aip-key.ok { color: var(--success); }
.aip-key.warn { color: var(--warning); }

/* Intestazione della lista di provenienza quando mi sono state condivise solo
   alcune sotto-attività: è contesto, non un task. Niente spunta né azioni, e
   il rientro delle voci sotto resta quello dei figli normali. */
.todo-parent-stub { color: var(--text-muted); }
.todo-parent-stub .todo-text { font-weight: 600; color: var(--text); cursor: default; }
.todo-parent-stub:hover { background: transparent; }

/* ---- Intestazione di gruppo (Impostazioni) --------------------------------
   Separa «le tue preferenze» dalle impostazioni che valgono per TUTTI. Senza
   questa distinzione si cambia per l'intera azienda credendo di cambiare per
   sé: è la confusione che rendeva la pagina difficile da governare. */
.settings-group-hd {
  margin: 30px 0 16px; padding-top: 22px;
  border-top: 1px solid var(--border);
}
.settings-group-hd h2 {
  margin: 0; font-size: 1.02rem; font-weight: 800;
  color: var(--text); letter-spacing: -0.01em;
}
.settings-group-hd p { margin: 3px 0 0; font-size: 0.84rem; color: var(--text-muted); }
/* Il primo gruppo segue già il filo sopra il titolo della pagina: niente
   riga di separazione né spazio doppio, che sembrerebbero un salto. */
.settings-group-first { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---- Tetto di spesa alberghi (Impostazioni → condivise) -------------------
   Righe città → importo. Tre colonne fisse: il campo importo resta allineato
   su tutte le righe, compresa quella del valore predefinito, che non ha il
   pulsante di rimozione ma ne conserva lo spazio. */
.hb-list { display: flex; flex-direction: column; gap: 8px; }
.hb-row {
  display: grid; grid-template-columns: minmax(0,1fr) 128px 30px;
  gap: 8px; align-items: center;
}
.hb-row input {
  width: 100%; padding: 0.5rem 0.65rem; font: inherit; font-size: 0.85rem;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--field-border); border-radius: var(--r-md); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.hb-row input:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.hb-row input::placeholder { color: var(--text-muted); }
/* Riga del valore predefinito: non è un campo, è un'etichetta. Un input con
   dentro «*» non si capisce; così si legge. */
.hb-fixed {
  font-size: 0.85rem; font-weight: 600; color: var(--text-soft);
  padding: 0.5rem 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* L'unità dentro il campo: «180» da solo non dice se è a notte o totale. */
.hb-eur { position: relative; display: block; }
.hb-eur input { padding-right: 3.5rem; }
.hb-eur i {
  position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 0.72rem; color: var(--text-muted); pointer-events: none;
}
.hb-del {
  background: none; border: 1px solid transparent; color: var(--text-muted);
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: grid; place-items: center; font-size: 0.85rem; cursor: pointer;
  transition: color .12s, border-color .12s;
}
.hb-del:hover { color: var(--danger); border-color: var(--danger); }
.hb-del:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Su touch il bersaglio deve arrivare a 44px: si allarga l'area cliccabile
   oltre il bordo visibile, senza ingrossare il pulsante nel layout. */
@media (pointer: coarse) {
  .hb-del { position: relative; }
  .hb-del::after { content: ''; position: absolute; inset: -7px; }
}
.hb-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border);
}
/* I due pulsanti sono quelli del design system di questa pagina: primario in
   linea (.set-cat-addbtn) e secondario (.set-td-all). NON .btn-primary, che
   nel sistema è a tutta larghezza e qui diventava un blocco enorme. */
.hb-actions .set-cat-addbtn { margin-left: auto; }
.hb-actions .set-td-all { white-space: nowrap; }
@media (max-width: 420px) {
  .hb-row { grid-template-columns: minmax(0,1fr) 104px 30px; }
  .hb-actions .set-cat-addbtn { margin-left: 0; }
}

/* ---- Tag automatici Blulabel Bids (Impostazioni → condivise) --------------
   Riga = tag Odoo + descrizione. Stessa griglia a tre colonne dei tetti di
   spesa, con il tag a sinistra: pulsante di rimozione incolonnato, un solo
   vocabolario per le due card. */
.bt-list { display: flex; flex-direction: column; gap: 8px; }
.bt-row {
  display: grid; grid-template-columns: 190px minmax(0,1fr) 30px;
  gap: 8px; align-items: center;
}
.bt-row input, .bt-row select {
  width: 100%; padding: 0.5rem 0.65rem; font: inherit; font-size: 0.85rem;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--field-border); border-radius: var(--r-md); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.bt-row input:focus, .bt-row select:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.bt-row input::placeholder { color: var(--text-muted); }
@media (max-width: 560px) {
  /* Il tag va a capo sopra la descrizione: a 190px fissi il campo descrizione
     si riduceva a una fessura. */
  .bt-row { grid-template-columns: minmax(0,1fr) 30px; }
  .bt-row .bt-tag { grid-column: 1 / -1; }
}

/* ── To-Do · filtro per fase (solo vista Lista) ───────────────────────────── */
/* Stesso vocabolario dei chip Tutti/Personali/Condivisi: se due gruppi di
   filtri sulla stessa barra avessero forme diverse sembrerebbero due cose. */
.todo-phase-filter { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.todo-phase-filter::before {
  content: ''; width: 1px; height: 18px; background: var(--border);
  margin: 0 8px 0 4px; flex: 0 0 auto;
}
.todo-pbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 1px solid transparent; border-radius: 999px;
  background: none; color: var(--text-muted); cursor: pointer;
  font-size: 0.78rem; font-weight: 600; white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.todo-pbtn:hover { background: var(--surface-2); color: var(--text); }
.todo-pbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.todo-pbtn.is-active { background: var(--accent-softer, var(--surface-2)); color: var(--accent); border-color: var(--accent); }
/* Il conteggio è un dato, non decorazione: resta leggibile anche non attivo. */
.todo-pcount {
  font-size: 0.7rem; font-weight: 800; color: var(--text-muted);
  background: var(--surface-2); border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center;
}
.todo-pbtn.is-active .todo-pcount { background: #fff; color: var(--accent); }
.todo-pbtn.is-empty { opacity: .45; }
@media (max-width: 760px) {
  .todo-phase-filter::before { display: none; }
  .todo-phase-filter { width: 100%; margin-top: 6px; }
}