/* ==========================================================================
   Gestionale Precision Robotica — design system
   Font: Barlow (UI) · Barlow Semi Condensed (etichette) · Red Hat Mono (dati)
   Icone: Lucide (inline SVG via shared/icons.js)
   Tema: chiaro di default; i token scuri sono pronti sotto [data-theme="dark"]
   (l'interruttore arriverà nelle impostazioni del profilo)
   ========================================================================== */

:root {
  --font-ui: 'Barlow', system-ui, sans-serif;
  --font-cond: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
  --font-mono: 'Red Hat Mono', ui-monospace, monospace;

  --side-w: 64px;
  --side-w-open: 236px;

  --paper: #F3F4F1;
  --surface: #FFFFFF;
  --ink: #14171B;
  --steel: #4A5058;
  --mute: #7A8088;
  --line: #DEDFDA;
  --line-strong: #C9CBC4;
  --red: #C22E2A;
  --red-hover: #A82623;
  --red-soft: rgba(194, 46, 42, 0.08);
  --ok: #3F7D52;
  --ok-soft: rgba(63, 125, 82, 0.1);
  --warn: #B8792A;
  --side-bg: #14171B;
  --side-bg2: #1B1F24;
  --side-line: #262B31;
  --side-text: #B4BAC1;
  --side-text-dim: #6E757D;
  --side-active-bg: #22272D;
  --thead: #FAFAF8;
  --input-bg: #FFFFFF;
  --shadow: 0 1px 2px rgba(20, 23, 27, 0.05);
  color-scheme: light;
}

/* Tema scuro automatico: segue il sistema operativo finché l'utente non
   sceglie manualmente (data-theme impostato dalle future impostazioni profilo,
   che ha sempre la precedenza in entrambe le direzioni). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #101316;
    --surface: #181C21;
    --ink: #E6E8E4;
    --steel: #AEB4BB;
    --mute: #7C838B;
    --line: #2A3037;
    --line-strong: #3A414A;
    --red: #E04B45;
    --red-hover: #E8635D;
    --red-soft: rgba(224, 75, 69, 0.12);
    --ok: #5FA876;
    --ok-soft: rgba(95, 168, 118, 0.14);
    --warn: #D19648;
    --side-bg: #0C0E11;
    --side-bg2: #12151A;
    --side-line: #1F242A;
    --side-text: #AEB4BB;
    --side-text-dim: #5E656D;
    --side-active-bg: #1C2127;
    --thead: #14181D;
    --input-bg: #12161B;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #101316;
  --surface: #181C21;
  --ink: #E6E8E4;
  --steel: #AEB4BB;
  --mute: #7C838B;
  --line: #2A3037;
  --line-strong: #3A414A;
  --red: #E04B45;
  --red-hover: #E8635D;
  --red-soft: rgba(224, 75, 69, 0.12);
  --ok: #5FA876;
  --ok-soft: rgba(95, 168, 118, 0.14);
  --warn: #D19648;
  --side-bg: #0C0E11;
  --side-bg2: #12151A;
  --side-line: #1F242A;
  --side-text: #AEB4BB;
  --side-text-dim: #5E656D;
  --side-active-bg: #1C2127;
  --thead: #14181D;
  --input-bg: #12161B;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* l'attributo hidden deve vincere anche sugli elementi con display flex/grid */
[hidden] { display: none !important; }

/* Immagini con variante per tema: .logo-light visibile su fondo chiaro,
   .logo-dark su fondo scuro */
.logo-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none !important; }
  :root:not([data-theme="light"]) .logo-dark { display: block !important; }
}
:root[data-theme="dark"] .logo-light { display: none !important; }
:root[data-theme="dark"] .logo-dark { display: block !important; }
:root[data-theme="light"] .logo-light { display: block !important; }
:root[data-theme="light"] .logo-dark { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.5;
}

h1, h2, h3 { margin: 0; }

svg.ic {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Pulsante che sta lavorando: l'icona gira finché l'operazione non finisce.
   Lo sbiadire non è decorativo, è l'unico segnale che resta a chi ha chiesto
   meno animazioni al sistema operativo. */
@keyframes ic-gira {
  to { transform: rotate(360deg); }
}
.btn[data-caricamento] { opacity: 0.65; cursor: progress; }
.btn[data-caricamento] svg.ic { animation: ic-gira 0.9s linear infinite; }

/* ============ SIDEBAR (a icone, si espande al passaggio del mouse) ============ */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: var(--side-w);
  background: var(--side-bg);
  border-right: 1px solid var(--side-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
  color-scheme: dark;
  transition: width 0.16s ease, box-shadow 0.16s ease;
}
.sidebar:hover, .sidebar:focus-within {
  width: var(--side-w-open);
  box-shadow: 12px 0 32px rgba(0, 0, 0, 0.28);
}
.sidebar.force-narrow,
.sidebar.force-narrow:hover,
.sidebar.force-narrow:focus-within {
  width: var(--side-w);
  box-shadow: none;
}

.sidebar .lbl, .sidebar .soon, .sidebar .tagline,
.sidebar .side-user .who, .sidebar .side-user .logout {
  opacity: 0;
  transition: opacity 0.12s ease;
  white-space: nowrap;
}
.sidebar:hover .lbl, .sidebar:hover .soon, .sidebar:hover .tagline,
.sidebar:hover .side-user .who, .sidebar:hover .side-user .logout,
.sidebar:focus-within .lbl, .sidebar:focus-within .soon, .sidebar:focus-within .tagline,
.sidebar:focus-within .side-user .who, .sidebar:focus-within .side-user .logout {
  opacity: 1;
}
.sidebar.force-narrow .lbl,
.sidebar.force-narrow .soon,
.sidebar.force-narrow .tagline,
.sidebar.force-narrow .side-user .who,
.sidebar.force-narrow .side-user .logout,
.sidebar.force-narrow .nav-section {
  opacity: 0;
}

.side-logo {
  height: 88px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--side-line);
}
.logo-mini {
  display: flex;
  width: 40px;
  margin-left: -4px; /* compensa il padding di .side-logo per restare centrato nei 64px */
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.logo-mini img { width: 100%; display: block; }
.logo-full { display: none; min-width: 0; }
.logo-full img { width: 168px; display: block; }
.logo-full .tagline {
  margin-top: 8px;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--side-text-dim);
}
.sidebar:hover .logo-mini, .sidebar:focus-within .logo-mini { display: none; }
.sidebar:hover .logo-full, .sidebar:focus-within .logo-full { display: block; }
.sidebar.force-narrow .logo-mini { display: flex; }
.sidebar.force-narrow .logo-full { display: none; }

.side-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--side-line) transparent;
}
.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-track { background: transparent; }
.side-nav::-webkit-scrollbar-thumb { background: var(--side-line); border-radius: 3px; }

.nav-section {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--side-text-dim);
  padding: 14px 20px 6px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.sidebar:hover .nav-section, .sidebar:focus-within .nav-section { opacity: 1; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px 9px 23px;
  color: var(--side-text);
  text-decoration: none;
  font-size: 14px;
  border-left: 2px solid transparent;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
a.nav-item:hover { background: var(--side-bg2); color: #E6E8E4; }
.nav-item.active {
  background: var(--side-active-bg);
  color: #FFFFFF;
  border-left-color: var(--red);
  font-weight: 600;
}
.nav-item svg.ic { opacity: 0.75; }
.nav-item.active svg.ic { opacity: 1; }
.nav-item.disabled { cursor: default; }
.nav-item .soon {
  margin-left: auto;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--side-text-dim);
  border: 1px solid var(--side-line);
  padding: 1px 5px;
  border-radius: 2px;
}

.side-user {
  flex-shrink: 0;
  border-top: 1px solid var(--side-line);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.side-user .avatar {
  width: 32px; height: 32px;
  border-radius: 2px;
  background: var(--red);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.side-user .side-profilo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  text-decoration: none;
  border-radius: 2px;
  padding: 2px;
  margin: -2px;
}
.side-user .side-profilo:hover { background: var(--side-bg2); }
.side-user .who { min-width: 0; }
.side-user .name {
  color: #E6E8E4;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-user .role {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--side-text-dim);
}
.side-user .logout {
  margin-left: auto;
  color: var(--side-text-dim);
  display: flex;
  padding: 6px;
  border-radius: 2px;
  background: none;
  border: none;
  cursor: pointer;
}
.side-user .logout:hover { color: var(--red); background: var(--side-bg2); }

/* ============ MAIN ============ */
.main {
  margin-left: var(--side-w);
  min-width: 0;
  padding: 28px 32px 48px;
  transition: opacity 0.15s ease;
}
.main.is-swapping {
  opacity: 0.55;
  pointer-events: none;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.page-head h1 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.page-head .sub {
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--mute);
}
.page-head .sub .mono { font-family: var(--font-mono); font-size: 12px; }
/* Card d'azione per l'invio del PDF al cliente: icona di stato,
   titolo + riga di stato, campo email e unico pulsante d'invio */
.email-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  flex-wrap: wrap;
}
.email-strip-icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--line);
  color: var(--mute);
  flex-shrink: 0;
}
.email-strip-icona svg.ic { width: 18px; height: 18px; }
.email-strip.stato-ok .email-strip-icona { background: var(--ok-soft); color: var(--ok); }
.email-strip.stato-attesa .email-strip-icona { background: rgba(184, 121, 42, 0.12); color: var(--warn); }
.email-strip.stato-errore .email-strip-icona { background: var(--red-soft); color: var(--red); }
.email-strip-info { flex: 1; min-width: 220px; }
.email-strip-info .titolo { font-weight: 600; font-size: 14px; }
#email-stato { margin-top: 2px; font-size: 13px; color: var(--mute); }
.email-strip.stato-errore #email-stato { color: var(--red); }
.email-strip-azioni { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.email-strip-azioni[hidden] { display: none; }
.email-strip-azioni input {
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--ink);
  background: var(--input-bg);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 7px 10px;
  width: 230px;
}
.email-strip-azioni input:focus { outline: 2px solid var(--red); outline-offset: -1px; }
.page-actions { display: flex; gap: 8px; align-items: center; }

/* ============ BOTTONI ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  background: none;
  color: inherit;
}
.btn svg.ic { width: 14px; height: 14px; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-hover); }
.btn-primary:disabled { opacity: 0.65; cursor: default; }
.btn-ghost {
  background: transparent;
  color: var(--steel);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--steel); color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.btn-icon { padding: 7px; }
.btn-icon svg.ic { width: 15px; height: 15px; }
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.btn-link:hover { color: var(--red); text-decoration: underline; }
.btn-link svg.ic { width: 14px; height: 14px; color: var(--mute); flex-shrink: 0; }
.btn-icon.danger { color: var(--red); border-color: transparent; }
.btn-icon.danger:hover { background: var(--red-soft); border-color: transparent; }

/* ============ STAT TILES ============ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 14px 16px 12px;
  box-shadow: var(--shadow);
  position: relative;
}
.stat::before {
  content: '';
  position: absolute;
  top: 14px; left: 0;
  width: 3px; height: 16px;
  background: var(--red);
}
.stat .label {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.stat .value {
  font-family: var(--font-mono);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.15;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
a.stat { text-decoration: none; color: inherit; display: block; }
a.stat:hover { border-color: var(--line-strong); }
.stat-sub { margin-top: 2px; font-size: 12px; color: var(--mute); }
.stat.allerta::before { background: var(--warn); }
.stat.allerta .value { color: var(--warn); }

/* ============ DASHBOARD ============ */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

/* Grafico a colonne: barre sottili, cima arrotondata, base squadrata */
.colchart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 8px;
  padding: 20px 16px 14px;
  min-height: 190px;
}
.colchart .col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 0 1 48px;
}
.colchart .col-barra {
  width: 22px;
  background: var(--red);
  border-radius: 4px 4px 0 0;
  transition: opacity 0.1s ease;
}
.colchart .col:hover .col-barra { opacity: 0.75; }
.colchart .col-valore {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.colchart .col-anno {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mute);
  border-top: 1px solid var(--line-strong);
  padding-top: 4px;
  align-self: stretch;
  text-align: center;
}

/* Ripartizione per stato: barra unica + legenda, i segmenti separati
   da 2px di superficie (mai bordi disegnati) */
.ripartizione { padding: 20px 16px; }
.barra-stati {
  display: flex;
  gap: 2px;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 14px;
}
.barra-stati .seg { min-width: 4px; }
.legenda-stati { display: flex; flex-direction: column; gap: 7px; }
.legenda-stati .voce { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.legenda-stati .punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legenda-stati .nome { color: var(--ink); }
.legenda-stati .numero {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.legenda-stati .perc { color: var(--mute); font-weight: 400; }

/* ============ FILTRI / CAMPI ============ */
.filterbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 14px 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.field { display: flex; flex-direction: column; gap: 4px; }
.field.grow { flex: 1; min-width: 200px; }
.field label {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.field select, .field input, .field textarea {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--input-bg);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 7px 10px;
  min-width: 150px;
  width: 100%;
}
.field input.mono { font-family: var(--font-mono); font-size: 13px; }
.field textarea { resize: vertical; min-height: 72px; }
.field select:focus, .field input:focus, .field textarea:focus {
  outline: 2px solid var(--red);
  outline-offset: -1px;
  border-color: var(--red);
}
.filterbar .actions { display: flex; gap: 8px; margin-left: auto; }

/* ============ AUTOCOMPLETE (shared/autocomplete.js) ============ */
.ac-wrap { position: relative; }
/* campo a scelta obbligata: il testo scritto non corrispondeva a nessuna voce */
.field input.ac-invalid { border-color: var(--red); background: var(--red-soft); }
.ac-avviso {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--red);
}
.ac-list {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(20, 23, 27, 0.18);
  max-height: 220px;
  overflow-y: auto;
}
.ac-item {
  padding: 8px 10px;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.ac-item:last-child { border-bottom: none; }
.ac-item.active, .ac-item:hover { background: var(--red-soft); }

/* ============ CHECKBOX ============ */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--input-bg) center / 12px auto no-repeat;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
input[type="checkbox"]:hover:not(:disabled) { border-color: var(--red); }
input[type="checkbox"]:checked {
  background-color: var(--red);
  border-color: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}
input[type="checkbox"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* dentro .field va neutralizzata la regola generica degli input */
.field input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  padding: 0;
}
.field input[type="checkbox"]:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}
/* checkbox singolo sotto l'etichetta del filtro: allineato all'altezza dei select */
.field > input[type="checkbox"] { margin-top: 8px; }

/* etichetta inline con checkbox (es. "Responsabile di reparto") */
.field label.check, label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

/* ============ PANNELLI / TABELLE ============ */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.panel-head h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* più badge a destra del titolo restano affiancati invece di essere
   distanziati dal justify-content del pannello */
.panel-head .badge-group { display: flex; align-items: center; gap: 8px; }
.count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 2px 8px;
}
.count b { font-weight: 600; color: var(--ink); }

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data thead th {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: left;
  background: var(--thead);
  border-bottom: 1px solid var(--line);
  padding: 9px 16px;
  white-space: nowrap;
}
table.data thead th.num, table.data td.num { text-align: center; }
table.data tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover td { background: var(--red-soft); }
table.data td .commessa,
table.data td a.mono {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
}
table.data td .commessa:hover,
table.data td a.mono:hover { text-decoration: underline; }
/* Numero commessa non ancora assegnato: si legge come un promemoria e non
   come un codice, col colore d'attenzione già usato dagli stati. */
table.data td .commessa.da-assegnare {
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--warn);
}
.count .da-assegnare { color: var(--warn); }
/* Il conteggio "senza numero" e' anche un filtro: cliccato lascia solo quelle */
.count a { color: inherit; text-decoration: none; }
.count a:hover { text-decoration: underline; }
/* Gli anni di attivita' di un cliente, accanto al numero delle sue commesse */
table.data td .anni {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
/* Il riferimento dell'impianto accanto al numero, sulla stessa riga:
   nell'inventario la cella e' gia' "numero — cliente (anno)" */
table.data td .riferimento-inline { color: var(--mute); }
/* Il riferimento dell'impianto, sotto il numero: e' quello che il cliente dice
   al telefono, ma il numero resta la chiave, quindi sta sotto e piu' piccolo. */
table.data td .riferimento {
  display: block;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--mute);
  margin-top: 2px;
}
table.data td.anno {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
table.data td .cliente { font-weight: 600; }
table.data td.empty {
  text-align: center;
  color: var(--mute);
  padding: 28px 16px;
}
table.data td.actions { text-align: right; white-space: nowrap; }
table.data td.actions .btn + .btn { margin-left: 4px; }

.chip {
  display: inline-block;
  min-width: 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.chip.zero {
  color: var(--mute);
  border-color: var(--line);
  font-weight: 400;
}

/* Badge di stato commessa */
.stato {
  display: inline-block;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid;
  white-space: nowrap;
}
.stato-attiva { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.stato-sospesa { color: var(--warn); border-color: var(--warn); background: rgba(184, 121, 42, 0.1); }
.stato-completata { color: var(--steel); border-color: var(--line-strong); }
.stato-archiviata { color: var(--mute); border-color: var(--line); }
.stato-errore { color: var(--red); border-color: var(--red); background: var(--red-soft); }

/* Badge di stato pianificazione / fasi di lavorazione */
.stato-da-iniziare { color: var(--steel); border-color: var(--line-strong); }
.stato-in-corso { color: var(--warn); border-color: var(--warn); background: rgba(184, 121, 42, 0.1); }
.stato-bloccato { color: var(--red); border-color: var(--red); background: var(--red-soft); }
.stato-concluso { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.stato-aperto { color: var(--warn); border-color: var(--warn); background: rgba(184, 121, 42, 0.1); }
.stato-evaso { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }

.mute { color: var(--mute); }

/* Chip scadenza (giorni mancanti): rosso ritardo, arancio ≤5gg, verde ok, grigio chiusa */
.scad {
  display: inline-block;
  min-width: 48px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid;
  white-space: nowrap;
}
.scad-rossa { color: var(--red); border-color: var(--red); background: var(--red-soft); }
.scad-arancio { color: var(--warn); border-color: var(--warn); background: rgba(184, 121, 42, 0.1); }
.scad-verde { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.scad-grigia { color: var(--mute); border-color: var(--line); }

/* Intestazioni tabella ordinabili */
table.data thead th.sortable { cursor: pointer; user-select: none; }
table.data thead th.sortable:hover { color: var(--ink); }
table.data thead th.sortable .dir { font-family: var(--font-mono); margin-left: 2px; }

/* Piè di pannello (es. pulsante "aggiungi" sotto una tabella) */
.panel-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}

/* Griglia chiave/valore per pagine di dettaglio */
.kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 24px;
  padding: 16px;
}
.kv .k {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.kv .v { margin-top: 2px; }
.kv .v.mono { font-family: var(--font-mono); font-size: 13px; }
.kv .full { grid-column: 1 / -1; }

/* ============ CAMPO PASSWORD CON MOSTRA/NASCONDI ============ */
.pw-wrap { position: relative; display: flex; width: 100%; }
.pw-wrap input { padding-right: 38px; }
.pw-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--mute);
  cursor: pointer;
  display: flex;
  padding: 6px;
}
.pw-toggle:hover { color: var(--ink); }

/* ============ TABS ============ */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.tab {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 16px;
  cursor: pointer;
  text-decoration: none;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--red); }

/* ============ ALERT ============ */
.alert {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 3px;
  border: 1px solid;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 14px;
}
.alert .close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  display: flex;
  padding: 2px;
}
.alert-success { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.alert-danger { background: var(--red-soft); border-color: var(--red); color: var(--red); }

/* ============ DIALOG (modale nativa) ============ */
dialog {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}
dialog::backdrop { background: rgba(20, 23, 27, 0.55); }
dialog.dialog-wide { max-width: 640px; }
dialog.drag-over { outline: 2px dashed var(--red); outline-offset: -6px; }
dialog.drag-over .dialog-body { background: var(--red-soft); }
.drop-hint { font-size: 13px; color: var(--mute); }
.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.dialog-head h2 { font-size: 15px; font-weight: 700; }
.dialog-head .close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mute);
  display: flex;
  padding: 4px;
}
.dialog-head .close:hover { color: var(--ink); }
.dialog-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.dialog-body .alert { margin-bottom: 0; }
.dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}

/* Riga esplicativa in testa al contenuto di un pannello */
.nota-pannello {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mute);
  max-width: 70ch;
}

/* ============ FORM A GRIGLIA (scheda commessa) ============ */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 16px;
}
.form-grid .full { grid-column: 1 / -1; }
/* Coppie di campi corti (es. le due matricole) affiancate anche dentro una
   finestra stretta, dove la soglia standard le manderebbe a capo. */
.form-grid.stretta { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* Spiegazione breve sotto un campo */
.field .nota { font-size: 11.5px; line-height: 1.35; color: var(--mute); }
/* Gruppo di campi che compare in blocco (es. il referente del dealer):
   sta su tutta la riga, così non scompagina le colonne quando appare. */
.form-grid .full > .form-sezione { margin-top: 4px; }

/* Titoletto che separa i gruppi di campi dentro un form */
.form-sezione {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.form-sezione:not(:first-child) { margin-top: 6px; }

/* Zona di trascinamento dentro una modale di caricamento file */
.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  border: 2px dashed var(--line-strong);
  border-radius: 3px;
  color: var(--mute);
  font-size: 13.5px;
  text-align: center;
}
.drop-zone.drag-over { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.drop-zone .drop-zone-icona svg.ic { width: 24px; height: 24px; }

/* Riga compatta per un singolo PDF allegato a un campo del form */
.pdf-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
}
.pdf-slot .vuoto { font-size: 13px; color: var(--mute); }

/* ============ DIALOG DI CONFERMA ============ */
.conferma-corpo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
}
.conferma-icona {
  color: var(--warn);
  display: flex;
  margin-top: 2px;
}
.conferma-icona svg.ic { width: 20px; height: 20px; }

/* ============ LOGIN ============ */
body.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: 3px;
  box-shadow: 0 8px 32px rgba(20, 23, 27, 0.1);
  padding: 32px 28px 28px;
}
.login-card .logo { display: block; margin: 0 auto 8px; height: 44px; }
.login-card .login-tagline {
  text-align: center;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 28px;
}
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-card .btn { justify-content: center; }
.login-card .alert { margin-bottom: 0; }

/* ============ TIMELINE SCADENZE ============ */
.timeline-scroll { overflow-x: auto; padding-bottom: 4px; }
.timeline {
  display: grid;
  grid-auto-rows: min-content;
  grid-auto-flow: row dense;
  gap: 2px 0;
  min-width: max-content;
}
.timeline .tl-week {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mute);
  text-align: center;
  padding: 6px 8px 8px;
  border-bottom: 2px solid var(--line);
  min-width: 72px;
  white-space: nowrap;
  grid-row: 1;
}
.timeline .tl-week .num { display: block; font-weight: 700; color: var(--steel); font-size: 12px; }
.timeline .tl-week.corrente {
  background: var(--red-soft);
  border-bottom-color: var(--red);
}
.timeline .tl-week.corrente .num { color: var(--red); }
.timeline .tl-cell { padding: 2px 4px; }
.tl-pill {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  padding: 3px 6px;
  border-radius: 2px;
  border: 1px solid;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-pill:hover { filter: brightness(1.06); text-decoration: none; }
.tl-vuota { padding: 20px 12px; color: var(--mute); font-size: 13px; }

/* ============ FASI DI LAVORAZIONE (pianificazione) ============ */
.panel-head .progresso { display: flex; align-items: center; gap: 12px; }
.progresso .barra {
  width: 140px;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.progresso .barra span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--ok);
  transition: width 0.35s ease;
}

table.fasi tbody td { padding: 6px 10px; }

/* indicatore di avanzamento (numero fase o spunta) */
table.fasi .step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--steel);
  background: var(--surface);
}
table.fasi .step .ic { width: 13px; height: 13px; stroke-width: 3; }
table.fasi tr.fase-in-corso .step { border-color: var(--warn); color: var(--warn); background: rgba(184, 121, 42, 0.1); }
table.fasi tr.fase-bloccato .step { border-color: var(--red); color: var(--red); background: var(--red-soft); }
table.fasi tr.fase-concluso .step { border-color: var(--ok); color: #fff; background: var(--ok); }

/* accento laterale con lo stato della riga */
table.fasi tbody td:first-child { border-left: 3px solid transparent; }
table.fasi tr.fase-in-corso td:first-child { border-left-color: var(--warn); }
table.fasi tr.fase-bloccato td:first-child { border-left-color: var(--red); }
table.fasi tr.fase-concluso td:first-child { border-left-color: var(--ok); }
table.fasi tr.fase-bloccato td { background: var(--red-soft); }

table.fasi td.fase-nome { font-weight: 600; white-space: nowrap; }
table.fasi tr.fase-concluso td.fase-nome { color: var(--mute); }

/* campi di modifica leggeri a riposo, evidenti su hover/focus */
table.fasi select, table.fasi input {
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--ink);
  width: 100%;
  min-width: 110px;
  padding: 5px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
}
table.fasi input[type="date"] {
  font-family: var(--font-mono);
  font-size: 12.5px;
  min-width: 128px;
  font-variant-numeric: tabular-nums;
}
table.fasi select:hover:not(:disabled), table.fasi input:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--input-bg);
}
table.fasi select:focus, table.fasi input:focus {
  outline: 2px solid var(--red);
  outline-offset: -1px;
  border-color: var(--red);
  background: var(--input-bg);
}

/* stato con i colori dei badge corrispondenti */
table.fasi .stato-select {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
table.fasi .stato-select[data-stato="da_iniziare"] { color: var(--steel); }
table.fasi .stato-select[data-stato="in_corso"] { color: var(--warn); }
table.fasi .stato-select[data-stato="bloccato"] { color: var(--red); }
table.fasi .stato-select[data-stato="concluso"] { color: var(--ok); }

/* lampo verde alla conferma del salvataggio */
@keyframes fase-salvata {
  from { background: var(--ok-soft); }
  to { background: transparent; }
}
table.fasi td.salvato { animation: fase-salvata 1.2s ease-out; }

/* ============ RIGHE GRUPPO (ordini fornitori) ============ */
table.data tr.gruppo td {
  background: var(--thead);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  border-top: 2px solid var(--line-strong);
}
table.data tr.gruppo:hover td { background: var(--thead); filter: brightness(0.98); }
table.data tr.gruppo .ic { vertical-align: -3px; margin-right: 6px; }
table.data tr.gruppo .conta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--mute);
  margin-left: 8px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
  }
  .sidebar:hover, .sidebar:focus-within { width: 100%; box-shadow: none; }
  .sidebar .lbl, .sidebar .soon, .sidebar .nav-section { opacity: 1; }
  .logo-mini { display: none; }
  .logo-full { display: block; }
  .side-logo { height: auto; padding: 16px; }
  .side-nav { display: flex; flex-wrap: wrap; padding: 8px 12px; overflow: visible; }
  .nav-section { display: none; }
  .nav-item { border-left: none; border-bottom: 2px solid transparent; padding: 8px 12px; }
  .nav-item.active { border-bottom-color: var(--red); }
  .nav-item.disabled { display: none; }
  .side-user { display: none; }
  .main { margin-left: 0; padding: 20px 16px 40px; }
  .filterbar .actions { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn[data-caricamento] svg.ic { animation: none; }
}

/* ============ STAMPA ============ */
@media print {
  .sidebar, .filterbar, .page-actions, td.actions, th.actions { display: none !important; }
  .main { margin-left: 0; padding: 0; }
  body { background: #fff; }
  .panel, .stat { box-shadow: none; }
}