/* Fahrplay theme — design tokens (ported from ui-wireframes/tokens.css) + a
   thin component layer on top of Bootstrap 5. Served statically (no build). */

:root {
  /* surfaces */
  --bg:        oklch(97.5% 0.006 70);
  --bg-2:      oklch(95% 0.008 70);
  --surface:   #ffffff;
  --surface-2: oklch(98.5% 0.005 70);
  --line:      oklch(92% 0.008 70);
  --line-2:    oklch(88% 0.01 70);

  /* ink */
  --ink:       oklch(22% 0.012 70);
  --ink-2:     oklch(38% 0.012 70);
  --muted:     oklch(54% 0.01 70);
  --muted-2:   oklch(68% 0.01 70);

  /* accent — sienna / handball */
  --accent:        oklch(58% 0.155 38);
  --accent-ink:    oklch(36% 0.12 38);
  --accent-soft:   oklch(94% 0.04 38);
  --accent-soft-2: oklch(90% 0.06 38);

  /* status — fairness ampel */
  --ok:        oklch(56% 0.13 150);
  --ok-soft:   oklch(94% 0.04 150);
  --warn:      oklch(72% 0.13 80);
  --warn-soft: oklch(95% 0.05 85);
  --bad:       oklch(58% 0.17 25);
  --bad-soft:  oklch(94% 0.04 25);

  /* family colors (deterministic per Haushalt, 1..5) */
  --fam-1: oklch(70% 0.10 45);
  --fam-2: oklch(68% 0.10 160);
  --fam-3: oklch(68% 0.10 240);
  --fam-4: oklch(70% 0.10 320);
  --fam-5: oklch(72% 0.10 100);

  --r:    12px;
  --r-md: 16px;
  --r-lg: 22px;
  --shadow-1: 0 1px 2px rgba(20,15,10,0.04), 0 1px 3px rgba(20,15,10,0.03);
  --shadow-2: 0 2px 6px rgba(20,15,10,0.05), 0 8px 24px rgba(20,15,10,0.06);

  /* Bootstrap overrides */
  --bs-primary: oklch(58% 0.155 38);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-body-font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  --bs-border-color: var(--line);
}

body {
  font-family: var(--bs-body-font-family);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Mobile-first shell: a centered column that stays phone-width on desktop. */
.app-shell {
  max-width: 520px;
  margin-inline: auto;
  min-height: 100dvh;
  background: var(--bg);
  position: relative;
  padding-bottom: 84px; /* room for bottom nav */
}
.app-main { padding: 16px; }

/* Top bar */
.app-topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
}
.app-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.app-title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }

/* Bottom tab bar */
.app-tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 520px;
  display: flex; background: color-mix(in oklch, var(--surface) 92%, transparent);
  backdrop-filter: blur(20px); border-top: 1px solid var(--line);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index: 30;
}
.app-tabbar a {
  flex: 1; text-align: center; text-decoration: none;
  color: var(--muted); font-size: 11px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.app-tabbar a.active { color: var(--accent); }
.app-tabbar svg { width: 22px; height: 22px; }

/* Cards */
.fp-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-1);
  padding: 14px 16px;
}
.fp-card + .fp-card { margin-top: 10px; }

/* Ampel dot + soft pills */
.ampel { display:inline-block; width:10px; height:10px; border-radius:50%; flex:none; }
.ampel-ok   { background: var(--ok); }
.ampel-warn { background: var(--warn); }
.ampel-bad  { background: var(--bad); }

.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 9px;
  border-radius:999px; font-size:12px; font-weight:600; }
.pill-ok   { background: var(--ok-soft);   color: oklch(36% 0.10 150); }
.pill-warn { background: var(--warn-soft); color: oklch(42% 0.10 70); }
.pill-bad  { background: var(--bad-soft);  color: oklch(40% 0.13 25); }
.pill-neu  { background: var(--bg-2);      color: var(--ink-2); }

/* Team chip */
.team-chip { display:inline-flex; align-items:center; padding:2px 8px;
  border-radius:999px; background: var(--bg-2); border:1px solid var(--line);
  color: var(--ink-2); font-weight:600; font-size:11px; }

/* Accent button */
.btn-accent { background: var(--accent); border-color: var(--accent); color:#fff; }
.btn-accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); color:#fff; }

/* Brand mark */
.brand-mark { width:36px; height:36px; border-radius:10px; background:var(--accent);
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px; }

/* Auth pages */
.auth-wrap { max-width: 460px; margin-inline:auto; padding: 32px 20px; }
.invite-card { border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface) 0%, var(--accent-soft) 100%);
  border:1px solid var(--accent-soft-2); padding: 20px; }

/* ───────────────────────────────────────────────────────────
   Verteilung (Kinder auf Autos) — Variante D verfeinert
   ─────────────────────────────────────────────────────────── */

/* Richtungs-Switch (segmented control) */
.dir-seg { display:flex; gap:0; background:var(--bg-2); border-radius:999px; padding:3px; }
.dir-seg button { flex:1; border:none; background:transparent; border-radius:999px;
  padding:8px 10px; font-weight:600; font-size:14px; color:var(--muted); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:all .15s; }
.dir-seg button.active { background:var(--surface); box-shadow:var(--shadow-1); color:var(--ink); }
.dir-seg button .meta { font-size:11px; color:var(--muted-2); font-weight:500; }
.dir-seg button.active .arrow { color:var(--accent); }
.dir-seg .arrow { display:inline-flex; color:var(--muted-2); }

.dir-panel[hidden] { display:none; }

/* Auto-Kapazitäts-Cards */
.car-cards { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.car-card { flex:1 1 40%; min-width:0; padding:12px 14px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line); }
.car-card.is-full { background:var(--ok-soft); border-color:color-mix(in oklch, var(--ok) 30%, transparent); }
.car-card.is-over { background:var(--bad-soft); border-color:var(--bad); }
.car-card .drv { display:flex; align-items:center; gap:7px; font-weight:700; font-size:13px;
  color:var(--ink); margin-bottom:8px; min-width:0; }
.car-card .drv .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.car-ico { width:24px; height:24px; border-radius:7px; flex:none; background:var(--accent-soft);
  color:var(--accent-ink); display:inline-flex; align-items:center; justify-content:center; }
.car-card .cnt { display:flex; align-items:baseline; gap:4px; }
.car-card .cnt b { font-size:26px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink); }
.car-card.is-full .cnt b { color:oklch(40% 0.10 150); }
.car-card.is-over .cnt b { color:var(--bad); }
.car-card .cnt span { font-size:13px; color:var(--muted); }
.car-card .cnt .over-tag { margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:var(--bad); }
.seats { display:flex; gap:3px; margin-top:9px; }
.seat { flex:1; height:5px; border-radius:2px; background:var(--bg-2); }
.seat.filled { background:var(--accent); }
.seat.over { background:var(--bad); }

/* Versorgungs-Banner */
.supply { margin-top:10px; padding:10px 12px; border-radius:var(--r); display:flex;
  align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--ink); }
.supply.ok   { background:var(--ok-soft); }
.supply.warn { background:var(--warn-soft); }
.supply.bad  { background:var(--bad-soft); }
.supply .seats-count { margin-left:auto; font-weight:500; color:var(--ink-2); font-size:12px;
  font-variant-numeric:tabular-nums; }

/* Kind-/Gast-Zeile mit Tap-Buttons */
.assign-row { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:11px 12px; }
.assign-row + .assign-row { margin-top:8px; }
.assign-head { display:flex; align-items:center; gap:10px; margin-bottom:9px; min-width:0; }
.kid-av { width:36px; height:36px; border-radius:50%; flex:none; background:var(--bg-2);
  color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; box-shadow:0 0 0 2px var(--ring, var(--line)); }
.assign-head .who { min-width:0; }
.assign-head .who .nm { font-weight:700; font-size:15px; color:var(--ink); }
.assign-head .who .sub { font-size:11.5px; color:var(--muted); }
.assign-head .rm { margin-left:auto; flex:none; }
.gast-tag { display:inline-block; padding:1px 6px; border-radius:999px; background:var(--bg-2);
  color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.3px; }

.assign { display:flex; gap:6px; }
.assign-btn { flex:1 1 0; min-width:0; padding:9px 8px; border-radius:11px;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink-2);
  font-weight:600; font-size:13px; cursor:pointer; transition:all .12s;
  display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.assign-btn .ini { width:18px; height:18px; border-radius:50%; flex:none; font-size:9px;
  font-weight:700; background:var(--bg-2); color:var(--ink-2);
  display:inline-flex; align-items:center; justify-content:center; }
.assign-btn .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.assign-btn:not(:disabled):hover { border-color:var(--line-2); }
.assign-btn.active { background:var(--ink); border-color:var(--ink); color:#fff; }
.assign-btn.active .ini { background:rgba(255,255,255,.18); color:#fff; }
.assign-btn.active.over { background:var(--bad); border-color:var(--bad); }
.assign-btn:disabled { opacity:.5; cursor:default; }
.assign-none { flex:0 0 auto; width:44px; padding:9px 0; border-radius:11px;
  border:1.5px solid var(--line); background:var(--surface); color:var(--muted-2);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.assign-none.active { border-color:var(--bad); background:var(--bad-soft); color:var(--bad); }
.assign-form { display:flex; gap:6px; }

/* Strecken-Auswahl beim Fahrt-Anbieten (Kombi) */
.leg-picker { display:flex; flex-direction:column; gap:6px; }
.leg-opt { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:11px;
  border:1.5px solid var(--line); background:var(--surface); cursor:pointer; transition:all .12s; }
.leg-opt.checked { border-color:var(--accent); background:var(--accent-soft); }
.leg-opt .leg-cb { width:18px; height:18px; flex:none; accent-color:var(--accent); }
.leg-opt .leg-zeit { font-weight:700; font-variant-numeric:tabular-nums; min-width:42px; }
.leg-opt .leg-rt { font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:var(--muted); min-width:34px; }
.leg-opt .leg-teams { color:var(--ink-2); font-size:13px; }