/*
 * Buslibertas — mobile-first.
 *
 * La base è Pico (pico.min.css, caricato prima). Qui c'è solo ciò che Pico non può
 * sapere: si progetta per un telefono tenuto in una mano, e si allarga solo dopo.
 * Regole di base = schermo stretto; i @media (min-width) aggiungono, non correggono.
 */

:root {
  --pico-form-element-spacing-vertical: 0.7rem;
  --bl-touch: 44px;          /* area minima toccabile, raccomandazione WCAG/Apple */

  /* Primario: nero — un grigio molto scuro, non il nero pieno, che su schermo
     risulta duro. Su fondo scuro si ribalta in un bianco sporco. */
  --bl-ink: #1f2123;
  --bl-ink-hover: #000;
  --bl-ink-light: #f1f1f2;
  --bl-ink-light-hover: #fff;
  --bl-confirmed: #2e7d32;


  /* Fascia del giorno: grigio chiarissimo, neutro. Un nero trasparente invece di
     un grigio pieno, così resta coerente su qualunque fondo della card. */
  --bl-day-band: rgba(0, 0, 0, 0.045);
  --bl-chip: rgba(0, 0, 0, 0.08);
}

/* Il primario di Pico diventa nero, in chiaro e in scuro.
   ATTENZIONE ai selettori: Pico dichiara il primario chiaro su
   `:root:not([data-theme=dark])` (specificità 0,2,0). Un semplice `:root` (0,1,0)
   perde, e il blu di Pico resta. Qui si ricalca la sua stessa lista. */
:host(:not([data-theme="dark"])),
:root:not([data-theme="dark"]),
[data-theme="light"] {
  --pico-primary: var(--bl-ink);
  --pico-primary-background: var(--bl-ink);
  --pico-primary-border: var(--bl-ink);
  --pico-primary-underline: rgba(31, 33, 35, 0.5);
  --pico-primary-hover: var(--bl-ink-hover);
  --pico-primary-hover-background: var(--bl-ink-hover);
  --pico-primary-hover-border: var(--bl-ink-hover);
  --pico-primary-hover-underline: var(--bl-ink-hover);
  --pico-primary-focus: rgba(31, 33, 35, 0.25);
  --pico-primary-inverse: #fff;
  --pico-form-element-active-border-color: var(--bl-ink);
  --pico-text-selection-color: rgba(31, 33, 35, 0.18);
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Su fondo scuro il nero sparirebbe: primario e bottoni si ribaltano in chiaro,
       con le scritte scure sopra. */
    --pico-primary: var(--bl-ink-light);
    --pico-primary-background: var(--bl-ink-light);
    --pico-primary-border: var(--bl-ink-light);
    --pico-primary-underline: rgba(241, 241, 242, 0.5);
    --pico-primary-hover: var(--bl-ink-light-hover);
    --pico-primary-hover-background: var(--bl-ink-light-hover);
    --pico-primary-hover-border: var(--bl-ink-light-hover);
    --pico-primary-hover-underline: var(--bl-ink-light-hover);
    --pico-primary-focus: rgba(241, 241, 242, 0.3);
    --pico-primary-inverse: #16181a;
    --pico-form-element-active-border-color: var(--bl-ink-light);
    --pico-text-selection-color: rgba(241, 241, 242, 0.25);
    --bl-day-band: rgba(255, 255, 255, 0.05);
    --bl-chip: rgba(255, 255, 255, 0.12);
  }
}

[data-theme="dark"] {
  --bl-day-band: rgba(255, 255, 255, 0.05);
  --bl-chip: rgba(255, 255, 255, 0.12);
  --pico-primary: var(--bl-ink-light);
  --pico-primary-background: var(--bl-ink-light);
  --pico-primary-border: var(--bl-ink-light);
  --pico-primary-underline: rgba(241, 241, 242, 0.5);
  --pico-primary-hover: var(--bl-ink-light-hover);
  --pico-primary-hover-background: var(--bl-ink-light-hover);
  --pico-primary-hover-border: var(--bl-ink-light-hover);
  --pico-primary-hover-underline: var(--bl-ink-light-hover);
  --pico-primary-focus: rgba(241, 241, 242, 0.3);
  --pico-primary-inverse: #16181a;
  --pico-form-element-active-border-color: var(--bl-ink-light);
  --pico-text-selection-color: rgba(241, 241, 242, 0.25);
}

/* ---------- impianto ---------- */

main.container {
  max-width: 100%;
  padding-inline: 1rem;
  /* Spazio per il pollice e per la barra di sistema dei telefoni moderni. */
  padding-block: 0.75rem calc(3rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 40rem) {
  main.container {
    max-width: 34rem;
    margin-inline: auto;
  }
}

/* Niente scroll orizzontale, mai. */
body {
  overflow-x: hidden;
}

h1 { font-size: 1.35rem; }
h2 { font-size: 1.05rem; }

/* ---------- bottoni: sempre a tutta larghezza ---------- */

button,
input[type="submit"],
[role="button"] {
  width: 100%;
  min-height: var(--bl-touch);
}

/* La min-height da sola non centra niente: l'altezza in più finisce sotto al testo.
   Serve distribuirla — e serve `a[role=button]` per intero, perché Pico dichiara
   `a[role=button]{display:inline-block}` (0,1,1) e batterebbe un `[role=button]`. */
button,
a[role="button"],
[role="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* Le icone seguono il testo che le circonda e non spostano la linea di base. */
/* Le icone non spostano la linea di base: dove stanno accanto al testo, è il
   contenitore a centrarle (vedi .when, .driver-chip). */
.icon {
  flex: none;
}

/* ---------- anteprima pubblica di una settimana ---------- */

.preview {
  text-align: center;
  padding: 2rem 1.5rem;
}

.preview img {
  border-radius: 1rem;
  margin-bottom: 0.5rem;
}

.preview h1 {
  margin: 0 0 0.25rem;
  font-size: 1.3rem;
}

.preview p {
  margin: 0 0 1.5rem;
}

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

/* Logo e sezioni su una riga, allineati al bordo del contenuto come tutto il resto.
   Niente padding ereditato: le distanze le decide il gap. */
.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 0 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.topbar .brand {
  color: var(--pico-primary);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.topbar .sections {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}

/* Pillole: quella attiva è riempita, le altre restano testo. */
.topbar .sections a {
  padding: 0.3rem 0.75rem;
  border-radius: 1.25rem;
  color: var(--pico-muted-color);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.topbar .sections a:hover {
  background: var(--bl-chip);
  color: var(--pico-primary);
}

.topbar .sections a.active {
  background: var(--bl-chip);
  color: var(--pico-primary);
  font-weight: 600;
}

/* ---------- navigazione settimana ---------- */

/* Metà intervallo di date, metà comandi: i tre pulsanti restano uguali fra loro
   e sotto il pollice destro. */
.week-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Il titolo può andare a capo (es. "28 Settembre – 4 Ottobre"): i comandi
     restano allineati alla sua prima riga, non al centro del blocco. */
  align-items: start;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.week-nav .titles h1 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.2;
  text-wrap: balance;
}

/* Il badge sta sotto al titolo, su una riga sua. */
.week-nav .titles .badge {
  margin-top: 0.35rem;
}

.week-nav .controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}

.week-nav .controls a[role="button"] {
  margin: 0;
  padding: 0.4rem 0;
}

/* Le azioni della pagina stanno sotto l'intestazione, impilate. */
.page-actions {
  margin-bottom: 1.5rem;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge.draft {
  background: var(--pico-muted-border-color);
  color: var(--pico-color);
}

.badge.confirmed {
  background: var(--bl-confirmed);
  color: #fff;
}


/* ---------- schedina ---------- */

.training {
  margin-bottom: 1.5rem;
  padding: 0.9rem 1rem;
  /* Una striscia col colore della famiglia che guida: si riconosce a colpo d'occhio
     scorrendo la settimana. Grigia finché nessuno è assegnato. */
  border-left: 5px solid var(--bl-card-color, var(--pico-muted-border-color));

  /* Il colore della card diventa il tema di tutto ciò che sta dentro. I colori delle
     famiglie sono pensati per essere riconoscibili, non per essere letti: su testo
     piccolo vanno scuriti, altrimenti l'arancione su bianco è illeggibile. */
  --bl-theme: var(--bl-card-color, var(--pico-muted-color));
  --bl-theme-text: color-mix(in srgb, var(--bl-theme) 72%, black);
  --bl-theme-wash: color-mix(in srgb, var(--bl-theme) 12%, transparent);
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .training {
    --bl-theme-text: color-mix(in srgb, var(--bl-theme) 80%, white);
    --bl-theme-wash: color-mix(in srgb, var(--bl-theme) 22%, transparent);
  }
}

[data-theme="dark"] .training {
  --bl-theme-text: color-mix(in srgb, var(--bl-theme) 80%, white);
  --bl-theme-wash: color-mix(in srgb, var(--bl-theme) 22%, transparent);
}

/* Il giorno è l'intestazione della card, non un titolo di sezione. */
.training > header.day {
  margin: -0.9rem -1rem 0.7rem;
  padding: 0.45rem 1rem;
  background: var(--bl-day-band);
  border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}

.training .when {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-weight: 600;
  line-height: 1.4;
}

.training .activity {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

.training .meta {
  color: var(--pico-muted-color);
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
}

/* Righe della schedina: sola lettura, quindi solo testo che va a capo. */
.line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

/* I comandi si impilano: pollice grande, schermo stretto. */
.actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.actions form { margin: 0; }

.actions button,
.actions a[role="button"] {
  margin: 0;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.row form { margin: 0; flex: 1 1 100%; }

.driver-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}

/* Chi manca e la nota: una riga grigia sotto il guidatore, non un allarme. */
.side-note {
  margin: 0.35rem 0 0;
  color: var(--pico-muted-color);
  font-size: 0.85rem;
}
.driver-chip.unassigned { color: var(--pico-primary); }

/* ---------- form ---------- */

/* Il form è una colonna con una sola distanza fra i campi: l'equidistanza è
   garantita dal gap, non dalla somma dei margini che Pico dà a label e controlli.
   La classe serve perché button_to genera un <form> per ogni bottone. */
form.field-stack {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

form.field-stack > label,
form.field-stack > .actions {
  margin: 0;
}

form.field-stack label > select,
form.field-stack label > textarea {
  margin-bottom: 0;
}

/* Le tendine sono il comando principale: grandi e a tutta larghezza. */
form select,
form input[type="text"],
form textarea {
  min-height: var(--bl-touch);
  font-size: 1rem;
}

form textarea {
  resize: vertical;
}

/* I tre ragazzi: caselle, non tendine. */
label.checkbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--bl-touch);
  margin: 0;
  cursor: pointer;
}

label.checkbox input {
  margin: 0;
  width: 1.25rem;
  height: 1.25rem;
}

/* Nota sotto un campo: sta dentro la sua label, quindi le basta un filo d'aria. */
.hint {
  display: block;
  margin-top: 0.35rem;
}

/* Il .grid di Pico impila da solo sotto i 768px: qui basta non forzarlo. */

/* ---------- statistiche ---------- */

/* ---------- istogramma dei turni ---------- */

.share-chart {
  position: relative;
  margin: 1rem 0 0;
  height: 11rem;
  /* La base su cui poggiano le barre. */
  border-bottom: 2px solid var(--pico-muted-border-color);
}

.share-chart .columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  height: 100%;
}

/* Le barre riempiono la colonna: così la prima e l'ultima sono a filo col testo,
   e fra loro resta solo il gap della griglia. */
.share-chart .col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-height: 0;
}

.share-chart .bar {
  width: 100%;
  min-height: 3px;
  border-radius: 4px 4px 0 0;
}

.share-chart .value {
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

/* Il 100%: la quota di ciascuno, e quindi il traguardo. Stesso grigio della base:
   sono i due riferimenti del grafico, e il colore lo portano solo le barre. */
.share-chart .average-line {
  position: absolute;
  inset-inline: 0;
  border-top: 2px dashed var(--pico-muted-border-color);
  pointer-events: none;
}

/* Stessa griglia delle barre, così ogni etichetta sta sotto la sua. */
.chart-labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin: 0.6rem 0 1.5rem;
}

.chart-labels div {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--pico-muted-color);
}

.driver-ranking {
  list-style: none;
  padding: 0;
  margin: 0;
}

.driver-ranking li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.driver-ranking .who {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
}

.driver-ranking .dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex: none;
}

.driver-ranking .num { color: var(--pico-muted-color); }

.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

details summary { min-height: var(--bl-touch); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- WhatsApp ---------- */

.whatsapp-preview {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ---------- varie ---------- */

.muted {
  color: var(--pico-muted-color);
  font-size: 0.85rem;
}