/* ============================================================================
   mgds.css — MGDEEP UI 6.129 · FONDAZIONE (Design System) — SORGENTE UNICA
   ----------------------------------------------------------------------------
   ABBANDONO del vecchio modello (mg_theme + mg_sistema + override per-pagina +
   centinaia di <style>): questo foglio e' l'unico posto dove vivono i token.

   Come vince senza rompere — la cascata e' progettata apposta:
   • TOKEN e PONTE dei nomi legacy stanno FUORI da @layer (non-layered) e questo
     foglio viene caricato PER ULTIMO nel <head>: cosi' i suoi :root battono i
     :root scritti nelle singole pagine. Una pagina che dichiara ancora
     --superficie/--indaco/--linea NON conta piu': pesca da qui. Palette unica,
     da un punto solo, senza toccare le pagine a mano.
   • I COMPONENTI stanno DENTRO @layer: le regole non-layered di una pagina
     (.card/.btn scritti nel suo <style>) battono le regole @layer di qui, quindi
     NON gli rovesciamo addosso il layout. Le pagine gia' migrate — che il loro
     <style> non ce l'hanno piu' — prendono i componenti da qui.
   Le pagine migrano progressivamente: si toglie il loro <style> e restano magre.
   Backend, rotte e logica non c'entrano: qui c'e' solo presentazione.
   ============================================================================ */

/* ---- 1. TOKENS (non-layered, autorevoli) — l'unica sorgente di verita' ----
   SPECIFICITA' (6.129.10): i token e il ponte stanno su `html:root`, non su
   `:root`. Motivo imparato a caro prezzo: ~555 pagine dichiarano i propri
   token su `html:root{}` (specificita' 0,1,1), che BATTE un `:root{}` (0,1,0)
   di mgds anche se mgds e' caricato per ultimo. Con `html:root` mgds pareggia
   la specificita' massima delle pagine e, essendo caricato per ULTIMO, vince
   il ponte diventa davvero autorevole (era silenziosamente scavalcato). */
html:root{
  /* colore: neutri freddi + UN accento (blu del riferimento approvato) */
  --mg-bg:#f4f6fa; --mg-surface:#ffffff; --mg-surface-2:#f7f9fc; --mg-surface-3:#eef2f7;
  --mg-ink:#0f1729; --mg-ink-2:#3a465a; --mg-ink-3:#68758b; --mg-ink-4:#98a3b5;
  --mg-line:#e7ecf3; --mg-line-2:#f0f3f8; --mg-line-strong:#d7deea;
  --mg-accent:#2f6bef; --mg-accent-ink:#1d55d6; --mg-accent-bg:#eaf1fe; --mg-accent-line:#cfe0fc;
  --mg-hover:#f2f6ff;
  --mg-ok:#12a150; --mg-ok-bg:#e6f6ec; --mg-warn:#b26a00; --mg-warn-bg:#fbf0dc; --mg-warn-line:#e6cfa3;
  --mg-bad:#dc3646; --mg-bad-bg:#fdecec; --mg-info:#2f6bef; --mg-info-bg:#eaf1fe;
  --mg-sans:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mg-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-24:24px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --r-1:7px; --r-2:10px; --r-3:12px;
  --sh-1:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04);
  --sh-2:0 8px 24px rgba(16,24,40,.10);
  --d-row:36px; --d-cell-y:8px; --d-cell-x:12px; --d-field-y:9px; --d-pad:16px;
}
html:root[data-density="compact"]{ --d-row:28px; --d-cell-y:5px; --d-cell-x:10px; --d-field-y:6px; --d-pad:12px; }
html:root[data-theme="dark"]{
  --mg-bg:#0b1220; --mg-surface:#141d30; --mg-surface-2:#111a2b; --mg-surface-3:#1b2740;
  --mg-ink:#eef2f9; --mg-ink-2:#c2cddd; --mg-ink-3:#8a97ab; --mg-ink-4:#5f6c81;
  --mg-line:#243248; --mg-line-2:#1a2537; --mg-line-strong:#2f3f59;
  --mg-accent:#4d84f5; --mg-accent-ink:#6f9bf7; --mg-accent-bg:#16233c; --mg-accent-line:#2b4067;
  --mg-hover:#17233c;
  --mg-ok:#38c172; --mg-ok-bg:#122a1d; --mg-warn:#d79a3a; --mg-warn-bg:#2b2210; --mg-warn-line:#5a4a1f;
  --mg-bad:#ec5b68; --mg-bad-bg:#2c1518; --mg-info:#4d84f5; --mg-info-bg:#16233c;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 8px 26px rgba(0,0,0,.55);
}

/* ---- 2. PONTE dei nomi legacy (non-layered, autorevole) -------------------
   Ogni nome che le ~360 pagine e i vecchi fogli (mg_theme/mg_sistema) usano,
   qui punta al token canonico. Caricato per ultimo, vince: la palette diventa
   UNA per tutto il prodotto senza editare le pagine. I neutri e l'accento si
   unificano; verde/ambra/rosso restano gli stati. */
html:root{
  /* SOLO nomi NON ambigui. Volutamente ESCLUSI (significato diverso da pagina a
     pagina, l'override li romperebbe): --muted (inchiostro in mg_theme, superficie
     nel SOC), --header, --ro, --hover, --campo, --bg, --info. Restano alle pagine. */
  /* superfici (sempre superfici, ovunque) */
  --superficie:var(--mg-surface); --surface:var(--mg-surface); --bianco:var(--mg-surface);
  --superficie-2:var(--mg-surface-2); --surface2:var(--mg-surface-2); --carta-2:var(--mg-surface-2);
  /* inchiostri (sempre testo) */
  --inchiostro:var(--mg-ink); --ink:var(--mg-ink); --testo:var(--mg-ink);
  --body:var(--mg-ink-2); --grigio:var(--mg-ink-3); --muto:var(--mg-ink-3); --meta:var(--mg-ink-4);
  /* linee (sempre bordi) */
  --linea:var(--mg-line); --line:var(--mg-line); --bordo:var(--mg-line);
  --br:var(--mg-line-2); --bordo-2:var(--mg-line-strong); --bs:var(--mg-line-strong);
  /* accento (indaco/blu/navy/arancio: UN blu solo — coerente con la Shell) */
  --indaco:var(--mg-accent); --indacoH:var(--mg-accent-ink); --blue:var(--mg-accent);
  --primario:var(--mg-accent); --navy:var(--mg-accent);
  --arancio:var(--mg-accent); --arancio-pieno:var(--mg-accent); --orange:var(--mg-accent);
  --accBg:var(--mg-accent-bg); --accBd:var(--mg-accent-line);
  /* stati (sempre lo stesso significato) */
  --verde:var(--mg-ok); --green:var(--mg-ok); --ok:var(--mg-ok); --verdeBg:var(--mg-ok-bg);
  --ambra:var(--mg-warn); --amber:var(--mg-warn); --warn:var(--mg-warn);
  --ambraBg:var(--mg-warn-bg); --ambraBd:var(--mg-warn-line);
  --rosso:var(--mg-bad); --red:var(--mg-bad); --errore:var(--mg-bad); --rossoBg:var(--mg-bad-bg);
}
/* Ponte ribadito al livello NOTTE (0,2,1): alcune pagine ridichiarano i propri
   token dentro `html:root[data-theme="dark"]{}`, che batterebbe il ponte chiaro
   qui sopra. Ripetendo le mappe a pari specificita' e caricando per ultimo, il
   ponte vince anche in notte. I valori puntano ai --mg-* che sono gia' notturni. */
html:root[data-theme="dark"]{
  --superficie:var(--mg-surface); --surface:var(--mg-surface); --bianco:var(--mg-surface);
  --superficie-2:var(--mg-surface-2); --surface2:var(--mg-surface-2); --carta-2:var(--mg-surface-2);
  --inchiostro:var(--mg-ink); --ink:var(--mg-ink); --testo:var(--mg-ink);
  --body:var(--mg-ink-2); --grigio:var(--mg-ink-3); --muto:var(--mg-ink-3); --meta:var(--mg-ink-4);
  --linea:var(--mg-line); --line:var(--mg-line); --bordo:var(--mg-line);
  --br:var(--mg-line-2); --bordo-2:var(--mg-line-strong); --bs:var(--mg-line-strong);
  --indaco:var(--mg-accent); --indacoH:var(--mg-accent-ink); --blue:var(--mg-accent);
  --primario:var(--mg-accent); --navy:var(--mg-accent);
  --arancio:var(--mg-accent); --arancio-pieno:var(--mg-accent); --orange:var(--mg-accent);
  --accBg:var(--mg-accent-bg); --accBd:var(--mg-accent-line);
  --verde:var(--mg-ok); --green:var(--mg-ok); --ok:var(--mg-ok); --verdeBg:var(--mg-ok-bg);
  --ambra:var(--mg-warn); --amber:var(--mg-warn); --warn:var(--mg-warn);
  --ambraBg:var(--mg-warn-bg); --ambraBd:var(--mg-warn-line);
  --rosso:var(--mg-bad); --red:var(--mg-bad); --errore:var(--mg-bad); --rossoBg:var(--mg-bad-bg);
}

/* ---- 3. Livelli per il resto: i componenti NON scavalcano le pagine ------- */
@layer components, pages;

/* ---- BASE — niente selettori generici (nemmeno .mono): solo namespaced ---- */
@layer components{
.mgds-scope{font-family:var(--mg-sans);color:var(--mg-ink-2)}
.mgds-mono{font-family:var(--mg-mono);font-variant-numeric:tabular-nums}
}

/* ---- SHELL + COMPONENTI — TUTTE le classi hanno prefisso .mgds- ------------
   LEZIONE (6.129.6): un nome generico come .app, .btn, .badge NON puo' stare
   qui. Anche dentro @layer, per una PROPRIETA' che la pagina non imposta (es.
   min-height), la regola di mgds si applica lo stesso. E' bastato .app con
   min-height:100vh per far diventare ogni tessera della Home alta uno schermo.
   Quindi: i componenti della fondazione sono namespaced. Non toccano NESSUNA
   classe delle pagine esistenti. Le pagine migrate useranno le .mgds-*.
   La parte AUTOREVOLE e globale sono SOLO i token/ponte qui sopra. */
@layer components{
.mgds-pageh{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px}
.mgds-pageh .bc{font-size:12px;color:var(--mg-ink-4);margin-bottom:5px}
.mgds-pageh h1{font-size:23px;font-weight:700;color:var(--mg-ink);letter-spacing:-.02em}
.mgds-pageh .sub{font-size:13.5px;color:var(--mg-ink-3);margin-top:4px;max-width:660px}
.mgds-pageh .act{margin-left:auto;display:flex;gap:9px;flex:none}
.mgds-btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:13px;font-weight:500;
  padding:var(--d-field-y) 13px;border-radius:var(--r-1);border:1px solid var(--mg-line-strong);
  background:var(--mg-surface);color:var(--mg-ink);cursor:pointer;white-space:nowrap;line-height:1.1}
.mgds-btn:hover{background:var(--mg-surface-2)}
.mgds-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.mgds-btn.pri{background:var(--mg-accent);border-color:var(--mg-accent-ink);color:#fff;font-weight:600;box-shadow:0 1px 2px rgba(47,107,239,.35)}
.mgds-btn.pri:hover{background:var(--mg-accent-ink)}
.mgds-btn.ghost{border-color:transparent;background:transparent;color:var(--mg-ink-2)}
.mgds-btn.ghost:hover{background:var(--mg-surface-2)}
.mgds-btn.danger{border-color:transparent;background:transparent;color:var(--mg-bad)}
.mgds-btn.danger:hover{background:var(--mg-bad-bg)}
.mgds-btn.sm{padding:6px 10px;font-size:12.5px}
.mgds-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.mgds-field label{font-size:12.5px;font-weight:600;color:var(--mg-ink-2)}
.mgds-inp{width:100%;padding:11px 13px;border:1px solid var(--mg-line-strong);border-radius:var(--r-1);
  background:var(--mg-surface);color:var(--mg-ink);font:inherit;font-size:13.5px;box-sizing:border-box}
.mgds-inp:focus{outline:none;border-color:var(--mg-accent);box-shadow:0 0 0 3px var(--mg-accent-bg)}
.mgds-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;border:1px solid var(--mg-line-strong);background:var(--mg-surface);font-size:12.5px;color:var(--mg-ink-2);cursor:pointer}
.mgds-chip.on{border-color:var(--mg-accent-line);background:var(--mg-accent-bg);color:var(--mg-accent-ink)}
.mgds-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:600}
.mgds-badge.ok{background:var(--mg-ok-bg);color:var(--mg-ok)} .mgds-badge.warn{background:var(--mg-warn-bg);color:var(--mg-warn)}
.mgds-badge.bad{background:var(--mg-bad-bg);color:var(--mg-bad)} .mgds-badge.info{background:var(--mg-info-bg);color:var(--mg-info)}
.mgds-badge.mut{background:var(--mg-surface-3);color:var(--mg-ink-3)}
.mgds-card{background:var(--mg-surface);border:1px solid var(--mg-line);border-radius:var(--r-2);box-shadow:var(--sh-1)}
.mgds-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.mgds-kpi{background:var(--mg-surface);border:1px solid var(--mg-line);border-radius:var(--r-2);box-shadow:var(--sh-1);padding:16px 17px}
.mgds-kpi .l{font-size:12px;color:var(--mg-ink-3);font-weight:500}
.mgds-kpi .v{font-size:26px;font-weight:700;color:var(--mg-ink);margin-top:9px;letter-spacing:-.02em}
table.mgds-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
table.mgds-tbl th,table.mgds-tbl td{padding:var(--d-cell-y) var(--d-cell-x);text-align:left;border-bottom:1px solid var(--mg-line-2);white-space:nowrap}
table.mgds-tbl thead th{background:var(--mg-surface-2);color:var(--mg-ink-3);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;height:var(--d-row);border-bottom:1px solid var(--mg-line)}
table.mgds-tbl tbody tr:hover{background:var(--mg-surface-2)}
table.mgds-tbl td.num,table.mgds-tbl th.num{text-align:right;font-family:var(--mg-mono);font-variant-numeric:tabular-nums}
.mgds-grid{display:grid;gap:14px}
.mgds-grid.c2{grid-template-columns:repeat(2,1fr)} .mgds-grid.c3{grid-template-columns:repeat(3,1fr)} .mgds-grid.c4{grid-template-columns:repeat(4,1fr)}
.mgds-grid.auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
/* input testuali, select e textarea condividono lo stesso stile del campo */
select.mgds-inp,textarea.mgds-inp{width:100%;padding:11px 13px;border:1px solid var(--mg-line-strong);border-radius:var(--r-1);background:var(--mg-surface);color:var(--mg-ink);font:inherit}
textarea.mgds-inp{min-height:74px;resize:vertical}
select.mgds-inp:focus,textarea.mgds-inp:focus{outline:none;border-color:var(--mg-accent);box-shadow:0 0 0 3px var(--mg-accent-bg)}
/* ---- LAYOUT & UTILITY: qui si SEMPLIFICA. Una pagina migrata usa queste
   classi al posto di centinaia di style="" inline; cambiando qui si cambia
   ovunque (gestione del template in un posto solo). ------------------------- */
.mgds-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mgds-row.top{align-items:flex-start} .mgds-row.tight{gap:6px} .mgds-row.wide{gap:16px} .mgds-row.nowrap{flex-wrap:nowrap}
.mgds-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.mgds-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mgds-grow{flex:1;min-width:0} .mgds-none{flex:none}
.mgds-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;background:var(--mg-surface-2);border:1px solid var(--mg-line);border-radius:var(--r-2)}
.mgds-toolbar .mgds-grow{min-width:180px}
.mgds-muted{color:var(--mg-ink-3)} .mgds-small{font-size:12px} .mgds-strong{font-weight:600;color:var(--mg-ink)}
.mgds-sep{height:1px;background:var(--mg-line);border:0;margin:4px 0}
.mgds-pad{padding:16px} .mgds-pad-lg{padding:20px}
/* modale di base: superficie, ombra, larghezza; lo scrim lo mette la pagina */
.mgds-modal{background:var(--mg-surface);border:1px solid var(--mg-line);border-radius:var(--r-3);box-shadow:var(--sh-2);max-width:560px;width:100%;padding:20px}
.mgds-modal h3{font-size:16px;font-weight:700;color:var(--mg-ink);margin-bottom:4px}
.mgds-modal .foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap}
}
/* ---- UTILITY A PROPRIETA' SINGOLA, NON-LAYERED (6.129.23) ------------------
   Sostituiscono gli attributi style="" a dichiarazione singola. A differenza
   dei COMPONENTI qui sopra (che stanno in @layer per NON scavalcare il <style>
   delle pagine), queste utility devono VINCERE come vinceva l'inline che
   rimpiazzano: percio' stanno FUORI da @layer e, arrivando mgds.css per ultimo,
   battono per ordine le regole di pari specificita' delle pagine. Restano sotto
   `html:root .x` (0,1,1) del foglio e sotto !important: dove una di quelle
   regole tocca la stessa proprieta', la conversione NON e' neutra e viene
   annullata dalla verifica del computed style (strumenti/verifica: rollback).
   Si applicano SOLO agli elementi che portano la classe: nessun effetto altrove. */
.mgds-mt-1{margin-top:4px}.mgds-mt-2{margin-top:8px}.mgds-mt-3{margin-top:12px}.mgds-mt-4{margin-top:16px}.mgds-mt-5{margin-top:20px}.mgds-mt-6{margin-top:24px}
.mgds-mb-1{margin-bottom:4px}.mgds-mb-2{margin-bottom:8px}.mgds-mb-3{margin-bottom:12px}.mgds-mb-4{margin-bottom:16px}.mgds-mb-5{margin-bottom:20px}.mgds-mb-6{margin-bottom:24px}
.mgds-gap-1{gap:4px}.mgds-gap-2{gap:8px}.mgds-gap-3{gap:12px}.mgds-gap-4{gap:16px}
.mgds-m0{margin:0} .mgds-flex1{flex:1} .mgds-ml-auto{margin-left:auto}
.mgds-w-full{width:100%} .mgds-w-auto{width:auto}
.mgds-center{text-align:center} .mgds-rightt{text-align:right}
.mgds-fs-11{font-size:11px}.mgds-fs-12{font-size:12px}.mgds-fs-125{font-size:12.5px}.mgds-fs-13{font-size:13px}.mgds-fs-135{font-size:13.5px}.mgds-fs-14{font-size:14px}.mgds-fs-15{font-size:15px}.mgds-fs-16{font-size:16px}
.mgds-fw-400{font-weight:400}.mgds-fw-600{font-weight:600}.mgds-fw-700{font-weight:700}.mgds-fw-800{font-weight:800}
.mgds-tl{text-align:left}
/* ATOMI FLEX (6.129.24): un attributo style composto si scompone in questi.
   Puri a proprieta' singola, non-layered come gli altri. Coprono i composti
   flex piu' frequenti; un composto con anche un atomo NON in questo insieme
   (margine fuori scala, colore, bordo...) NON si converte e resta inline. */
.mgds-flex{display:flex}.mgds-iflex{display:inline-flex}
.mgds-items-center{align-items:center}.mgds-items-end{align-items:flex-end}.mgds-items-start{align-items:flex-start}
.mgds-justify-end{justify-content:flex-end}.mgds-justify-between{justify-content:space-between}.mgds-justify-center{justify-content:center}
.mgds-wrap{flex-wrap:wrap}.mgds-self-end{align-self:flex-end}.mgds-ox-auto{overflow-x:auto}
/* margini/gap FUORI SCALA a valore esatto (6.129.25): px nel nome per non
   confondersi con la scala 4px. Sbloccano i composti che avevano un margine
   fuori griglia — sempre a zero pixel, verificati. */
.mgds-mt-0{margin-top:0}.mgds-mt-6px{margin-top:6px}.mgds-mt-10px{margin-top:10px}.mgds-mt-14px{margin-top:14px}.mgds-mt-18px{margin-top:18px}
.mgds-mb-0{margin-bottom:0}.mgds-mb-6px{margin-bottom:6px}.mgds-mb-10px{margin-bottom:10px}.mgds-mb-14px{margin-bottom:14px}
.mgds-gap-6px{gap:6px}.mgds-gap-10px{gap:10px}
.mgds-c-indaco{color:var(--indaco)}.mgds-c-muto{color:var(--muto)}.mgds-c-grigio{color:var(--grigio)}.mgds-c-ink{color:var(--inchiostro)}

/* ---- RESPONSIVE delle utility/griglie mgds: le colonne collassano su telefono
   senza che ogni pagina debba scrivere la propria @media. -------------------- */
@media(max-width:640px){
  html:root .mgds-grid.c2,html:root .mgds-grid.c3,html:root .mgds-grid.c4{grid-template-columns:1fr}
  html:root .mgds-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  html:root .mgds-toolbar{flex-direction:column;align-items:stretch}
  html:root .mgds-toolbar .mgds-grow{min-width:0}
}
