/* ===========================================================
   Gestionale Logistica — dashboard chiara e monocromatica (solo desktop)
   Nero su grigio chiarissimo, card bianche arrotondate, controlli a pillola.
   Il colore comunica e basta: stati/categorie (--c), scaduto (rosso), oggi (ambra), positivo (verde).
   =========================================================== */

:root {
  --ink: #111827; --ink-hover: #000;
  --grigio: #676c75;      /* etichette, testo secondario (AA: 5,3:1 su bianco, 4,8:1 su --fondo) */
  --grigio-2: #5b616b;    /* voci di navigazione non attive */
  --bordo: #eceef1;
  --bordo-campo: #dcdfe4; /* input e select: un filo più visibili delle card */
  --fondo: #f4f5f7;       /* sfondo pagina, chip, tag */
  --card: #fff;
  --riga: #f1f2f4;        /* separatori di tabella, tracce delle barre */
  --riga-hover: #fafafb;
  --barra: #e5e7eb;       /* barra base dei grafici */
  --testo-tag: #3f4650;
  --verde: #16a34a; --rosso: #e5484d; --rosso-chiaro: #fff1f1;
  --ambra: #d97706; --ambra-chiaro: #fff7e8; --oggi: #f59e0b;
  /* Stessi colori scuriti per il testo su fondo chiaro (AA ≥ 4,5:1) */
  --verde-testo: color-mix(in srgb, var(--verde) 65%, #000);
  --rosso-testo: color-mix(in srgb, var(--rosso) 70%, #000);
  --ambra-testo: color-mix(in srgb, var(--ambra) 65%, #000);
  /* Palette degli stati */
  --stato-grigio: #64748b; --blu: #2563eb; --viola: #7c3aed; --teal: #0d9488; --chiuso: #94a3b8;
  /* Sabato e domenica nei calendari e nelle scelte dei giorni */
  --weekend: color-mix(in srgb, var(--blu) 6%, #fff);
  /* Carico del giorno nel calendario persone (1–2, 3–5, 6–9, 10+ al lavoro) */
  --carico-1: color-mix(in srgb, var(--ambra) 7%, #fff);
  --carico-2: color-mix(in srgb, var(--ambra) 15%, #fff);
  --carico-3: color-mix(in srgb, var(--rosso) 11%, #fff);
  --carico-4: color-mix(in srgb, var(--rosso) 20%, #fff);

  --ombra: 0 1px 2px rgba(17, 24, 39, .04);
  --ombra-su: 0 10px 30px rgba(17, 24, 39, .08);
  --ombra-cta: 0 6px 18px rgba(17, 24, 39, .2);
  --ombra-pannello: 0 20px 60px rgba(17, 24, 39, .2);
  --r: 18px;              /* pannelli, tabelle, KPI, box */
  --r-card: 14px;         /* card e blocchi interni */
  --r-campo: 12px;        /* input e select */
  --r-drawer: 22px;
  --header-h: 64px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* vale anche su elementi con display impostato */

html, body { margin: 0; height: 100%; }
body {
  font-family: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
  font-size: 13.5px; letter-spacing: -.005em; line-height: 1.45;
  font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
b, strong { font-weight: 700; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(17, 24, 39, .16); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(17, 24, 39, .28); background-clip: content-box; }

/* ---------- Header ---------- */
.topbar {
  height: var(--header-h); padding: 14px 20px;
  display: flex; align-items: center; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--bordo);
  font-size: 12px; font-weight: 800; letter-spacing: -.02em; color: var(--blu);
}
.topbar h1 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.subtitle { margin: 2px 0 0; font-size: 11.5px; color: var(--grigio); }

.tabs {
  display: flex; gap: 2px; padding: 4px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--bordo); border-radius: 999px; box-shadow: var(--ombra);
}
.tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 7px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--grigio-2);
  transition: background .15s, color .15s;
}
.tab:hover { background: var(--fondo); color: var(--ink); }
.tab.active { background: var(--ink); color: #fff; }

/* Utente: bottoni icona tondi, poi l'email come pillola nera con avatar bianco */
.utente { display: flex; align-items: center; gap: 8px; }
.utente-email {
  order: 3; position: relative; max-width: 260px;
  height: 36px; line-height: 36px; padding: 0 14px 0 40px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.utente-email::before {
  content: ""; position: absolute; left: 4px; top: 4px; width: 28px; height: 28px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.utente .btn { width: 36px; height: 36px; min-height: 0; padding: 0; font-size: 0; border-radius: 50%; }
.utente .btn::before {
  content: ""; width: 16px; height: 16px; background: var(--ink);
  -webkit-mask: var(--icona) center / contain no-repeat; mask: var(--icona) center / contain no-repeat;
}
#btn-cambia-pwd { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3Cpath d='m21 2-9.6 9.6'/%3E%3Cpath d='m15.5 7.5 3 3L22 7l-3-3'/%3E%3C/svg%3E"); }
#btn-esci { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); }

/* ---------- Layout ---------- */
main { height: calc(100vh - var(--header-h)); }
.view { height: 100%; overflow-y: auto; padding: 6px 20px 28px; }
.view-cerca { display: flex; gap: 14px; overflow: hidden; }

/* ---------- Controlli ---------- */
label, .label { display: block; margin: 14px 0 6px; font-size: 11.5px; font-weight: 600; color: var(--grigio); }
:where(input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"],
       input[type="time"], input[type="email"], input[type="password"], select) {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--bordo-campo); border-radius: var(--r-campo);
  background: var(--card); color: var(--ink); font-size: 13.5px;
  transition: border-color .15s, box-shadow .15s;
}
:where(input, select, textarea):focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17, 24, 39, .08); }
input[type="checkbox"] { accent-color: var(--ink); }
::placeholder { color: var(--grigio); opacity: 1; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--bordo); background: var(--card); color: var(--ink);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn.ghost:hover { border-color: var(--ink); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.btn.primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn.primary:disabled { background: var(--barra); border-color: var(--barra); color: var(--grigio); cursor: not-allowed; }
/* Azione distruttiva: bordo tratteggiato, piena rossa al passaggio (la conferma resta quella attuale) */
.link-danger, #sd-elimina { color: var(--rosso-testo); border: 1px dashed color-mix(in srgb, var(--rosso) 45%, #fff); }
.link-danger:hover, #sd-elimina:hover { background: var(--rosso-testo); border: 1px solid var(--rosso-testo); color: #fff; }
.link-btn { background: none; border: 0; padding: 6px; margin-top: 8px; cursor: pointer; color: var(--ink); font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Frecce mese: bottoni tondi */
#srv-prev, #srv-next, #eco-prev, #eco-next { width: 36px; padding: 0; font-size: 18px; line-height: 1; }

.row { display: flex; gap: 12px; align-items: flex-end; margin-top: 4px; }
.inline { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 13px; font-weight: 500; color: var(--ink); }
.inline input[type="checkbox"] { width: auto; }
.raggio { flex-direction: column; align-items: flex-start; }
.raggio input { width: 92px; }

.form-stato { margin: 10px 0 0; min-height: 18px; font-size: 12.5px; }
.form-stato.errore { color: var(--rosso-testo); }
.form-stato.ok { color: var(--verde-testo); }
.hint { margin: 10px 0 0; font-size: 12px; color: var(--grigio); }
.vuoto { padding: 22px; text-align: center; font-size: 13.5px; color: var(--grigio); }
.approx { color: var(--ambra-testo); font-size: 11.5px; font-weight: 600; }

/* Campo di ricerca e select a pillola, bianchi, senza fascia dietro */
input.cerca-dip {
  width: 380px; max-width: 100%; padding: 9px 16px; border-radius: 999px; box-shadow: var(--ombra);
}

/* ---------- Pillole di stato, tag, avatar ---------- */
/* Ogni stato/categoria definisce --c: pallino, pillola e barre leggono lo stesso colore. */
.srv-cat-verde { --c: var(--verde); }
.srv-cat-azzurro { --c: var(--blu); }
.srv-cat-viola { --c: var(--viola); }
.srv-cat-bianco { --c: var(--chiuso); }
.az-moderna { --c: var(--blu); }
.az-city { --c: var(--teal); }
.az-gruppo { --c: var(--viola); }
.az-nd { --c: var(--chiuso); }
.badge.disp, .cert-valido, .srv-risorse.ok, .eco-pill.int, .sd-durata.reale { --c: var(--verde); }
.badge.occ, .cert-scaduto, .sd-durata.errore, .nl-tag.occ { --c: var(--rosso); }
.cert-presto, .srv-risorse, .srv-ore.manca, .eco-pill.est, .sd-durata, .nl-tag.over { --c: var(--ambra); }
.nl-tag.abituale { --c: var(--blu); }

.badge, .cert, .srv-badge, .az-pill, .srv-risorse, .eco-pill, .sd-durata, .srv-ore.manca, .nl-tag.occ, .nl-tag.over, .nl-tag.abituale {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  color: color-mix(in srgb, var(--c, var(--stato-grigio)) 65%, #000); /* testo scurito: AA sul fondo tinto */
  background: color-mix(in srgb, var(--c, var(--stato-grigio)) 12%, #fff);
}
.badge::before, .cert::before, .srv-badge::before, .az-pill::before, .srv-risorse::before, .eco-pill::before, .sd-durata::before,
.srv-ore.manca::before, .nl-tag.occ::before, .nl-tag.over::before, .nl-tag.abituale::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--c, var(--stato-grigio));
}

.tag, .cal-slot, .imp-fonte, .srv-ore, .nl-tag {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  background: var(--fondo); color: var(--testo-tag); font-size: 11.5px; font-weight: 600; line-height: 1.3; /* i testi lunghi vanno a capo */
}

.cal-avatar {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fondo); border: 1px solid var(--bordo); color: var(--ink);
  font-size: 13px; font-weight: 700; letter-spacing: -.01em;
}

/* ---------- Card generiche ---------- */
.card { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r); padding: 20px; box-shadow: var(--ombra); }
.card h2 { margin: 0 0 12px; font-size: 18px; }
/* Card cliccabili: nessuna ombra a riposo, si sollevano al passaggio.
   --striscia = striscia di 3px a sinistra (azienda, oggi, stato), --fondo-cella = tinta di fondo. */
.dip-card, .srv-card, .cal-persona, .srv-cella, .cal-cella, .ris-card {
  background: linear-gradient(90deg, var(--striscia, var(--fondo-cella, var(--card))) 0 3px, var(--fondo-cella, var(--card)) 3px);
  border: 1px solid var(--bordo); border-radius: var(--r-card);
  transition: transform .15s, box-shadow .15s;
}
.dip-card:hover, .srv-card:hover, .cal-persona:hover, .srv-cella:hover, .cal-cella:hover, .ris-card:hover {
  transform: translateY(-2px); box-shadow: var(--ombra-su);
}

/* ============================================================
   Lavori e calendario
   ============================================================ */
.srv-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.srv-nav, .eco-nav { display: flex; align-items: center; gap: 8px; }
.srv-nav h2, .eco-nav h2 { margin: 0; min-width: 170px; text-align: center; text-transform: capitalize; }

/* Selettori a pillole in un contenitore bianco (modalità, schede) */
.srv-modi, .eco-tabs {
  display: inline-flex; gap: 2px; padding: 4px;
  background: var(--card); border: 1px solid var(--bordo); border-radius: 999px; box-shadow: var(--ombra);
}
.srv-modo, .eco-tab {
  border: 0; background: transparent; cursor: pointer; padding: 6px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--grigio-2); transition: background .15s, color .15s;
}
.srv-modo:hover, .eco-tab:hover { background: var(--fondo); color: var(--ink); }
.srv-modo.active, .eco-tab.on { background: var(--ink); color: #fff; }

/* Riepilogo del periodo: testo semplice (non sembra un bottone), a destra accanto a "Nuovo lavoro" */
.srv-riepilogo { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; font-size: 12.5px; color: var(--grigio); }
.srv-kpi b { color: var(--ink); font-size: 13.5px; }
.srv-kpi + .srv-kpi::before { content: "·"; margin-right: 8px; }
.srv-azioni { display: inline-flex; gap: 8px; margin-left: 8px; }

/* Filtri */
.srv-filtri { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.srv-filtri-cat { display: flex; gap: 6px; flex-wrap: wrap; }
.srv-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--bordo); background: var(--card);
  color: var(--testo-tag); font-size: 12.5px; font-weight: 600; transition: border-color .15s;
}
.srv-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--chiuso)); }
.srv-chip[data-cat=""]::before { display: none; }
.srv-chip:hover { border-color: var(--ink); }
.srv-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.srv-filtro-att { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; }
.srv-filtro-att select { width: auto; max-width: 240px; padding: 7px 12px; border-radius: 999px; box-shadow: var(--ombra); font-size: 13px; }

/* Periodo (mese / settimana / giorno) e giorni del nuovo lavoro */
.srv-periodo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.srv-plabel { margin-right: 2px; font-size: 11.5px; font-weight: 600; color: var(--grigio); }
.srv-pgroup {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
  background: var(--card); border: 1px solid var(--bordo); border-radius: 999px; box-shadow: var(--ombra);
}
.srv-pchip {
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--ink); font-size: 12px; font-weight: 600;
}
.srv-pchip.we { color: var(--blu); background: var(--weekend); font-weight: 700; }
.srv-pchip.sett { color: var(--grigio-2); }
.srv-pchip.mese { padding: 0 12px; border-color: var(--bordo); }
.srv-pchip:hover { background: var(--fondo); }
.srv-pchip.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---- Tabelle (elenco lavori, dettaglio costi) ---- */
.el-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: var(--ombra); }
.el-tab, .eco-tab-dati { width: 100%; border-collapse: collapse; font-size: 13px; }
.el-tab th, .eco-tab-dati th {
  padding: 11px 12px; text-align: left; white-space: nowrap; background: var(--card);
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--grigio);
  border-bottom: 1px solid var(--bordo);
}
.el-tab td, .eco-tab-dati td { padding: 12px; border-bottom: 1px solid var(--riga); vertical-align: top; }
.el-tab tr:last-child td, .eco-tab-dati tr:last-child td { border-bottom: 0; }

.el-giorno td { padding: 12px 12px 8px; background: var(--fondo); font-size: 12.5px; text-transform: capitalize; }
.el-giorno span { margin-left: 10px; color: var(--grigio); font-weight: 500; text-transform: none; }
.el-riga { cursor: pointer; }
.el-riga td { line-height: 1.4; }
.el-riga td:first-child { background-image: linear-gradient(90deg, var(--c, var(--chiuso)) 0 3px, transparent 3px); }
.el-riga:hover td { background-color: var(--riga-hover); }
.el-data { white-space: nowrap; font-weight: 700; }
.el-data span { color: var(--grigio); font-weight: 500; font-size: 11px; }
.el-cli b { display: block; }
.el-cli small { display: block; max-width: 240px; color: var(--grigio); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-att { font-weight: 600; }
.el-ora { white-space: nowrap; }
.el-pers { max-width: 420px; }
.el-persona { display: inline-block; margin: 0 8px 2px 0; }
.el-persona.esterna { text-decoration: underline dotted var(--ambra); text-underline-offset: 3px; }
.el-persona.on { padding: 0 7px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; }
.el-nessuno { color: var(--grigio); }
.el-tot { white-space: nowrap; text-align: right; font-weight: 700; }
.el-ore.manca { color: var(--ambra-testo); }

/* ---- Timeline ---- */
.tl-scroll { overflow-x: auto; background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: var(--ombra); }
.tl { width: max-content; min-width: 100%; }
.tl-headrow, .tl-row { display: flex; align-items: stretch; }
.tl-headrow { position: sticky; top: 0; z-index: 5; background: var(--card); border-bottom: 1px solid var(--bordo); }
.tl-corner, .tl-cli {
  width: 210px; flex: 0 0 210px; padding: 6px 12px; display: flex; align-items: center;
  position: sticky; left: 0; background: var(--card); border-right: 1px solid var(--bordo);
}
.tl-corner { z-index: 6; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--grigio); }
.tl-cli { z-index: 3; border-top: 1px solid var(--riga); font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-headtrack { display: grid; }
.tl-h { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 0; font-size: 11px; border-left: 1px solid var(--riga); }
.tl-h b { font-size: 12.5px; }
.tl-h span { font-size: 9.5px; color: var(--grigio); text-transform: uppercase; }
.tl-h.we, .tl-bg.we { background: var(--weekend); }
.tl-h.we { color: var(--blu); }
.tl-track { flex: 0 0 auto; display: grid; position: relative; padding: 3px 0; gap: 3px 0; border-top: 1px solid var(--riga); }
.tl-bg { border-left: 1px solid var(--riga); }
.tl-bar {
  align-self: center; height: 22px; margin: 0 2px; padding: 0 7px 0 9px; border-radius: 6px;
  display: flex; align-items: center; position: relative; z-index: 2; min-width: 0;
  overflow: hidden; white-space: nowrap; cursor: pointer;
  background: linear-gradient(90deg, var(--c, var(--chiuso)) 0 3px, color-mix(in srgb, var(--c, var(--chiuso)) 14%, #fff) 3px);
  color: color-mix(in srgb, var(--c, var(--chiuso)) 65%, #000); font-size: 10.5px; font-weight: 700;
  transition: transform .1s, box-shadow .1s;
}
.tl-bar span { overflow: hidden; text-overflow: ellipsis; }
.tl-bar:hover { transform: translateY(-1px); box-shadow: var(--ombra-su); z-index: 4; overflow: visible; }
.tl-bar.manca { outline: 1.5px dashed var(--rosso); outline-offset: -1.5px; }
.tl-bar.ok::before { content: "✓"; margin-right: 4px; font-weight: 800; }

/* ---- Calendari (lavori e persone) ---- */
.srv-body { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
.cal-settimana, .srv-griglia, .cal-griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-settimana { margin-bottom: 8px; text-align: center; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--grigio); }

.srv-cella, .cal-cella { min-width: 0; padding: 7px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.srv-cella { min-height: 52px; }
.cal-cella { min-height: 62px; overflow: hidden; }
.srv-cella.vuota, .cal-cella.vuota { background: transparent; border-color: transparent; cursor: default; }
.srv-cella.vuota:hover, .cal-cella.vuota:hover { transform: none; box-shadow: none; }
.srv-cella.scarico { opacity: .55; }
.srv-cella.sel, .cal-cella.sel { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.srv-cella-top, .cal-cella-top { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.srv-num, .cal-num { font-size: 13px; font-weight: 700; }
.srv-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 700;
}
.srv-barre { display: flex; gap: 3px; height: 6px; margin-top: auto; }
.srv-bar { min-width: 4px; border-radius: 3px; background: var(--c, var(--chiuso)); }
.srv-lib { margin-top: auto; font-size: 11px; color: var(--grigio); }

/* Sabato e domenica: colonne 6 e 7 della griglia lun→dom. Specificità zero con :where,
   così il carico del giorno (lvl-*) e "oggi" restano prioritari. */
:where(.srv-griglia, .cal-griglia) > :where(:nth-child(7n+6), :nth-child(7n)) {
  --fondo-cella: var(--weekend); border-color: color-mix(in srgb, var(--blu) 18%, #fff);
}
:where(.srv-griglia, .cal-griglia) > :where(:nth-child(7n+6), :nth-child(7n)) :where(.srv-num, .cal-num),
.cal-settimana > span:nth-child(n+6) { color: var(--blu); }
.cal-settimana > span:nth-child(n+6) { font-weight: 800; }

/* Calendario persone: carico del giorno come tinta di fondo, oggi con striscia ambra */
.cal-cella.lvl-1 { --fondo-cella: var(--carico-1); }
.cal-cella.lvl-2 { --fondo-cella: var(--carico-2); }
.cal-cella.lvl-3 { --fondo-cella: var(--carico-3); }
.cal-cella.lvl-4 { --fondo-cella: var(--carico-4); }
.cal-cella.oggi { --striscia: var(--oggi); }
.cal-cella.oggi .cal-num, .leg-oggi { padding: 0 7px; border-radius: 999px; background: var(--ambra-chiaro); color: var(--ambra-testo); font-size: 13px; font-weight: 700; }
.cal-occ-badge {
  min-width: 20px; padding: 1px 7px; border-radius: 999px; text-align: center;
  background: var(--rosso-testo); color: #fff; font-size: 11px; font-weight: 700;
}
.cal-lib-badge { font-size: 11px; color: var(--grigio); }
.cal-inis { display: flex; flex-direction: column; gap: 1px; }
.cal-nome { font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-nome.esterna { text-decoration: underline dotted var(--ambra); text-underline-offset: 2px; }
.cal-nome-extra { color: var(--grigio); font-weight: 700; }

/* Dettaglio della giornata */
.srv-dettaglio h3, .cal-dettaglio h3 { margin: 0 0 12px; }
.srv-sum { font-size: 13px; font-weight: 500; color: var(--grigio); }
.cal-sum-occ { color: var(--rosso-testo); }
.cal-sum-lib { color: var(--verde-testo); }
.cal-sum-ore { color: var(--ink); }
.srv-lista { display: flex; flex-direction: column; gap: 10px; }
.srv-card { display: flex; overflow: hidden; }
.srv-card-stripe { width: 3px; flex: 0 0 3px; background: var(--c, var(--chiuso)); }
.srv-card-body { flex: 1; min-width: 0; padding: 13px 16px; }
.srv-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.srv-cliente { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.srv-rowline { margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--grigio); word-break: break-word; }
.srv-att { font-weight: 600; color: var(--ink); }
.srv-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.srv-card-foot .btn { min-height: 30px; padding: 5px 12px; font-size: 12px; }
.srv-nomi { margin-top: 8px; font-size: 12.5px; line-height: 1.5; }

.cal-persone { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.cal-persona { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; cursor: pointer; }
.cal-persona.esterna { border-style: dashed; }
.cal-persona-info { min-width: 0; }
.cal-persona-nome { font-size: 13.5px; font-weight: 700; }
.cal-persona-mans { margin: 1px 0 7px; font-size: 11.5px; color: var(--grigio); }
.cal-slots { display: flex; flex-wrap: wrap; gap: 5px; }

/* ============================================================
   Pannello di dettaglio (drawer a destra) e modali
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 1000; padding: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 24, 39, .25); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.modal-box {
  position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 28px; background: var(--card); border-radius: var(--r-drawer); box-shadow: var(--ombra-pannello);
}
.modal-box h2 { margin: 0 44px 8px 0; }
.modal-box.modal-larga { max-width: 720px; }
.modal-x {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--bordo); background: var(--card); color: var(--ink); font-size: 13px; line-height: 1;
}
.modal-x:hover { border-color: var(--ink); }

/* Barra di salvataggio fissa in fondo al pannello */
.modal-actions {
  position: sticky; bottom: -28px; z-index: 2;
  display: flex; justify-content: flex-end; gap: 10px;
  margin: 22px -28px -28px; padding: 14px 28px;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid var(--bordo);
}
.modal-actions:not(:has(button)) { display: none; }
.modal-actions .btn.primary { flex: 1; min-height: 44px; font-size: 14px; box-shadow: var(--ombra-cta); }

/* Drawer: dettaglio lavoro (due colonne) e dettaglio persona */
#modal-servizio, #modal-persona, #modal-legenda { justify-content: flex-end; align-items: stretch; padding: 10px; }
#modal-servizio .modal-box, #modal-persona .modal-box, #modal-legenda .modal-box {
  height: 100%; max-height: none; animation: entra-drawer .18s ease-out;
}
#modal-servizio .modal-box { max-width: 960px; padding: 0; overflow: hidden; }
#modal-persona .modal-box { max-width: 560px; padding: 0; }
#modal-legenda .modal-box { max-width: 640px; }
@keyframes entra-drawer { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }

#servizio-dettaglio { display: grid; grid-template-columns: minmax(0, 1fr) 350px; height: 100%; }
.sd-main { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 28px 28px 0; }
.sd-main > :last-child { margin-bottom: 28px; }
.sd-main .modal-actions { position: sticky; bottom: 0; margin: auto -28px 0; }
.sd-side { min-height: 0; overflow-y: auto; padding: 16px 20px 24px; background: var(--fondo); border-left: 1px solid var(--bordo); }
.sd-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sd-head h2 { margin: 0; }
.sd-riga { margin-top: 6px; font-size: 13.5px; color: var(--grigio-2); }
.sd-riga .srv-att { color: var(--ink); }
.sd-note { font-style: italic; }
.sd-orario { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
input.sd-orafine { width: auto; padding: 5px 10px; font-size: 13px; }
.sd-sub { display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 0 44px 12px 0; font-size: 14px; }
.sd-dips { display: flex; flex-direction: column; gap: 8px; }
.sd-dip { display: flex; gap: 11px; align-items: center; padding: 10px 12px; background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r-card); }
.sd-dip.esterna { border-style: dashed; }
.sd-dip-info { min-width: 0; }
.sd-dip-nome { font-size: 13.5px; font-weight: 700; }
.sd-dip-meta { font-size: 11.5px; color: var(--grigio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#persona-dettaglio { padding: 28px; }
.pd-head { display: flex; gap: 14px; align-items: center; margin: 0 44px 16px 0; }
.pd-head h2 { margin: 0; }
.pd-head .cal-avatar { width: 48px; height: 48px; flex-basis: 48px; font-size: 16px; }
.pd-mans { margin-top: 3px; font-size: 12px; color: var(--grigio); }
.pd-riga { margin: 6px 0; font-size: 13.5px; color: var(--grigio-2); }
.pd-sub { margin: 20px 0 10px; font-size: 14px; }
.pd-lavoro { margin: 8px 0; padding: 12px 14px; background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r-card); }
.pd-titolo { margin-bottom: 4px; font-size: 14px; font-weight: 700; }
.pd-dur { color: var(--ink); font-weight: 700; }
.pd-esterna { color: var(--ambra-testo); font-weight: 700; }

/* Liste a scelta dentro i modali */
.checkbox-grid, .mansioni-pick {
  display: grid; grid-template-columns: 1fr; gap: 2px; max-height: 200px; overflow-y: auto;
  padding: 8px; background: var(--card); border: 1px solid var(--bordo-campo); border-radius: var(--r-campo);
}
.mansioni-pick { max-height: 150px; margin-top: 4px; }
.checkbox-grid label, .mansioni-pick label {
  display: flex; align-items: flex-start; gap: 8px; margin: 3px 0;
  font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink);
}
.checkbox-grid input, .mansioni-pick input { width: auto; margin-top: 2px; flex-shrink: 0; }

/* Periodi di occupazione */
.impegni-lista { margin: 8px 0 4px; }
.imp-riga {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin: 6px 0; padding: 9px 12px; font-size: 13px;
  background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r-campo);
}
.imp-riga.attivo { background: linear-gradient(90deg, var(--rosso) 0 3px, var(--rosso-chiaro) 3px); }
.imp-riga.auto { background: var(--fondo); }
.imp-riga .btn { min-height: 30px; padding: 5px 11px; font-size: 12px; }
.imp-sez, .ore-tit { margin: 12px 0 6px; font-size: 11.5px; font-weight: 700; color: var(--grigio); }
.impegni-sub { margin: 20px 0 8px; font-size: 14px; }
.impegni-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.impegni-form label { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.impegni-form label.full { grid-column: 1 / -1; }
.impegni-form label.imp-assenza { flex-direction: row; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.impegni-ore { margin: 6px 0 2px; }
.ore-riga { padding: 2px 0; font-size: 12.5px; color: var(--grigio); }
.ore-riga.over { color: var(--rosso-testo); font-weight: 700; }
.alert-ore { margin: 8px 0; padding: 8px 12px; border-radius: var(--r-campo); background: var(--rosso-chiaro); color: var(--rosso-testo); font-size: 12.5px; font-weight: 700; }

/* Nuovo lavoro */
.nl-giorni { margin: 6px 0 14px; }
.nl-requisiti { margin: 6px 0 14px; padding: 10px 14px; border: 1px dashed var(--bordo-campo); border-radius: var(--r-campo); background: var(--fondo); font-size: 13px; }
.nl-requisiti ul { margin: 6px 0 0 18px; padding: 0; }
.nl-contatore { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--grigio); }
.nl-contatore.diverso { color: var(--ambra-testo); }
.nl-indirizzo-stato { min-height: 1em; font-size: 12px; font-weight: 500; color: var(--grigio); }
.nl-indirizzo-stato.ok { color: var(--verde-testo); }
.nl-indirizzo-stato.errore { color: var(--rosso-testo); }
.nl-indirizzo-stato.approssimato { color: var(--ambra-testo); }
.checkbox-grid.nl-persone { display: block; max-height: 320px; margin-top: 6px; }
.nl-persone small { color: var(--grigio); }
.nl-gruppo { margin: 10px 0 4px; font-size: 11.5px; font-weight: 700; color: var(--grigio); }
.nl-persone .nl-cand { padding: 7px 10px; margin: 2px 0; border-radius: var(--r-campo); }
.nl-persone .nl-cand:hover { background: var(--fondo); }
.nl-cand.occupato { opacity: .6; }
.nl-cand-testo { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nl-cand-nome { font-weight: 600; }
.nl-tag { align-self: flex-start; font-size: 11px; padding: 2px 9px; }
.nl-punti { min-width: 30px; text-align: right; font-size: 13px; font-weight: 700; color: var(--ink); }
.nl-attribuzione { margin: 2px 0 6px; font-family: Roboto, Arial, sans-serif; font-size: 12px; color: #5f6368; }
input#nl-cerca { width: 100%; margin-top: 6px; }

/* ---------- Selettore data+ora ---------- */
.dp-input { cursor: pointer; }
.dp-pop {
  z-index: 2000; width: 304px; padding: 16px;
  background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: var(--ombra-pannello);
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dp-title { font-size: 14px; font-weight: 700; text-transform: capitalize; letter-spacing: -.01em; }
.dp-nav { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 16px; border: 1px solid var(--bordo); background: var(--card); }
.dp-nav:hover { border-color: var(--ink); }
.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dp-week { margin-bottom: 5px; text-align: center; font-size: 10.5px; font-weight: 600; color: var(--grigio); }
.dp-empty { height: 34px; }
.dp-day { height: 34px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-size: 13px; font-weight: 600; }
.dp-day:hover { background: var(--fondo); }
.dp-day.oggi { box-shadow: inset 0 0 0 1.5px var(--oggi); }
.dp-day.sel { background: var(--ink); color: #fff; }
.dp-time { display: flex; align-items: center; gap: 7px; margin: 14px 0 4px; font-size: 14px; }
.dp-time select { width: auto; padding: 6px 10px; font-weight: 600; }
.dp-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.dp-link { background: none; border: 0; padding: 6px 4px; cursor: pointer; color: var(--ink); font-size: 12.5px; font-weight: 600; }
.dp-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.dp-ok { border: 0; border-radius: 999px; padding: 8px 18px; cursor: pointer; background: var(--ink); color: #fff; font-weight: 700; }
.dp-ok:hover { background: var(--ink-hover); }

/* ============================================================
   Costi & ricavi
   ============================================================ */
.eco-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.eco-sub { flex: 1; min-width: 220px; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--grigio); }
.eco-avviso { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-card); background: var(--ambra-chiaro); color: var(--ambra-testo); font-size: 12.5px; }

.eco-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
.eco-card {
  display: flex; flex-direction: column; gap: 4px; padding: 18px 20px;
  background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: var(--ombra);
}
.eco-card-tit { font-size: 11.5px; font-weight: 600; color: var(--grigio); }
.eco-card-val { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.eco-card-vs { font-size: 17px; font-weight: 700; color: var(--grigio); }
.eco-card-sub { font-size: 11.5px; line-height: 1.4; color: var(--grigio); }
.eco-card.ricavi .eco-card-val { color: var(--verde); }       /* 28px: testo grande, AA ≥ 3:1 */
.eco-card.margine.neg .eco-card-val { color: var(--rosso); }

.eco-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.eco-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.eco-side { position: sticky; top: 0; }
.eco-box { padding: 18px 20px; background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: var(--ombra); overflow: hidden; }
.eco-box-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.eco-box-head h3 { margin: 0; font-size: 14px; }

/* Grafico giornaliero: costi sulla barra base, entrate in evidenza */
.eco-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--grigio); }
.eco-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.eco-leg i.ric, .eco-gbar.ric { background: var(--ink); }
.eco-leg i.cos, .eco-gbar.cos { background: var(--barra); }
.eco-grafico { display: flex; align-items: flex-end; gap: 3px; height: 170px; overflow-x: auto; padding-bottom: 2px; }
.eco-gcol { flex: 1 1 0; min-width: 18px; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.eco-gbars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.eco-gbar { width: 45%; border-radius: 6px 6px 0 0; }
.eco-gday { font-size: 10px; color: var(--grigio); }

/* Tabelle di dettaglio: nome con barra orizzontale (traccia 8px + riempimento) */
.eco-tab-dati tbody tr:hover td { background: var(--riga-hover); }
.eco-tab-dati th:first-child, .eco-tab-dati td:first-child { padding-left: 0; }
.eco-tab-dati .num { text-align: right; white-space: nowrap; }
.eco-tab-dati .pos, .leg .pos { color: var(--verde-testo); font-weight: 700; }
.eco-tab-dati .neg, .leg .neg { color: var(--rosso-testo); font-weight: 700; }
.eco-tab-dati td.eco-nome { position: relative; min-width: 160px; max-width: 320px; padding-bottom: 24px; }
.eco-nome::before, .eco-barra { position: absolute; left: 0; bottom: 9px; height: 8px; border-radius: 999px; }
.eco-nome::before { content: ""; right: 0; background: var(--riga); }
.eco-barra { background: var(--c, var(--ink)); }
.eco-nome-txt { font-weight: 600; }

/* Tariffe */
.eco-tariffe .eco-campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.eco-tariffe .eco-campo > span { font-size: 12.5px; font-weight: 700; }
.eco-tariffe .eco-campo small { font-size: 11px; color: var(--grigio); }
.eco-hint { margin: 0 0 12px; font-size: 11.5px; line-height: 1.45; color: var(--grigio); }
.btn.eco-reset { width: 100%; }
.eco-sub-tit { margin: 18px 0 8px; font-size: 13px; }
.eco-clienti { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.eco-cli { display: flex; align-items: center; gap: 8px; }
.eco-cli-nome { flex: 1; min-width: 0; font-size: 12.5px; color: var(--grigio-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
input.eco-cli-input { width: 84px; padding: 5px 9px; font-size: 12.5px; }

/* ============================================================
   Dipendenti
   ============================================================ */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar h2 { margin: 0; }
.toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dip-filtri { margin: -4px 0 18px; }
.az-chip b { font-weight: 700; color: var(--grigio); }
.az-chip.on b { color: #fff; }
.az-chip[data-az="tutte"]::before { display: none; }
.dip-gruppo + .dip-gruppo { margin-top: 28px; }
.dip-gruppo-tit { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; }
.dip-gruppo-tit::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.dip-gruppo-tit span { padding: 1px 9px; border-radius: 999px; background: var(--card); border: 1px solid var(--bordo); font-size: 12px; color: var(--grigio); }
.dip-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
/* Scheda: striscia col colore dell'azienda; azioni sempre in fondo, allineate nella riga */
.dip-card { --striscia: var(--c); display: flex; flex-direction: column; padding: 18px 18px 16px 20px; }
.dip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dip-head h3 { margin: 0; font-size: 15px; }
.dip-stato { margin-bottom: 6px; }
.dip-info { margin: 4px 0; font-size: 12.5px; color: var(--grigio); }
.dip-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.dip-form { margin: 12px 0 4px; }
.dip-form-tit { margin-bottom: 7px; font-size: 11.5px; font-weight: 700; color: var(--grigio); }
.dip-form-vuoto { margin: 12px 0 4px; font-size: 11.5px; color: var(--grigio); }
.dip-certs { display: flex; flex-wrap: wrap; gap: 6px; }
.cert-avviso { margin: 0 0 14px; font-size: 12.5px; color: var(--grigio); }
.dip-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; }
.dip-actions .btn { min-height: 32px; padding: 6px 13px; font-size: 12.5px; }

/* ============================================================
   Cerca personale (nascosta di default) e mappa
   ============================================================ */
.sidebar { width: 384px; min-width: 384px; height: 100%; overflow-y: auto; padding-right: 6px; }
#map { flex: 1; height: 100%; border-radius: var(--r); overflow: hidden; border: 1px solid var(--bordo); box-shadow: var(--ombra); }
#btn-cerca { width: 100%; margin-top: 18px; }
.suggerimenti {
  margin-top: 6px; max-height: 230px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r-campo); box-shadow: var(--ombra-su);
}
.sugg { padding: 9px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--riga); }
.sugg:last-child { border-bottom: 0; }
.sugg:hover { background: var(--fondo); }
.risultati-meta { margin: 18px 4px 10px; font-size: 12px; font-weight: 600; color: var(--grigio); }
.risultati { display: flex; flex-direction: column; gap: 10px; }
.ris-gruppo { margin-bottom: 16px; }
.ris-gruppo-tit { margin: 0 4px 8px; font-size: 11.5px; font-weight: 700; color: var(--grigio); }
.ris-card { padding: 13px 15px; cursor: pointer; --striscia: var(--verde); }
.ris-card.occupato { --striscia: var(--rosso); }
.ris-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ris-nome { font-size: 14.5px; font-weight: 700; }
.ris-dist { font-weight: 700; white-space: nowrap; }
.ris-mansioni { margin: 5px 0; font-size: 12.5px; color: var(--grigio); }
.ris-comp { margin: 3px 0; font-size: 12px; color: var(--grigio); }
.ris-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 12px; }
.ris-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 9px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 700;
}
.pin-lavoro { font-size: 30px; line-height: 30px; text-align: center; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.leaflet-tooltip.tt { font-size: 13px; }

/* ---------- Legenda ---------- */
.leg-sez { padding: 18px 0; border-top: 1px solid var(--bordo); }
.leg-sez:first-child { padding-top: 6px; border-top: 0; }
.leg-sez h3 { margin: 0 0 4px; font-size: 14px; }
.leg-sotto { margin: 0 0 8px; font-size: 12px; color: var(--grigio); }
.leg-riga { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px; align-items: center; padding: 5px 0; }
.leg-campione { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.leg-campione > * { margin: 0; }
.leg-campione .alert-ore { padding: 3px 10px; font-size: 11px; }
.leg-testo { font-size: 12.5px; color: var(--grigio-2); }
.leg-barre { width: 72px; margin: 0; }
.leg-barre .srv-bar { flex: 1; }
.leg-carico { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--bordo); }
.leg-carico-1 { background: var(--carico-1); }
.leg-carico-2 { background: var(--carico-2); }
.leg-carico-3 { background: var(--carico-3); }
.leg-carico-4 { background: var(--carico-4); }
.leg-sel {
  display: inline-grid; place-items: center; width: 36px; height: 28px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--ink); box-shadow: 0 0 0 1px var(--ink); font-size: 13px; font-weight: 700;
}
.tl-bar.leg-tl { margin: 0; cursor: default; }
.leg-quota { position: relative; width: 120px; height: 8px; border-radius: 999px; background: var(--riga); }
.leg-quota span { position: absolute; inset: 0 40% 0 0; border-radius: 999px; background: var(--ink); }
.leg-simboli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; font-size: 12.5px; color: var(--grigio-2); }
.leg-simboli b { display: inline-block; width: 22px; }

/* ---------- Accesso ---------- */
.login { position: fixed; inset: 0; z-index: 3000; padding: 20px; display: flex; align-items: center; justify-content: center; background: var(--fondo); }
.login-box {
  width: 100%; max-width: 360px; padding: 32px 28px; text-align: center;
  background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r-drawer); box-shadow: var(--ombra-su);
}
.login-logo {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 24px;
  background: var(--card); border: 1px solid var(--bordo);
}
.login-box h2 { margin: 0 0 6px; }
.login-sub { margin: 0 0 18px; font-size: 13px; color: var(--grigio); }
.login-box input { margin-bottom: 8px; text-align: center; }
.login-box .btn { width: 100%; min-height: 44px; margin-top: 10px; font-size: 14px; }

/* ---------- Etichetta di versione ---------- */
.stato-app {
  position: fixed; bottom: 12px; left: 12px; z-index: 500;
  padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--grigio);
  background: var(--card); border: 1px solid var(--bordo); box-shadow: var(--ombra);
}