/* Font Plus Jakarta Sans servito localmente (funziona anche senza internet / su intranet).
   Definisce anche il font-family di base con ripiego sans, così nessuna pagina cade sul serif. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/pjs-400.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/pjs-500.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/pjs-600.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/pjs-700.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/pjs-800.woff2') format('woff2')}
html,body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}

/* ================================================================
   MGDEEP — Design System & Tema chiaro/scuro (mg_theme.css)
   Le regole dark usano selettori ad alta specificità
   (html[data-theme="dark"] ...) così prevalgono sugli stili :root
   e di classe definiti inline nelle singole pagine, senza doverle
   riscrivere. In tema chiaro questo foglio NON altera l'aspetto.
   ================================================================ */

/* --- Token semantici aggiuntivi (validi in entrambi i temi) --- */
:root{
  --ds-ombra: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --ds-ombra-2: 0 6px 18px rgba(1,46,96,.10);
  --ds-raggio: 12px;
  --ds-raggio-sm: 8px;
  --ok:#1F8A5B; --warn:#C77700; --err:#C0392B; --info:#2563EB;
  --superficie:#ffffff; --superficie-2:#F7F9FC;
  /* colori brand per il tema chiaro (in scuro sono ridefiniti più sotto) */
  --indaco:#012E60;          /* testi/titoli/link */
  --arancio:#FE6905;         /* accento brand */
  --inchiostro:#1B2536;      /* testo principale */
  --grigio:#64748B;          /* testo secondario */
  --muto:#5B6B7F;            /* testo tenue */
  --linea:#E3E8EF;           /* bordi */
  --bg:#F4F6FA;              /* sfondo pagina */
}

/* ====================== Componenti Design System (ds-*) ======================
   Look moderno "command center": superfici elevate, icone con gradiente,
   trend in pill, micro-interazioni. Validi in entrambi i temi (usano i token). */
.ds-grid{display:grid;gap:18px}
.ds-grid.k2{grid-template-columns:repeat(2,1fr)}
.ds-grid.k3{grid-template-columns:repeat(3,1fr)}
.ds-grid.k4{grid-template-columns:repeat(4,1fr)}
.ds-grid.auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
@media(max-width:1100px){.ds-grid.k4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.ds-grid.k2,.ds-grid.k3,.ds-grid.k4{grid-template-columns:1fr}}

.ds-card{background:var(--superficie);border:1px solid var(--linea);border-radius:16px;
  box-shadow:var(--ds-ombra);padding:20px 22px;transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.ds-card.hover:hover{transform:translateY(-2px);box-shadow:var(--ds-ombra-2)}
.ds-card.pad-lg{padding:24px 26px}
.ds-card-h{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ds-card-h h3{font-size:15px;font-weight:800;color:var(--inchiostro);letter-spacing:-.2px}
.ds-card-h .sub{font-size:12px;color:var(--muto);font-weight:600}
.ds-card-h .right{margin-left:auto}

.ds-kpi{position:relative;display:flex;align-items:flex-start;gap:14px;background:var(--superficie);
  border:1px solid var(--linea);border-radius:16px;box-shadow:var(--ds-ombra);padding:18px 20px;overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.ds-kpi:hover{transform:translateY(-2px);box-shadow:var(--ds-ombra-2);border-color:color-mix(in srgb,var(--indaco) 30%,var(--linea))}
.ds-kpi .ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:21px;flex:none;color:#fff;box-shadow:0 4px 12px rgba(1,46,96,.18)}
.ds-kpi .ic.blue{background:linear-gradient(135deg,#3B82F6,#1E40AF)}
.ds-kpi .ic.orange{background:linear-gradient(135deg,#FE6905,#C2410C)}
.ds-kpi .ic.green{background:linear-gradient(135deg,#22A06B,#0F5132)}
.ds-kpi .ic.amber{background:linear-gradient(135deg,#F59E0B,#B45309)}
.ds-kpi .ic.red{background:linear-gradient(135deg,#EF4444,#991B1B)}
.ds-kpi .ic.indigo{background:linear-gradient(135deg,#1E3A8A,#012E60)}
.ds-kpi .bd{min-width:0;flex:1}
.ds-kpi .lbl{font-size:12px;color:var(--muto);font-weight:600;margin-bottom:4px;letter-spacing:.1px}
.ds-kpi .val{font-size:29px;font-weight:800;color:var(--inchiostro);line-height:1;letter-spacing:-1.2px;font-variant-numeric:tabular-nums}
.ds-kpi .foot{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muto);margin-top:7px}
.ds-kpi .spark{position:absolute;right:14px;bottom:12px;width:74px;height:30px;opacity:.9}
.ds-trend{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:800;padding:2px 7px;border-radius:7px}
.ds-trend.up{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.ds-trend.down{color:var(--err);background:color-mix(in srgb,var(--err) 14%,transparent)}
.ds-trend.flat{color:var(--muto);background:color-mix(in srgb,var(--muto) 14%,transparent)}

.ds-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  padding:4px 11px;border-radius:20px;background:var(--superficie-2);color:var(--inchiostro);border:1px solid var(--linea)}
.ds-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
.ds-badge.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);border-color:transparent}
.ds-badge.warn{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);border-color:transparent}
.ds-badge.err{background:color-mix(in srgb,var(--err) 12%,transparent);color:var(--err);border-color:transparent}
.ds-badge.info{background:color-mix(in srgb,var(--info) 12%,transparent);color:var(--info);border-color:transparent}

.ds-list{display:flex;flex-direction:column}
.ds-list .row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--linea)}
.ds-list .row:first-child{border-top:0}
.ds-list .dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--indaco);box-shadow:0 0 0 4px color-mix(in srgb,var(--indaco) 16%,transparent)}
.ds-list .row .t{flex:1;min-width:0}
.ds-list .row .t b{font-size:13.5px;color:var(--inchiostro);font-weight:700;display:block}
.ds-list .row .t span{font-size:12px;color:var(--muto)}
.ds-list .row .when{font-size:11.5px;color:var(--muto);white-space:nowrap}

.ds-sect{font-size:12px;font-weight:800;color:var(--muto);text-transform:uppercase;letter-spacing:1px;margin:6px 0 12px}

/* dark: niente ombre dure, elevazione via colore + bordo tenue luminoso */
html[data-theme="dark"] .ds-card,html[data-theme="dark"] .ds-kpi{
  box-shadow:none;border-color:rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(255,255,255,.018), transparent), var(--superficie);
}
html[data-theme="dark"] .ds-card.hover:hover,html[data-theme="dark"] .ds-kpi:hover{
  box-shadow:0 8px 28px rgba(0,0,0,.45);border-color:rgba(111,160,234,.35)}
html[data-theme="dark"] .ds-kpi .ic{box-shadow:0 4px 14px rgba(0,0,0,.4)}




/* ===========================  TEMA SCURO  =========================== */
html[data-theme="dark"]{
  --indaco:#7CA8F0;          /* testi/titoli/link: azzurro brand chiaro */
  --arancio:#FF8A3D;         /* accento brand su scuro */
  --inchiostro:#EAEEF6;      /* testo principale */
  --grigio:#9FAABC;          /* testo secondario */
  --muto:#6E7B90;            /* testo tenue */
  --linea:#1E293B;           /* bordi */
  --bg:#070B14;              /* sfondo pagina (blu notte profondo) */
  --superficie:#0F1726;      /* card/pannelli */
  --superficie-2:#16213A;    /* header tabella / fasce */
}

/* superficie di base */
html[data-theme="dark"] body{background:var(--bg);color:var(--inchiostro)}
html[data-theme="dark"] ::selection{background:rgba(255,122,26,.35)}

/* topbar */
html[data-theme="dark"] .topbar{background:#101A2B;border-bottom-color:var(--linea)}
html[data-theme="dark"] .topbar input,
html[data-theme="dark"] .topbar .cerca,
html[data-theme="dark"] .topbar .search{background:#0C1422;color:var(--inchiostro);border-color:var(--linea)}

/* sidebar (mg_sidebar.js usa prefisso mgs-) */
html[data-theme="dark"] .mgs-nav,
html[data-theme="dark"] .mgs-items,
html[data-theme="dark"] .mgs-brand{background:#101A2B;color:var(--inchiostro);border-color:var(--linea)}
html[data-theme="dark"] .mgs-link,
html[data-theme="dark"] .mgs-home,
html[data-theme="dark"] .mgs-pers{color:var(--inchiostro)}
html[data-theme="dark"] .mgs-link:hover,
html[data-theme="dark"] .mgs-home:hover{background:#18243A}
html[data-theme="dark"] .mgs-grp,
html[data-theme="dark"] .mgs-gh{color:var(--muto)}
html[data-theme="dark"] .mgs-link.soon{opacity:.55}

/* superfici a contenuto: card, box, pannelli, kpi, sezioni */
html[data-theme="dark"] .card,
html[data-theme="dark"] .box,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .sez,
html[data-theme="dark"] .tile,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .pannello{
  background:var(--superficie);
  border-color:var(--linea);
  color:var(--inchiostro);
  box-shadow:none;
}
html[data-theme="dark"] .kpi .kpi-v,
html[data-theme="dark"] .kpi-v{color:var(--inchiostro)}
html[data-theme="dark"] .kpi .kpi-l,
html[data-theme="dark"] .kpi-l,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .muto{color:var(--muto)}

/* superfici "bianche" generiche dichiarate inline */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background:#FFF"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"]{
  background:var(--superficie) !important;
}

/* tabelle */
html[data-theme="dark"] table{color:var(--inchiostro);border-color:var(--linea)}
html[data-theme="dark"] thead th,
html[data-theme="dark"] th{background:var(--superficie-2);color:var(--inchiostro);border-color:var(--linea)}
html[data-theme="dark"] td{border-color:var(--linea)}
html[data-theme="dark"] tbody tr:hover{background:#18243A}

/* campi */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#0F1A2B;color:var(--inchiostro);border-color:var(--linea);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:var(--muto)}

/* bottoni: definizione esplicita per non dipendere dal token --indaco */
html[data-theme="dark"] .btn{background:#2B5BB0;color:#fff;border-color:#2B5BB0}
html[data-theme="dark"] .btn:hover{filter:brightness(1.08)}
html[data-theme="dark"] .btn.sec,
html[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] .btn.mini.sec{background:#1A2740;color:var(--inchiostro);border:1px solid var(--linea)}
html[data-theme="dark"] .btn.arancio,
html[data-theme="dark"] .btn.primary-orange{background:var(--arancio);color:#1a1206;border-color:var(--arancio)}

/* badge / etichette */
html[data-theme="dark"] .pill,
html[data-theme="dark"] .tag,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .badge{background:#1C2740;color:var(--inchiostro);border-color:var(--linea)}
html[data-theme="dark"] .pill.ok{background:rgba(31,138,91,.18);color:#5FD3A0}
html[data-theme="dark"] .pill.warn{background:rgba(199,119,0,.18);color:#F2B560}
html[data-theme="dark"] .pill.err,
html[data-theme="dark"] .pill.neg{background:rgba(192,57,43,.18);color:#F08C82}

/* tab */
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .tabs button{color:var(--inchiostro)}
html[data-theme="dark"] .tabs button.on{color:var(--arancio);border-color:var(--arancio)}

/* link e codice */
html[data-theme="dark"] a{color:var(--indaco)}
html[data-theme="dark"] code,
html[data-theme="dark"] pre{background:#0C1422;color:#D6DEEA;border-color:var(--linea)}

/* importi */
html[data-theme="dark"] .num.pos,html[data-theme="dark"] .pos{color:#5FD3A0}
html[data-theme="dark"] .num.neg,html[data-theme="dark"] .neg{color:#F08C82}

/* ===== Pulsante toggle tema (iniettato in topbar da mg_theme.js) ===== */
.mg-theme-btn{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--linea);
  background:transparent;color:var(--grigio);cursor:pointer;font-size:16px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  transition:background .15s,color .15s;flex:none;
}
.mg-theme-btn:hover{color:var(--arancio);border-color:var(--arancio)}
html[data-theme="dark"] .mg-theme-btn{color:var(--inchiostro);border-color:var(--linea)}

/* transizione morbida al cambio tema */
html.mg-theme-anim, html.mg-theme-anim *{transition:background-color .2s ease, color .2s ease, border-color .2s ease !important}


/* ================================================================
   RIFINITURE TEMA CHIARO — elevano gli stessi componenti che il
   tema scuro già gestisce (.card/.box/.panel/.kpi/.btn/input/table),
   portando l'estetica del design system (ds-*) su TUTTE le pagine
   senza modificarle una per una. Solo proprietà ESTETICHE (ombre,
   raggi, transizioni, focus): niente layout, così le pagine con
   regole proprie più specifiche restano intatte.
   ================================================================ */

/* rendering tipografico più nitido ovunque */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* superfici a contenuto: ombra morbida + raggio coerente */
.card,.box,.panel,.tile,.widget,.pannello,.sez{
  border-radius:var(--ds-raggio);
  box-shadow:var(--ds-ombra);
  transition:box-shadow .16s ease, border-color .16s ease;
}

/* bottoni: micro-interazione coerente (senza toccare colore/dimensioni) */
.btn{transition:filter .15s ease, box-shadow .15s ease, transform .05s ease}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}

/* campi: stato di focus moderno con anello brand arancio */
input,select,textarea{transition:border-color .15s ease, box-shadow .15s ease}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--arancio);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--arancio) 18%, transparent);
}

/* righe tabella: hover morbido */
tbody tr{transition:background .12s ease}

/* focus visibile accessibile su elementi interattivi (tastiera) */
a:focus-visible,button:focus-visible,.btn:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--arancio);outline-offset:2px;border-radius:4px;
}

/* scrollbar raffinata e sottile (WebKit + Firefox) */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--indaco) 30%,transparent) transparent}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--indaco) 26%,transparent);border-radius:8px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--indaco) 44%,transparent);background-clip:content-box}

/* selezione testo con accento brand */
::selection{background:color-mix(in srgb,var(--arancio) 28%,transparent)}

/* in tema scuro, l'anello di focus usa l'accento scuro e le superfici
   restano senza ombra dura (le regole html[data-theme=dark] più specifiche
   sopra prevalgono; qui riallineo solo il focus dei campi) */
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  border-color:var(--arancio);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--arancio) 22%, transparent);
}

/* header di pagina coerente su tutte le pagine interne (titolo + sottotitolo)
   allineato alle pagine moderne (Dashboard/Analytics). Solo il primo h1 del
   contenitore .wrap, così i titoli di sezione restano invariati. */
.wrap > h1,body > h1{font-size:22px;font-weight:800;letter-spacing:-.5px;margin:0 0 4px;color:var(--inchiostro)}
body > h1{margin:18px 22px 14px}
.wrap > h1 + .sub,.wrap > .sub{display:block;font-size:13px;color:var(--muto);margin:0 0 18px}

/* tabelle: rifinitura coerente su tutte le pagine (solo estetica: intestazione,
   bordi, hover di riga). Niente padding o larghezze: la densità resta quella
   scelta da ogni pagina. Specificità di elemento → le tabelle stilate via classe
   restano intatte; il tema scuro (html[data-theme=dark]) prevale dove serve. */
thead th,table > thead th{font-weight:700;border-bottom:1px solid var(--linea)}
td,th{border-color:var(--linea)}
tbody tr:hover{background:color-mix(in srgb,var(--indaco) 5%,transparent)}

/* ================================================================
   RESPONSIVE — adattamento dei layout su tablet e mobile.
   Caricato dopo gli stili inline: collassa le griglie comuni anche
   nelle pagine che non lo prevedevano. La sidebar (mg_sidebar.js)
   gestisce già il proprio collasso a hamburger sotto 820px.
   ================================================================ */
@media(max-width:1024px){
  .grid4,.grid3,.kpi,.kpis{grid-template-columns:repeat(2,1fr)}
  .ds-grid.k4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  /* griglie di form/contenuto → colonna singola (qualunque sia il nome usato) */
  .grid,.grid2,.grid3,.grid4,.row2,.cards,.pcards,.filtri,.cc-two,.areas,.cru,.two{grid-template-columns:1fr}
  .ds-grid.k2,.ds-grid.k3,.ds-grid.k4{grid-template-columns:1fr}
  /* card numeriche (KPI) → due colonne, restano leggibili sul telefono */
  .kpi,.kpis,.k4{grid-template-columns:repeat(2,1fr)}
  /* eventuali griglie definite inline */
  [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  .wrap{padding-left:14px;padding-right:14px}
  img{max-width:100%;height:auto}
  /* titoli un filo più compatti su telefono */
  .wrap > h1,body > h1{font-size:20px}
  /* tabelle larghe: scorrono nel proprio spazio invece di sfondare la pagina.
     white-space:nowrap mantiene la larghezza naturale (altrimenti width:100% le
     comprime e taglia le ultime colonne). I figli restano tabellari. */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;font-size:13px}
  /* barre di tab: scorrono in orizzontale invece di andare a capo */
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .tabs button,.tabs a,.tabs .tab{white-space:nowrap;flex:0 0 auto}
  /* finestre modali: non superano la larghezza dello schermo */
  .modal-box,.modal-card,.modal-content,.modal-box-lg{max-width:94vw}
}

/* Pulsante tema flottante: presente anche nelle pagine senza topbar */
.mg-theme-fab{position:fixed;top:10px;right:12px;z-index:60;width:38px;height:38px;border-radius:10px;
  border:1px solid var(--linea);background:var(--superficie);color:var(--inchiostro);font-size:17px;line-height:1;
  cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center}
.mg-theme-fab:hover{border-color:var(--indaco)}
@media(max-width:980px){.mg-theme-fab{top:8px;right:8px}}