/*
 * 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;
  --bl-amaranth: #8e3145;    /* the club's color, as in the app icon */


  /* 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. */
/* The name on top, the sections below it in a row, left-aligned with the name.
   The active one is underlined, on the bar's bottom rule. */
.topbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.topbar .brand img {
  /* The icon file is a full square (the phones mask it): round it here. */
  border-radius: 22%;
  flex: none;
}

.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  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;
  /* Pico spreads every <nav> with space-between. */
  justify-content: flex-start;
  gap: 1.25rem;
  width: 100%;
  /* Four sections fit a phone; on a very narrow one the row scrolls instead of wrapping. */
  overflow-x: auto;
  scrollbar-width: none;
}

.topbar .sections a {
  display: flex;
  align-items: center;
  min-height: var(--bl-touch);
  /* The active border sits on the bar's bottom rule. */
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--pico-muted-color);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

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

.topbar .sections a.active {
  border-bottom-color: var(--pico-primary);
  color: var(--pico-primary);
  font-weight: 600;
}

/* ---------- page head ---------- */

/* A page's title with its badge on the left, square buttons on its right, level
   with the title's first line: the week arrows, or the switch to another calendar. */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.page-head .titles {
  flex: 1;
  min-width: 0;
}

/* Sized so the longest week ("30 Novembre – 6 Dicembre") fits one line at 360px. */
.page-head .titles h1 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.2;
  text-wrap: balance;
}

.page-head .titles .badge {
  margin-top: 0.35rem;
}

.page-head .controls {
  display: flex;
  flex: none;
  gap: 0.3rem;
}

.page-head .controls a[role="button"] {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Square, at the minimum touch size (Pico's min-height would stretch it). */
  width: var(--bl-touch);
  height: var(--bl-touch);
  min-height: 0;
  margin: 0;
  padding: 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.empty {
  background: var(--bl-chip);
  color: var(--pico-muted-color);
}

.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 > input,
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 input[type="date"],
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 {
  position: relative;
  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 traguardo di ciascuno: quante volte il suo è stato portato da altri. Stesso
   grigio della base: sono i riferimenti del grafico, il colore lo portano le barre. */
.share-chart .target-tick {
  position: absolute;
  inset-inline: -0.2rem;
  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);
}

/* Il saldo sotto la barra: in pari, avanti o indietro. */
.chart-labels .balance {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--pico-color);
}

.chart-labels .balance.positive { color: var(--pico-ins-color); }
.chart-labels .balance.negative { color: var(--pico-del-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); }

/* Il dettaglio per giocatore: i numeri della barra e del tratteggio, e il saldo. */
.family-detail th.num,
.family-detail td.num { text-align: right; }

/* A filo coi bordi, come il dettaglio per genitore sopra. */
.family-detail th:first-child,
.family-detail td:first-child { padding-left: 0; }

.family-detail th:last-child,
.family-detail td:last-child { padding-right: 0; }

.family-detail .who {
  font-weight: 600;
  white-space: nowrap;
}

.family-detail .dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.45rem;
  border-radius: 50%;
}

.family-detail .balance.positive { color: var(--pico-ins-color); }
.family-detail .balance.negative { color: var(--pico-del-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;
}

/* A short explanation right under a page title. */
.muted.lead {
  margin-top: -0.5rem;
  font-size: 0.95rem;
}

/* ---------- pull to refresh ---------- */

/* The spinner hides above the screen and comes down with the finger. The
   pull-to-refresh controller drives it with two variables: how far it came down
   (--ptr-distance) and how close it is to the threshold (--ptr-progress, 0 to 1). */
.ptr {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 50%;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: -1.25rem;
  border-radius: 50%;
  background: var(--pico-card-background-color);
  box-shadow: var(--pico-card-box-shadow);
  pointer-events: none;
  opacity: var(--ptr-progress, 0);
  transform: translateY(calc(var(--ptr-distance, 0px) - 100%));
}

.ptr.animate {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.ptr-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--pico-muted-border-color);
  border-top-color: var(--pico-primary);
  border-radius: 50%;
  /* Turns with the finger while pulling; past the threshold it darkens: let go. */
  transform: rotate(calc(var(--ptr-progress, 0) * 270deg));
  opacity: 0.5;
}

.ptr.ready .ptr-spinner,
.ptr.refreshing .ptr-spinner {
  opacity: 1;
}

.ptr.refreshing .ptr-spinner {
  animation: ptr-spin 0.7s linear infinite;
}

@keyframes ptr-spin {
  to { transform: rotate(360deg); }
}

/* ---------- dashboard ---------- */

/* Today's date, and under it in grey what's on today (or what comes next). */
.dashboard-title {
  margin-bottom: 1.5rem;
}

.dashboard-title h1 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.3;
}

.dashboard-title p {
  margin: 0.2rem 0 0;
  color: var(--pico-muted-color);
  font-size: 0.9rem;
}


/* One block per topic: a heading, the card, and the button to its page. */
.dashboard-block {
  margin-bottom: 2.25rem;
}

.dashboard-block h2 {
  margin-bottom: 0.75rem;
}

.dashboard-block .training {
  margin-bottom: 0.75rem;
}

.dashboard-block > a[role="button"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
}

/* ---------- matches ---------- */

/* The calendars page: one row per calendar, the commands stacked like everywhere else. */
.calendar-list {
  padding: 0;
  margin-bottom: 1.5rem;
}

.calendar-list li {
  list-style: none;
  margin: 0;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.calendar-list .name {
  display: flex;
  flex-direction: column;
}

.calendar-list .actions {
  margin-top: 0.6rem;
}

/* A match card reuses the training card (.training class), without a family
   color: matches have no driving turns. Home matches get the club's amaranth. */
.match.home {
  --bl-card-color: var(--bl-amaranth);
}

.badge.home {
  background: var(--bl-chip);
  color: var(--pico-color);
}

.badge.away {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

.map-link {
  display: inline-flex;
  /* A long place wraps: the pin stays on its first line. */
  align-items: flex-start;
  gap: 0.3rem;
  min-height: var(--bl-touch);
  font-weight: 500;
}

.map-link .icon {
  flex: none;
  /* Centered on the first line: (line height − icon) / 2. */
  margin-top: calc((1lh - 18px) / 2);
}

fieldset.venue-choice,
fieldset.absent-choice {
  margin: 0;
}

fieldset.venue-choice legend,
fieldset.absent-choice legend {
  margin-bottom: 0.25rem;
}

/* Place search: the suggestions list opens right under the field. */
.place-search > label {
  margin: 0;
}

.place-search input {
  margin-bottom: 0;
}

.places {
  /* Pico redefines --pico-color inside every button (as the primary inverse), so
     the text color is captured here, outside the buttons. */
  --bl-place-color: var(--pico-color);
  display: flex;
  flex-direction: column;
  margin-top: 0.35rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  overflow: hidden;
}

.places button.place {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  min-height: var(--bl-touch);
  margin: 0;
  padding: 0.55rem 0.8rem;
  border: 0;
  border-radius: 0;
  background: var(--pico-form-element-background-color);
  color: var(--bl-place-color);
  font-size: 0.95rem;
  text-align: left;
}

.places button.place + .place {
  border-top: 1px solid var(--pico-muted-border-color);
}

.places button.place:hover,
.places button.place:focus-visible {
  background: var(--bl-chip);
}

.places .place strong {
  font-weight: 600;
}

.places .place span {
  color: var(--pico-muted-color);
  font-size: 0.8rem;
}

/* Static map: tiles positioned by the static-map controller, pin in the middle. */
.static-map {
  position: relative;
  height: 9rem;
  margin-top: 0.75rem;
  overflow: hidden;
  border-radius: var(--pico-border-radius);
  background: var(--bl-chip);
}

.static-map[hidden] { display: none; }

.static-map .tiles img {
  position: absolute;
  max-width: none;
}

.static-map .pin {
  position: absolute;
  left: 50%;
  top: 50%;
  /* The pin's tip, not its center, marks the spot. */
  transform: translate(-50%, -100%);
  color: #d32f2f;
  line-height: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

.static-map .open {
  position: absolute;
  inset: 0;
}

.static-map .attribution {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 0.3rem;
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  font-size: 0.65rem;
  text-decoration: none;
}