@import url('../gemeinsam.css');

/* Aufsichtspult — Gestaltung.

   Die Karte ist die Hauptsache und liegt deshalb im ganzen Fenster; alles
   andere schwebt als Tafel darüber. Farben, Radien und Schatten stehen einmal
   oben als Marken, damit eine Änderung nicht an dreissig Stellen nachgezogen
   werden muss. Der Akzent ist das Rot aus dem IJA-Logo — dieselbe Zahl wie in
   der App. */
/* Das Pult füllt genau das Fenster: Die Karte soll bis an den Rand gehen und
   die Seite als Ganzes nicht scrollen. */
body {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- Kopfleiste ---------- */

.kopf {
  display: flex;
  align-items: center;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--glas);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linie-zart);
  z-index: 500;
}

.marke { display: flex; align-items: center; gap: 11px; min-width: 0; }
.taube {
  font-size: 20px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--akzent) 16%, transparent);
  flex: none;
}
.kopf h1 {
  font-size: 16px;
  margin: 0;
  letter-spacing: -.01em;
}
.rallyename {
  margin: 1px 0 0;
  font-size: 12.5px;
  color: var(--text-leise);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 46vw;
}

/* Die Kennzahlen stehen mittig und tragen die Übersicht: Wie viele Rallyes
   laufen, wie viele Gruppen, wie viele Personen — und ob jemand abgekommen ist.
   Vorher stand das alles in einer Textzeile und war beim Überfliegen nicht zu
   fassen. */
.kennzahlen {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
.kennzahl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 4px 10px;
  border-radius: var(--r-klein);
  background: var(--flaeche-leise);
}
.kennzahl-wert {
  font-size: 16px; font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.kennzahl-name {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-leise);
}
.kennzahl.mahnt {
  background: color-mix(in srgb, var(--warnung) 16%, transparent);
}
.kennzahl.mahnt .kennzahl-wert,
.kennzahl.mahnt .kennzahl-name { color: var(--warnung); }

/* `margin-left: auto` an beiden: Passt alles in eine Zeile, stehen die
   Kennzahlen mittig und die Knöpfe rechts; bricht die Zeile um, rutschen die
   Knöpfe trotzdem nach rechts statt an den linken Rand. */
a.knopf { text-decoration: none; display: inline-block; }
.kopf-rechts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.fahne {
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--akzent) 15%, transparent);
  color: var(--akzent-satt);
  font-weight: 550;
  /* Ohne das wird aus der Marke in schmalen Fenstern ein hoher Klumpen mit
     umgebrochenem Text. */
  white-space: nowrap;
  flex: none;
}

/* ---------- Karte und Tafel ---------- */

main { flex: 1; position: relative; min-height: 0; }
.karte-bereich { position: absolute; inset: 0; }
#karte { position: absolute; inset: 0; }
.karte-hinweis {
  position: absolute; inset: 20px auto auto 20px;
  background: var(--glas);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 12px 16px; border-radius: var(--r);
  border: 1px solid var(--linie-zart);
  box-shadow: var(--schatten);
  max-width: 340px;
  z-index: 600;
}

/* Die Seitenleiste schwebt über der Karte, statt einen Streifen abzuschneiden:
   So bleibt die Karte durchgehend, auch unter der Tafel. */
.seitenleiste {
  position: absolute;
  top: 14px; right: 14px; bottom: 14px;
  width: 372px;
  padding: 14px 14px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--glas);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--linie-zart);
  border-radius: var(--r-gross);
  box-shadow: var(--schatten-hoch);
  z-index: 700;
}
.leiste-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  position: sticky; top: -14px;
  margin: -14px -14px 4px;
  padding: 14px 14px 8px;
  background: linear-gradient(var(--glas) 72%, transparent);
  z-index: 2;
}
.seitenleiste h2 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-leise); margin: 18px 0 8px; font-weight: 600;
}
.leiste-kopf h2 { margin: 0; }

/* ---------- Gruppen ---------- */

.rallye-titel {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--akzent-satt); margin: 18px 0 8px; font-weight: 650;
}

.gruppe {
  position: relative;
  border: 1px solid var(--linie-zart);
  border-radius: var(--r);
  background: var(--flaeche);
  padding: 11px 13px 9px 15px;
  margin-bottom: 9px;
  box-shadow: var(--schatten);
  overflow: hidden;
}
/* Der Farbstreifen links sagt auf einen Blick, welche Blase auf der Karte
   gemeint ist — die Farbe kommt aus dem Kern und wird als Marke gesetzt. */
.gruppe::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gruppenfarbe, transparent);
}
.gruppe.ohne { border-style: dashed; box-shadow: none; background: transparent; }

.gruppe-kopf { display: flex; align-items: center; gap: 9px; }
.gruppe-name { font-weight: 620; flex: 1; cursor: pointer; letter-spacing: -.01em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gruppe-name:hover { color: var(--akzent); }
.gruppe-name.leise { color: var(--text-leise); cursor: default; font-weight: 550; }
.gruppe-zahl {
  font-size: 11.5px; color: var(--text-leise); font-variant-numeric: tabular-nums;
  background: var(--flaeche-leise); border-radius: 999px; padding: 2px 8px; flex: none;
}

.balken {
  height: 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--gruppenfarbe, var(--linie)) 16%, var(--flaeche-leise));
  margin: 9px 0 5px; overflow: hidden;
}
.balken > div { height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.2,.7,.3,1); }
.balken-text { font-size: 12px; color: var(--text-leise); font-variant-numeric: tabular-nums; }

/* Warnzeichen an einer Gruppe, aus der sich jemand entfernt hat. */
.warnzeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--warnung); color: #fff;
  font-size: 12px; font-weight: 700; cursor: help; flex: none;
  animation: pochen 2.4s ease-in-out infinite;
}
@keyframes pochen {
  0%, 88%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warnung) 45%, transparent); }
  94% { box-shadow: 0 0 0 5px transparent; }
}

/* ---------- Personen ---------- */

.person {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 0;
  border-top: 1px solid var(--linie-zart);
  font-size: 14px;
}
.person:first-of-type { border-top: none; }

/* Das Zeichen einer Gruppe: die Flagge ihres Landes, sonst eine Taube. In einer
   Liste aus zehn Namen findet das Auge die Zeile darüber schneller wieder als
   über den Text allein. */
.person-zeichen, .gruppe-zeichen {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex: none;
  cursor: help;
}
.gruppe-zeichen { width: 26px; height: 26px; }
/* Taube in Weiss auf der Gruppenfarbe. */
.person-zeichen.taube, .gruppe-zeichen.taube {
  background: var(--gruppenfarbe, var(--text-leise));
}
.taubenbild { width: 74%; height: 74%; fill: currentColor; }
/* Die Flagge bringt ihre eigenen Farben mit und braucht einen ruhigen Grund;
   die Gruppenfarbe steht deshalb als Ring aussen herum. */
.person-zeichen.flagge, .gruppe-zeichen.flagge {
  background: var(--flaeche-leise);
  box-shadow: inset 0 0 0 1.5px var(--gruppenfarbe, var(--linie));
  font-size: 12px;
  line-height: 1;
}
.gruppe-zeichen.flagge { font-size: 13px; }
/* Der Name darf schrumpfen und am Ende Punkte bekommen — sonst schiebt ein
   langer Name die Knöpfe aus der Leiste. `min-width: 0` ist dafür nötig, sonst
   weigert sich ein Flex-Element zu schrumpfen. */
.person-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; cursor: pointer;
}
.person-name:hover { color: var(--akzent); }
.person-stand {
  font-size: 11.5px; color: var(--text-leise); font-variant-numeric: tabular-nums;
  flex: none;
}
.person.veraltet .person-name { color: var(--text-leise); }
.person.veraltet .person-zeichen { opacity: .5; }
.marke-ausreisser { color: var(--warnung); font-size: 12px; }

.person .knopf.klein { padding: 2px 7px; line-height: 1.1; flex: none; }
select.zuweisen {
  font: inherit; font-size: 12px; padding: 3px 6px; max-width: 108px; flex: none;
  border-radius: var(--r-klein); border: 1px solid var(--linie);
  background: var(--flaeche); color: var(--text);
}

/* Auf Geräten mit Zeiger halten sich die Werkzeuge zurück, bis die Zeile
   gemeint ist. Ohne Zeiger — Tablet der Aufsicht — stehen sie immer da. */
@media (hover: hover) {
  /* Nicht nur unsichtbar, sondern auch schmal: Ein blindes Auswahlfeld von
     hundert Punkten Breite schnitt sonst jeden Namen nach vier Zeichen ab. */
  .person .knopf.klein, .person select.zuweisen {
    opacity: 0;
    max-width: 0;
    padding-left: 0; padding-right: 0;
    border-width: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity var(--takt), max-width var(--takt);
  }
  .person:hover .knopf.klein, .person:focus-within .knopf.klein {
    opacity: 1; max-width: 40px; padding: 2px 7px; border-width: 1px; pointer-events: auto;
  }
  .person:hover select.zuweisen, .person:focus-within select.zuweisen {
    opacity: 1; max-width: 108px; padding: 3px 6px; border-width: 1px; pointer-events: auto;
  }
}

.akkuzeichen, .auswertungszeichen { cursor: help; font-size: 13px; flex: none; }
.auswertungen { margin: -2px 0 8px; color: var(--akzent-satt); }

/* ---------- Antworten ---------- */

.antwort { border-top: 1px solid var(--linie-zart); padding: 9px 0; font-size: 13px; }
.antwort:first-child { border-top: none; }
.antwort-kopf { display: flex; gap: 7px; align-items: baseline; }
.antwort-nummer { color: var(--text-leise); font-variant-numeric: tabular-nums; }
.antwort-frage { flex: 1; }
.antwort-wert { color: var(--text-leise); }
.richtig { color: var(--gut); }
.falsch { color: var(--falsch); }
.erledigt { color: var(--erledigt); }
.hinweis-zahl { color: var(--warnung); font-size: 12px; }

/* ---------- Blasen auf der Karte ---------- */

/* Die Schilder sollen die Karte nicht blockieren: Ziehen und Zoomen muss auch
   funktionieren, wenn der Zeiger über einer Beschriftung liegt.
   `width: max-content` statt der festen Kastengrösse von Leaflet: Sonst ist der
   Kasten 34 px breit, der Name ragt rechts heraus und sein Grund hört nach
   34 px auf. Die Verschiebung setzt den **Kreis** auf den Punkt, nicht den
   ganzen Stapel — sonst läge der Kreis über dem Ort, an dem die Gruppe wirklich
   steht. */
.blase {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: 220px;
  transform: translate(-50%, -17px);
  text-align: center;
  pointer-events: none;
}
.blase-kreis {
  pointer-events: auto;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  margin: 0 auto;
  transition: transform var(--takt);
}
.blase-kreis:hover { transform: scale(1.08); }
.blase-schild {
  margin-top: 4px;
  background: var(--glas);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  border: 1px solid var(--linie-zart);
  border-radius: 999px;
  padding: 2px 8px; font-size: 11px; font-weight: 550;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  /* Lange Namen dürfen umbrechen statt aus dem Grund zu laufen. */
  overflow-wrap: anywhere;
  max-width: 220px;
}
.blase-balken {
  width: 100%; height: 3px; border-radius: 999px;
  background: rgba(127, 127, 127, .35); margin-top: 3px; overflow: hidden;
}
.blase-balken > div { height: 100%; border-radius: 999px; }
.blase.ausreisser .blase-kreis { border-color: var(--warnung); border-width: 3px; }
/* Ein Punkt, der schweigt, wird blass — sonst sieht ein alter Standort aus wie
   ein aktueller. */
.blase.still { opacity: .55; }
.blase.still .blase-kreis { border-style: dashed; }
/* Herausgezoomt bleibt nur der Kreis; der Name steht dann im Hinweisfähnchen. */
.blase.nur-kreis .blase-schild { display: none; }
.blase.nur-kreis { pointer-events: auto; cursor: help; }

/* Start- und Zielzeichen der geplanten Routen. */
.routenzeichen {
  transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--flaeche); border: 2px solid; font-size: 12px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

/* Leaflet bringt eigene Kästen mit — die sollen aussehen wie der Rest. */
.leaflet-control-zoom a, .leaflet-control-attribution {
  background: var(--glas) !important;
  color: var(--text) !important;
  border-color: var(--linie-zart) !important;
}
.leaflet-control-zoom a { border-radius: 8px !important; }
.leaflet-touch .leaflet-bar { border: none !important; box-shadow: var(--schatten); }

/* ---------- Fenster und Meldungen ---------- */

.filter-block { position: relative; }
.filter-kasten {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 1000;
  background: var(--flaeche); border: 1px solid var(--linie-zart);
  border-radius: var(--r); padding: 8px; min-width: 250px;
  box-shadow: var(--schatten-hoch);
}
.filter-zeile { display: flex; gap: 9px; align-items: center; padding: 6px 8px; font-size: 13px;
  cursor: pointer; border-radius: var(--r-klein); }
.filter-zeile:hover { background: var(--flaeche-leise); }

/* Kurze Rückmeldung nach dem Senden. */
.meldung {
  position: fixed; left: 50%; top: 74px; transform: translateX(-50%); z-index: 2000;
  background: var(--glas);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--linie-zart); border-radius: 999px;
  padding: 9px 18px; font-size: 13px; font-weight: 550;
  box-shadow: var(--schatten-hoch);
  animation: einschweben 200ms cubic-bezier(.2, .7, .3, 1);
}
@keyframes einschweben {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Schmale Fenster ---------- */

@media (max-width: 900px) {
  .kennzahlen { order: 3; width: 100%; margin-left: 0; }
  .rallyename { max-width: 60vw; }
  .seitenleiste {
    position: static;
    width: auto;
    max-height: 46vh;
    margin: 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--linie-zart);
    box-shadow: none;
  }
  main { display: flex; flex-direction: column; }
  .karte-bereich { position: relative; flex: 1; min-height: 46vh; }
}