/* ============================================================
   Movee Gestionale — design system condiviso
   ------------------------------------------------------------
   Va incluso in OGNI pagina, subito dopo bergen.css e PRIMA
   dello <style> inline della pagina:

     <link rel="stylesheet" href="bergen.css">
     <link rel="stylesheet" href="movee.css?v=1">

   Qui dentro vivono i pezzi comuni a tutte le pagine: token
   colore, topbar, bottoni, card, KPI, tabelle, pillole di
   stato, form, modali, avvisi. Lo <style> di pagina deve
   contenere SOLO ciò che è specifico di quella pagina
   (griglie, calendario, documento stampabile…).

   REGOLA: se stai per riscrivere .btn / .card / .chip dentro
   una pagina, fermati — o usi questo file, o lo estendi qui.
   È esattamente così che erano nati 110 colori diversi e sei
   varianti dello stesso bottone.
   ============================================================ */

:root{
  /* marca */
  --cyan:#11B3CE; --cyan-soft:rgba(17,179,206,.10); --cyan-border:rgba(17,179,206,.28);
  --cyan-deep:#0d7f93;
  /* superfici e testo */
  --bg:#f6f8f9; --card:#ffffff; --ink:#0a0d10; --muted:#5a626c; --line:rgba(10,13,16,.08);
  --line-strong:rgba(10,13,16,.16);
  --ink-soft:#3a3f44;          /* testo secondario scuro */
  --bg-sunken:#f2f4f6;         /* fondo di sezioni incassate, righe alternate */
  /* semantica */
  --red:#e03131;   --red-soft:rgba(224,49,49,.10);   --red-deep:#a51d1d;
  --amber:#e8930c; --amber-soft:rgba(232,147,12,.12); --amber-deep:#9a6300;
  --green:#2b8a3e; --green-soft:rgba(43,138,62,.10);  --green-deep:#1c6b30;
  /* forma */
  --radius:14px; --radius-sm:9px; --radius-lg:18px; --radius-pill:999px;
  --shadow:0 4px 12px rgba(10,13,16,.06),0 2px 4px rgba(10,13,16,.04);
  --shadow-pop:0 24px 60px rgba(10,13,16,.25);
  /* tipografia: scala unica, niente più 12.8px */
  --fs-xs:11.5px; --fs-sm:12.5px; --fs-base:14px; --fs-md:15px;
  --fs-lg:17px; --fs-xl:20px; --fs-2xl:26px; --fs-3xl:30px;
  /* PESI — gerarchia esplicita. Se tutto è in grassetto, niente lo è:
     l'occhio deve trovare un solo punto forte per riquadro.
       400 corpo del testo
       500 etichette e testo secondario
       600 il "grassetto normale": titoli, voci, dati in evidenza
       700 numeri e valori che contano
       800 SOLO il numero protagonista di una schermata           */
  --fw-body:400; --fw-label:500; --fw-strong:600; --fw-num:700; --fw-hero:800;
}

/* Il grassetto scritto a mano nel markup (<b>, <strong>) vale 600, non il 700
   di default del browser: serve a distinguere una parola, non a gridare. */
b, strong{font-weight:var(--fw-strong)}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Bergen Sans','Outfit',system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh}

/* ---------- topbar ----------
   Barra essenziale: marchio a sinistra, azioni della pagina e utente a destra.
   Niente nome della sezione (lo dice la navbar sotto, pure sottolineato) e un
   solo logo — ce n'erano due nella stessa barra. */
.topbar{background:#fff;color:var(--ink);display:flex;align-items:center;gap:14px;padding:0 24px;height:56px;position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
.logo{font-weight:var(--fw-num);font-size:var(--fs-lg);letter-spacing:-.02em;color:var(--ink)}
.logo .dot{color:var(--cyan)}
.logo .gest{font-weight:var(--fw-body);font-size:var(--fs-base);color:var(--muted)}
.topbar .spacer{flex:1}
/* l'utente è un'informazione di servizio: niente riquadro, niente grassetto */
.topbar .userbox{display:flex;align-items:center;gap:9px}
.topbar .userbox .who{display:flex;align-items:baseline;gap:7px;line-height:1.2}
.topbar .userbox .who .name{font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--ink)}
.topbar .userbox .who .role{font-size:var(--fs-xs);color:var(--muted)}
.topbar a,.topbar button{background:transparent;border:1px solid var(--line-strong);color:var(--ink);border-radius:var(--radius-sm);padding:6px 12px;font-size:var(--fs-sm);cursor:pointer;font-family:inherit;text-decoration:none}
.topbar a:hover,.topbar button:hover{border-color:var(--cyan);color:var(--cyan-deep)}
/* stato del salvataggio (flotta, planning) */
.topbar .mod{font-size:var(--fs-sm);color:var(--muted)}

/* ---------- impianto di pagina ---------- */
.wrap{max-width:1600px;margin:0 auto;padding:22px 22px 60px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.head h1{font-size:var(--fs-2xl);font-weight:var(--fw-num);letter-spacing:-.01em;margin-bottom:4px}
.head .sub{color:var(--muted);font-size:var(--fs-base);font-weight:var(--fw-body)}
.head .actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---------- bottoni: UNA sola definizione per tutto il gestionale ---------- */
.btn{background:#fff;border:1px solid var(--line-strong);color:var(--ink);border-radius:10px;padding:10px 17px;font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px;line-height:1.2;transition:border-color .12s,background .12s,color .12s;white-space:nowrap}
.btn:hover{border-color:var(--cyan);color:var(--cyan-deep);background:var(--cyan-soft)}
.btn.primary{background:var(--cyan);border-color:var(--cyan);color:#fff}
.btn.primary:hover{background:var(--cyan-deep);border-color:var(--cyan-deep);color:#fff}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--bg-sunken);color:var(--ink);border-color:transparent}
/* azioni distruttive: rosso vero, non solo il testo colorato */
.btn.danger{background:#fff;border-color:rgba(224,49,49,.45);color:var(--red)}
.btn.danger:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn.sm{padding:7px 12px;font-size:var(--fs-sm)}
/* piccola "×" per togliere una riga da un elenco (gruppi, variazioni, costi) */
.del{background:none;border:none;color:var(--red);cursor:pointer;font-size:15px;padding:2px 6px;line-height:1;border-radius:6px}
.del:hover{background:var(--red-soft)}

/* ---------- card ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px}
/* titolo di sezione: leggibile, non urlato */
.card h2{font-size:var(--fs-md);font-weight:var(--fw-strong);letter-spacing:0;margin-bottom:14px;color:var(--ink)}
.card h2 .accent{color:var(--muted);font-weight:var(--fw-label)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.card-head h2{margin-bottom:0}
.card-head .accent{color:var(--cyan)}

/* ---------- KPI / stat: erano due componenti gemelli, ora uno solo ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:24px}
.kpi,.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
/* etichetta discreta: era maiuscolo + grassetto + spaziatura, cioè tre enfasi
   sovrapposte su un testo di servizio */
.kpi .k,.stat .k{font-size:var(--fs-sm);color:var(--muted);margin-bottom:6px;font-weight:var(--fw-label);letter-spacing:0}
.kpi .v,.stat .v{font-size:var(--fs-3xl);font-weight:var(--fw-num);letter-spacing:-.02em;line-height:1.15}
.kpi .u,.stat .u{font-size:var(--fs-lg);color:var(--muted);font-weight:var(--fw-label)}
.kpi .sub,.stat .sub{margin-top:6px;font-size:var(--fs-sm);color:var(--muted);font-weight:var(--fw-body);line-height:1.5}
.kpi .delta{display:inline-flex;align-items:center;gap:4px;font-weight:var(--fw-strong);font-size:var(--fs-sm);padding:2px 8px;border-radius:6px;margin-top:6px}
.kpi .delta.up{background:var(--green-soft);color:var(--green)}
.kpi .delta.down{background:var(--red-soft);color:var(--red)}
.kpi .delta.flat{background:rgba(90,98,108,.10);color:var(--muted)}
.kpi.hero{background:linear-gradient(135deg,#0a0d10 0%,#1a2028 100%);color:#fff;border-color:transparent}
.kpi.hero .k{color:#8a95a2}
.kpi.hero .v{color:#fff}
.kpi.hero .u,.kpi.hero .sub{color:#b8c0c8}

/* ---------- pillole di stato ----------
   Erano sei nomi diversi per la stessa cosa (.chip .badge .tag .pill
   .statuschip). Restano tutti validi come alias — così il markup
   esistente non va toccato — ma disegnano un unico componente. */
/* in una lista lunga ogni riga ha la sua pillola: se sono tutte in grassetto
   non distinguono più nulla — a fare il lavoro basta il colore */
.chip,.badge,.tag,.pill,.statuschip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:var(--fw-label);letter-spacing:.01em;background:var(--bg-sunken);color:var(--muted);border:1px solid transparent;white-space:nowrap;line-height:1.5}
.chip.ok,.badge.ok,.tag.ok,.pill.ok,.statuschip.ok{background:var(--green-soft);color:var(--green-deep)}
.chip.warn,.badge.warn,.tag.warn,.pill.warn,.statuschip.warn{background:var(--amber-soft);color:var(--amber-deep)}
.chip.bad,.badge.bad,.tag.bad,.pill.bad,.statuschip.bad{background:var(--red-soft);color:var(--red-deep)}
.chip.info,.badge.info,.tag.info,.pill.info,.statuschip.info{background:var(--cyan-soft);color:var(--cyan-deep)}

/* ---------- tabelle ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
/* nelle tabelle il maiuscoletto aiuta a separare intestazione e dati,
   ma senza grassetto: il peso serve ai numeri sotto */
.tbl th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:var(--fw-label);padding:10px 13px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--bg-sunken)}
.table-wrap,.tablecard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:auto}

/* ---------- form ---------- */
.fld{display:flex;flex-direction:column;gap:5px}
.fld label{font-size:var(--fs-sm);color:var(--muted);font-weight:600}
input[type=text],input[type=search],input[type=date],input[type=time],input[type=number],input[type=email],input[type=password],input[type=tel],select,textarea{
  font-family:inherit;font-size:var(--fs-base);color:var(--ink);background:#fff;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:9px 11px;outline:none;transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-soft)}
input[disabled],select[disabled],textarea[disabled]{background:var(--bg-sunken);color:var(--muted);cursor:not-allowed}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}

/* ---------- modali ----------
   Convenzione del progetto: .scrim è il velo scuro a tutto schermo,
   .modal è il pannello centrato. Si aprono entrambi con .open. */
.scrim{position:fixed;inset:0;background:rgba(10,13,16,.45);display:none;z-index:90}
.scrim.open{display:block}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);width:min(680px,94vw);max-height:92vh;overflow:auto;z-index:100;display:none}
.modal.open{display:block}
.modal header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:2}
.modal header h2{font-size:var(--fs-lg);letter-spacing:-.01em}
.modal header .x{background:none;border:none;font-size:22px;cursor:pointer;color:var(--muted);line-height:1}
.modal .body{padding:20px 22px}
.modal footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--card);flex-wrap:wrap}

/* ---------- popover ----------
   <details class="pop"><summary class="btn">Titolo</summary>
     <div class="pop-body">…</div></details>
   Serve a togliere dalla vista le cose che non si usano ogni giorno
   (legende, funzioni di analisi) senza nasconderle davvero. */
.pop{position:relative;display:inline-flex}
.pop>summary{list-style:none;cursor:pointer;user-select:none}
.pop>summary::-webkit-details-marker{display:none}
.pop>summary::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:3px;margin-top:-3px;transition:transform .15s}
.pop[open]>summary{border-color:var(--cyan);color:var(--cyan-deep);background:var(--cyan-soft)}
.pop[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
/* un figlio in position:absolute resta disegnato anche a <details> chiuso:
   va nascosto a mano, altrimenti il popover non si chiude mai */
.pop:not([open])>.pop-body{display:none}
.pop .pop-body{position:absolute;top:calc(100% + 6px);left:0;z-index:60;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(10,13,16,.14),0 3px 10px rgba(10,13,16,.06);padding:12px 14px;min-width:230px;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.pop.push{margin-left:auto}
.pop.right .pop-body{left:auto;right:0}

/* card richiudibile: <details class="card sim-card"><summary class="card-head">… */
details.card>summary{list-style:none;cursor:pointer}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary h2:after{content:' ▾';color:var(--muted);font-size:12px}
details.card[open]>summary h2:after{content:' ▴'}

/* ---------- avvisi ---------- */
.alert{border-radius:12px;padding:12px 15px;font-size:13.5px;line-height:1.55;border:1px solid transparent}
.alert.info,.info{background:var(--cyan-soft);border-color:var(--cyan-border);color:var(--ink)}
.alert.ok{background:var(--green-soft);border-color:rgba(43,138,62,.28);color:var(--green-deep)}
.alert.warn{background:var(--amber-soft);border-color:rgba(232,147,12,.32);color:var(--amber-deep)}
.alert.bad{background:var(--red-soft);border-color:rgba(224,49,49,.30);color:var(--red-deep)}

/* ---------- documenti (preventivo, conferma, contratto) ---------- */
.doc-rs{color:var(--ink)}

/* ---------- stato di salvataggio ---------- */
.status{font-size:var(--fs-sm);color:var(--muted)}
.status.saved{color:var(--green)}
.status.error{color:var(--red)}
.loading{padding:60px 20px;text-align:center;color:var(--muted);font-size:var(--fs-md)}