/* Ovenboard — CSS server-side, nessun font/CDN remoto (PROGETTO.md §2.3). */

:root {
  --bg: #f2f4f7;
  --surface: #ffffff;
  --ink: #1b1f27;
  --muted: #6b7280;
  --line: #dfe3ea;

  --free: #1f8f4e;
  --free-bg: #e8f7ee;
  --run: #1d5fbf;
  --run-bg: #eaf2fd;
  --warn: #b8860b;
  --warn-bg: #fdf4e3;
  --danger: #c02626;
  --danger-bg: #fdeaea;
  --expired: #8f1414;
  --expired-bg: #fbd9d9;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 8px 24px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 1400px; margin: 0 auto; padding: 16px; }

h1, h2, h3 { margin: 0 0 .4em; font-weight: 650; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.hidden { display: none !important; }
.right { text-align: right; }

/* --- barra superiore ---------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.topbar-user { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.who { font-weight: 600; }
.role {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--run-bg);
  color: var(--run);
}
.role-admin { background: #efe7fd; color: #6b3bd6; }

/* --- legenda ------------------------------------------------------------ */

.legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 4px 0 14px;
  font-size: .86rem;
  color: var(--muted);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-count { margin-left: auto; font-weight: 600; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-free { background: var(--free); }
.dot-run { background: var(--run); }
.dot-warn { background: var(--warn); }
.dot-danger { background: var(--danger); }
.dot-expired { background: var(--expired); }

/* --- griglia card ------------------------------------------------------- */

.grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}

.card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 210px;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oven-name { font-size: 1.35rem; margin: 0; }
.badge {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.rows { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: .93rem; }
.rows dt { color: var(--muted); }
.rows dd { margin: 0; font-variant-numeric: tabular-nums; }

.countdown {
  font-size: 2.1rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
  margin: 2px 0;
}
.countdown-sub { font-size: .8rem; color: var(--muted); }

.progress {
  display: block;          /* V4: la barra sta dentro una riga timer: senza questo,
                              su un <span> le dimensioni vengono ignorate */
  height: 8px;
  border-radius: 999px;
  background: #e9edf3;
  overflow: hidden;
}
/* `display: block` **non è decorativo**: `width`/`height` non si applicano a un
   elemento inline, e qui l'elemento è un `<i>`. Il 2026-10-23 le barre risultavano
   **sempre vuote** proprio per questo: l'harness node misurava `bar.style.width`
   (giusto, 95%) ma il box non esisteva. In V3.2 erano `<div>`, e la riscrittura
   M2 della riga timer li ha fatti diventare `<span>`/`<i>` senza dirselo. */
.progress-bar { display: block; height: 100%; width: 0; background: var(--run); transition: width .4s linear; }

.card-foot { display: flex; gap: 8px; align-items: center; margin-top: auto; }

/* stati: il colore NON è l'unico indizio (c'è anche l'etichetta) */
.card-free { border-color: var(--free); background: var(--free-bg); }
.card-free .badge { background: var(--free); color: #fff; }

.card-run { border-color: var(--run); background: var(--run-bg); }
.card-run .badge { background: var(--run); color: #fff; }

.card-warn { border-color: var(--warn); background: var(--warn-bg); }
.card-warn .badge { background: var(--warn); color: #fff; }

.card-danger { border-color: var(--danger); background: var(--danger-bg); animation: pulse 1.6s ease-in-out infinite; }
.card-danger .badge { background: var(--danger); color: #fff; }

.card-expired { border-color: var(--expired); background: var(--expired-bg); }
.card-expired .badge { background: var(--expired); color: #fff; }

/* **Non** esistevano qui le regole `.card-warn .progress-bar` / `.card-danger
   .progress-bar`: ereditare il colore della card sulle barre era il difetto
   segnalato il 2026-10-23 — con un timer in scadenza **tutte** le barre della
   card (anche di altri utenti, anche a 6 giorni dalla fine) diventavano ambra o
   rosse. Il colore della barra è per timer: vedi più sotto `.timer-* .progress-bar`. */

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 38, 38, .38); }
  50% { box-shadow: 0 0 0 8px rgba(192, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .card-danger { animation: none; }
}

/* --- pulsanti ----------------------------------------------------------- */

.btn {
  font: inherit;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 7px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.btn:hover { background: #f6f7f9; color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--run); outline-offset: 2px; }
.btn-primary { background: var(--run); border-color: var(--run); color: #fff; }
/* Contro il difetto segnalato: `.btn:hover` accende lo sfondo chiaro e vince
   per specificità sul colore di `.btn-primary`/`.btn-danger`, lasciando il
   testo bianco su chiaro = invisibile. Ogni variante colorata ridefinisce il
   proprio hover con sfondo pieno + testo chiaro. */
.btn-primary:hover { background: var(--run); border-color: var(--run); color: #fff; filter: brightness(1.08); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; filter: brightness(1.08); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: #eef1f6; color: var(--ink); }
.btn-block { width: 100%; }
.btn-assign {
  width: 100%;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 12px;
  background: var(--free);
  border-color: var(--free);
  color: #fff;
}
.btn-assign:hover { background: var(--free); border-color: var(--free); color: #fff; filter: brightness(1.05); }
.btn-icon { padding: 6px 9px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* --- tabelline admin ---------------------------------------------------- */

.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tab {
  font: inherit;
  font-weight: 600;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: #e9edf3;
  cursor: pointer;
}
.tab.is-active { background: var(--surface); }
.tab-panel { display: none; background: var(--surface); padding: 14px; border-radius: 0 12px 12px 12px; border: 1px solid var(--line); }
.tab-panel.is-active { display: block; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.table input[type="text"], .table input[type="email"], .table select { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; width: 100%; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.inline-form input[type="text"], .inline-form input[type="password"], .inline-form select {
  font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
}
.inline-form.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.state-pill { font-size: .78rem; padding: 2px 8px; border-radius: 999px; background: var(--free-bg); color: var(--free); }
.state-pill.off { background: #eef0f3; color: var(--muted); }
.state-pill.busy { background: var(--run-bg); color: var(--run); }

/* --- avvisi ------------------------------------------------------------- */

.flash { padding: 9px 12px; border-radius: 10px; margin: 10px 0; }
.flash-err { background: var(--danger-bg); color: var(--danger); }
.flash-warn { background: var(--warn-bg); color: var(--warn); }
.flash-ok { background: var(--free-bg); color: var(--free); }

.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  max-width: 30rem;
  padding: 10px 14px;
  border-radius: 12px;
  background: #111827;
  color: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  z-index: 60;
}
.toast.show { opacity: 1; transform: none; }
.toast.err { background: var(--danger); }
.toast.ok { background: var(--free); }

/* --- login -------------------------------------------------------------- */

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card {
  width: min(420px, 100%);
  background: var(--surface);
  padding: 26px;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.login-card h1 { font-size: 1.6rem; }
.login-card form { display: grid; gap: 6px; margin-top: 14px; }
.login-card label { font-size: .85rem; font-weight: 600; }
.login-card input {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.login-card input:focus-visible { outline: 2px solid var(--run); outline-offset: 1px; }

/* --- modali ------------------------------------------------------------- */

.modal { border: none; border-radius: 16px; padding: 0; width: min(560px, 94vw); box-shadow: var(--shadow); }
.modal-narrow { width: min(420px, 94vw); }
.modal::backdrop { background: rgba(15, 23, 42, .45); }
.modal form { padding: 20px; display: grid; gap: 10px; }
.field { display: grid; gap: 4px; }
.field label { font-size: .84rem; font-weight: 600; }
.field input, .field select {
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.field textarea {
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  resize: vertical;
  min-height: 64px;
}
.field input:disabled { background: #f3f5f8; color: var(--muted); }
.field-optional label { font-weight: 500; color: var(--muted); }

/* Anteprima "Fine prevista: …" sotto il campo durata, e riquadro avanzato. */
.hint { margin: 4px 0 0; font-size: .8rem; color: var(--muted); min-height: 1em; }
.field-optional summary { cursor: pointer; font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
.field-optional[open] summary { color: inherit; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 8px 0 0; padding: 0; }

/* --- notifiche (pannello admin) ----------------------------------------- */

.mail-form {
  max-width: 720px;
  display: grid;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  margin-top: 8px;
}
.field-check label { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.field-check input[type="checkbox"] { width: auto; }
.field-check .hint { margin-left: 26px; }
.mail-form .hint label { display: flex; align-items: center; gap: 6px; }
.mail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.mail-test { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.mail-test input {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 220px;
}

/* --- note sulle stufe (V2.5) -------------------------------------------- */

.card-notes { border-top: 1px dashed var(--line); padding-top: 6px; font-size: .88rem; }
.card-notes summary { cursor: pointer; font-weight: 600; color: var(--muted); user-select: none; }
.card-notes p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.oven-notes summary { cursor: pointer; font-size: .85rem; color: var(--run); user-select: none; }
.oven-notes[open] summary { color: var(--muted); }
.oven-notes textarea,
.notes-cell textarea {
  font: inherit;
  width: 100%;
  min-width: 220px;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  resize: vertical;
}

/* --- responsivo --------------------------------------------------------- */

/* Tablet verticale e mobile: le tabelle (Stufe/Utenti, molte colonne e campi)
   smettono di scorrere a destra e diventano blocchi impilati. Il punto di
   rottura è 960px, non 720: un tablet in verticale (~768px) restava fuori e
   la tabella delle stufe debordava lateralmente. */
/* --- V4: occupazioni e timer (plan-V4.md §10.1) -------------------------
   Una card può contenere fino a 9 countdown (3 occupazioni × 3 timer con i
   default): Q15 li vuole **tutti visibili**, senza "tap per espandere". La
   gerarchia è: strumento > occupazione > timer, e ogni riga di timer deve
   restare un bersaglio sufficiente per un pollice in laboratorio (≥ 44 px). */
.card-meta { margin: 2px 0 10px; font-size: .82rem; color: var(--muted); }
.timer-expired { color: var(--expired); }

.slots { display: flex; flex-direction: column; gap: 10px; }
.slot {
  border: 1px solid var(--line);
  border-left: 4px solid var(--run);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .55);
}
.slot-warn { border-left-color: var(--warn); }
.slot-danger { border-left-color: var(--danger); }
.slot-expired { border-left-color: var(--expired); background: var(--expired-bg); }

/* V4.1 (Q22): il blocco occupazione è un `details` nativo — tastabile da solo,
   con lo stato `open` vero, e **il suo contenuto resta nel DOM anche da chiuso**:
   è per questo che i countdown dei blocchi non aperti continuano a girare. */
details.slot > summary { list-style: none; cursor: pointer; user-select: none; }
details.slot > summary::-webkit-details-marker { display: none; }
details.slot > summary:focus-visible { outline: 2px solid var(--run); outline-offset: 2px; }
.slot-chevron {
  display: inline-block;
  width: 0; height: 0;
  border-left: 6px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  color: var(--muted);
  transition: transform .15s ease;
}
details.slot[open] > .slot-head .slot-chevron { transform: rotate(90deg); }

.slot-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; min-height: 32px; }
.slot-who { font-weight: 700; }
.slot-orders { font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; }
.slot-head .btn-mini { margin-left: auto; }
/* Il riepilogo si legge a blocco **chiuso**: countdown del timer più urgente +
   eventuali scaduti. È l'urgenza che non deve mai finire nascosta. */
.slot-state {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .9rem;
  color: var(--run);
}
.slot-warn .slot-state { color: var(--warn); }
.slot-danger .slot-state { color: var(--danger); }
.slot-expired .slot-state { color: var(--expired); }
.slot-body { margin-top: 4px; }

.timers { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.timer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px 10px;
  min-height: 44px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
}
.timer:last-child { border-bottom: none; }
.timer-empty { min-height: 0; font-size: .82rem; color: var(--muted); }
.timer-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.15rem;
  min-width: 6.5ch;
}
.timer-warn .timer-count { color: var(--warn); }
.timer-danger .timer-count { color: var(--danger); }
.timer-expired .timer-count, .timer-expired .timer-order { color: var(--expired); }
/* Il codice colore **della barra** è per singolo timer: è l'unico modo di far
   vedere a colpo d'occhio *quale* lotto sta per finire, quando in uno stesso
   blocco ce ne sono tre con scadenze diverse. La card e il blocco segnalano
   l'urgenza in un altro modo (bordo, badge, riepilogo del `summary`). */
.timer-run .progress-bar { background: var(--run); }
.timer-warn .progress-bar { background: var(--warn); }
.timer-danger .progress-bar { background: var(--danger); }
.timer-expired .progress-bar { background: var(--expired); }
.timer-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.timer-order { font-size: .9rem; }
.timer .progress { grid-column: 1 / -1; margin: 0; }
.timer-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.btn-mini { padding: 6px 10px; font-size: .82rem; min-height: 36px; }
.btn-add { margin-top: 8px; }

.slot-notes { margin-top: 8px; font-size: .85rem; border-top: 1px dashed var(--line); padding-top: 6px; }
.slot-notes summary { cursor: pointer; font-weight: 600; color: var(--muted); user-select: none; }
.slot-notes p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.card-notes-legacy summary { color: var(--muted); font-style: italic; }

/* Gestione → Strumenti: una riga per occupazione al posto del campo note unico */
.occ-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.occ-row { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .85rem; }
.occ-notes { color: var(--muted); overflow-wrap: anywhere; }

/* Gestione → Limiti */
.limits-form { max-width: 560px; }
.limits-form .field input { max-width: 120px; }

@media (max-width: 960px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .table td { border: none; padding: 4px 0; }
  .table td.right { text-align: left; }
  .notes-cell textarea { min-width: 0; }
  .timer { grid-template-columns: auto 1fr; }
  .timer-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 720px) {
  .countdown { font-size: 1.8rem; }
  .grid { grid-template-columns: 1fr; }
  .timer-count { font-size: 1.05rem; }
  .slot { padding: 6px 8px; }
  /* bersaglio del pollice ≥ 44 px anche sul riepilogo del blocco chiuso */
  details.slot > summary { min-height: 44px; align-items: center; }
  .slot-state { font-size: 1rem; }
}

@media (max-width: 560px) {
  .grid-2 { grid-template-columns: 1fr; }
  .modal-actions { flex-wrap: wrap; }
  .mail-test { margin-left: 0; }
  .mail-test input { min-width: 0; width: 100%; }
}