/* ════════════════════════════════════════════════════════════════
   CHROME — sistema tipografico/cromatico UNIFICATO (topbar · navbar · sidebar)
   ----------------------------------------------------------------
   Un solo set di RUOLI testo/colore, applicato identico alle tre aree,
   pensato per essere replicato in tutta l'app.

     RUOLI TESTO
       label    → voci di navigazione, azioni            (--chrome-text, 13/500)
       strong   → hover / testo attivo                   (--chrome-text-strong)
       faint    → heading di sezione, meta               (--chrome-text-faint)
       brand    → wordmark editoriale                    (serif, viola)

     COLORE-RUOLO
       VIOLA  (--accent)  = identità: brand, voce attiva, avatar, storia corrente
       BLU    (--control) = azione/focus: ricerca, controlli
       AMBRA  (--warning) = conteggi/badge
       superfici fredde esistenti, più calme e sottili

   Caricato per ULTIMO da index.php (?v=filemtime): priorità di cascata + cache-busting.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* — ruoli testo condivisi (chrome) — */
  --chrome-text:          var(--text-secondary);
  --chrome-text-strong:   var(--text-primary);
  --chrome-text-faint:    var(--text-tertiary, color-mix(in srgb, var(--text-secondary) 70%, transparent));
  --chrome-ident:         var(--accent);

  /* — superfici / linee — */
  /* canonico = colore della SIDEBAR globale: topbar+navbar agganciate al suo token */
  --chrome-surface:       var(--ms-app-sidebar-bg, var(--surface-panel));
  --chrome-line:          var(--border-subtle, var(--line-soft));
  --chrome-hover-bg:      var(--state-hover-bg, var(--surface-raised));

  /* — stato attivo UNIFICATO (identico a navbar attiva = state-selected) — */
  --chrome-active-bg:     var(--state-selected-bg);
  --chrome-active-border: var(--state-selected-border);
  --chrome-active-text:   var(--text-primary);

  /* — scala tipografica (dal sistema globale --type-*) — */
  --chrome-label-size:    var(--type-label-size, 13px);
  --chrome-label-weight:  var(--type-label-weight, 500);
  --chrome-active-weight:  600;
  --chrome-heading-size:  11px;
  --chrome-heading-weight: 600;
  --chrome-heading-spacing:0.08em;

  /* — GEOMETRIA item condivisa (la primitiva unica delle tre zone) — */
  --chrome-item-h:        34px;   /* altezza voce */
  --chrome-item-radius:   var(--radius-sm, 8px);
  --chrome-item-gap:      8px;    /* gap icona↔label */
  --chrome-item-pad-x:    10px;
  --chrome-icon-size:     18px;
  --chrome-icon-stroke:   1.9;
}

/* Primitiva-icona uniforme nelle tre zone (stessa dimensione e tratto) */
#appTopbar .topbar-actions svg,
#appTopbar .global-search-form .icon-btn svg,
#routerNav :is(.nav-ico, .ms-app-route-nav__icon) svg,
#workspaceSidebar .workspace-nav-ico svg{
  width:var(--chrome-icon-size) !important;
  height:var(--chrome-icon-size) !important;
  stroke-width:var(--chrome-icon-stroke) !important;
}


/* ══════════════ TOPBAR — sottile, calma, non dominante ══════════════ */

#appTopbar.topbar{
  gap:12px;
  padding:0 16px;
  min-height:52px;
  background:var(--chrome-surface) !important;
  border-bottom:1px solid var(--chrome-line) !important;
  backdrop-filter:none !important;
  color:var(--chrome-text);
}

/* Wordmark "My Story" — brand editoriale: serif viola, leggibile.
   !important su size/weight per battere app-sidebar.css (#appTopbar .workspace-brand-text → 14px/600). */
#appTopbar .workspace-top-brand .workspace-brand-text,
#appTopbar .workspace-brand-text{
  font-family:var(--font-serif, 'Fraunces', Georgia, serif) !important;
  font-weight:700 !important;
  font-size:18px !important;
  letter-spacing:-0.01em !important;
  line-height:1.1 !important;
  color:#C2B6F5 !important;                         /* viola brillante (=--accent-hover) per contrasto certo */
  -webkit-text-fill-color:#C2B6F5 !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  opacity:1 !important;
}
#appTopbar .workspace-brand-logo{ border-radius:6px; }

/* Badge storia attiva — testo LEGGIBILE su tinta viola (no viola-su-viola),
   con puntino viola come segnale d'identità */
#appTopbar .topbar-series-badge{
  font-weight:var(--chrome-label-weight) !important;
  font-size:var(--chrome-label-size) !important;
  color:var(--chrome-text-strong) !important;
  background:var(--accent-soft) !important;
  border:1px solid var(--accent-muted) !important;
}

/* Pulsanti-icona (toggle, help, ricerca) — ghost neutri, 34px */
#appTopbar .topbar-actions .icon-btn,
#appTopbar .global-search-form .icon-btn,
#appTopbar .workspace-sidebar-toggle,
#appTopbar .topbar-account-toggle{
  width:34px; min-width:34px; height:34px; min-height:34px;
  border-radius:var(--radius-sm, 8px) !important;
  background:transparent !important;
  border:1px solid transparent !important;
  color:var(--chrome-text) !important;
  font-size:18px;
  font-weight:var(--chrome-label-weight);
  box-shadow:none !important;
}
#appTopbar .topbar-actions .icon-btn:hover:not(:disabled),
#appTopbar .global-search-form .icon-btn:hover:not(:disabled),
#appTopbar .workspace-sidebar-toggle:hover,
#appTopbar .topbar-account-toggle:hover{
  background:var(--chrome-hover-bg) !important;
  border-color:var(--border-default, var(--line-soft)) !important;
  color:var(--chrome-text-strong) !important;
}

/* Ricerca globale — calma; focus blu funzionale */
#appTopbar .global-search-input{
  background:var(--surface-input, var(--bg-input)) !important;
  border:1px solid var(--border-default, var(--line-soft)) !important;
  color:var(--chrome-text-strong) !important;
  font-size:var(--chrome-label-size) !important;
  border-radius:var(--radius-sm, 8px) !important;
  box-shadow:none !important;
}
#appTopbar .global-search-input::placeholder{ color:var(--chrome-text-faint); }
#appTopbar .global-search-input:focus{
  outline:none;
  border-color:var(--control-muted, var(--accent-strong)) !important;
  box-shadow:0 0 0 3px var(--control-soft, var(--state-focus-ring)) !important;
}

/* Avatar account — identità VIOLA (non colore per-utente fuori palette).
   !important per vincere lo stile inline di topbar-account.js. */
#appTopbar .topbar-account-avatar{
  background:var(--accent-soft) !important;
  background-color:var(--accent-soft) !important;
  border:1px solid var(--accent-muted, var(--accent)) !important;
  color:var(--text-primary) !important;          /* iniziali chiare e leggibili */
  -webkit-text-fill-color:var(--text-primary) !important;
  font-weight:var(--chrome-active-weight) !important;
}


/* ══════════════ NAVBAR (bottombar) ══════════════ */

/* label uniformi + token nav allineati al sistema */
:root{
  --ms-app-route-nav-label-font-size:  var(--chrome-label-size);
  --ms-app-route-nav-label-font-weight:var(--chrome-label-weight);
  --ms-app-route-nav-text:             var(--chrome-text);
  --ms-app-route-nav-text-muted:       var(--chrome-text);
  --ms-app-route-nav-active-bg:        var(--chrome-active-bg);
  --ms-app-route-nav-active-border:    var(--chrome-active-border);
  --ms-app-route-nav-active-text:      var(--chrome-active-text);
  --ms-app-route-nav-hover-bg:         var(--chrome-hover-bg);
  /* geometria condivisa */
  --ms-app-route-nav-item-radius:      var(--chrome-item-radius);
  --ms-app-route-nav-item-gap:         var(--chrome-item-gap);
  --ms-app-route-nav-icon-size:        var(--chrome-icon-size);
}

/* item navbar: stessa altezza/padding/raggio/peso/opacità della primitiva condivisa
   (la navbar aveva opacity:.94 → sembrava più leggera della sidebar) */
#routerNav .nav-bottom a,
#routerNav .ms-app-route-nav__link{
  min-height:var(--chrome-item-h) !important;
  padding:0 var(--chrome-item-pad-x) !important;
  border-radius:var(--chrome-item-radius) !important;
  gap:var(--chrome-item-gap) !important;
  opacity:1 !important;
  font-weight:var(--chrome-label-weight) !important;
  color:var(--chrome-text) !important;
}

/* voce attiva — riempimento viola UNIFICATO (legacy + nuove classi) */
#routerNav .nav-bottom a:is(.active, .is-current, [aria-current="page"]),
#routerNav .ms-app-route-nav__link:is(.active, .is-current, [aria-current="page"]){
  /* background/border lasciati ai token --ms-app-route-nav-active-* (no override duro) */
  color:var(--chrome-active-text) !important;
  font-weight:var(--chrome-active-weight) !important;
}
#routerNav .nav-bottom a:is(.active, .is-current, [aria-current="page"]) :is(.nav-ico, svg),
#routerNav .ms-app-route-nav__link:is(.active, .is-current, [aria-current="page"]) :is(.ms-app-route-nav__icon, .nav-ico, svg){
  color:var(--chrome-active-text) !important;
}

/* Route storyboard: pareggia l'override dedicato di unified-pass.css (caricato dopo → vince) */
body:has(#route-storyboards) #routerNav.bottombar .nav-bottom a:is(.active, .is-current, [aria-current="page"]),
body:has(#route-storyboards) #routerNav.bottombar .nav-bottom a:is(.active, .is-current, [aria-current="page"]):hover{
  background:var(--chrome-active-bg) !important;
  background-color:var(--chrome-active-bg) !important;
  background-image:none !important;
  border-color:var(--chrome-active-border) !important;
  color:var(--chrome-active-text) !important;
}

/* Badge conteggio — ambra calma (entrambi i sistemi di classi) */
#routerNav .ms-app-route-nav__badge,
#routerNav .nav-bottom .nav-item-badge{
  background:var(--warning, #C4A574) !important;
  border-color:color-mix(in srgb, var(--warning, #C4A574) 68%, black 32%) !important;
  color:#1A1816 !important;
  font-weight:var(--chrome-active-weight) !important;
}


/* ══════════════ SIDEBAR — quieta, architettonica ══════════════ */

/* label/icone uniformi + token sidebar allineati */
:root{
  --ms-sidebar-nav-font-size:    var(--chrome-label-size);
  --ms-sidebar-nav-font-weight:  var(--chrome-label-weight);
  --ms-sidebar-text:             var(--chrome-text);
  --ms-sidebar-text-strong:      var(--chrome-text-strong);
  --ms-sidebar-icon-color:       var(--chrome-text);
  --ms-sidebar-hover-bg:         var(--chrome-hover-bg);
  --ms-sidebar-active-bg:        var(--chrome-active-bg);
  --ms-sidebar-active-text:      var(--chrome-active-text);
  --ms-sidebar-active-border:    var(--chrome-active-border);
  /* geometria condivisa */
  --ms-sidebar-item-height:      var(--chrome-item-h);
  --ms-sidebar-item-radius:      var(--chrome-item-radius);
  --ms-sidebar-item-gap:         var(--chrome-item-gap);
  --ms-sidebar-icon-size:        var(--chrome-icon-size);
}

/* Voci sidebar + "+ Crea" + righe progetto: stesso peso/size/colore della navbar.
   Includo .workspace-label (lo span "Crea"/"Home"/… che aveva size minore). */
#workspaceSidebar :is(.workspace-nav-link, .workspace-create-btn, .workspace-project-main),
#workspaceSidebar :is(.workspace-nav-link, .workspace-create-btn) .workspace-label{
  font-size:var(--chrome-label-size) !important;
  font-weight:var(--chrome-label-weight) !important;
  color:var(--chrome-text) !important;
}

/* Heading di sezione (Insights, Storie) — uniformi: maiuscoletto, faint */
#workspaceSidebar :is(.ms-app-sidebar__section-title, .workspace-section-head strong, .workspace-projects-head strong, .workspace-projects-head-label){
  font-size:var(--chrome-heading-size) !important;
  font-weight:var(--chrome-heading-weight) !important;
  letter-spacing:var(--chrome-heading-spacing) !important;
  text-transform:uppercase !important;
  color:var(--chrome-text-faint) !important;
}

/* Voce di navigazione attiva — stesso riempimento viola della navbar + icona chiara */
#workspaceSidebar .workspace-nav-link:is(.is-current, [aria-current="page"]){
  background:var(--chrome-active-bg) !important;
  background-color:var(--chrome-active-bg) !important;
  border-color:var(--chrome-active-border) !important;
  color:var(--chrome-active-text) !important;
  font-weight:var(--chrome-active-weight) !important;
}
#workspaceSidebar .workspace-nav-link:is(.is-current, [aria-current="page"]) .workspace-nav-ico{
  color:var(--chrome-active-text) !important;
}

/* Nome storia lungo: tronca con ellissi, non sbordare oltre il bottone/menu
   (la riga è grid: dot | name(1fr) | auto — basta troncare lo span del nome) */
#workspaceSidebar .workspace-project-main{
  overflow:hidden !important;
}
#workspaceSidebar .workspace-project-main .workspace-project-name{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* Storia corrente — identità viola (indicatore laterale, resta una riga di lista) */
#workspaceSidebar .workspace-project-row.is-current-project .workspace-project-main{
  box-shadow:none !important;
  color:var(--chrome-text-strong) !important;
  font-weight:var(--chrome-active-weight) !important;
}


/* ── Sidebar: storia corrente con sfondo viola VISIBILE ──
   La globale .btn (unified-pass:433, specificità 2,1,0) forza background:transparent.
   La batto con 2 id (#workspaceShell #workspaceSidebar) solo sulla storia attiva. */
/* Storia selezionata = STESSO stile della navbar attiva (state-selected + bordo + radius 8) */
#workspaceShell #workspaceSidebar .workspace-project-row.is-active .workspace-project-main,
#workspaceShell #workspaceSidebar .workspace-project-row.is-current-project .workspace-project-main{
  background:var(--state-selected-bg) !important;
  background-color:var(--state-selected-bg) !important;
  background-image:none !important;
  border:1px solid var(--state-selected-border) !important;
  border-radius:var(--radius-sm, 8px) !important;
  color:var(--text-primary) !important;
}
#workspaceShell #workspaceSidebar .workspace-project-row.is-active .workspace-project-main:hover,
#workspaceShell #workspaceSidebar .workspace-project-row.is-current-project .workspace-project-main:hover{
  background:var(--state-selected-bg) !important;
  background-color:var(--state-selected-bg) !important;
}