/* ═══════════════════════════════════════════════════════════════════
   MY STORY — DESIGN SYSTEM
   Fonte di verità cromatica, tipografica e di spacing per tutta l'app.
   Da leggere insieme a: design_brief.md (Sezione 3) e MY_STORY_UI_PHILOSOPHY.md

   Ordine di caricamento: ULTIMO in index.css, dopo tutti gli altri fogli
   di stile, così gli override sulle variabili legacy hanno piena priorità.
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   IMPORT FONT
   Fraunces  → titoli, elementi editoriali (serif caldo, leggero vintage)
   Inter     → corpo, UI, controlli, label (sans neutro e leggibile)
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@300;400;500;600&family=Courier+Prime:wght@400;700&display=swap');


/* ═══════════════════════════════════════════════════════════════════
   VARIABILI NATIVE DEL DESIGN SYSTEM
   Queste sono le variabili "vere" di My Story. Ogni altra variabile
   del progetto deve puntare a queste, non a valori hardcoded.
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ── SFONDI — nero caldo a strati, mai nero puro ── */
  --bg-base:     #171B21;   /* sfondo app — freddo neutro (blu-notte) */
  --bg-surface:  #1E2530;   /* superfici (sidebar, card, chrome) */
  --bg-elevated: #262E3B;   /* elementi sopraelevati / hover (dropdown, modal) */
  --bg-input:    #14181F;   /* campi input, più profondi */

  /* ── BORDI — sottili, mai dominanti ── */
  --border-subtle:  #000;
  --border-default: rgba(255, 245, 230, 0.10);
  --border-strong:  rgba(255, 245, 230, 0.16);

  /* ── TESTO — freddo neutro, mai puro ── */
  --text-primary:   #E8EDF5;  /* testo principale */
  --text-secondary: #AAB4C4;  /* grigio-azzurro, testo secondario */
  --text-tertiary:  #6E7787;  /* hint, placeholder, meta */
  --text-disabled:  #4A5160;

  /* ── ACCENTO PRIMARIO — VIOLA INCHIOSTRO ── */
  /* Identità, navigazione, brand, sezione attiva, dettagli editoriali */
  /* Regola: "Questo elemento rappresenta CHI SONO o DOVE SONO?" → Viola */
  --accent:        #B0A1EE;               /* viola identità luminoso (stacca bene sul dark) */
  --accent-hover:  #C2B6F5;
  --accent-active: #9C8DDC;
  --accent-soft:   rgba(176, 161, 238, 0.14);
  --accent-muted:  rgba(176, 161, 238, 0.42);
  --accent-ink:    #5B4B8A;               /* viola profondo per dettagli/illustrazioni */

  /* ── ACCENTO SECONDARIO — BLU INCHIOSTRO ── */
  /* Controlli, azioni, focus, selezione, interazione funzionale */
  /* Regola: "Questo elemento rappresenta COSA POSSO FARE?" → Blu */
  --control:        #6B82A8;              /* blu leggibile su dark */
  --control-hover:  #7B92B8;
  --control-active: #5B7298;
  --control-soft:   rgba(107, 130, 168, 0.12);
  --control-muted:  rgba(107, 130, 168, 0.40);
  --control-ink:    #2C3E60;              /* blu profondo per dettagli/illustrazioni */

  /* ── STATI SEMANTICI — desaturati, mai squillanti da SaaS ── */
  --success: #7A9B7A;   /* verde salvia */
  --warning: #C4A574;   /* ambra calda */
  --error:   #B47A7A;   /* rosso terracotta soft */

  /* ── STATUS DOT — pallini di stato VIVIDI (a colpo d'occhio, non desaturati).
     Usati dal componente .ds-status-dot e dagli status dot di route. ── */
  --status-done: #34d399;   /* verde acceso (ready/done) */
  --status-wip:  #f6c453;   /* giallo (in corso) */
  --status-todo: #ef5c5c;   /* rosso (todo/missing) */
  --status-idle: #7f8ba3;   /* grigio (idle/neutro) */

  /* ── TIPOGRAFIA ── */
  --font-serif: 'Fraunces', 'Source Serif Pro', Georgia, serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;

  /* ── SISTEMA TIPOGRAFICO (ruoli riutilizzabili in TUTTA l'app) ──
     UI = Inter per nav/tab/label/bottoni/input; Display = Fraunces per titoli editoriali. */
  --font-ui:           var(--font-sans);
  --font-display:      var(--font-serif);
  /* ruolo LABEL/TAB (navbar, sidebar, tab di sezione, voci) */
  --type-label-size:   13px;
  --type-label-weight: 500;
  --type-label-spacing:0;
  /* ruolo BODY/EDITORIALE (testo lungo, editor di scrittura) */
  --type-body-size:    15px;
  --type-body-weight:  400;
  --type-body-line:    1.65;
  /* ruolo HEADING (titoli di sezione) — display serif */
  --type-heading-weight:600;

  /* ── SPAZIATURE ── */
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  20px;
  --space-lg:  24px;
  --space-xl:  36px;
  --space-2xl: 56px;

  /* ── RADIUS ── */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  /* panel squadrati in tutta l'app (scelta globale) — !important batte tokens.css/unified-pass */
  --radius-panel: 0 !important;

  /* ── TRANSIZIONI — lente, morbide, continue ── */
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ═══════════════════════════════════════════════════════════════════
   OVERRIDE VARIABILI LEGACY
   Le seguenti variabili (--ms-color-*, --workspace-*, --accent-* ecc.)
   esistevano prima del design system e sono usate in tutto il codice
   componente. Invece di modificare centinaia di selettori, le mappiamo
   sui nuovi valori nativi del design system.

   ⚠️  Questi override sono TEMPORANEI.
   Da rimuovere progressivamente man mano che i singoli componenti
   vengono migrati alle variabili native (--bg-base, --accent, ecc.).
   Priorità di migrazione: core → modules → routes.
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* — Sfondi legacy — */
  --ms-color-bg-app:               var(--bg-base);
  --ms-color-surface-primary:      var(--bg-surface);
  --ms-color-surface-secondary:    var(--bg-elevated);
  --ms-color-menu-bg:              var(--bg-input);
  --ms-color-input-bg:             var(--bg-input);
  --ms-color-editor-field-bg:      var(--bg-input);
  --ms-color-synopsis-field-bg:    var(--bg-input);
  --ms-color-card-block-bg:        var(--bg-elevated);
  --ms-color-file-btn-bg:          var(--bg-elevated);
  --ms-color-storyboard-tools-bg:  var(--bg-surface);
  --ms-color-dashboard-card:       var(--bg-elevated);

  /* — Superfici workspace legacy — */
  --ms-color-workspace-sidebar:       var(--bg-surface);
  --ms-color-workspace-route-sidebar: var(--bg-surface);
  --ms-color-workspace-panel:         var(--bg-surface);
  --ms-color-workspace-pane:          var(--bg-surface);

  /* — Testo legacy — */
  --ms-color-text-primary:   var(--text-primary);
  --ms-color-text-secondary: var(--text-secondary);

  /* — Bordi legacy — */
  --ms-color-border:        var(--border-default);
  --ms-color-border-strong: var(--border-strong);

  /* — Accento viola legacy (identità/brand) — */
  /* Nota: il vecchio --ms-color-accent era #1a2940 (quasi-nero, usato come
     sfondo di selezione). Ora è il viola identitario #8A7BB5 visibile.
     Comportamento voluto: vedere design_brief.md §5. */
  --ms-color-accent:           var(--accent);
  --ms-color-accent-soft:      var(--accent-soft);
  --ms-color-accent-selection: var(--control);  /* → blu funzionale, non viola */

  /* — Alias di secondo livello che puntavano a ms-color-* — */
  /* Ora puntano direttamente al design system tramite i valori sopra */
  --accent-editorial: var(--accent);   /* unificato al viola identitario */
  --accent-strong:    var(--control);  /* era #78a4ff, ora blu controllato */

  /* — Stati semantici legacy — */
  --ms-color-success: var(--success);
  --ms-color-danger:  var(--error);
  --ms-color-warning: var(--warning);

  /* — Link legacy — */
  --ms-color-link: var(--control);

  /* ── Note su variabili NON mappate (decisione consapevole) ──────
     --ms-color-dashboard-primary (#54519e) e --ms-color-dashboard-blue
     (#00aae8) restano invariate: sono isolate al modulo dashboard e
     il loro restyling è pianificato per la fase di redesign dashboard.
     Vedi design_brief.md §11 per tracking.
  ────────────────────────────────────────────────────────────────── */
}


/* ═══════════════════════════════════════════════════════════════════
   OVERRIDE A SPECIFICITÀ AUMENTATA — DARK THEME
   Il sistema legacy ridichiara alcune variabili dentro
   body[data-theme-resolved="dark"] (specificità più alta di :root).
   Replichiamo lo stesso selettore per garantire che i valori del
   design system di My Story prevalgano.

   Variabili a rischio identificate in tokens.css:
     - --text-primary / --text-secondary (riga 239–240)
     - --accent-editorial (riga 243) → catena verso --accent
     - --accent / --accent-2 / --accent-3 (righe 344–346)
     - --surface-app (riga 229) → catena verso --color-bg-canvas → gradient body
   Variabili a rischio in base.css:
     - font-family hardcoded su body[data-theme-resolved] (righe 7, 14)
   Variabili rimappate da unified-pass.css:
     - --ms-creative-accent-warm (#c8a66b) → var(--warning) (#C4A574)
       Debito tecnico minore: semanticamente "calore editoriale" ≠ "attenzione",
       ma il valore coincide. Da valutare se separare in --accent-warm dedicato
       durante la fase di consolidamento finale del design system.

   Da rivedere quando i singoli moduli verranno migrati alle variabili native.
   ═══════════════════════════════════════════════════════════════════ */

body[data-theme-resolved="dark"] {
  /* Testo — freddo neutro (palette canonica) */
  --text-primary:   #E8EDF5;
  --text-secondary: #AAB4C4;
  --text-tertiary:  #6E7787;

  /* Superfici — freddo neutro: forza i --surface-* (legacy tokens.css = rgb(20 26 38)) */
  --surface-panel:  var(--bg-surface);
  --surface-raised: var(--bg-elevated);
  --surface-input:  var(--bg-input);
  --surface-chrome: var(--bg-surface);

  /* Accento viola — identità/brand luminoso, condiviso da tutta l'app */
  --accent-editorial: #B0A1EE;   /* blocca la catena: --color-accent-primary → --accent */
  --accent:           #B0A1EE;
  --accent-2:         rgba(176, 161, 238, 0.14);  /* --accent-soft */
  --accent-3:         #6B82A8;   /* --control, usato per selezioni funzionali */

  /* Sfondo — taglia la catena --surface-app → --color-bg-canvas → gradient body */
  --surface-app:      var(--bg-base);  /* era rgb(20 26 38), ora grigio caldo neutro #1A1816 */
  --color-bg-canvas:  var(--bg-base);  /* override diretto, usato dal gradient in unified-pass */

  /* Calore editoriale — ambra del design brief, non il dorato legacy */
  --ms-creative-accent-warm: var(--warning);  /* #C4A574 — ambra editoriale, da DESIGN_BRIEF §3 */

  /* Font — Inter, non system-ui hardcoded da base.css */
  font-family: var(--font-sans);
}

/* Stessa copertura per il caso "segui sistema OS" in dark mode */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --text-primary:   #E8EDF5;
    --text-secondary: #AAB4C4;
    --text-tertiary:  #6E7787;
    --surface-panel:  var(--bg-surface);
    --surface-raised: var(--bg-elevated);
    --surface-input:  var(--bg-input);
    --surface-chrome: var(--bg-surface);
    --accent-editorial: #B0A1EE;
    --accent:           #B0A1EE;
    --accent-2:         rgba(176, 161, 238, 0.14);
    --accent-3:         #6B82A8;
    --surface-app:      var(--bg-base);
    --color-bg-canvas:  var(--bg-base);
    --ms-creative-accent-warm: var(--warning);
  }
}

/* Copertura tema light — font-family hardcoded in base.css riga 14 */
body[data-theme-resolved="light"] {
  font-family: var(--font-sans);
}


/* ═══════════════════════════════════════════════════════════════════
   RESET ESSENZIALE + STILI BASE
   ═══════════════════════════════════════════════════════════════════ */

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Titoli — serif editoriale */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4, h5, h6 { font-size: 1rem; }

/* Paragrafi — sans */
p {
  font-family: var(--font-sans);
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm);
}

/* Link */
a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-base);
}

/* Link editoriali (dentro contenuto narrativo) → viola */
a:hover {
  color: var(--accent);
}

/* Selezione testo — blu funzionale (azione, non identità) */
::selection {
  background: var(--control-muted);
  color: var(--text-primary);
}

/* Checkbox e radio nativi — blu funzionale */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--control);
}


/* ═══════════════════════════════════════════════════════════════════
   SCROLLBAR CUSTOM
   Minimale, coerente col dark warm. Mai invadente.
   ═══════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* Utility riusabile: scrollbar sottile e non invadente (no gutter riservato) */
.ds-scroll-thin{ scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; scrollbar-gutter:auto; }
.ds-scroll-thin::-webkit-scrollbar{ width:6px; height:6px; }
.ds-scroll-thin::-webkit-scrollbar-track{ background:transparent; }
.ds-scroll-thin::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:999px; }
.ds-scroll-thin::-webkit-scrollbar-thumb:hover{ background:var(--text-tertiary); }


/* ═══════════════════════════════════════════════════════════════════
   CLASSI UTILITY — PULSANTI
   Secondo design_brief.md §6. Mai oversized, mai shadow, mai gradient.
   ═══════════════════════════════════════════════════════════════════ */

/* Base condivisa */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}

.btn:focus-visible {
  outline: 2px solid var(--control-muted);
  outline-offset: 2px;
}

/* Primario — blu funzionale, per Salva / Crea / Conferma / Accedi */
.btn-primary {
  background-color: var(--control);
  color: var(--text-primary);
  border-color: var(--control);
}

.btn-primary:hover {
  background-color: var(--control-hover);
  border-color: var(--control-hover);
}

.btn-primary:active {
  background-color: var(--control-active);
  border-color: var(--control-active);
}

/* Secondario — neutro, per azioni non distruttive secondarie */
.btn-secondary {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-default);
}

.btn-secondary:hover {
  background-color: var(--bg-elevated);
  border-color: var(--border-strong);
}

.btn-secondary:active {
  background-color: var(--bg-input);
}

/* Ghost — solo testo, per azioni terziarie */
.btn-ghost {
  background-color: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

.btn-ghost:hover {
  color: var(--text-primary);
  background-color: var(--bg-elevated);
}

.btn-ghost:active {
  color: var(--text-primary);
}

/* Destructive — testo rosso terracotta, mai sfondo pieno rosso */
.btn-destructive {
  background-color: transparent;
  color: var(--error);
  border-color: var(--border-default);
}

.btn-destructive:hover {
  background-color: var(--bg-elevated);
  border-color: var(--error);
}


/* ═══════════════════════════════════════════════════════════════════
   PATTERN EDITORIALE — promosso da Narrative (riusabile in tutta l'app)
   Sorgente unica dei pattern nati nella route Narrativa, così le route
   future li applicano via classe invece di ri-copiare blocchi di override.
   NOTA specificità: la globale .btn di unified-pass vale (2,1,0)!important;
   per stilare un .btn servono 2 id (es. #workspaceShell #workspaceMain).
   Gli input/textarea NON sono .btn → le classi qui sotto funzionano dirette.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Token semantici editoriali (puntano ai globali → singola sorgente) */
  --editorial-line:       var(--line-soft, rgba(139,157,188,.18));
  --editorial-line-quiet: var(--line-quiet, rgba(139,157,188,.1));
  --editorial-accent:     var(--accent-editorial, var(--accent));
  --editorial-canvas:     var(--surface-raised, var(--bg-elevated));
}

/* ── Campo editoriale: filetto sottile invece del box (titolo/sinossi/note) ── */
.field-editorial,
.field-editorial.textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--editorial-line);
  border-radius: 0;
  padding: 6px 2px;
  font-family: var(--font-ui, var(--font-sans));
  font-size: var(--type-body-size, 15px);
  font-weight: var(--type-body-weight, 400);
  line-height: var(--type-body-line, 1.65);
  color: var(--text-primary);
  transition: border-color .16s ease;
}
.field-editorial:focus,
.field-editorial.textarea:focus {
  outline: 0;
  border-bottom-color: var(--editorial-accent);
}

/* ── Titolo editoriale: display serif uniforme ── */
.editorial-title {
  font-family: var(--font-display, var(--font-serif));
  font-weight: var(--type-heading-weight, 600);
}

/* ── Tabset: stato attivo = identico alla navbar (--state-selected via chrome) ──
   .tabset = contenitore, .tab = voce, .tab.is-active = stato selezionato.
   Per i .tab che sono anche .btn ricordare la regola dei 2 id (vedi nota sopra). */
.tabset {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 14px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--type-label-size, 13px);
  font-weight: var(--type-label-weight, 500);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.tab:hover {
  background: var(--state-hover-bg, var(--surface-raised));
  color: var(--text-primary);
}
.tab.is-active {
  background: var(--state-selected-bg);
  border-color: var(--state-selected-border);
  color: var(--text-primary);
}

/* ── Sotto-tab: underline (variante leggera del tab) ── */
.subtab {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 4px 2px;
  color: var(--text-secondary);
  font-size: var(--type-label-size, 13px);
  font-weight: var(--type-label-weight, 500);
  cursor: pointer;
}
.subtab.is-active {
  color: var(--text-primary);
  box-shadow: inset 0 -2px 0 var(--editorial-accent);
}


/* ═══════════════════════════════════════════════════════════════════
   MODALE / DIALOG — design system (linguaggio della card login, condiviso)
   .ui-dialog è la base di TUTTE le modali (card editor, alert, confirm…).
   Caricato dopo core/modals.css → questi valori vincono per ordine.
   ═══════════════════════════════════════════════════════════════════ */
/* Backdrop → più chiaro (#262E39). Specificità (0,3,1) per battere
   unified-pass:6752 (body.theme-dark :is(.scm-backdrop.show…){surface-app 74%!important}). */
:is([data-theme-resolved="dark"], body.theme-dark) :is(.ui-dialog-backdrop.show, .scm-backdrop.show, .ui-dialog-backdrop, .scm-backdrop){
  background:color-mix(in srgb, #262E39 70%, transparent) !important;
  backdrop-filter:blur(3px);
}
/* Pannello base (light/fallback) */
.ui-dialog{
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg, 14px);
  background:var(--surface-panel);
  box-shadow:0 24px 60px rgba(0,0,0,.46);
}
/* Dark: stessa specificità di unified-pass:6730 (0,2,1), caricato dopo → vince.
   NB data-theme-resolved è su <html>, non su body → uso :is(html-attr, body.theme-dark).
   Valore identico alla card login (--auth-surface #181D26) per combaciare. */
:is([data-theme-resolved="dark"], body.theme-dark) :is(.ui-dialog, .scm-modal){
  background:#181D26 !important;
  border:1px solid var(--border-subtle) !important;
  border-radius:var(--radius-lg, 14px) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.46) !important;
}
/* Pulsante chiusura X (la modale è fuori dalle route → niente stile route-scoped) */
.ui-dialog :is(.scm-close, .ui-dialog-close){
  width:32px !important; min-width:32px !important; height:32px !important;
  padding:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
/* X chiusura → dimensione icona STANDARD del design system (= lente ricerca, 16px) */
.ui-dialog :is(.scm-close, .ui-dialog-close) .ms-action-icon-svg{
  width:var(--icon-size-md, 16px) !important;
  height:var(--icon-size-md, 16px) !important;
  flex:0 0 auto !important;
  stroke:currentColor !important; fill:none !important;
  stroke-width:2 !important; stroke-linecap:round; stroke-linejoin:round;
}
.ui-dialog :is(.scm-close, .ui-dialog-close) .ms-action-icon-svg :is(line, path){
  stroke:currentColor !important; fill:none !important;
}
.ui-dialog :is(.scm-close, .ui-dialog-close) .ms-action-icon-svg *{
  stroke:currentColor !important; fill:none !important;
}
.ui-dialog .scm-close{
  background:transparent !important;
  border:1px solid transparent !important;
  color:var(--text-secondary) !important;
}
.ui-dialog .scm-close:hover{
  background:var(--state-hover-bg, rgba(255,255,255,.06)) !important;
  color:var(--text-primary) !important;
}
/* Titolo → display serif (come il brand del login) */
.ui-dialog :is(.ui-dialog-title, .scm-title, [data-modal-title]){
  font-family:var(--font-display, var(--font-serif));
  font-weight:600;
  font-size:1.2rem;
  color:var(--text-primary);
}
/* Label → sans, quieta, sopra il campo */
.ui-dialog :is(.ui-dialog-input-label, .scm-label){
  font-family:var(--font-ui, var(--font-sans));
  font-size:.82rem;
  font-weight:500;
  color:var(--text-secondary);
}
/* Campi → IDENTICI a quelli del login (auth.css #loginIdentity).
   Prefisso :is(html-attr,body.theme) per battere unified-pass (0,2,1)!important. */
:is([data-theme-resolved="dark"], body.theme-dark, html) .ui-dialog :is(.input, .textarea, .select, input[type="text"], input[type="number"], textarea){
  background:var(--bg-input, var(--surface-input)) !important;
  color:var(--text-primary) !important;
  border:1px solid var(--border-default) !important;
  border-radius:var(--radius-sm, 8px) !important;
  box-shadow:none !important;
  font-size:.95rem !important;
}
/* input/select a riga singola → altezza 46 come login */
:is([data-theme-resolved="dark"], body.theme-dark, html) .ui-dialog :is(.input, .select, input[type="text"], input[type="number"]){
  height:46px !important;
  padding:0 14px !important;
}
:is([data-theme-resolved="dark"], body.theme-dark, html) .ui-dialog :is(.textarea, textarea){
  min-height:104px !important;
  padding:12px 14px !important;
}
/* focus → ring marcato come login (border-color + alone) */
:is([data-theme-resolved="dark"], body.theme-dark, html) .ui-dialog :is(.input, .textarea, .select, input[type="text"], input[type="number"], textarea):focus{
  outline:0 !important;
  border-color:var(--control-muted, var(--control)) !important;
  box-shadow:0 0 0 3px var(--control-soft, color-mix(in srgb, var(--control) 28%, transparent)) !important;
}
/* Azione primaria → blu --control (come "Accedi"). La globale .btn di
   unified-pass vale (2,1,0)!important: la batto ridefinendo le SUE variabili
   sullo scope .ui-dialog (non il background diretto, che perderebbe). */
.ui-dialog :is(.btn-primary, .btn-success, .blue, button[type="submit"]){
  --button-bg:var(--control);
  --button-confirm-bg:var(--control);
  --button-border:var(--control);
  --button-confirm-border:var(--control);
  --button-fg:#ffffff;
  background:var(--control) !important;
  border-color:var(--control) !important;
  color:#fff !important;
}
.ui-dialog :is(.btn-primary, .btn-success, .blue, button[type="submit"]):hover{
  --button-bg:var(--control-hover, var(--control));
  --button-confirm-bg:var(--control-hover, var(--control));
  background:var(--control-hover, var(--control)) !important;
  border-color:var(--control-hover, var(--control)) !important;
}
/* Azione secondaria (Annulla, Reset colore…) → ghost con bordo, come "Mostra" del login.
   Ridefinisco le var --button-* (la globale .btn vale 2,1,0): bordo visibile + ghost. */
.ui-dialog .btn:not(.btn-primary):not(.btn-success):not(.blue):not([type="submit"]):not(.scm-close):not(.scm-swatch){
  --button-bg:transparent;
  --button-border:var(--border-default);
  --button-fg:var(--text-secondary);
  background:transparent !important;
  border:1px solid var(--border-default) !important;
  border-radius:var(--radius-sm, 8px) !important;
  color:var(--text-secondary) !important;
}
.ui-dialog .btn:not(.btn-primary):not(.btn-success):not(.blue):not([type="submit"]):not(.scm-close):not(.scm-swatch):hover{
  --button-bg:var(--surface-raised);
  --button-border:var(--border-strong);
  background:var(--surface-raised) !important;
  border-color:var(--border-strong) !important;
  color:var(--text-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   DROPDOWN — design system (trigger + menu + option). Custom (non <select>),
   così può ospitare pallini-stato/icone. Riusabile: .ds-dropdown.
   ═══════════════════════════════════════════════════════════════════ */
.ds-dropdown{ position:relative; }
.ds-dropdown__trigger{
  appearance:none;
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 34px 0 12px;
  position:relative;
  border:1px solid var(--border-default);
  border-radius:var(--radius-sm, 8px);
  background:var(--surface-raised);
  color:var(--text-primary);
  font-family:var(--font-ui, var(--font-sans));
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  text-align:left;
  transition:border-color .14s ease, background-color .14s ease;
}
.ds-dropdown__trigger:hover{
  border-color:var(--border-strong, var(--border-default));
  background:var(--state-hover-bg, var(--surface-raised));
}
.ds-dropdown.is-open .ds-dropdown__trigger{
  border-color:var(--control);
}
.ds-dropdown__trigger:disabled{ opacity:.55; cursor:not-allowed; }
.ds-dropdown__caret{
  position:absolute;
  right:13px; top:50%;
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transform:translateY(-40%);
  opacity:.65;
}
.ds-dropdown__menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0; right:0;
  z-index:40;
  padding:6px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm, 8px);
  background:var(--surface-panel);
  box-shadow:0 14px 36px rgba(0,0,0,.34);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ds-dropdown__menu[hidden]{ display:none; }
.ds-dropdown__option{
  width:100%;
  min-height:32px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:var(--radius-sm, 8px);
  background:transparent;
  color:var(--text-secondary);
  font:inherit;
  cursor:pointer;
  text-align:left;
}
.ds-dropdown__option:hover{
  background:var(--state-hover-bg, rgba(255,255,255,.05));
  color:var(--text-primary);
}
.ds-dropdown__option[aria-selected="true"]{
  background:var(--state-selected-bg);
  border-color:var(--state-selected-border);
  color:var(--text-primary);
}


/* ═══════════════════════════════════════════════════════════════════
   MENU / POPUP CONTESTUALE — design system (.ds-menu). Riusabile per ogni
   menu a discesa/contestuale (azioni episodio, ecc.).
   ═══════════════════════════════════════════════════════════════════ */
.ds-menu{
  min-width:200px;
  padding:6px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm, 8px);
  background:var(--surface-panel);
  box-shadow:0 16px 40px rgba(0,0,0,.40);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ds-menu[hidden]{ display:none !important; }
.ds-menu__label{
  padding:6px 10px 2px;
  font-family:var(--font-ui, var(--font-sans));
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-tertiary, var(--text-muted));
}
.ds-menu__sep{
  height:1px;
  margin:4px 6px;
  background:var(--editorial-line, var(--line-soft));
}
.ds-menu__item{
  width:100%;
  min-height:34px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:var(--radius-sm, 8px);
  background:transparent;
  color:var(--text-primary);
  font:inherit;
  font-size:.9rem;
  cursor:pointer;
  text-align:left;
}
.ds-menu__item:hover{
  background:var(--state-hover-bg, rgba(255,255,255,.05));
}
.ds-menu__item[aria-current="true"], .ds-menu__item.is-active{
  background:var(--state-selected-bg);
  border-color:var(--state-selected-border);
}
.ds-menu__item.is-danger{ color:var(--error); }
.ds-menu__item.is-danger:hover{ background:color-mix(in srgb, var(--error) 14%, transparent); }
.ds-menu__item:disabled{ opacity:.5; cursor:not-allowed; }
/* ── Status dot — componente DS riusabile (pallino di stato).
   .ds-menu__dot è l'alias storico usato dentro i menu. ── */
.ds-status-dot,
.ds-menu__dot{
  width:9px; height:9px; border-radius:999px;
  flex:0 0 auto;
  border:1px solid var(--text-tertiary);
  background:transparent;
}
.ds-status-dot.status-wip,  .ds-menu__dot.status-wip{ background:var(--status-wip); border-color:var(--status-wip); }
.ds-status-dot.status-done, .ds-menu__dot.status-done{ background:var(--status-done); border-color:var(--status-done); }
.ds-status-dot.status-todo, .ds-menu__dot.status-todo{ background:var(--status-todo); border-color:var(--status-todo); }


/* ═══════════════════════════════════════════════════════════════════
   UNIFICAZIONE MENU/DROPDOWN — allinea i token --dropdown-* (consumati dalla
   regola canonica di unified-pass su TUTTI i menu) ai valori del componente
   .ds-menu. Così ogni popup/menu/dropdown dell'app prende lo stesso look,
   senza toccare markup/JS dei 18 componenti.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --dropdown-border:           var(--border-subtle);
  --dropdown-radius:           var(--radius-sm, 8px);
  --dropdown-bg:               var(--surface-panel);
  --dropdown-shadow:           0 16px 40px rgba(0,0,0,.40);
  --dropdown-item-min-height:  34px;
  --dropdown-item-radius:      var(--radius-sm, 8px);
  --dropdown-item-color:       var(--text-primary);
  --dropdown-item-hover-bg:    var(--state-hover-bg);
  --dropdown-item-hover-border:transparent;
  --dropdown-item-active-bg:   var(--state-selected-bg);
  --dropdown-item-active-border:var(--state-selected-border);
}


/* Tipografia uniforme degli ITEM di menu (come .ds-menu__item): alcuni avevano
   peso 700/size diverse (es. flyout sidebar collassata) → allineati. */
:is(
  .ds-menu__item,
  .workspace-collapsed-hover-item,
  .workspace-create-menu-item,
  .workspace-project-menu-item,
  .narrative-subsection-menu-item,
  .narrative-preset-menu-item,
  .narrative-tool-menu-item,
  .production-status-control-option,
  .steps-status-control-option,
  .entity-tag-option,
  .script-episode-menu-item
){
  font-family:var(--font-ui, var(--font-sans));
  font-size:.9rem;
  font-weight:var(--type-label-weight, 500);
  letter-spacing:0;
}

/* ═══════════════════════════════════════════════════════════════════
   ROUTE ACTION BAR — barra controlli specifica della route
   (sopra il panel, sotto la topbar globale). Scheletro condiviso:
   slot start/center/end, da popolare per-route.
   ═══════════════════════════════════════════════════════════════════ */
.route-page{ --route-action-bar-h:54px; }
.route-page > .route-action-bar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:var(--route-action-bar-h);
  height:var(--route-action-bar-h);
  padding:8px 14px;          /* respiro verticale: lo scrollbar dei pill ci sta dentro */
  background:var(--surface-panel);
  border-bottom:1px solid var(--editorial-line, var(--border-default));
}
.route-action-bar-start{ display:flex; align-items:center; gap:8px; min-width:0; }
.route-action-bar-center{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; }
.route-action-bar-end{ display:flex; align-items:center; gap:8px; min-width:0; margin-left:auto; }
/* il layout sotto la barra riempie l'altezza rimanente (i layout erano height:100%) */
.route-page:has(> .route-action-bar) > :is(.two-pane, :is(.voci-layout,.route-body), :is(.production-layout,.route-body)){
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
}
/* Entità (Personaggi/Ambienti/Oggetti/Veicoli): action bar in OVERLAY sopra la sola
   route-main — così la route-list (sidebar locale) parte subito sotto la topbar
   senza il "vuoto" lasciato dall'action bar. La route-page è già position:relative
   + overflow:hidden, quindi l'absolute si ancora alla card. */
:is(#route-characters,#route-environments,#route-objects,#route-vehicles) > .route-action-bar{
  position:absolute;
  top:0;
  left:calc(280px + 16px);            /* dopo la route-list (280px) + gap (16px) */
  right:0;
  margin:0;
  z-index:5;
}
/* la route-main lascia lo spazio per l'action bar in overlay sopra di sé */
:is(#route-characters,#route-environments,#route-objects,#route-vehicles) .route-main{
  padding-top:var(--route-action-bar-h, 54px);
}
/* Tab di sezione (Panoramica/Profilo/...) spostati nell'action bar: compatti, in fila,
   nessun margine/bordo proprio (l'action bar ha già il suo). */
:is(#route-characters,#route-environments,#route-objects,#route-vehicles) .route-action-bar .characters-tabs{
  margin:0;
  padding:0;
  border-bottom:0;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
:is(#route-characters,#route-environments,#route-objects,#route-vehicles) .route-action-bar .characters-tabs::-webkit-scrollbar{
  display:none;
}