/* ARGUS — Design-Tokens
 *
 * Farbquelle: Soft Sage #ACC8A2 auf Deep Olive #1A2517.
 *
 * Zwei Regeln, die aus dem Einsatzzweck folgen und nicht aus Geschmack:
 *  1. backdrop-filter kostet GPU und damit Akku. Die App läuft drei Stunden
 *     mit aktivem Display. Glas deshalb NUR auf statischen Flächen — nie auf
 *     etwas, das sich mit der Karte bewegt oder je Positions-Update neu malt.
 *  2. Dunkles Glas ist bei Sonne unlesbar. [data-mode="day"] schaltet auf
 *     opake Flächen mit hohem Kontrast um.
 */

:root {
  --bg-deep: #12190f;
  --bg-olive: #1a2517;
  --sage: #acc8a2;
  --sage-dim: #7e9b76;
  --text: #e8f0e4;
  --muted: #8fa089;

  --glass: rgba(172, 200, 162, 0.08);
  --glass-strong: rgba(172, 200, 162, 0.14);
  --glass-border: rgba(172, 200, 162, 0.18);
  --blur: blur(20px) saturate(140%);

  --hit: #e2574c;
  --medic: #f2b441;
  --objective: #6fa8dc;
  --emergency: #ff3b30;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-full: 999px;

  --pad: 16px;
  --tap: 44px; /* Apple-HIG-Minimum. Mit Handschuhen die Untergrenze. */

  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-lift: 0 12px 40px rgba(0, 0, 0, 0.55);

  /* Bewegung: kurz, ease-out, nur transform/opacity. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 150ms;
  --base: 220ms;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* --- Bedienelemente ÜBER der Karte ---
     Diese Farben sind in BEIDEN Modi gleich, und das ist der Punkt: was über
     der Karte liegt, darf seine Lesbarkeit nicht von der App-Einstellung
     borgen, sondern muss gegen die KARTE bestehen. Die kann hell sein
     (OpenStreetMap) oder dunkel (Luftbild, eigene Geländekarte) — und beides
     wechselt mit einem Klick.
     Deshalb: dunkler, DECKENDER Grund mit heller Schrift. Der hält gegen
     beides und ist bei Sonne besser lesbar als jedes Glas. */
  --map-ui-bg: rgba(14, 21, 12, 0.92);
  --map-ui-bg-strong: rgba(14, 21, 12, 0.97);
  --map-ui-text: #eaf2e6;
  --map-ui-muted: #b6c7af;
  --map-ui-border: rgba(172, 200, 162, 0.3);

  /* Höhe der Kopfleiste. Als Variable, weil die Vollbild-Ansichten
     (Spielleitung, Gelände) ihre Karte auf calc(100dvh - var(--nav-h))
     rechnen — mit einer festen Zahl an zwei Stellen liefen sie beim
     nächsten Umbau der Leiste auseinander. */
  /* Der Streifen unter der Statusleiste gehört HIER hinein, nicht in die
     Seitenleisten darunter. Vorher trug ihn `.side` — die Kopfleiste lag
     damit in der installierten PWA unter der Uhr, und im Bedienfeld klaffte
     darunter ein leerer Streifen von der Höhe der Statusleiste (47 px auf
     einem iPhone 13). Weil `--nav-h` ihn jetzt enthält, rechnen die
     Vollbild-Ansichten ohne weitere Änderung richtig. */
  --nav-h: calc(52px + var(--safe-top));

  /* Höhe der UNTEREN Tab-Leiste. Am PC gibt es sie nicht, deshalb 0 — die
     Vollbild-Ansichten rechnen sie trotzdem ab, dann eben mit null. Ohne
     diese Variable müsste jede Seite den Handy-Fall einzeln kennen. */
  --tabbar-h: 0px;
}

/* Handy: die waagerechte Linkleiste passt nicht.
   Gemessen auf 390 px Breite mit sieben Punkten: 706 px Inhalt in 85 px
   sichtbarer Leiste — KEIN einziger Punkt war vollständig zu sehen. Deshalb
   unten eine Tab-Leiste im Daumenbereich. */
@media (max-width: 760px) {
  :root {
    /* Der Streifen um den Home-Balken MUSS hier hinein. Ohne ihn stimmt der
       Wert nur im Browser am PC — auf einem iPhone 13 lägen 34 px Karte
       unter der Leiste, und genau das fällt beim Testen am Rechner nie auf.
       Die Leiste selbst trägt deshalb keinen border-top, sondern einen
       Schatten: ein Rahmen zählte zur Höhe und wäre hier nicht enthalten. */
    --tabbar-h: calc(60px + var(--safe-bottom));
  }
}

/* Tageslicht-Modus: Glas aus, opak, maximaler Kontrast. */
:root[data-mode="day"] {
  --bg-deep: #f2f5f0;
  --bg-olive: #ffffff;
  --sage: #2f5327;
  --sage-dim: #4a7040;
  --text: #10170d;
  --muted: #4a5545;
  --glass: #ffffff;
  --glass-strong: #ffffff;
  --glass-border: rgba(16, 23, 13, 0.22);
  --blur: none;
  --hit: #b3261e;
  --medic: #8a5a00;
  --objective: #14508f;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.24);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: var(--bg-deep);
  color: var(--text);
  font: 400 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0 0 0.4em;
  font-weight: 600;
  letter-spacing: -0.015em;
}
h1 {
  font-size: 26px;
}
h2 {
  font-size: 19px;
}

.muted {
  color: var(--muted);
  font-size: 14px;
}
.center {
  text-align: center;
}
.row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.grow {
  flex: 1;
}
.hidden {
  display: none !important;
}

/* --- Glas-Flächen (nur statisch!) --- */

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}

.panel {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: var(--pad);
}

/* --- Bedienelemente --- */

button,
.btn {
  appearance: none;
  min-height: var(--tap);
  padding: 12px 18px;
  border-radius: var(--r-full);
  border: 1px solid var(--glass-border);
  background: var(--glass-strong);
  color: var(--text);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease),
    background var(--fast) var(--ease);
}
button:active,
.btn:active {
  transform: scale(0.97);
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
button:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--sage);
  color: #10170d;
  border-color: transparent;
  font-weight: 650;
}
:root[data-mode="day"] .btn-primary {
  color: #ffffff;
}
.btn-danger {
  background: var(--emergency);
  color: #fff;
  border-color: transparent;
  font-weight: 700;
}
.btn-ghost {
  background: transparent;
}
.btn-block {
  width: 100%;
}

input,
select,
textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  font: inherit;
}
/* Ein <select> wächst NICHT über seine min-height hinaus, wenn der Text nicht
   passt — er wird oben abgeschnitten. Gemessen an der Spielauswahl:
   44 px außen − 2 × 12 px Innenabstand − 2 × 1 px Rahmen = 18 px Innenraum,
   der Text braucht bei 16 px Schrift rund 19 px. Ein Pixel zu wenig, und auf
   dem iPhone fehlte die obere Kante der Großbuchstaben.
   Die Zeilenhöhe lässt sich hier nicht regeln: der Browser meldet für
   <select> immer `normal`, ganz gleich was dasteht. Also weniger Abstand. */
select {
  padding-top: 10px;
  padding-bottom: 10px;
}
:root[data-mode="day"] input,
:root[data-mode="day"] select,
:root[data-mode="day"] textarea {
  background: #fff;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--sage);
  outline-offset: 0;
  border-color: transparent;
}
label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 5px;
  font-weight: 550;
}

/* --- Status --- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--glass-border);
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.st-alive {
  background: var(--sage);
}
.st-hit {
  background: var(--hit);
}
.st-medic {
  background: var(--medic);
}
.st-respawn {
  background: var(--objective);
}
.st-out {
  background: var(--muted);
}

/* --- Meldungen --- */

.toast-wrap {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--safe-top) + 12px);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(560px, calc(100vw - 24px));
  pointer-events: none;
}
/* Meldungen erscheinen in der Feldansicht ÜBER der Karte. Deshalb dieselbe
   Behandlung wie alle Kartenaufsätze: deckend, fester Kontrast, kein Glas.
   Vorher war eine Meldung auf hellen OSM-Kacheln nicht zu lesen. */
.toast {
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--map-ui-bg-strong);
  color: var(--map-ui-text);
  border: 1px solid var(--map-ui-border);
  box-shadow: var(--shadow-lift);
  animation: toast-in var(--base) var(--ease);
  font-size: 15px;
}
.toast.warn {
  border-color: var(--medic);
}
.toast.danger {
  border-color: var(--emergency);
  background: var(--emergency);
  color: #fff;
  font-weight: 650;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Kopfleiste der PC-Ansichten (web/app/nav.js) --- */

.argus-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: var(--safe-top) 16px 0;
  height: var(--nav-h);
  flex: none;
  background: var(--bg-olive);
  border-bottom: 1px solid var(--glass-border);
}
.argus-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: 0.12em;
  font-size: 15px;
}
.argus-nav-eye {
  color: var(--sage);
  font-size: 17px;
}
.argus-nav-links {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
}
.argus-nav-links a {
  padding: 7px 13px;
  border-radius: var(--r-full);
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 550;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.argus-nav-links a:hover {
  color: var(--text);
  background: var(--glass);
}
.argus-nav-links a[aria-current="page"] {
  background: var(--glass-strong);
  color: var(--text);
  font-weight: 650;
}
.argus-nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.argus-nav-who {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.argus-nav button {
  min-height: 34px;
  padding: 5px 12px;
  font-size: 13px;
  background: transparent;
}
/* Der Name weicht früh: zwischen 700 und 900 px schob er sich sonst über den
   letzten Navigationspunkt. Gemessen an der Spielleitung bei 900 px Breite. */
@media (max-width: 900px) {
  .argus-nav-who {
    display: none;
  }
}

/* --- Handy: Titelzeile oben, Tab-Leiste unten --- */

.argus-nav-title {
  display: none;
  flex: 1;
  font-size: 15px;
  font-weight: 650;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Untere Tab-Leiste. Am PC gar nicht erst im Baum sichtbar. */
.argus-tabs {
  display: none;
}

@media (max-width: 760px) {
  /* Oben bleiben nur Wappen und Seitentitel. Die Punkte wandern nach unten,
     das Abmelden in das Blatt — es ist die Aktion, die man am seltensten
     will und am ehesten versehentlich trifft. */
  .argus-nav-links,
  .argus-nav button {
    display: none;
  }
  .argus-nav-title {
    display: block;
  }
  .argus-nav {
    gap: 10px;
    padding: 0 12px;
  }
  /* Das Wappen trägt oben rechts kein Gegenstück mehr — ohne Ausgleich säße
     der Titel sichtbar links der Mitte. */
  .argus-nav-brand span:not(.argus-nav-eye) {
    display: none;
  }

  /* Die scrollenden Seiten (Termine, Regeln, Mitglieder, Konto) tragen alle
     `.wrap`. Ohne diesen Abstand läge ihr letzter Eintrag unter der festen
     Leiste — erreichbar nur durch Überscrollen, und das federt zurück.
     `body .wrap` statt `.wrap`: die Seiten setzen in ihrem eigenen <style>
     ein `padding: 18px`, und das steht NACH dieser Datei. Gemessen mit der
     schwächeren Fassung: 76 px verdeckt. */
  body .wrap {
    padding-bottom: calc(var(--tabbar-h, 0px) + 18px);
  }

  .argus-tabs {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    /* DECKEND, nicht Glas: die Leiste liegt teils über Karten, und
       backdrop-filter kostet über drei Stunden Akku. */
    background: var(--bg-olive);
    /* Schatten statt Rahmen — siehe --tabbar-h. */
    box-shadow: 0 -1px 0 var(--glass-border);
    padding-bottom: var(--safe-bottom);
  }
  .argus-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* 60 px hoch, volle Spaltenbreite — deutlich über den 44 pt der HIG.
       Die App wird mit Handschuhen bedient. */
    min-height: 60px;
    padding: 6px 2px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .argus-tab svg {
    width: 23px;
    height: 23px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .argus-tab[aria-current="page"] {
    color: var(--sage);
  }
  .argus-tab:active {
    background: var(--glass);
  }
}

/* --- Umschalter Steuerung / Karte (Spielleitung, Gelände, Auswertung) ---
   Am Handy taugt es nicht, den Bildschirm zwischen Bedienfeld und Karte zu
   teilen: gemessen auf 390 x 844 blieben der Spielleitung 354 px, und die
   Karte darunter war ohne Gelände eine leere Fläche. Beide Hälften zu klein.
   Deshalb umschalten — die gewählte Seite bekommt die volle Höhe.
   Welche Flächen sich abwechseln, steht in der jeweiligen Seite; hier steht
   nur, wie der Umschalter aussieht. */
.panelswitch {
  display: none;
}
@media (max-width: 820px) {
  .panelswitch {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-olive);
    border-bottom: 1px solid var(--glass-border);
  }
  .panelswitch button {
    flex: 1;
    min-height: 44px; /* Handschuhe */
    border-radius: var(--r-full);
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
  }
  .panelswitch button[aria-selected="true"] {
    background: var(--glass-strong);
    color: var(--text);
  }
}

/* Blatt mit den übrigen Punkten. */
.argus-sheet-bg {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}
.argus-sheet-bg.auf {
  opacity: 1;
}
.argus-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 960;
  background: var(--bg-olive);
  border-top: 1px solid var(--glass-border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 8px 12px calc(var(--safe-bottom) + 12px);
  transform: translateY(100%);
  transition: transform var(--base) var(--ease);
  max-height: 82dvh;
  overflow: auto;
}
.argus-sheet.auf {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .argus-sheet,
  .argus-sheet-bg {
    transition: none;
  }
}
.argus-sheet-grip {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--glass-strong);
  margin: 6px auto 12px;
}
.argus-sheet-who {
  font-size: 12.5px;
  color: var(--muted);
  padding: 0 10px 10px;
}
.argus-sheet a,
.argus-sheet button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 550;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.argus-sheet a:active,
.argus-sheet button:active {
  background: var(--glass);
}
.argus-sheet svg {
  width: 21px;
  height: 21px;
  flex: none;
  stroke: var(--sage);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.argus-sheet .trenner {
  height: 1px;
  background: var(--glass-border);
  margin: 8px 10px;
}
.argus-sheet .weg {
  color: var(--hit);
}
.argus-sheet .weg svg {
  stroke: var(--hit);
}

/* --- Karte --- */

.leaflet-container {
  background: var(--bg-deep);
  font: inherit;
}
/* Zuschreibung. Sie ist Bedingung der Kachel-Nutzung, kein Dekor: die
   OSM-Policy verlangt sie deutlich sichtbar, nicht versteckt oder
   weggeblendet. Deshalb fester dunkler Grund statt halbdurchsichtig — auf den
   hellen OSM-Kacheln war die Schrift vorher kaum zu lesen — und 11 px statt
   10 px. Beide Modi behalten denselben Grund, weil unter dem Kasten die
   Kacheln liegen und nicht die App-Fläche. */
.leaflet-control-attribution {
  background: rgba(18, 25, 15, 0.82) !important;
  color: #dfe8db !important;
  font-size: 11px !important;
  padding: 2px 7px !important;
  border-radius: 6px 0 0 0 !important;
}
.leaflet-control-attribution a {
  color: #b7d0ad !important;
  text-decoration: underline !important;
}

/* --- Hinweis, wenn der Kartenuntergrund nicht lädt (web/app/map.js) --- */
.map-tilewarn {
  position: absolute;
  z-index: 500;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  max-width: min(520px, calc(100% - 24px));
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: rgba(18, 25, 15, 0.94);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--medic);
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
:root[data-mode="day"] .map-tilewarn {
  background: rgba(255, 255, 255, 0.97);
}
.map-tilewarn code {
  font-size: 12px;
  background: rgba(0, 0, 0, 0.3);
  padding: 1px 5px;
  border-radius: 4px;
  word-break: break-all;
}
:root[data-mode="day"] .map-tilewarn code {
  background: rgba(0, 0, 0, 0.08);
}

/* --- Umschalter für den Kartenuntergrund (Karte / Luftbild) --- */
.leaflet-control-layers {
  background: var(--bg-olive) !important;
  color: var(--text) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow) !important;
  padding: 4px !important;
}
.leaflet-control-layers-expanded {
  padding: 8px 12px 8px 8px !important;
}
.leaflet-control-layers label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  /* Mit Handschuhen bedienbar — dieselbe Untergrenze wie überall sonst. */
  min-height: 34px;
  margin: 0 !important;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
}
.leaflet-control-layers label > div,
.leaflet-control-layers label > span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.leaflet-control-layers input[type="radio"],
.leaflet-control-layers input[type="checkbox"] {
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0 !important;
  accent-color: var(--sage);
  flex: none;
}
.leaflet-control-layers-toggle {
  background-color: var(--bg-olive) !important;
  border-radius: var(--r-sm) !important;
}
.leaflet-control-layers-separator {
  border-top-color: var(--glass-border) !important;
}
.map-tilewarn a {
  color: var(--sage);
  word-break: break-all;
}
.map-tilewarn .tw-hint {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}