/* ============================================================================
   Domus shell — la sidebar condivisa di Domus.
   UNA fonte di verità per la navigazione e il menu account, usata da /domus,
   /valutazione, /app/team, /profilo e /impostazioni.

   Resilienza: questo foglio e domus-shell.js sono separati. Se il JS non carica,
   il CSS c'è comunque e la navigazione statica di fallback resta leggibile e
   cliccabile — vedi .ds-fallback e il commento in domus-shell.js.

   Namespace: tutto è prefissato .ds- per non collidere con gli stili delle
   pagine ospiti (domus.html usa .side/.nav propri).
   Le variabili sono ridefinite qui, così la sidebar è corretta anche su una
   pagina che non dichiara i token del brand.
   ============================================================================ */

.ds-shell{
  --ds-navy:#14213A; --ds-pomp:#9B3329; --ds-pomp-light:#A34A40; --ds-crema:#F7EDE2;
  --ds-sans:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif;
  display:flex; min-height:100vh; align-items:stretch;
}

/* ---------- SIDEBAR ---------- */
.ds-side{
  width:248px; flex-shrink:0; background:var(--ds-navy); color:var(--ds-crema);
  display:flex; flex-direction:column; padding:22px 14px;
  font-family:var(--ds-sans);
}
/* Il logo di Domus: versione negativa, perché il fondo è navy. 26 px di altezza. */
.ds-brand{display:flex; align-items:center; align-self:flex-start; padding:0 8px 22px; text-decoration:none}
.ds-brand img{display:block; height:26px; width:auto}

.ds-group{font-size:10.5px; letter-spacing:1.3px; color:rgba(247,237,226,.4);
  padding:16px 10px 7px; font-weight:600}

.ds-nav{display:flex; flex-direction:column}
.ds-nav a{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:8px;
  color:rgba(247,237,226,.72); text-decoration:none; font-size:14px; margin-bottom:2px}
.ds-nav a .ds-ico{width:17px; text-align:center; opacity:.85; font-size:14px}
.ds-nav a:hover{background:rgba(247,237,226,.07); color:var(--ds-crema)}
.ds-nav a.ds-on{background:var(--ds-pomp); color:#fff; font-weight:600}

.ds-spacer{flex:1; min-height:12px}

/* ---------- ACCOUNT CHIP + MENU (apre verso l'alto) ---------- */
.ds-account{position:relative; margin-top:12px; padding-top:12px; flex-shrink:0;
  border-top:1px solid rgba(247,237,226,.1); font-family:var(--ds-sans)}
.ds-chip{display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px;
  border-radius:11px; background:transparent; border:none; cursor:pointer;
  font-family:inherit; text-align:left; transition:background .15s}
.ds-chip:hover{background:rgba(247,237,226,.07)}
.ds-av{width:32px; height:32px; border-radius:50%; background:var(--ds-pomp-light);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
  color:#fff; flex-shrink:0; object-fit:cover}
.ds-chip-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.ds-chip-name{font-size:13px; color:var(--ds-crema); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ds-chip-sub{font-size:11px; color:rgba(247,237,226,.45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ds-chevron{width:15px; height:15px; color:rgba(247,237,226,.5); flex-shrink:0; transition:transform .2s}
.ds-account.ds-open .ds-chevron{transform:rotate(180deg)}

.ds-menu{position:absolute; left:0; right:0; bottom:calc(100% - 2px);
  background:#1e2d4a; border:1px solid rgba(247,237,226,.14); border-radius:12px;
  padding:6px; box-shadow:0 -10px 30px rgba(0,0,0,.28);
  opacity:0; transform:translateY(6px) scale(.98); pointer-events:none;
  transition:opacity .16s, transform .16s}
.ds-account.ds-open .ds-menu{opacity:1; transform:translateY(0) scale(1); pointer-events:auto}
.ds-item{display:flex; align-items:center; gap:11px; width:100%; padding:10px 12px;
  border-radius:9px; font-size:13.5px; font-weight:500; color:rgba(247,237,226,.85);
  text-decoration:none; background:none; border:none; cursor:pointer;
  font-family:inherit; text-align:left}
.ds-item .ds-ico{width:18px; text-align:center; color:rgba(247,237,226,.55); flex-shrink:0}
.ds-item:hover{background:rgba(247,237,226,.08)}
.ds-item.ds-logout{color:#e0988f}
.ds-item.ds-logout:hover{background:rgba(224,152,143,.12)}
.ds-sep{height:1px; background:rgba(247,237,226,.1); margin:6px 8px}

/* ---------- MAIN ---------- */
.ds-main{flex:1; min-width:0; display:flex; flex-direction:column}

/* ---------- FALLBACK senza JS ----------
   È il contenuto statico dentro il mount point finché domus-shell.js non lo
   sostituisce. Se il JS fallisce, questo resta: la pagina non perde la
   navigazione. Impaginato come una mini-sidebar leggibile. */
.ds-fallback{display:flex; flex-direction:column; gap:2px; padding:4px}
.ds-fallback a{display:block; padding:9px 10px; border-radius:8px; font-size:14px;
  color:rgba(247,237,226,.8); text-decoration:none}
.ds-fallback a:hover{background:rgba(247,237,226,.08); color:var(--ds-crema)}

/* ---------- MOBILE ----------
   Progressive enhancement: SENZA JS (`.ds-shell` senza `.ds-js`) la sidebar si
   impila in cima e resta usabile — niente hamburger da cliccare, niente nav
   persa. CON JS (`.ds-js`, aggiunta da mount()) la sidebar va a scomparsa con
   l'hamburger, per non rubare spazio al contenuto. */
.ds-menu-btn{display:none; background:none; border:none; color:var(--ds-navy);
  font-size:22px; cursor:pointer; padding:8px 4px; align-self:flex-start}
.ds-backdrop{display:none}
@media (max-width:820px){
  /* fallback senza JS: impilata in cima */
  .ds-shell:not(.ds-js){flex-direction:column}
  .ds-shell:not(.ds-js) .ds-side{width:auto}

  /* con JS: a scomparsa da sinistra */
  .ds-shell.ds-js .ds-side{position:fixed; top:0; left:0; bottom:0; z-index:60;
    transform:translateX(-100%); transition:transform .22s ease; box-shadow:2px 0 24px rgba(0,0,0,.25)}
  .ds-shell.ds-js .ds-side.ds-side-open{transform:translateX(0)}
  .ds-shell.ds-js .ds-menu-btn{display:inline-flex}
  .ds-backdrop.ds-on{display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:55}
}