/* =====================================================================
   C-137 — tema di base
   Ispirazione: le console del controllo missione NASA anni '60.
   Blu notte al posto del nero, un solo carattere monospace, lampadine
   di stato verdi / ambra / rosse come sui pannelli veri.
   ===================================================================== */

/* --- Font: IBM Plex Mono, ospitato qui (nessuna richiesta a siti esterni) --- */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* --- Colori e misure: si cambiano qui e cambiano ovunque --- */
:root {
  --space:      #0a1730;  /* sfondo: blu notte */
  --panel:      #10224a;  /* pannelli */
  --panel-edge: #2a4480;  /* bordi dei pannelli */
  --ink:        #d9e4f7;  /* testo */
  --ink-dim:    #8fa5cf;  /* testo secondario */
  --blue:       #5b9bff;  /* colore principale: blu spazio */
  --go:         #5fd68f;  /* lampadina verde */
  --hold:       #ffb547;  /* lampadina ambra */
  --abort:      #ff6257;  /* rosso: scadute, errori */

  --font: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --step: 0.5rem;         /* unità di spazio: tutto è un suo multiplo */
  --measure: 46rem;       /* larghezza massima del contenuto */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--space);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
}

a { color: var(--blue); }

/* Il contorno quando ci si sposta con la tastiera: sempre visibile */
:focus-visible {
  outline: 2px solid var(--hold);
  outline-offset: 2px;
}

/* --- Barra in alto --- */
.console-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--step) * 2);
  /* env(...) lascia spazio alla tacca dell'iPhone quando l'app è a schermo intero */
  padding: calc(var(--step) * 1.5 + env(safe-area-inset-top)) calc(var(--step) * 2) calc(var(--step) * 1.5);
  border-bottom: 1px solid var(--panel-edge);
  background: var(--panel);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--step);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
}

/* Riquadro tratteggiato dove andrà il logo */
.logo-slot {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px dashed var(--ink-dim);
}

/* --- Contenuto --- */
.deck {
  flex: 1;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: calc(var(--step) * 4) calc(var(--step) * 2);
}

.page-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.lede {
  margin: var(--step) 0 calc(var(--step) * 5);
  color: var(--ink-dim);
}

/* --- Pannello: un modulo della console.
       L'etichetta sta a cavallo del bordo, come le targhette incise. --- */
.panel {
  position: relative;
  margin: 0 0 calc(var(--step) * 4);
  padding: calc(var(--step) * 3) calc(var(--step) * 2) calc(var(--step) * 2);
  border: 1px solid var(--panel-edge);
  background: var(--panel);
}

.panel-label {
  position: absolute;
  top: 0;
  left: calc(var(--step) * 1.5);
  transform: translateY(-50%);
  margin: 0;
  padding: 0 var(--step);
  background: var(--space);
  border: 1px solid var(--panel-edge);
  color: var(--ink-dim);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* --- Elenco degli stati con lampadina --- */
.status-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.status-row {
  display: grid;
  /* lampadina | nome | stato ; la nota va a capo sotto il nome */
  grid-template-columns: 0.75rem 1fr auto;
  column-gap: calc(var(--step) * 1.5);
  align-items: center;
  padding: var(--step) 0;
}
.status-row + .status-row { border-top: 1px solid var(--panel-edge); }

.status-name { font-weight: 600; }
.status-state { color: var(--ink-dim); }
.status-note {
  grid-column: 2 / -1;
  color: var(--ink-dim);
  font-size: 0.875rem;
}

.lamp {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}
.lamp-go   { background: var(--go);   box-shadow: 0 0 6px var(--go); }
.lamp-hold { background: var(--hold); box-shadow: 0 0 6px var(--hold); }

/* --- Moduli --- */
.field-label {
  display: block;
  margin-bottom: var(--step);
  color: var(--ink-dim);
  font-size: 0.875rem;
}

.field {
  display: block;
  width: 100%;
  padding: calc(var(--step) * 1.5);
  border: 1px solid var(--panel-edge);
  border-radius: 0;
  background: var(--space);
  color: var(--ink);
  font: inherit;
  /* Sotto i 16px l'iPhone ingrandisce la pagina quando tocchi il campo */
  font-size: 1rem;
}
.field:focus-visible { border-color: var(--blue); }

.button {
  display: inline-block;
  padding: calc(var(--step) * 1.5) calc(var(--step) * 3);
  border: 1px solid var(--blue);
  border-radius: 0;
  background: var(--blue);
  color: var(--space);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.button:hover { background: #7db0ff; border-color: #7db0ff; }

/* Pulsante secondario: solo il contorno */
.button-quiet {
  padding: var(--step) calc(var(--step) * 1.5);
  border-color: var(--panel-edge);
  background: transparent;
  color: var(--ink-dim);
  font-size: 0.875rem;
  font-weight: 400;
}
.button-quiet:hover { background: transparent; border-color: var(--ink-dim); color: var(--ink); }

.console-bar form { margin: 0; }

/* Messaggio di errore */
.alert {
  margin: 0 0 calc(var(--step) * 3);
  padding: calc(var(--step) * 1.5);
  border-left: 3px solid var(--abort);
  background: var(--space);
  color: var(--ink);
}

/* --- Pagina di login --- */
.login-panel {
  max-width: 24rem;
  margin: calc(var(--step) * 6) auto 0;
}
.login-panel .button {
  width: 100%;
  margin-top: calc(var(--step) * 3);
}

/* --- Navigazione --- */
.main-nav { display: flex; gap: calc(var(--step) * 2); margin-right: auto; margin-left: calc(var(--step) * 2); }
.main-nav a { color: var(--ink-dim); text-decoration: none; }
.main-nav a:hover { color: var(--ink); }

/* --- Cose da fare --- */
select.field { appearance: auto; }
textarea.field { resize: vertical; }
.task-form .field { margin-bottom: calc(var(--step) * 2); }
.task-form .button { margin-top: var(--step); }
.form-row { display: grid; gap: calc(var(--step) * 2); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .form-row { grid-template-columns: 2fr 1.5fr 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: var(--step); margin: 0 0 calc(var(--step) * 4); }
.chip {
  padding: calc(var(--step) * 0.5) calc(var(--step) * 1.5);
  border: 1px solid var(--panel-edge);
  color: var(--ink-dim);
  font-size: 0.875rem;
  text-decoration: none;
}
.chip.is-active { border-color: var(--blue); color: var(--ink); background: var(--panel); }

.task-list { margin: 0; padding: 0; list-style: none; }
.task-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--step) * 1.5);
  align-items: start;
  padding: var(--step) 0;
}
.task-row + .task-row { border-top: 1px solid var(--panel-edge); }
.task-row form { margin: 0; }
.task-title { color: var(--ink); text-decoration: none; font-weight: 600; word-break: break-word; }
.task-title:hover { text-decoration: underline; }
.task-meta { display: flex; flex-wrap: wrap; gap: var(--step) calc(var(--step) * 2); color: var(--ink-dim); font-size: 0.8125rem; }
.is-done .task-title { color: var(--ink-dim); text-decoration: line-through; }

/* Scadute: bordo e data rossi */
.panel-alert { border-color: var(--abort); }
.panel-alert .panel-label { color: var(--abort); border-color: var(--abort); }
.is-overdue .due { color: var(--abort); font-weight: 600; }

/* Casella per spuntare: area di tocco ampia (44px) per il dito */
.check {
  width: 2.75rem; height: 2.75rem; margin: -0.5rem 0 -0.5rem -0.5rem;
  border: 0; background: transparent; cursor: pointer; color: var(--go);
  font: inherit; font-weight: 600; position: relative;
}
.check::before {
  content: ""; position: absolute; inset: 0.6rem;
  border: 1px solid var(--ink-dim); background: var(--space);
}
.check:hover::before { border-color: var(--blue); }
.check { z-index: 0; }
.is-done .check { color: var(--go); }

.empty { margin: 0; color: var(--ink-dim); }

/* --- Piè di pagina --- */
.footnote {
  padding: calc(var(--step) * 2) calc(var(--step) * 2) calc(var(--step) * 2 + env(safe-area-inset-bottom));
  color: var(--ink-dim);
  font-size: 0.8125rem;
  text-align: center;
}

/* --- Schermi larghi: la nota sta sulla stessa riga --- */
@media (min-width: 40rem) {
  .status-row { grid-template-columns: 0.75rem 12rem 4rem 1fr; }
  .status-note { grid-column: auto; }
}