/* ============================================================================
   FunFlight Startliste — Screen-Layouts
   ----------------------------------------------------------------------------
   App-Kopf, Tab-Leiste und die Screens: Flugstunden-Start, Live-Leg,
   Schreibvorlagen (Export), Historie, Stammdaten, Hilfe.
   ========================================================================== */

/* ═══ APP-KOPF: Wortmarke + UTC-Uhr ══════════════════════════════════════ */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(12px + var(--safe-top)) var(--space) 10px;
  background: var(--paper);
}

/* ═══ TAB-LEISTE: flache Navigation, Zustand in Anthrazit ═══════════════ */
.tabbar {
  display: flex;
  background: var(--paper);
  border-bottom: 1.5px solid var(--ink);
}
.tabbar > button {
  flex: 1;
  min-height: 46px;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  border-bottom: 3px solid transparent;
  transition: background var(--t-press);
}
.tabbar > button:active { background: var(--bay); }
.tabbar > button.is-current {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--ink);
}

/* Original-Logo der Flugschule (assets/logo.webp) */
.logo { display: grid; gap: 3px; justify-items: start; }
.logo-img {
  display: block;
  height: 42px;
  width: auto;
}
.logo .logo-sub {
  font-family: var(--font-ui);
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Logo am Fuß des Hilfe-Screens */
.help-logo { height: 38px; margin: 30px auto 8px; }

/* Live-Uhr: UTC führend, Lokalzeit klein darunter */
.clock { display: grid; justify-items: end; gap: 1px; }
.clock .clock-utc {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.clock .clock-utc .tz { font-size: 0.65em; font-weight: 400; color: var(--ink-soft); }
.clock .clock-local {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink-faint);
}

/* ═══ SCREEN-GERÜST ══════════════════════════════════════════════════════ */
.screen { display: none; }
.screen.is-active { display: block; }

.screen-inner {
  padding: 14px var(--space);
  /* Platz für das fixe Dock unten (Button + Fortschritts-Schwung) */
  padding-bottom: 200px;
  max-width: 480px;
  margin: 0 auto;
}

.screen-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: 1.15;
}
.screen-sub {
  margin-top: 2px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* Abschnittskopf mit optionaler Nebenaktion rechts (z.B. Rückgängig) */
.section-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0 10px;
}
.section-h .microlabel { font-size: 11px; }

/* ═══ SCREEN: LIVE-LEG ═══════════════════════════════════════════════════ */

/* Sitzungszeile: wer fliegt was */
.session-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.session-line .who { min-width: 0; margin-right: auto; }
.session-line .who .who-name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-line .who .who-detail {
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* Streifenablage: abgeschlossene Legs stapeln sich (neuester zuoberst) */
.strip-stack { display: grid; gap: 12px; }
.strip-stack .strip--done { animation: strip-in 260ms var(--ease-snap); }
@keyframes strip-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Im-Flug-Bereich: Landung +1 und Übungs-Chips */
.midflight { margin-top: 4px; }
.midflight .ldg-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.midflight .ldg-row .btn-ghost { flex: 1; }

/* Micro-Copy an der Entscheidungsstelle (Spec-Änderung 4b) — eine Zeile,
   dezent, kein Dialog */
.micro-hint {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.micro-hint b { color: var(--ink); }

/* Route im aktiven Streifen ist tappbar (Landeort setzen/ändern) */
.strip-route--btn {
  width: 100%;
  border: none;
  background: none;
  padding: 0;
}
.strip-route--btn:active { opacity: 0.6; }

/* Vorschlagszeile unter den Start-Feldern ("zuletzt: 3170:50") */
.suggest-row { margin-top: 10px; min-height: 0; }

/* ═══ SCREEN: FLUGSTUNDEN-START ══════════════════════════════════════════ */

.choice-grid { display: grid; gap: 10px; }

/* Flugzeugauswahl als Mini-Streifen */
.aircraft-card {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 0;
  border: 1.5px solid var(--ink-faint);
  border-radius: var(--radius-strip);
  background: var(--paper);
  text-align: left;
  overflow: hidden;
  transition: border-color var(--t-press), transform var(--t-press);
}
.aircraft-card:active { transform: scale(0.985); }
.aircraft-card .ac-holder {
  align-self: stretch;
  background: var(--line);
}
.aircraft-card .ac-main { padding: 10px 0; }
.aircraft-card .ac-reg {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: 0.03em;
}
.aircraft-card .ac-type {
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.aircraft-card .ac-check {
  margin-right: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
}
.aircraft-card.is-selected { border-color: var(--ink); border-width: 2px; }
.aircraft-card.is-selected .ac-holder { background: var(--red); }
.aircraft-card.is-selected .ac-check {
  border-color: var(--ink);
  background: var(--ink);
  /* Häkchen als Inline-SVG-Maske vermeiden — schlicht gefüllter Punkt */
  box-shadow: inset 0 0 0 4px var(--paper);
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ═══ SCREEN: BORDBUCH-EXPORT ════════════════════════════════════════════ */

/* Statuszeile oben: abgeschlossen + Datum */
.export-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.export-tabs { margin-bottom: 16px; }
.export-panel { display: none; }
.export-panel.is-active { display: block; }

/* Schreibvorlage: Zellenraster wie die Spalten des physischen Bordbuchs.
   Beschriftung klein "gedruckt", Werte groß zum Abschreiben. */
.ledger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-strip);
  overflow: hidden;
  box-shadow: var(--shadow-strip);
}
.ledger .cell {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 10px 12px 11px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  min-height: 64px;
}
.ledger .cell:nth-child(2n) { border-right: none; }
.ledger .cell.wide { grid-column: 1 / -1; border-right: none; }
.ledger .cell.last-row { border-bottom: none; }
.ledger .cell .value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ledger .cell .value .unit { font-size: 0.6em; font-weight: 400; color: var(--ink-soft); }
.ledger .cell .value--text {
  font-family: var(--font-ui);
  font-size: 1.125rem;
}
/* Die eine Zahl, die am Gerät neu eingestellt wird: Zähler neu */
.ledger .cell--hero { background: var(--bay); }
.ledger .cell--hero .value { font-size: 1.875rem; }
.ledger .cell--hero .value .unit { color: var(--red); font-weight: 700; }

.export-note {
  margin-top: 10px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* Startlisten-Tabelle: der Papierbogen als Tabelle, pro Leg eine Zeile */
.paper-table-wrap {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-strip);
  box-shadow: var(--shadow-strip);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.paper-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.paper-table th {
  padding: 8px 5px 6px;
  border-bottom: 1.5px solid var(--ink);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
}
.paper-table td {
  padding: 9px 5px;
  border-bottom: 1px solid var(--line);
}
.paper-table th:first-child,
.paper-table td:first-child { padding-left: 10px; }
.paper-table th:last-child,
.paper-table td:last-child { padding-right: 10px; }
.paper-table tbody tr:last-child td { border-bottom: 1.5px solid var(--ink); }
.paper-table .sum td {
  border-bottom: none;
  font-weight: 700;
  background: var(--bay);
}

/* Kopfdaten (Startliste) und Nachweis-Zusammenfassung */
.kv-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  padding: 14px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-strip);
  box-shadow: var(--shadow-strip);
}
.kv-card .kv { display: grid; gap: 2px; }
.kv-card .kv.wide { grid-column: 1 / -1; }
.kv-card .kv .v {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.9375rem;
}
.kv-card .kv .v.mono {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
}

/* ═══ SCREEN: HISTORIE — tagesgruppierte Dokumentation ═══════════════════ */

.hist-list { display: grid; gap: 14px; }

/* Tageskopf: Datum ("Heute") + Anzahl, klappt die Flugstunden auf */
.day-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 8px 14px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-strip);
  box-shadow: var(--shadow-strip);
  text-align: left;
}
.day-head:active { background: var(--bay); }
.day-head .day-main { display: grid; gap: 0; margin-right: auto; min-width: 0; }
.day-head .day-title { font-family: var(--font-ui); font-weight: 700; font-size: 1.0625rem; }
.day-head .day-sub { font-size: 0.6875rem; color: var(--ink-faint); }
.day-head > svg {
  flex: none;
  color: var(--ink-faint);
  transition: transform 180ms var(--ease-snap);
}
.day-head.is-open > svg { transform: rotate(90deg); }

.day-body { display: grid; gap: 10px; margin-top: 10px; }

/* Flugstunden-Karte innerhalb eines Tages */
.hist-card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-strip);
  box-shadow: var(--shadow-strip);
  overflow: hidden;
}
.hist-card.is-open { box-shadow: var(--shadow-active); }
.hist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 68px;
  padding: 10px 12px;
  text-align: left;
  transition: background var(--t-press);
}
.hist-row:active { background: var(--bay); }
.hist-row .hist-main { display: grid; gap: 1px; min-width: 0; margin-right: auto; }
.hist-row .hist-name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hist-detail { font-size: 0.75rem; color: var(--ink-soft); }
.hist-row .hist-side { display: grid; gap: 1px; justify-items: end; flex: none; }
.hist-row .hist-route { font-weight: 700; font-size: 0.875rem; }
.hist-row > svg {
  flex: none;
  color: var(--ink-faint);
  transition: transform 180ms var(--ease-snap);
}
.hist-row.is-open > svg { transform: rotate(90deg); }

/* Aufgeklappte Flugstunde: Zusammenfassung + drei Dokumentations-Ansichten */
.hist-open {
  border-top: 1.5px solid var(--ink);
  padding: 12px;
  background: var(--bay);
}
.hist-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.hist-tabs { margin-bottom: 12px; background: var(--paper); }
.hist-panel .ledger,
.hist-panel .kv-card,
.hist-panel .paper-table-wrap,
.hist-panel .exercise-list { box-shadow: none; }

.empty-state {
  padding: 18px 4px;
  font-size: var(--fs-small);
  color: var(--ink-faint);
}

/* Filter-Chips etwas kompakter */
.chip-cloud--tight { gap: 8px 6px; }

/* ═══ SCREEN: STAMMDATEN ═════════════════════════════════════════════════ */

.list-card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-strip);
  box-shadow: var(--shadow-strip);
  overflow: hidden;
}
.list-card .empty-state { padding: 14px; }
.data-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  transition: background var(--t-press);
}
.data-row:last-child { border-bottom: none; }
.data-row:active { background: var(--bay); }
.data-row .data-main { display: grid; gap: 1px; min-width: 0; margin-right: auto; }
.data-row .data-name { font-family: var(--font-ui); font-weight: 700; font-size: 0.9375rem; }
.data-row .data-name.mono { font-family: var(--font-mono); }
.data-row .data-sub {
  font-size: 0.75rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-row > svg { flex: none; color: var(--ink-faint); }

/* ═══ SCREEN: HILFE ═══════════════════════════════════════════════════════ */

.help-card {
  padding: 14px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-strip);
  box-shadow: var(--shadow-strip);
}
.help-steps {
  padding-left: 22px;
  display: grid;
  gap: 8px;
  font-size: var(--fs-body);
}
.help-note { margin-top: 10px; font-size: var(--fs-small); color: var(--ink-soft); }
.help-card .help-note:first-child { margin-top: 0; }
.help-actions { display: grid; gap: 10px; margin-top: 12px; }
.help-version {
  margin-top: 28px;
  text-align: center;
  font-size: 0.6875rem;
  color: var(--ink-faint);
}

/* ═══ INSTALLATIONS-HINWEIS (Overlay, nur im Safari-Tab) ══════════════════ */

.install-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(22, 24, 29, 0.5);
  padding: 20px 14px calc(20px + var(--safe-bottom));
}
.install-card {
  width: 100%;
  max-width: 440px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  padding: 20px 18px calc(6px + var(--safe-bottom) * 0);
  padding-bottom: 18px;
  box-shadow: var(--shadow-active);
  display: grid;
  gap: 12px;
}
.install-card h2 { font-family: var(--font-ui); font-size: 1.25rem; }
.install-card p { font-size: var(--fs-small); color: var(--ink-soft); }

/* Übungsliste im Ausbildungsnachweis */
.exercise-list {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-strip);
  box-shadow: var(--shadow-strip);
  overflow: hidden;
}
.exercise-list .exercise-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  font-family: var(--font-ui);
}
.exercise-list .exercise-row:last-child { border-bottom: none; }
.exercise-list .exercise-row .count {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.0625rem;
}
/* Tally-Striche wie auf dem Kniebrett: ||||  */
.exercise-list .tallymarks {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.18em;
  color: var(--red);
}