/* Kilometer-Tagebuch
 *
 * Reduzierte Oberflaeche: Petrolgrund, kaum Rahmen, Haarlinien statt Kaesten,
 * grosse leichte Zahlen, sehr wenig Fliesstext. Erklaerungen stecken in
 * ⓘ-Hinweisen, die sich abschalten lassen.
 *
 * Die Serienfarben der Diagramme sind mit dem Palettenpruefer gegen beide
 * Untergruende geprueft (Helligkeitsband, Buntheit, Farbfehlsichtigkeit,
 * Kontrast). Nicht von Hand ersetzen, ohne erneut zu pruefen.
 */

:root {
  color-scheme: dark light;
  accent-color: var(--accent);

  --surface: #0e2b36;
  --surface-2: #133a48;
  --surface-3: #17475a;
  --ink: #eef4f5;
  --ink-2: #9fb6be;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.22);

  --accent: #57a83a;
  --accent-ink: #08170a;
  --series-1: #57a83a;
  --series-2: #2b9fd4;
  --pending: #e2a244;
  --danger: #ff8a80;

  --chart-grid: rgba(255, 255, 255, 0.10);
  --chart-ink: #9fb6be;
  --chart-label: #eef4f5;
  --chart-surface: #0e2b36;
  --chart-tip-bg: #133a48;

  --page: min(36rem, 100%);
  --r: 6px;
}

@media (prefers-color-scheme: light) {
  :root {
    --surface: #f6f7f2;
    --surface-2: #ffffff;
    --surface-3: #e9ede9;
    --ink: #12262c;
    --ink-2: #5d6f77;
    --line: rgba(18, 38, 44, 0.13);
    --line-strong: rgba(18, 38, 44, 0.28);

    --accent: #0e6b45;
    --accent-ink: #ffffff;
    --series-1: #0e6b45;
    --series-2: #14509f;
    --pending: #b26a05;
    --danger: #b3261e;

    --chart-grid: rgba(18, 38, 44, 0.12);
    --chart-ink: #5d6f77;
    --chart-label: #12262c;
    --chart-surface: #f6f7f2;
    --chart-tip-bg: #ffffff;
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light dark;
  accent-color: var(--accent);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.4;
  min-height: 100dvh;
}

button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

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

/* --- Grundbausteine --------------------------------------------------- */

.view {
  width: var(--page);
  margin-inline: auto;
  padding: 3rem 1.25rem 3rem;
}

main {
  width: var(--page);
  margin-inline: auto;
  padding: 0.75rem 1.25rem 6rem;
}

.h1 {
  font-weight: 300;
  font-size: 2.1rem;
  line-height: 1.1;
  margin: 0 0 1.6rem;
  hyphens: auto;
}

.h2 {
  font-weight: 500;
  font-size: 1.05rem;
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sub { margin: 0 0 0.6rem; color: var(--ink-2); font-size: 0.88rem; }
.empty { color: var(--ink-2); font-size: 0.9rem; padding: 1.2rem 0; }

.block { padding: 1.4rem 0 0; }
.block + .block { border-top: 1px solid var(--line); margin-top: 1.4rem; }

/* Markenzeichen statt Logo-Datei */
.mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1.4rem;
}

.mark--sm { width: 2.1rem; height: 2.1rem; font-size: 0.8rem; margin: 0; flex: none; }

/* --- Formulare: Beschriftung links, nur Unterstrich ------------------- */

.field {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.field__label { color: var(--ink-2); font-size: 0.9rem; }

.field input, .field select {
  width: 100%;
  padding: 0.3rem 0;
  background: none;
  border: 0;
  font-variant-numeric: tabular-nums;
}

.field input:focus, .field select:focus { outline: none; }
.field:focus-within { border-bottom-color: var(--line-strong); }

/* Eintragen: Eingabefelder in einer Zeile, Button in der nächsten. */
.entry__row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.4rem 0 2rem; /* unten Platz fuer .help--inline */
  margin-bottom: 0.5rem;
  position: relative;
}

.entry__row input[type="date"] {
  width: 7.6rem;
  background: transparent !important;
  border: 0 !important;
  padding: 0;
  font-variant-numeric: tabular-nums;
  height: 1.6rem;
  outline: none;
  -webkit-appearance: none !important;
  appearance: none !important;
  color: var(--ink) !important;
  color-scheme: light dark;
  accent-color: var(--accent) !important;
}

.entry__row input[type="date"]::-webkit-datetime-edit {
  color: var(--ink);
  background: transparent;
  padding: 0;
}

.entry__row input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  background-color: var(--surface-2);
  border-radius: var(--r);
  padding: 0.2rem;
  color: var(--ink-2);
  filter: none !important;
}

.entry__row input[type="date"]::-webkit-calendar-picker-indicator:hover {
  background-color: var(--accent);
  color: var(--accent-ink);
}

.entry__row input[type="date"]::-webkit-datetime-edit-fields-wrapper,
/* Custom Date Picker */
.date-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1.6rem;
  background: transparent;
  border: 0;
  padding: 0 0.1rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
  outline: none;
}

/* .entry__row scrollt horizontal (overflow-x: auto), was overflow-y laut
   Spezifikation ebenfalls auf "auto" zwingt und damit alles absolut
   Positionierte darin beschneidet. Das Popup liegt deshalb im Markup nicht
   mehr in .entry__row, sondern direkt in .entry (position: relative) --
   dadurch sitzt es oberhalb der ganzen Zeile, also ueber dem Datumsfeld,
   ohne von deren Scroll-Container beschnitten zu werden. Keine
   JS-Positionierung: element.style.x wird von der CSP blockiert
   (siehe tests/test_offline_assets.py). */
.entry {
  position: relative;
}

.date-picker-popup {
  position: absolute;
  z-index: 40;
  bottom: 100%;
  left: 0;
  margin-bottom: 0.5rem;
  width: min(20rem, calc(100vw - 1.5rem));
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 0.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.date-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.date-picker-nav {
  display: none;
}

.date-picker-month {
  color: var(--ink);
  font-weight: 500;
}

.date-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.1rem;
  margin-bottom: 0.2rem;
}

.date-picker-weekdays span {
  color: var(--ink-2);
  font-size: 0.75rem;
  text-align: center;
  padding: 0.2rem;
}

.date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.1rem;
}

.date-picker-day {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  background: none;
  border: 0;
  border-radius: var(--r);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  min-height: 2rem;
  width: 100%;
}

.date-picker-day:hover:not(.date-picker-day--disabled):not(.date-picker-day--selected) {
  background: var(--surface-3);
}

.date-picker-day--selected {
  background: var(--accent);
  color: var(--accent-ink);
}

.date-picker-day--other-month {
  color: var(--ink-2);
}

.date-picker-day--disabled {
  color: var(--ink-2);
  opacity: 0.5;
  cursor: not-allowed;
}

.date-picker-day--today {
  font-weight: 600;
}

/* Hide native date picker styling */
.entry__row input[type="date"] {
  display: none;
}

.entry__group {
  display: flex;
  align-items: center;
  flex: none;
  gap: 0.15rem;
  border-bottom: 1px solid var(--line-strong);
  padding: 0.3rem 0;
  position: relative;
  height: 2.2rem;
}

.entry__group--date {
  /* Laengster Wert ist "Mi 22.12." (~3.5rem). 4.3rem laesst genug Luft und
     macht Platz, damit "Eintragen" bei 360 px in dieselbe Zeile passt. */
  width: 4.3rem;
  justify-content: center;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

.entry__group input {
  width: 2.9rem;
  background: none;
  border: 0;
  padding: 0;
  font-variant-numeric: tabular-nums;
  height: 1.6rem;
}

/* Breitester Wert ist "499.9" (~2.2rem) -- der Rest war ungenutzte Flaeche. */
.entry__group input#entry-km {
  width: 2.8rem;
  text-align: right;
}

.entry__group input#entry-trips {
  width: 1.5rem;
}

.entry__unit { color: var(--ink-2); font-size: 0.8rem; }

.entry__row input:focus { outline: none; }
.entry__group:focus-within, .entry__row input[type="date"]:focus { border-bottom-color: var(--accent); }

.entry__ebike {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 0.15rem;
  white-space: nowrap;
  position: relative;
  height: 2.2rem;
}

/* .btn.btn--compact statt nur .btn--compact: hoehere Spezifitaet als
   .btn--sm (das im Stylesheet weiter unten steht und sonst padding/font-size
   ueberschreiben wuerde). Form und Groesse wie .ebike-toggle -- Kapsel-Form
   (.btn) wirkt neben kompakten Feldern/Zeilen deplatziert. Fuer jeden Button,
   der wie "Eintragen" aussehen soll. */
.btn.btn--compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.8rem;
  /* .btn--sm setzt bei pointer:coarse min-height:40px (Fingerbedienung,
     siehe dort) -- das sticht ein kleineres height sonst. .ebike-toggle
     nebenan hat dieselbe Ausnahme, deshalb hier bewusst genauso. */
  min-height: 1.8rem;
  padding: 0 0.6rem;
  border-radius: var(--r);
  font-size: 1rem;
  white-space: nowrap;
}

.entry__submit {
  flex: none;
  margin-left: auto;
}

.ebike-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ebike-toggle:hover {
  background: var(--surface-3);
}

.ebike-toggle.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.ebike-toggle:focus {
  outline: 2px solid var(--series-2);
  outline-offset: 2px;
}

.help--inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid transparent;
  border-radius: 50%;
  font-size: 0.8rem;
  cursor: pointer;
  /* Unter dem eigenen Feld, nicht als loser Streifen darueber: das Icon
     gehoert sichtbar zu km / # / E. Es liegt im unteren Padding-Band von
     .entry__row -- dort beschneidet der Scroll-Container (overflow-x: auto
     erzwingt overflow-y: auto) nichts, und es scrollt mit seinem Feld mit. */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.help--inline:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
}



.btn {
  display: inline-block;
  margin-top: 1.2rem;
  padding: 0.6rem 1.6rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 999px;
  font-weight: 500;
  cursor: pointer;
}

.btn--quiet {
  background: none;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn--sm { margin: 0; padding: 0.3rem 0.9rem; font-size: 0.85rem; }
.btn--xs { margin: 0; padding: 0.2rem 0.6rem; font-size: 0.75rem; }

.actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.actions .btn { margin-top: 1.2rem; }

/* Freigabe: Zurueckziehen steht direkt unter dem Button, zu dem es gehoert,
   statt lose in einer Reihe mit "Für die Klasse"/"Für die Schule". */
.release__scopes { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.8rem; }
.release__scope { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }

.msg {
  margin: 0.8rem 0 0;
  padding: 0.5rem 0.7rem;
  border-left: 2px solid var(--danger);
  background: var(--surface-2);
  font-size: 0.9rem;
  border-radius: 0 var(--r) var(--r) 0;
}

/* --- Hilfe-Hinweise --------------------------------------------------- */

.help {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  color: var(--ink-2);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}

.help:hover { color: var(--ink); border-color: var(--ink-2); }
body.no-help .help { display: none; }

.popover {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: calc(3.6rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(30rem, calc(100vw - 1.5rem));
  padding: 0.9rem 2.4rem 0.9rem 1rem;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-size: 0.9rem;
  /* Ohne Deckel waechst ein langer Hinweis (Datenschutz) nach oben aus dem
     Bild -- im Querformat waere er unlesbar abgeschnitten. */
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}

.popover p { margin: 0; }

.popover__close {
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  background: none;
  border: 0;
  color: var(--ink-2);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

/* --- Kopfzeile -------------------------------------------------------- */

/* zoom (nicht transform: scale) skaliert Layout und Darstellung gemeinsam --
   die Kopfzeile beansprucht dadurch tatsaechlich nur noch 75% ihrer Hoehe,
   statt bei alter Boxgroesse nur optisch zu schrumpfen. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem max(1.25rem, calc((100% - var(--page)) / 2 + 1.25rem));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  zoom: 0.75;
}

.topbar__who { min-width: 0; margin-right: auto; }
.topbar__class { margin: 0; font-weight: 500; line-height: 1.15; }

.topbar__user {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  padding: 0.25rem 0.7rem;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.78rem;
  cursor: pointer;
}

.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.pill.is-pending .pill__dot { background: var(--pending); }
.pill.is-offline .pill__dot { background: var(--ink-2); }
.pill.is-error .pill__dot { background: var(--danger); }

/* --- Kennzahlenfliesen ------------------------------------------------ */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}

.tile { background: var(--surface); padding: 0.9rem 0.8rem; }
.tile--hero { grid-column: 1 / -1; padding: 1.1rem 0.9rem 1.2rem; }

.tile__num {
  margin: 0;
  font-weight: 300;
  font-size: 1.9rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tile--hero .tile__num { font-size: 3.4rem; }

.tile__cap {
  margin: 0.35rem 0 0;
  color: var(--ink-2);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.tile.is-pending .tile__num { color: var(--pending); }

/* --- Diagramme -------------------------------------------------------- */

.chart { position: relative; margin-top: 0.2rem; }
.chart__svg { display: block; width: 100%; height: auto; touch-action: pan-y; }

.legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.2rem; }

.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  padding: 0.2rem 0;
  color: var(--ink-2);
  font-size: 0.82rem;
  cursor: pointer;
}

/* Feste Klassen statt Inline-Farben: die Content-Security-Policy erlaubt keine
   Inline-Styles, und die Serienzuordnung ist ohnehin fest. */
.legend__swatch {
  width: 1.7rem;
  height: 0.35rem;
  border-radius: 999px;
  flex: none;
}

.legend__swatch--1 { background: var(--series-1); }
.legend__swatch--2 { background: var(--series-2); }
.legend__swatch--3 { background: var(--chart-ink); opacity: 0.6; }

/* Die Vorwoche wird im Diagramm gestrichelt gezeichnet (stroke-dasharray "5 4"
   in chart.js) -- die Legende muss dasselbe zeigen. Maske statt eigener
   background-Angabe, damit die Serienfarbe oben und die Aus-Regel weiter
   unten unveraendert greifen. */
.legend__swatch--dashed {
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 9px);
  mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 9px);
}

.legend__item.is-off { opacity: 0.45; }
.legend__item.is-off .legend__swatch { background: var(--ink-2); }

/* Balken: Groessenvergleich der Klassen */
.bars { display: grid; gap: 0.1rem; }

.bar {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  grid-template-areas: "rank name value" ". track track" ". sub sub";
  align-items: center;
  gap: 0.15rem 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.bar__rank { grid-area: rank; color: var(--ink-2); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.bar__name { grid-area: name; font-weight: 500; }
.bar__value { grid-area: value; font-weight: 300; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.bar__sub { grid-area: sub; color: var(--ink-2); font-size: 0.76rem; }

.bar__track { grid-area: track; display: block; width: 100%; height: 6px; }
.bar__bg { fill: var(--surface-2); }
.bar__fill { fill: var(--ink-2); }
.bar--own .bar__fill { fill: var(--accent); }
.bar--own .bar__name { color: var(--ink); }

.badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.68rem;
  vertical-align: 1px;
}

/* --- Zeilenlisten ----------------------------------------------------- */

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

.rows--head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.76rem;
}

.rows__right { text-align: right; }

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.row__day { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }

.row__km {
  font-weight: 300;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Unbestaetigt: gestrichelte Klammer statt Sitzfarbe -- die Unterscheidung
   zwischen lokal und serverbestaetigt ist Pflicht (planung.md 10.1). */
.row.is-local .row__km {
  color: var(--pending);
  border-bottom: 1px dashed var(--pending);
}

.row.is-rejected .row__km { color: var(--danger); border-bottom: 1px dashed var(--danger); }

.row__tools { display: flex; gap: 0.5rem; justify-content: flex-end; padding-left: 0.6rem; }

.iconbtn {
  background: none;
  border: 0;
  padding: 0.2rem 0.3rem;
  color: var(--ink-2);
  font-size: 0.8rem;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.iconbtn:hover { color: var(--ink); border-bottom-color: var(--line-strong); }

.row__tag { color: var(--ink-2); font-size: 0.72rem; }

/* --- Vorschlaege und Vorlagen ---------------------------------------- */

.proposal {
  display: grid;
  grid-template-columns: minmax(6.5rem, 1fr) 4rem auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.proposal__day { color: var(--ink-2); font-size: 0.85rem; }
.proposal input { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line-strong); padding: 0.2rem 0; }
.proposal__actions { display: flex; gap: 0.4rem; justify-content: flex-end; }

.templates { display: grid; gap: 0; }

/* Sieben Kinder pro Zeile (Tag, km, "km", #+Fahrten, E-Bike, "Vorschlag:",
   Checkbox) -- vorher hatte grid-template-columns nur 5 Spuren fuer 6
   Kinder, die Checkbox rutschte dadurch automatisch in eine zweite
   Grid-Zeile. */
.template {
  display: grid;
  grid-template-columns: 2.2rem 3.8rem auto auto auto auto auto;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.2rem; /* dieselbe Zeilenhoehe wie .entry__row */
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
}

.template__ebike {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* # und die Fahrtenzahl gehoeren sichtbar zusammen -- eigener, engerer
   Abstand statt der 0.5rem Spaltenluecke des Grids. */
.template__trips {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  width: 2.6rem;
}

.template .template__trips input[type="number"] { width: 1.5rem; }

.template__active-label {
  color: var(--ink-2);
  font-size: 0.75rem;
  white-space: nowrap;
}

.template__day { color: var(--ink-2); font-size: 0.85rem; }
.template input[type="number"] { width: 100%; background: none; border: 0; padding: 0.2rem 0; font-variant-numeric: tabular-nums; }
.template input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.template input.template__km { text-align: right; } /* wie #entry-km */

/* --- Schalter --------------------------------------------------------- */

.switch { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; padding: 0.4rem 0; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }

.switch__track {
  width: 2.4rem;
  height: 1.3rem;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  padding: 2px;
  flex: none;
  transition: background 120ms ease;
}

.switch__knob {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--ink-2);
  transition: transform 120ms ease, background 120ms ease;
}

.switch input:checked + .switch__track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .switch__track .switch__knob { transform: translateX(1.1rem); background: #fff; }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--series-2); outline-offset: 2px; }
.switch__label { font-size: 0.92rem; }

@media (prefers-reduced-motion: reduce) {
  .switch__track, .switch__knob { transition: none; }
}

/* --- Klassenwahl ------------------------------------------------------ */

.choices { display: grid; }

.choice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.75rem 0.2rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.choice__name { font-size: 1.05rem; }
.choice__note { margin-left: auto; color: var(--ink-2); font-size: 0.78rem; }
.choice.is-selected { color: var(--accent); border-bottom-color: var(--accent); }
.choice.is-selected .choice__name { font-weight: 500; }

/* --- Verwaltung ------------------------------------------------------- */

.admin h3 { font-size: 0.8rem; font-weight: 500; color: var(--ink-2); margin: 1.1rem 0 0.3rem; }
.admin ul { list-style: none; margin: 0; padding: 0; }

.admin li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

.admin__val {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.adminform { padding: 0.4rem 0 0.8rem; }
.adminform .btn { margin-top: 0.8rem; }

.admin__filters { display: flex; gap: 0.5rem; margin: 0.3rem 0 0.5rem; }
.admin__filters input, .admin__filters select {
  flex: 1;
  min-width: 0;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: inherit;
  font-size: 0.85rem;
}
.admin__filters input:focus, .admin__filters select:focus {
  outline: none;
  border-color: var(--line-strong);
}

.admin__scroll { max-height: 200px; overflow-y: auto; }

/* --- Segmentschalter -------------------------------------------------- */

.segmented {
  display: flex;
  gap: 2px;
  margin: 1rem 0 0.4rem;
  padding: 2px;
  background: var(--surface-2);
  border-radius: 999px;
}

.segmented--sm { margin: 0.6rem 0; max-width: 18rem; }

.segmented__btn {
  flex: 1;
  min-height: 2.4rem;
  padding: 0.4rem 0.8rem;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.9rem;
  cursor: pointer;
}

.segmented__btn.is-active { background: var(--accent); color: var(--accent-ink); }

.pane { padding-top: 0.6rem; }

/* --- Gruppenliste ----------------------------------------------------- */

.listrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.2rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.listrow__name { font-weight: 500; }
.listrow__meta { margin-left: auto; color: var(--ink-2); font-size: 0.82rem; }

.shares { margin: 0.2rem 0 0.8rem; padding-left: 1.1rem; color: var(--ink-2); font-size: 0.9rem; }
.shares li { margin: 0.15rem 0; }

/* --- Blatt (Gruppendetail, Einladung, Beitritt) ----------------------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}

.sheet__box {
  width: min(34rem, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 2px solid var(--accent);
  border-radius: 14px 14px 0 0;
}

.sheet__head { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.6rem; }
.sheet__head .h2 { margin: 0; }

.sheet__close {
  margin-left: auto;
  width: 2.4rem;
  height: 2.4rem;
  background: none;
  border: 0;
  color: var(--ink-2);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.qr {
  display: block;
  width: min(15rem, 70vw);
  margin: 0.6rem auto 0.4rem;
  padding: 0.6rem;
  background: #fff;
  border-radius: var(--r);
}

.code {
  margin: 0.2rem 0 0.6rem;
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

/* --- Scanner ---------------------------------------------------------- */

.scanner {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem calc(1rem + env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom));
  background: #000;
}

.scanner__video {
  width: min(100%, 30rem);
  max-height: 62dvh;
  border-radius: var(--r);
  object-fit: cover;
  background: #111;
}

.scanner__hint { margin: 0; color: #f2f5f2; font-size: 0.95rem; text-align: center; }
.scanner__actions { display: flex; gap: 0.6rem; }
.scanner__actions .btn { margin-top: 0; }

/* --- Tableiste -------------------------------------------------------- */

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar__btn {
  position: relative;
  background: none;
  border: 0;
  border-top: 2px solid transparent;
  padding: 0.75rem 0.2rem;
  color: var(--ink-2);
  font-size: 0.88rem;
  cursor: pointer;
}

.tabbar__btn.is-active { color: var(--ink); border-top-color: var(--accent); }

.tabbar__badge {
  position: absolute;
  top: 0.3rem;
  right: 50%;
  transform: translateX(1.7rem);
  min-width: 1.05rem;
  padding: 0 0.2rem;
  background: var(--pending);
  color: #221803;
  border-radius: 999px;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

/* --- Toast ------------------------------------------------------------ */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(4.4rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 20;
  max-width: min(30rem, calc(100% - 2rem));
  padding: 0.55rem 0.9rem;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-size: 0.88rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.toast.is-warn { border-color: var(--pending); }

/* --- Bedienung mit dem Finger ----------------------------------------- */

/* Auf Geräten ohne Maus brauchen Schaltflächen eine Mindestgröße, sonst trifft
   man sie nicht zuverlässig. Der Wert folgt Apples Vorgabe von 44 Punkten und
   gilt genauso für Android. */
@media (pointer: coarse) {
  .btn, .segmented__btn, .tabbar__btn, .listrow, .choice, .sheet__close {
    min-height: 44px;
  }

  .btn--sm { min-height: 40px; padding-inline: 1rem; }
  .btn--xs { min-height: 32px; padding-inline: 0.8rem; }
  .iconbtn { min-height: 40px; padding: 0.5rem 0.6rem; }
  .help { width: 1.6rem; height: 1.6rem; font-size: 0.85rem; }
  .template input[type="checkbox"] { width: 1.5rem; height: 1.5rem; }
  .field { padding: 0.7rem 0; }
  .field input, .field select { min-height: 2.2rem; }
  .entry__row input[type="date"], .entry__group input { min-height: 2.2rem; }

}

/* iOS zoomt beim Antippen in Felder, deren Schrift kleiner als 16px ist. */
@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: max(16px, 1rem); }
}