/* ============================================================
   Tema applicativo — marchio Underscore (come underscore.sm)
   Nero ink #0E1113, carta #F5F5F5, accento viola #7448FF (chiaro #9B7BFF), blu dei bagliori #2252A4.
   Titoli in Oswald maiuscolo, testo in Barlow (css/fonts.css, file in dist/fonts).
   I nomi storici delle variabili (--blu…) restano: ora valgono il viola del marchio.
   ============================================================ */
:root {
  --blu:        #7448FF;
  --blu-forte:  #5f34e6;
  --blu-chiaro: #f0ebff;
  --accento:    #7448FF;
  --acqua:      #1baf7a;
  --testo:      #262626;
  --testo-2:    #5a5a5a;
  --testo-3:    #8c8c8c;
  --sfondo:     #f5f5f5;
  --superficie: #ffffff;
  --bordo:      #e4e4e4;
  --griglia:    #eeeeee;
  --font-titoli: 'Oswald', 'Arial Narrow', sans-serif;
  --font-testo:  'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ok:         #0e8a4c;
  --ok-bg:      #e5f6ec;
  --attenzione: #b26a00;
  --attenzione-bg: #fdf3e0;
  --errore:     #c22f45;
  --errore-bg:  #fdeaed;
  --raggio:     6px;
  --ombra:      0 1px 2px rgba(14, 17, 19, .05), 0 4px 14px rgba(14, 17, 19, .05);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-testo);
  font-size: 15px; line-height: 1.45;
  color: var(--testo); background: var(--sfondo);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-family: var(--font-titoli); font-size: 24px; margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: .2px; line-height: 1.1; }
h2 { font-family: var(--font-titoli); font-size: 17px; margin: 0 0 .6rem; font-weight: 500; text-transform: uppercase; letter-spacing: .6px; }
.caricamento-app { padding: 4rem; text-align: center; color: var(--testo-3); }

/* ---------- layout applicazione ---------- */
.app-layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 228px; flex: 0 0 228px; background: var(--superficie);
  border-right: 1px solid var(--bordo);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .logo {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px 12px; font-weight: 800; font-size: 16px; color: var(--blu-forte);
}
.sidebar .logo svg { flex: 0 0 auto; }
.sidebar .logo small { display: block; font-weight: 500; color: var(--testo-3); font-size: 10.5px; letter-spacing: .02em; }
.nav-sezione {
  padding: 14px 18px 4px; font-family: var(--font-titoli); font-size: 11px; font-weight: 500;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--testo-3);
}
.nav-voce {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; margin: 1px 8px; border-radius: 8px;
  color: var(--testo-2); cursor: pointer; font-weight: 500; user-select: none;
}
.nav-voce svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .75; }
.nav-voce:hover { background: var(--sfondo); color: var(--testo); text-decoration: none; }
.nav-voce.attiva { background: var(--blu-chiaro); color: var(--blu-forte); font-weight: 650; }
.nav-voce.attiva svg { opacity: 1; }
.sidebar .fondo { margin-top: auto; padding: 12px 18px; font-size: 11px; color: var(--testo-3); border-top: 1px solid var(--griglia); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 54px; background: var(--superficie); border-bottom: 1px solid var(--bordo);
  display: flex; align-items: center; gap: 14px; padding: 0 22px;
  position: sticky; top: 0; z-index: 40;
}
.topbar .titolo-pagina { font-family: var(--font-titoli); font-size: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }
.topbar .spazio { flex: 1; }
.badge-ambiente { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: .03em; }
.badge-ambiente.demo { background: var(--attenzione-bg); color: var(--attenzione); }
.badge-ambiente.test { background: var(--blu-chiaro); color: var(--blu-forte); }
.badge-ambiente.prod { background: var(--ok-bg); color: var(--ok); }
.utente-menu { display: flex; align-items: center; gap: 10px; color: var(--testo-2); font-size: 13px; }
.utente-menu .pallino {
  width: 30px; height: 30px; border-radius: 50%; background: var(--blu);
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.contenuto { padding: 22px; max-width: 1280px; width: 100%; margin: 0 auto; }

/* ---------- card, griglie ---------- */
.card { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); }
.card-corpo { padding: 16px 18px; }
.card-testata { padding: 14px 18px; border-bottom: 1px solid var(--griglia); display: flex; align-items: center; gap: 12px; }
.card-testata h2 { margin: 0; flex: 1; }
.griglia { display: grid; gap: 16px; }
.griglia.kpi { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.griglia.due { grid-template-columns: 1fr 1fr; }
@media (max-width: 980px) { .griglia.due { grid-template-columns: 1fr; } }

.kpi-tile { padding: 14px 18px; }
.kpi-tile .etichetta { font-size: 12px; color: var(--testo-2); font-weight: 600; }
.kpi-tile .valore { font-size: 24px; font-weight: 750; margin-top: 2px; }
.kpi-tile .nota { font-size: 12px; color: var(--testo-3); margin-top: 2px; }
.kpi-tile .valore.positivo { color: var(--ok); }
.kpi-tile .valore.negativo { color: var(--errore); }

/* ---------- barra azioni / filtri ---------- */
.barra {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.barra .spazio { flex: 1; }

/* ---------- pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid transparent; border-radius: 3px; cursor: pointer;
  font-family: var(--font-titoli); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 1.2px;
  padding: 8px 15px; background: var(--blu); color: #fff;
  transition: background .12s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--blu-forte); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.secondario { background: var(--superficie); color: var(--testo); border-color: var(--bordo); }
.btn.secondario:hover { background: var(--sfondo); }
.btn.pericolo { background: var(--superficie); color: var(--errore); border-color: var(--bordo); }
.btn.pericolo:hover { background: var(--errore-bg); border-color: var(--errore); }
.btn.mini { padding: 5px 10px; font-size: 11.5px; border-radius: 3px; letter-spacing: 1px; }
.btn.fantasma { background: transparent; color: var(--blu); }
.btn.fantasma:hover { background: var(--blu-chiaro); }

/* ---------- form ---------- */
label.campo { display: block; font-size: 12.5px; font-weight: 600; color: var(--testo-2); margin-bottom: 10px; }
label.campo > span { display: block; margin-bottom: 4px; }
input[type=text], input[type=number], input[type=date], input[type=email], input[type=password], select, textarea {
  width: 100%; font: inherit; color: var(--testo);
  padding: 7px 10px; border: 1px solid var(--bordo); border-radius: 8px;
  background: var(--superficie); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accento); box-shadow: 0 0 0 3px rgba(116, 72, 255, .15); }
input.num { text-align: right; font-variant-numeric: tabular-nums; }
.riga-campi { display: grid; gap: 12px; }
.riga-campi.c2 { grid-template-columns: 1fr 1fr; }
.riga-campi.c3 { grid-template-columns: 1fr 1fr 1fr; }
.riga-campi.c4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 700px) { .riga-campi.c2, .riga-campi.c3, .riga-campi.c4 { grid-template-columns: 1fr; } }
.suggerimento { font-size: 12px; color: var(--testo-3); margin-top: 3px; font-weight: 400; }

/* ---------- tabelle ---------- */
.tabella-wrap { overflow-x: auto; }
table.tabella { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabella th {
  text-align: left; font-family: var(--font-titoli); font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--testo-3); font-weight: 500; padding: 9px 12px;
  border-bottom: 1px solid var(--bordo); background: #fafafa;
  white-space: nowrap;
}
table.tabella td { padding: 9px 12px; border-bottom: 1px solid var(--griglia); vertical-align: middle; }
table.tabella tr:last-child td { border-bottom: none; }
table.tabella tr.cliccabile { cursor: pointer; }
table.tabella tr.cliccabile:hover { background: #f7fafd; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.azioni { text-align: right; white-space: nowrap; }
td.azioni .btn { margin-left: 4px; }
.tabella-vuota { padding: 2.2rem; text-align: center; color: var(--testo-3); }
.paginazione { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--griglia); font-size: 12.5px; color: var(--testo-2); }
.paginazione .spazio { flex: 1; }

/* ---------- badge stato ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; padding: 2.5px 9px; border-radius: 20px; white-space: nowrap;
}
.badge.grigio  { background: #eef1f5; color: var(--testo-2); }
.badge.blu     { background: var(--blu-chiaro); color: var(--blu-forte); }
.badge.giallo  { background: var(--attenzione-bg); color: var(--attenzione); }
.badge.verde   { background: var(--ok-bg); color: var(--ok); }
.badge.rosso   { background: var(--errore-bg); color: var(--errore); }

/* ---------- modale ---------- */
.modale-sfondo {
  position: fixed; inset: 0; background: rgba(15, 28, 45, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; z-index: 300; overflow-y: auto;   /* sopra la modalità presentatore (150) */
}
.modale {
  background: var(--superficie); border-radius: 8px; box-shadow: 0 18px 50px rgba(10, 25, 45, .3);
  width: 100%; max-width: 560px; margin-bottom: 4vh;
  animation: modale-entra .14s ease-out;
}
.modale.larga { max-width: 900px; }
.modale.enorme { max-width: 1100px; }
@keyframes modale-entra { from { transform: translateY(8px); opacity: .6; } to { transform: none; opacity: 1; } }
.modale-testata { padding: 16px 20px 12px; display: flex; align-items: center; }
.modale-testata h2 { flex: 1; margin: 0; font-size: 18px; }
.modale-chiudi { background: none; border: none; font-size: 22px; color: var(--testo-3); cursor: pointer; line-height: 1; padding: 2px 6px; }
.modale-chiudi:hover { color: var(--testo); }
.modale-corpo { padding: 4px 20px 16px; }
.modale-piede { padding: 12px 20px 16px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--griglia); }

/* ---------- toast ---------- */
#toast-contenitore { position: fixed; bottom: 20px; right: 20px; z-index: 400; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--testo); color: #fff; border-radius: 10px; padding: 11px 16px;
  font-size: 13.5px; max-width: 380px; box-shadow: 0 8px 24px rgba(10, 25, 45, .25);
  animation: toast-entra .18s ease-out;
}
.toast.errore { background: #a3253a; }
.toast.ok { background: #0d6e3e; }
@keyframes toast-entra { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- login / setup ---------- */
.schermo-accesso {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #0E1113;
  padding: 24px;
}
.pannello-accesso { background: var(--superficie); border-radius: 16px; padding: 30px 32px; width: 100%; max-width: 420px; box-shadow: 0 24px 60px rgba(5, 20, 40, .4); }
.pannello-accesso.largo { max-width: 640px; }
.pannello-accesso .logo-grande { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; font-size: 22px; font-weight: 800; color: var(--blu-forte); }
.pannello-accesso .sotto { color: var(--testo-3); font-size: 13px; margin-bottom: 20px; }
.avviso { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin: 10px 0; }
.avviso.info { background: var(--blu-chiaro); color: var(--blu-forte); }
.avviso.warn { background: var(--attenzione-bg); color: var(--attenzione); }
.avviso.err  { background: var(--errore-bg); color: var(--errore); }

/* ---------- editor righe fattura / prima nota ---------- */
.righe-editor { border: 1px solid var(--bordo); border-radius: 10px; overflow: hidden; margin: 8px 0; }
.righe-editor table { width: 100%; border-collapse: collapse; font-size: 13px; }
.righe-editor th { background: #fafbfd; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--testo-3); padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--bordo); }
.righe-editor td { padding: 5px 6px; border-bottom: 1px solid var(--griglia); vertical-align: top; }
.righe-editor input, .righe-editor select { padding: 5px 8px; font-size: 13px; border-radius: 6px; }
.righe-editor .rimuovi { background: none; border: none; color: var(--testo-3); font-size: 16px; cursor: pointer; padding: 4px; }
.righe-editor .rimuovi:hover { color: var(--errore); }
.totale-editor { text-align: right; font-size: 15px; font-weight: 700; padding: 10px 4px 2px; }
.totale-editor .quadratura-ko { color: var(--errore); }
.totale-editor .quadratura-ok { color: var(--ok); }

/* ---------- dettaglio documento ---------- */
.dettaglio-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 18px; margin: 8px 0 14px; }
.dettaglio-voce .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--testo-3); font-weight: 700; }
.dettaglio-voce .v { font-size: 13.5px; margin-top: 1px; }
.timeline { margin: 6px 0; font-size: 12.5px; color: var(--testo-2); }
.timeline div { padding: 4px 0 4px 16px; border-left: 2px solid var(--bordo); margin-left: 6px; position: relative; }
.timeline div::before { content: ''; position: absolute; left: -5px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accento); }

/* ---------- grafico dashboard (SVG) ---------- */
.grafico-wrap { padding: 6px 10px 2px; }
.grafico-legenda { display: flex; gap: 18px; font-size: 12.5px; color: var(--testo-2); padding: 4px 8px 10px; }
.grafico-legenda .chip { display: inline-flex; align-items: center; gap: 6px; }
.grafico-legenda .quadrato { width: 10px; height: 10px; border-radius: 3px; }
.grafico-tooltip {
  position: fixed; pointer-events: none; z-index: 90;
  background: var(--testo); color: #fff; font-size: 12px; border-radius: 8px;
  padding: 7px 10px; box-shadow: 0 6px 18px rgba(10, 25, 45, .3); display: none;
}
.grafico-tooltip b { display: block; margin-bottom: 2px; }

/* ---------- albero piano conti ---------- */
.albero .nodo { padding: 5px 8px; border-radius: 7px; display: flex; align-items: center; gap: 8px; }
.albero .nodo:hover { background: var(--sfondo); }
.albero .nodo .codice { font-variant-numeric: tabular-nums; color: var(--testo-3); font-size: 12.5px; width: 90px; flex: 0 0 90px; }
.albero .liv-1 { font-weight: 750; margin-top: 10px; }
.albero .liv-2 { font-weight: 600; margin-left: 18px; }
.albero .liv-3 { margin-left: 36px; }
.albero .disattivo { opacity: .45; }

/* ---------- tab ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bordo); margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  padding: 8px 14px; cursor: pointer; font-family: var(--font-titoli); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; color: var(--testo-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; user-select: none; font-size: 13.5px;
}
.tab:hover { color: var(--testo); }
.tab.attiva { color: var(--blu-forte); border-bottom-color: var(--blu); }

/* ---------- menu a tendina (ui.js → Menu) ---------- */
.menu-tendina {
  position: fixed; z-index: 350; min-width: 200px; max-width: 320px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(10, 25, 45, .18); padding: 5px; animation: modale-entra .1s ease-out;
}
.menu-voce {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 7px; padding: 7px 10px; font: inherit; font-size: 13.5px;
  color: var(--testo); cursor: pointer;
}
.menu-voce:hover:not(:disabled) { background: var(--sfondo); }
.menu-voce:disabled { color: var(--testo-3); cursor: default; }
.menu-voce.pericolo { color: var(--errore); }
.menu-voce.pericolo:hover:not(:disabled) { background: var(--errore-bg); }
.menu-icona svg { width: 16px; height: 16px; display: block; color: var(--testo-2); }
.menu-sep { height: 1px; background: var(--griglia); margin: 4px 2px; }
.menu-intestazione { font-size: 11.5px; color: var(--attenzione); background: var(--attenzione-bg); border-radius: 7px; padding: 6px 10px; margin-bottom: 4px; }

/* ---------- drawer laterale (ui.js → Drawer) ---------- */
.drawer-sfondo { position: fixed; inset: 0; background: rgba(15, 28, 45, .28); z-index: 90; display: flex; justify-content: flex-end; }
.drawer {
  width: 100%; height: 100%; background: var(--superficie); box-shadow: -18px 0 50px rgba(10, 25, 45, .22);
  display: flex; flex-direction: column; animation: drawer-entra .16s ease-out;
}
@keyframes drawer-entra { from { transform: translateX(24px); opacity: .5; } to { transform: none; opacity: 1; } }
.drawer-testata { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--griglia); flex-wrap: wrap; }
.drawer-testata .spazio { flex: 1; }
.drawer-corpo { padding: 14px 20px 30px; overflow-y: auto; flex: 1; }

/* ---------- editor Markdown (ui.js → EditorMd) e testo reso ---------- */
.editor-md { border: 1px solid var(--bordo); border-radius: 10px; overflow: hidden; background: var(--superficie); }
.editor-md:focus-within { border-color: var(--accento); box-shadow: 0 0 0 3px rgba(116, 72, 255, .15); }
.editor-md-barra { display: flex; align-items: center; gap: 2px; padding: 5px 6px; border-bottom: 1px solid var(--griglia); background: #fafbfd; }
.editor-md-barra .spazio { flex: 1; }
.editor-md-barra button {
  background: none; border: none; border-radius: 6px; padding: 4px 9px; font: inherit; font-size: 13px;
  color: var(--testo-2); cursor: pointer; min-width: 30px;
}
.editor-md-barra button:hover { background: var(--griglia); color: var(--testo); }
.editor-md-barra button.attivo { background: var(--blu-chiaro); color: var(--blu-forte); font-weight: 650; }
.editor-md textarea { border: none; border-radius: 0; box-shadow: none !important; resize: vertical; line-height: 1.6; font-size: 14.5px; padding: 12px 14px; }
.editor-md-anteprima { padding: 12px 16px; min-height: 200px; }
.testo-md { line-height: 1.6; }
.testo-md > :first-child { margin-top: 0; }
.testo-md h3, .testo-md h4, .testo-md h5 { margin: 1em 0 .35em; font-size: 1.08em; }
.testo-md h3 { font-size: 1.2em; }
.testo-md p { margin: 0 0 .7em; }
.testo-md ul, .testo-md ol { margin: 0 0 .7em; padding-left: 1.4em; }
.testo-md li { margin: .15em 0; }
.testo-md blockquote { margin: .6em 0; padding: .45em .9em; border-left: 3px solid var(--accento); background: var(--blu-chiaro); border-radius: 0 8px 8px 0; font-style: italic; }

/* ---------- trascinamento (ui.js → Ordinabile) ---------- */
.maniglia { cursor: grab; touch-action: none; color: var(--testo-3); display: inline-flex; padding: 3px; border-radius: 5px; }
.maniglia:hover { color: var(--testo-2); background: var(--griglia); }
.maniglia svg { width: 16px; height: 16px; }
.trascinando { opacity: .92; box-shadow: 0 14px 34px rgba(10, 25, 45, .22) !important; position: relative; z-index: 5; }
body.in-trascinamento, body.in-trascinamento * { cursor: grabbing !important; user-select: none; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .sidebar { position: fixed; z-index: 60; transform: translateX(-100%); transition: transform .18s ease; box-shadow: 0 0 40px rgba(10,25,45,.25); }
  .sidebar.aperta { transform: none; }
  .apri-menu { display: inline-flex !important; }
  .contenuto { padding: 14px; }
}
.apri-menu { display: none; background: none; border: 1px solid var(--bordo); border-radius: 8px; padding: 6px 9px; cursor: pointer; }
.solo-mobile { display: none; }
@media (max-width: 860px) { .solo-mobile { display: block; } }

/* ---------- utilità ---------- */
.mt   { margin-top: 16px; }
.mb-0 { margin-bottom: 0; }
.testo-2 { color: var(--testo-2); }
.testo-3 { color: var(--testo-3); }
.piccolo { font-size: 12.5px; }
.mono { font-variant-numeric: tabular-nums; }
.destra { text-align: right; }
.flex { display: flex; align-items: center; gap: 10px; }
.grassetto { font-weight: 700; }
hr.sottile { border: none; border-top: 1px solid var(--griglia); margin: 14px 0; }

.testo-md li.frase { font-style: italic; }   /* «> frase» dentro un elenco: una frase da dire parola per parola */
.testo-md .md-segnale { display: inline-block; margin: 0 0 .7em; padding: 2px 10px; border-radius: 4px; background: rgba(116, 72, 255, .12); color: var(--accento); font-size: .82em; font-weight: 700; font-style: normal; }   /* «@slide 2»: lo esegue il presentatore entrando nel passo */