/* ============================================================
   SednaNext — Sidebar Navigation (design raffinato)
   Porting del mockup claude.ai/design. Token --sb-* mappati sui
   token Sedna (--sedna-*) con fallback alla palette del design.
   Prefisso classi: .sb-   /   shell: l'<aside class="sb">
   Collapse: classe .collapsed sull'<aside>  →  rail (solo icone)
   Mobile : .sedna-main-layout.drawer-open  →  drawer + overlay
   ============================================================ */

.sb {
  /* ---- palette (mappata su Sedna, fallback = design) ---- */
  --sb-primary: var(--sedna-primary, #1e88e5);
  --sb-primary-hover: var(--sedna-primary-hover, #1976d2);
  --sb-primary-wash: var(--sedna-primary-soft, #e3f2fd);
  --sb-primary-on: #ffffff;
  --sb-gold: #ffd54f;

  --sb-ink: var(--sedna-text, #1c2127);
  --sb-ink-2: var(--sedna-text-secondary, #59616b);
  --sb-ink-3: var(--sedna-text-tertiary, #8b929b);

  --sb-surface: var(--sedna-surface, #ffffff);
  --sb-surface-2: var(--sedna-surface-2, #f6f7f9);
  --sb-surface-3: var(--sedna-surface-3, #eef0f3);
  --sb-border: var(--sedna-border, #e4e7eb);
  --sb-border-2: var(--sedna-border-light);

  /* ---- gerarchia voci (collaudo 23/07 sera): tutta in SFUMATURE DI GRIGIO —
     il blu resta al solo elemento attivo. La gerarchia si legge dal tono:
     padri il grigio più scuro, gruppi un tono sotto, foglie il più chiaro
     (e in corsivo). ---- */
  /* Titoli di sezione (padri): STESSO colore e peso dei figli di primo livello —
     a distinguerli bastano la dimensione, la tasca e lo stacco fra sezioni; un
     tono piu' scuro li faceva sembrare un secondo livello di importanza. */
  --sb-sec-ink: var(--sb-item-ink);
  --sb-sec-ink-hover: var(--sb-item-ink-hover);
  --sb-item-ink: var(--sb-ink-2);                       /* gruppi (figli di 1° livello) */
  --sb-item-ink-hover: var(--sb-ink);

  /* scala tipografica della gerarchia: padre > figlio L1 > foglia L2+.
     Compatta: il menu deve stare in secondo piano, non gridare. */
  /* Dimensioni ORIGINALI del design (collaudo 23/07: le riduzioni erano troppo).
     I padri si distinguono per peso e tono, non per dimensione — e niente
     maiuscolo forzato: il testo delle sezioni è già in Camel Case. */
  --sb-fs-sec: 0.90625rem;   /* 14,5px — sezione: mezzo punto sopra i gruppi */
  --sb-fs-item: 0.875rem;    /* 14px — gruppi */
  --sb-fs-sub: 0.8125rem;    /* 13px — foglie (corsivo, tono più chiaro) */

  /* "tasca": incavo appena percettibile che contiene la sezione aperta,
     così si vede dove finisce una sezione e comincia la successiva. */
  --sb-pocket-bg: rgba(16,24,40,0.022);
  --sb-pocket-shadow: inset 0 1px 2px rgba(16,24,40,0.05), inset 0 0 0 1px rgba(16,24,40,0.025);

  /* ---- metrica ---- */
  --sb-w: 16rem;          /* espansa */
  --sb-w-collapsed: 4rem; /* solo icone */
  --sb-item-h: 38px;      /* riga voce: altezza del design originale */
  /* Quota a cui si ferma la voce padre aperta: e' l'altezza della testata di
     sezione (padding 10+4 piu' la riga di testo). Sta qui perche' le due cose
     devono muoversi insieme: se cambia il padding della testata, cambia anche
     dove si appoggia la voce sotto. */
  --sb-sec-head-h: 32px;
  --sb-radius: 8px;
  --sb-radius-sm: 6px;

  /* ---- motion ---- */
  --sb-dur: 180ms;
  --sb-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --sb-shadow-flyout: 0 8px 28px rgba(16,24,40,0.16), 0 2px 6px rgba(16,24,40,0.08);
}

/* dark theme (l'app aggiunge .sedna-theme-dark sul root, oppure [data-theme=dark]) */
.sedna-theme-dark .sb,
[data-theme="dark"] .sb {
  --sb-primary: var(--sedna-primary, #42a5f5);
  --sb-primary-hover: #64b5f6;
  --sb-primary-wash: rgba(66,165,245,0.16);
  --sb-primary-on: #07121d;

  --sb-ink: var(--sedna-text, #e7eaee);
  --sb-ink-2: var(--sedna-text-secondary, #a3aab3);
  --sb-ink-3: var(--sedna-text-tertiary, #7f868f);

  --sb-surface: var(--sedna-surface, #171b21);
  --sb-surface-2: var(--sedna-surface-2, #1c212a);
  --sb-surface-3: var(--sedna-surface-3, #232934);
  --sb-border: var(--sedna-border, #2a313b);
  --sb-border-2: var(--sedna-border-light);

  /* Al buio la gerarchia resta la stessa scala di grigi del tema (i token
     --sb-ink/-2/-3 sono già invertiti sopra): niente override di tinta. */

  /* al buio la tasca è un velo di luce, non un'ombra */
  --sb-pocket-bg: rgba(255,255,255,0.028);
  --sb-pocket-shadow: inset 0 1px 2px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.035);

  --sb-shadow-flyout: 0 10px 34px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);
}

/* ============================================================
   SIDEBAR SHELL  (l'<aside>)
   Fixed come la vecchia .sedna-sidenav: il content riserva lo
   spazio con margin-left: var(--sedna-sidebar-width). Allineiamo
   le variabili width ai valori del design (16rem / 4rem) così il
   margin del content e la larghezza della sidebar coincidono.
   ============================================================ */
.sedna-main-layout { --sedna-sidebar-width: 16rem; --sedna-sidebar-collapsed: 4rem; }

.sb {
  position: fixed; top: 0; left: 0;
  display: flex; flex-direction: column;
  min-height: 0; height: 100vh;
  width: var(--sedna-sidebar-width, 16rem);
  background: var(--sb-surface);
  border-right: 1px solid var(--sb-border);
  z-index: 40;
  transition: width var(--sb-dur) var(--sb-ease);
}
.sb.collapsed { width: var(--sedna-sidebar-collapsed, 4rem); }

/* ---- brand ---- */
.sb-brand {
  flex: none;
  display: flex; align-items: center; gap: 11px;
  height: 60px; padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--sb-border-2);
}
.sb-mark { width: 32px; height: 32px; flex: none; display: grid; place-items: center; }
.sb-mark svg, .sb-mark img { width: 32px; height: 32px; display: block; object-fit: contain; }
.sb-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; overflow: hidden; }
.sb-brand-text .n { font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; white-space: nowrap; color: var(--sb-ink); }
.sb-brand-text .n em { font-style: normal; color: var(--sb-primary); }
.sb-brand-text .s { font-size: 0.625rem; color: var(--sb-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-collapse {
  margin-left: auto; flex: none;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid transparent; background: transparent; border-radius: var(--sb-radius-sm);
  color: var(--sb-ink-3); cursor: pointer; font-size: 1rem;
  transition: background var(--sb-dur) var(--sb-ease), color var(--sb-dur) var(--sb-ease);
}
.sb-collapse:hover { background: var(--sb-surface-3); color: var(--sb-ink); }
.sb-collapse i { transition: transform var(--sb-dur) var(--sb-ease); }

/* ---- scroll area ---- */
.sb-scroll {
  /* ⚠️ IL PADDING IN ALTO E' UN TOKEN perche' lo deve conoscere anche la testata di
     sezione appiccicata: `sticky top: 0` si aggancia DENTRO il padding, mentre le voci che
     scorrono sono ritagliate al bordo esterno. Con 8px di scarto restava una fessura da
     cui si vedevano passare le voci sopra la testata. Se i due numeri divergono, la
     fessura torna. */
  --sb-scroll-pad-top: 8px;
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: var(--sb-scroll-pad-top) 10px 4px;
  scrollbar-width: thin; scrollbar-color: var(--sb-border) transparent;
}
.sb-scroll::-webkit-scrollbar { width: 8px; }
.sb-scroll::-webkit-scrollbar-thumb { background: var(--sb-border); border-radius: 999px; border: 2px solid var(--sb-surface); }
.sb-scroll::-webkit-scrollbar-thumb:hover { background: var(--sb-border-2); }
.sb-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

/* ---- ricerca voce (discreta) ---- */
.sb-search { position: relative; margin: 0 2px 8px; }
.sb-search > i {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  font-size: 0.78rem; color: var(--sb-ink-3); pointer-events: none;
}
.sb-search input {
  width: 100%; height: 30px; padding: 0 26px 0 28px;
  border: 1px solid var(--sb-border); border-radius: var(--sb-radius);
  background: var(--sb-surface-2); color: var(--sb-ink);
  font-family: inherit; font-size: 0.8125rem; outline: none;
  transition: border-color var(--sb-dur) var(--sb-ease), background var(--sb-dur) var(--sb-ease);
}
.sb-search input::placeholder { color: var(--sb-ink-3); }
.sb-search input:focus { border-color: var(--sb-primary); background: var(--sb-surface); }
/* nasconde la X nativa del type=search: usiamo il nostro clear */
.sb-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sb-search__clear {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--sb-ink-3);
  cursor: pointer; padding: 3px; border-radius: var(--sb-radius-sm); font-size: 0.72rem;
  transition: background var(--sb-dur) var(--sb-ease), color var(--sb-dur) var(--sb-ease);
}
.sb-search__clear:hover { color: var(--sb-ink); background: var(--sb-surface-3); }

/* ---- risultati ricerca (lista piatta) ---- */
.sb-results { display: flex; flex-direction: column; }
.sb-results__sec {
  margin-left: auto; padding-left: 8px; flex: none;
  font-size: 0.68rem; font-weight: 500; color: var(--sb-ink-3);
  max-width: 42%; overflow: hidden; text-overflow: ellipsis; opacity: 0.85;
}
.sb-results__empty {
  padding: 12px 10px; text-align: center;
  font-size: 0.8125rem; color: var(--sb-ink-3);
}

/* ---- generic item (link row) ---- */
.sb-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  height: var(--sb-item-h); padding: 0 10px;
  border: none; background: transparent; width: 100%;
  border-radius: var(--sb-radius); cursor: pointer;
  color: var(--sb-item-ink); font-family: inherit; font-size: var(--sb-fs-item); font-weight: 500;
  text-align: left; text-decoration: none; white-space: nowrap;
  transition: background var(--sb-dur) var(--sb-ease), color var(--sb-dur) var(--sb-ease);
}
.sb-item > .ic { width: 20px; flex: none; text-align: center; font-size: 1.05rem; color: var(--sb-item-ink); transition: color var(--sb-dur) var(--sb-ease); }
.sb-item > .ic svg { width: 1.05em; height: 1.05em; vertical-align: -0.13em; }
.sb-item > .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sb-item:hover { background: var(--sb-surface-3); color: var(--sb-item-ink-hover); }
.sb-item:hover > .ic { color: var(--sb-item-ink-hover); }

/* count / chevron trailing */
.sb-item .badge-n {
  flex: none; font-size: 0.6875rem; font-weight: 600;
  background: var(--sb-surface-3); color: var(--sb-ink-3);
  padding: 0 7px; line-height: 17px; border-radius: 999px;
}
.sb-item .chev { flex: none; color: var(--sb-ink-3); font-size: 0.8rem; transition: transform var(--sb-dur) var(--sb-ease); }
.sb-item.open .chev { transform: rotate(90deg); }

/* active item */
.sb-item.active {
  background: var(--sb-primary-wash); color: var(--sb-primary); font-weight: 600;
}
.sb-item.active > .ic { color: var(--sb-primary); }
.sb-item.active::before {
  content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--sb-primary);
}
/* Gruppo che CONTIENE la pagina aperta: con le voci in grigio l'icona blu da
   sola non bastava a capire "sei qui dentro" — testo scuro e semibold. */
.sb-item.in-path { color: var(--sb-ink); font-weight: 600; }
.sb-item.in-path > .ic { color: var(--sb-primary); }

/* top single item (Dashboard) */
.sb-top { margin-bottom: 4px; }

/* ============================================================
   SECTION (accordion)
   ============================================================ */
.sb-section { margin-top: 2px; }

/* SEPARATORE fra sezioni: filo che sfuma ai lati — chiude la sezione
   precedente senza tagliare la sidebar in due. */
/* ⚠️ IL FILO STA IN FONDO ALLA SEZIONE CHE CHIUDE, non in cima a quella che
   apre. Scritto al contrario, il filo e i suoi 8px di margine finivano SOPRA la testata
   appiccicata e scorrevano con la pagina: restava una fessura in alto da cui si vedevano
   passare le voci della sezione precedente (Antonio, 20/08: «si vedono gli elementi che
   scrollano sopra Tabelle Generali»). Appartenendo alla sezione di sopra, adesso quello
   spazio scorre SOTTO la testata insieme al resto. */
.sb-section:has(+ .sb-section)::after,
.sb-top:has(+ .sb-section)::after {
  content: ""; display: block; height: 1px; margin: 8px 12px 0;
  background: linear-gradient(90deg, transparent, var(--sb-border) 18%,
                                      var(--sb-border) 82%, transparent);
}

.sb-sec-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 10px 4px; border: none; background: transparent; cursor: pointer;
  font-family: inherit; color: var(--sb-sec-ink);
  font-size: var(--sb-fs-sec); font-weight: 500; letter-spacing: 0.02em;
  transition: color var(--sb-dur) var(--sb-ease);
}
.sb-sec-head:hover { color: var(--sb-sec-ink-hover); }
.sb-sec-head .sh-lbl { flex: 1; text-align: left; }
.sb-sec-head .sh-chev { font-size: 0.7rem; transition: transform var(--sb-dur) var(--sb-ease); }
.sb-section.open .sb-sec-head .sh-chev { transform: rotate(90deg); }
.sb-section.has-active .sb-sec-head { color: var(--sb-primary); }

/* collapsible body */
.sb-sec-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--sb-dur) var(--sb-ease);
}
.sb-section.open .sb-sec-body { grid-template-rows: 1fr; }
.sb-sec-inner {
  overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 1px;
  margin: 0 8px; padding: 0 4px; border-radius: 10px;
  background: transparent; box-shadow: none;
  transition: background var(--sb-dur) var(--sb-ease), box-shadow var(--sb-dur) var(--sb-ease);
}
/* TASCA: la sezione aperta vive in un incavo appena accennato — il confine con
   la sezione successiva si legge senza righe marcate né campiture colorate. */
.sb-section.open .sb-sec-inner {
  overflow: visible;
  padding: 4px; margin-bottom: 6px;
  background: var(--sb-pocket-bg);
  box-shadow: var(--sb-pocket-shadow);
}

/* ============================================================
   NESTED SUB-ITEMS (livello 2)
   ============================================================ */
.sb-subwrap {
  position: relative;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--sb-dur) var(--sb-ease);
  margin-left: 22px;
}
.sb-item.open + .sb-subwrap { grid-template-rows: 1fr; }
.sb-sub-inner { overflow: hidden; min-height: 0; }
.sb-item.open + .sb-subwrap .sb-sub-inner { padding: 2px 0; }
/* ═══ VOCI PADRE APPICCICATE (Antonio, 20/08) ═══════════════════════════════
   Scorrendo un menu profondo — Tabelle Generali → Articoli → ventidue voci —
   si perdeva di vista DOVE si stava guardando: restavano solo le foglie.
   Ora la testata di sezione e la voce padre aperta restano in alto, una sotto
   l'altra, e scorre solo il contenuto.

   ⚠️ SENZA SCROLLBAR ANNIDATE: non si aggiunge nessun contenitore che scorre.
      L'unico che scorre resta .sb-scroll — queste due righe si limitano a
      fermarsi al bordo mentre il resto passa sotto.

   ⚠️ E' QUI CHE SERVE `overflow: visible`: l'accordion anima con
      grid-template-rows 0fr→1fr e tiene `overflow: hidden` sull'interno, che
      crea un contenitore di ritaglio — dentro il quale `sticky` non ha nessuno
      scrollport a cui agganciarsi e semplicemente non fa niente. A sezione
      APERTA il ritaglio non serve piu' (il contenuto e' tutto disteso), quindi
      si toglie; resta durante l'apertura e la chiusura, dove serve davvero. */
.sb-section.open > .sb-sec-body > .sb-sec-inner {
  overflow: visible;
}

/* ═══ LE FIGLIE SCORRONO DENTRO IL PADRE ═══════════════════════════════════
   Aprendo Articoli — ventidue voci — il menu diventava piu' alto della sidebar e
   scorrendo si perdevano di vista Clienti e Fornitori, che sono FRATELLI di Articoli
   e stanno sotto (Antonio, 20/08). Tenerli fermi con `sticky` non era possibile: sono
   dopo la lista, non prima.

   Quindi la lista figlia ha una sua altezza massima e scorre al proprio interno. Il
   menu intorno non si muove: il padre resta visibile sopra, i fratelli sotto.

   ⚠️ LO SCORRIMENTO PROSEGUE SUL MENU quando la lista finisce, ed e' voluto: senza,
      arrivati all'ultima voce figlia la rotellina si ferma li' e non ci si accorge che sotto
      ci sono altre sezioni (Antonio, 20/08, seconda passata).
      Per un'ora c'e' stato `overscroll-behavior: contain`, chiesto quando la lista figlia NON
      scorreva ancora per conto suo: allora «mi muove il menu» voleva dire che il menu partiva
      al posto della lista. Adesso parte DOPO, ed e' il modo in cui si scopre il resto.
      Se un giorno tornasse la voglia di bloccarlo, e' questa la ragione per cui non si fa.

   ⚠️ La barra e' quasi invisibile e si accende all'ingresso del mouse: una barra
      annidata sempre a video e' quello che non volevamo, ma una zona che scorre senza
      dirlo non si scopre. Cosi' non disturba e si vede quando serve. */
.sb-item.open + .sb-subwrap > .sb-sub-inner {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: min(320px, 38vh);
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color var(--sb-dur) var(--sb-ease);
}

.sb-item.open + .sb-subwrap > .sb-sub-inner:hover {
  scrollbar-color: var(--sb-border) transparent;
}

.sb-item.open + .sb-subwrap > .sb-sub-inner::-webkit-scrollbar { width: 6px; }
.sb-item.open + .sb-subwrap > .sb-sub-inner::-webkit-scrollbar-thumb {
  background: transparent; border-radius: 999px;
  transition: background var(--sb-dur) var(--sb-ease);
}
.sb-item.open + .sb-subwrap > .sb-sub-inner:hover::-webkit-scrollbar-thumb {
  background: var(--sb-border);
}

.sb-scroll .sb-sec-head {
  position: sticky;
  /* ⚠️ NEGATIVO, ED E' LA CORREZIONE DELLA FESSURA: con `top: 0` la testata si fermava
     al bordo INTERNO del padding (68px) mentre le voci venivano ritagliate a quello
     esterno (60px), e in quegli 8px si vedevano scorrere le voci della sezione di sopra
     — misurato a video il 20/08, dopo che il primo tentativo (spostare il filo
     separatore) aveva tolto solo meta' del problema. */
  top: calc(-1 * var(--sb-scroll-pad-top, 8px));
  z-index: 3;
  /* Opaco: sotto ci passano le voci, e in trasparenza si leggerebbero due
     testi sovrapposti. */
  background: var(--sb-surface);
}

/* ⚠️ LA VOCE PADRE NON E' PIU' APPICCICATA, ed e' un miglioramento non una
   rinuncia: adesso resta visibile perche' la sua lista scorre DENTRO di lei, non perche'
   si incolla in alto. Il `sticky` a meta' altezza era anche quello che faceva vedere le
   voci passarle sotto a mezz'aria. Se un giorno servisse rimetterlo, va rimesso INSIEME
   al ritaglio giusto, non da solo. */

.sb-subitem {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  height: 32px; padding: 0 10px 0 14px;
  border: none; background: transparent; width: 100%;
  border-radius: var(--sb-radius-sm); cursor: pointer;
  color: var(--sb-ink-3); font-family: inherit; font-size: var(--sb-fs-sub); font-weight: 500;
  font-style: italic; /* foglie (2°/3° livello): corsivo per distinguerle dai gruppi */
  text-align: left; text-decoration: none; white-space: nowrap;
  transition: background var(--sb-dur) var(--sb-ease), color var(--sb-dur) var(--sb-ease);
}
.sb-subitem .dot {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--sb-border); transition: background var(--sb-dur) var(--sb-ease);
}
.sb-subitem .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sb-subitem:hover { background: var(--sb-surface-3); color: var(--sb-ink-2); }
.sb-subitem:hover .dot { background: var(--sb-ink-3); }
/* Foglia ATTIVA: oltre alla tinta, la barretta verticale a sinistra (come le voci
   di primo livello) e niente corsivo — deve saltare all'occhio anche a 10px. */
.sb-subitem.active {
  color: var(--sb-primary); font-weight: 700; font-style: normal;
  background: var(--sb-primary-wash);
}
.sb-subitem.active .dot { background: var(--sb-primary); }
.sb-subitem.active::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--sb-primary);
}
/* guide line for nested group */
.sb-sub-inner::before {
  content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 1px;
  background: var(--sb-border);
}

/* ============================================================
   COLLAPSED (rail) MODE
   ============================================================ */
.sb.collapsed .sb-brand { padding: 0; justify-content: center; }
.sb.collapsed .sb-brand-text { display: none; }
.sb.collapsed .sb-collapse { position: absolute; top: 15px; right: -13px;
  background: var(--sb-surface); border: 1px solid var(--sb-border); width: 26px; height: 26px;
  box-shadow: 0 1px 3px rgba(16,24,40,0.12); z-index: 5; }
.sb.collapsed .sb-collapse:hover { background: var(--sb-surface-3); }
.sb.collapsed .sb-collapse i { transform: rotate(180deg); }

.sb.collapsed .sb-item { justify-content: center; padding: 0; gap: 0; }
.sb.collapsed .sb-item > .lbl,
.sb.collapsed .sb-item .badge-n,
.sb.collapsed .sb-item .chev { display: none; }
.sb.collapsed .sb-item.active::before { left: 0; top: 6px; bottom: 6px; }

/* section header → divider with a tiny glyph */
.sb.collapsed .sb-sec-head { padding: 10px 0 6px; justify-content: center; pointer-events: none; }
.sb.collapsed .sb-sec-head .sh-lbl,
.sb.collapsed .sb-sec-head .sh-chev { display: none; }
.sb.collapsed .sb-sec-head::after {
  content: ""; width: 18px; height: 1px; background: var(--sb-border); display: block;
}
/* in collapsed, always show section bodies (rail shows all icons), hide nested inline */
.sb.collapsed .sb-sec-body { grid-template-rows: 1fr; }
.sb.collapsed .sb-subwrap { display: none; }
/* nel rail il separatore è già il glifo dell'header: niente filo né tasca */
.sb.collapsed .sb-section + .sb-section::before,
.sb.collapsed .sb-top + .sb-section::before { display: none; }
.sb.collapsed .sb-sec-inner,
.sb.collapsed .sb-section.open .sb-sec-inner {
  margin: 0; padding: 0; background: transparent; box-shadow: none;
}

/* ============================================================
   FLYOUT (collapsed hover) — posizionato via JS in document.body
   ============================================================ */
.sb-flyout {
  position: fixed; z-index: 80;
  min-width: 210px; max-width: 260px;
  background: var(--sb-surface, #fff); border: 1px solid var(--sb-border, #e4e7eb);
  border-radius: 10px; box-shadow: var(--sb-shadow-flyout, 0 8px 28px rgba(16,24,40,0.16));
  padding: 6px; opacity: 0; transform: translateX(-6px);
  pointer-events: none; transition: opacity 120ms cubic-bezier(0.25,1,0.5,1), transform 120ms cubic-bezier(0.25,1,0.5,1);
}
.sb-flyout.show { opacity: 1; transform: none; pointer-events: auto; }
.sb-flyout .fly-title {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--sb-border-2, #eceef1);
  font-size: 0.8125rem; font-weight: 700; color: var(--sb-ink, #1c2127);
}
.sb-flyout .fly-title .ic { color: var(--sb-primary, #1e88e5); font-size: 1rem; width: 18px; text-align: center; }
.sb-flyout .fly-title.solo { border-bottom: none; margin-bottom: 0; padding-bottom: 7px; }
.sb-fly-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 9px; border-radius: 6px;
  font-size: var(--sb-fs-item, 0.75rem); color: var(--sb-ink-2, #59616b); cursor: pointer; text-decoration: none;
  font-style: italic; /* stesse foglie del menu espanso: corsivo anche nel flyout */
  white-space: nowrap;
}
.sb-fly-item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sb-border, #e4e7eb); flex: none; }
.sb-fly-item:hover { background: var(--sb-surface-3, #eef0f3); color: var(--sb-ink, #1c2127); }
.sb-fly-item.active { color: var(--sb-primary, #1e88e5); font-weight: 600; background: var(--sb-primary-wash, #e3f2fd); }
.sb-fly-item.active .dot { background: var(--sb-primary, #1e88e5); }
.sedna-theme-dark .sb-flyout, [data-theme="dark"] .sb-flyout {
  --sb-surface: #171b21; --sb-border: #2a313b; --sb-border-2: #232a33;
  --sb-ink: #e7eaee; --sb-ink-2: #a3aab3; --sb-primary: #42a5f5;
  --sb-surface-3: #232934; --sb-primary-wash: rgba(66,165,245,0.16);
}

/* ============================================================
   FOOTER (account / tools)
   ============================================================ */
.sb-foot { flex: none; border-top: 1px solid var(--sb-border-2); padding: 8px 10px; }
.sb-tools { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.sb-tool {
  position: relative;
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid transparent; background: transparent; border-radius: var(--sb-radius-sm);
  color: var(--sb-ink-2); cursor: pointer; font-size: 1rem;
  transition: background var(--sb-dur) var(--sb-ease), color var(--sb-dur) var(--sb-ease);
}
.sb-tool:hover { background: var(--sb-surface-3); color: var(--sb-ink); }
.sb-tool .dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #e53935; border: 1.5px solid var(--sb-surface); }
.sb-tool .tool-badge { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; line-height: 14px; padding: 0 3px; font-size: 0.5625rem; font-weight: 700; border-radius: 999px; background: #f59e0b; color: #fff; text-align: center; }
.sb-tools .tools-sp { flex: 1; }

.sb-user {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 8px; border: none; background: transparent; border-radius: var(--sb-radius);
  cursor: pointer; text-align: left;
  transition: background var(--sb-dur) var(--sb-ease);
}
.sb-user:hover { background: var(--sb-surface-3); }
.sb-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--sb-primary-wash); color: var(--sb-primary);
  display: grid; place-items: center; font-weight: 700; font-size: 0.8125rem;
  border: 1px solid var(--sb-border);
}
.sb-user-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.sb-user-meta .un { font-weight: 600; font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sb-ink); }
.sb-user-meta .ue { font-size: 0.6875rem; color: var(--sb-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user .dots { flex: none; color: var(--sb-ink-3); font-size: 1rem; }

/* tenant switcher row (riusa lo stile user) */
.sb-tenant { margin-bottom: 6px; }
.sb-tenant .sb-avatar { background: var(--sb-surface-3); color: var(--sb-ink-2); border-radius: var(--sb-radius-sm); }

.sb.collapsed .sb-tools { flex-direction: column; gap: 4px; margin-bottom: 6px; }
.sb.collapsed .sb-tools .tools-sp { display: none; }
.sb.collapsed .sb-user, .sb.collapsed .sb-tenant { justify-content: center; padding: 6px 0; }
.sb.collapsed .sb-user-meta, .sb.collapsed .sb-user .dots,
.sb.collapsed .sb-tenant .sb-user-meta, .sb.collapsed .sb-tenant .dots { display: none; }

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.sb-overlay {
  position: fixed; inset: 0; z-index: 38; background: rgba(16,24,40,0.45);
  opacity: 0; pointer-events: none; transition: opacity var(--sb-dur) var(--sb-ease, cubic-bezier(0.25,1,0.5,1));
}
[data-theme="dark"] .sb-overlay, .sedna-theme-dark .sb-overlay { background: rgba(0,0,0,0.6); }

@media (max-width: 1024px) {
  .sb {
    width: 16rem !important;
    transform: translateX(-100%); transition: transform var(--sb-dur) var(--sb-ease);
    box-shadow: var(--sb-shadow-flyout);
  }
  .sb.is-open { transform: none; }
  /* in mobile ignora il rail: mostra sempre etichette */
  .sb.collapsed .sb-item { justify-content: flex-start; padding: 0 10px; gap: 11px; }
  .sb.collapsed .sb-item > .lbl, .sb.collapsed .sb-item .badge-n, .sb.collapsed .sb-item .chev { display: flex; }
  .sb.collapsed .sb-brand-text { display: flex; }
  .sb-collapse { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sb *, .sb-flyout, .sb-overlay { transition: none !important; }
}