/* Dr.Brief - was ueber das gemeinsame Designsystem (style.css) hinausgeht.
 *
 * Uebernommen aus ParkWeg und um alles gekuerzt, was dort an Landkarte und
 * Messlatte haengt. Was bleibt, ist das, was jedes Werkzeug des Hauses
 * braucht: Ablageflaeche, Betriebslage, Fortschritt, Zahnradmenue, Marke.
 */


:root[data-thema="hell"] {
  --bg:#F4F7FA;
  --surface:#FFFFFF;
  --ink:#17262B;
  --ink-soft:#5A6B70;
  --line:#DFE6EC;

  --blue:#003E77;
  --blue-deep:#002C55;
  --blue-tint:#E4EDF6;

  --yellow:#FFD405;
  --yellow-ink:#8F7400;
  --yellow-tint:#FFF7D1;

  --green:#4DAF45;
  --green-ink:#2F7A29;
  --green-tint:#E7F5E5;

  --red:#B2452F;
  --red-tint:#F9E9E5;

  --lightblue:#70CAF3;
  --purple:#A862A4;
  --gray-ink:#5A6B70;
  --gray-tint:#ECEFF0;

  --eingabe-bg:#FFFFFF;
  --auf-akzent:#FFFFFF;
  --schatten:rgba(23,38,43,.14);

  --logo-navy:#003E77;
  --logo-papier:#FFFFFF;

  --karten-filter: none;
  --karten-grund:#EEF2F5;
  --route:#003E77;
  --route-rand:#FFFFFF;

  --karte-siedlung:#E3E8EC;
  --karte-wasser:#BFD8E8;
  --karte-bahn:#B4BCC4;
  --karte-strasse-klein:#D6DCE2;
  --karte-strasse-mittel:#BCC5CE;
  --karte-strasse-gross:#9AA6B2;
}

/* =====================================================================
   Eingabefelder

   style.css setzt background:#fff hart auf input, select und textarea. Auf
   dunklem Grund stand die Schrift damit weiss auf weiss -- in Auswahlfeldern
   war schlicht nichts zu lesen.

   color-scheme ist der zweite Teil und wichtiger, als er aussieht: Ohne diese
   Angabe zeichnet der Browser die Aufklappliste eines <select>, die
   Bildlaufleisten und die Zahlenpfeile weiterhin im hellen Systemschema --
   Teile, an die kein Stylesheet herankommt.
   ===================================================================== */

/* =====================================================================
   Seitenwechsel

   Jede Ansicht ist eine eigene Seite -- das ist Absicht: Es gibt keinen
   Anwendungszustand im Browser, der beim Wechsel verlorengehen koennte, und
   jede Adresse laesst sich weitergeben und neu laden. Der Preis war ein harter
   Schnitt bei jedem Klick.

   Zwei Massnahmen dagegen, beide ohne eine Zeile JavaScript:

   1. Der Hintergrund steht auf <html> und wird zusaetzlich vom Schnipsel im
      <head> gesetzt, bevor ueberhaupt ein Stylesheet gelesen ist. Das
      Aufblitzen war der eigene weisse Grund des Browsers zwischen zwei
      Dokumenten.
   2. Die View-Transition-API blendet den Wechsel weich ueber. Browser, die sie
      nicht kennen, laden schlicht wie bisher -- es faellt nichts aus.
   ===================================================================== */

@view-transition { navigation: auto; }

html { background: var(--bg); }

::view-transition-old(root) { animation: ausblenden .12s ease both; }
::view-transition-new(root) { animation: einblenden .16s ease both; }

@keyframes ausblenden { to { opacity: 0; } }
@keyframes einblenden { from { opacity: 0; } }

/* Die Kopfzeile bleibt stehen, statt mitzublenden. Sie ist auf allen Seiten
   dieselbe; sie mitzuanimieren liesse sie flackern, obwohl sich nichts an ihr
   aendert. */
header { view-transition-name: kopfzeile; }
::view-transition-group(kopfzeile) { animation-duration: 0s; }

/* Wer Bewegung im Betriebssystem abgestellt hat, bekommt keine. Das ist keine
   Hoeflichkeit -- ueberblendende Flaechen loesen bei manchen Menschen
   Schwindel aus. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

:root { color-scheme: dark; }
:root[data-thema="hell"] { color-scheme: light; }

input, select, textarea { background: var(--eingabe-bg); }
option { background: var(--surface); color: var(--ink); }
::placeholder { color: var(--ink-soft); opacity: 1; }

.dialog-huelle { z-index: 400; }

/* --- Logo --- */
.logo { display:flex; align-items:center; gap:10px; }
.logo-zeichen { height:38px; width:38px; flex:0 0 auto; }
.logo-wort {
  font-family: var(--font-display, Arial, Helvetica, sans-serif);
  font-size:19px; font-weight:600; letter-spacing:1.4px;
  color: var(--logo-navy); white-space:nowrap;
}
.logo[data-form="lockup"] { flex-direction:column; gap:14px; }
.logo[data-form="lockup"] .logo-zeichen { height:84px; width:84px; }
.logo[data-form="lockup"] .logo-wort { font-size:30px; letter-spacing:3px; }
.logo-unterzeile {
  font-size:11.5px; letter-spacing:2.2px; color:var(--ink-soft);
  text-transform:uppercase; text-align:center;
}

.thema-knopf {
  border:1px solid var(--line); background:transparent; color:var(--ink-soft);
  border-radius:8px; width:32px; height:32px; line-height:1; font-size:15px; padding:0;
}
.thema-knopf:hover { color:var(--blue); border-color:var(--blue); }

/* Zahnrad mit Klappmenue. Dahinter liegt, was zur Verwaltung gehoert und nicht
   zur taeglichen Arbeit -- wie in den Geschwisterwerkzeugen. */
.zahnrad-huelle { position:relative; display:flex; }
.kopfmenue {
  position:absolute; top:38px; right:0; z-index:500; min-width:180px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 6px 24px var(--schatten); padding:6px; display:flex;
  flex-direction:column; gap:2px;
}
.kopfmenue a {
  display:block; padding:8px 12px; border-radius:7px; font-size:13.5px;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.kopfmenue a:hover { background:var(--blue-tint); color:var(--blue); }
.kopfmenue a.aktiv { color:var(--blue); font-weight:600; }

/* =====================================================================
   Betriebslage

   Steht ganz oben auf der Startseite. Ein fehlender Adressindex oder ein
   toter Routing-Dienst soll auffallen, BEVOR jemand einen Lauf startet und
   sich hinterher ueber 2.000 Fehlermeldungen wundert.
   ===================================================================== */

/* Eine Zeile mit dem, was das Ergebnis bestimmt. Alles Weitere einen Klick
   entfernt auf der Grundlagenseite. */
.profil-zeile {
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  flex-wrap:wrap; font-size:13px; color:var(--ink-soft); margin:0 0 26px;
}

.lage { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px; }
.lage-feld {
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; display:flex; gap:11px; align-items:flex-start;
}
.lage-feld .ampel { margin-top:5px; }
.lage-name { font-size:11.5px; letter-spacing:.7px; text-transform:uppercase;
             color:var(--ink-soft); margin-bottom:3px; }
.lage-wert { font-size:13.5px; font-weight:600; line-height:1.4; }
.lage-feld.stoerung { border-color:var(--red); background:var(--red-tint); }

/* =====================================================================
   Ablage fuer den Upload
   ===================================================================== */

.ablage {
  border:2px dashed var(--line); border-radius:12px; padding:34px 24px;
  text-align:center; background:var(--surface); transition:border-color .15s, background .15s;
}
.ablage.bereit { border-color:var(--blue); background:var(--blue-tint); }
.ablage h3 { margin:0 0 6px; font-size:16px; }
.ablage p { color:var(--ink-soft); font-size:13px; margin:0 0 16px; }
.ablage input[type=file] { display:none; }

/* =====================================================================
   Fortschritt eines Laufs
   ===================================================================== */

.fortschritt-schiene {
  height:9px; background:var(--gray-tint); border-radius:5px; overflow:hidden;
  margin:12px 0 8px;
}
.fortschritt-balken {
  height:100%; background:var(--blue); border-radius:5px; width:0;
  transition:width .4s ease;
}
.fortschritt-zeile { display:flex; justify-content:space-between; gap:12px;
                     font-size:13px; color:var(--ink-soft); }

/* =====================================================================
   Statusschilder in der Ergebnisliste
   ===================================================================== */

.schild {
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px;
  font-weight:700; white-space:nowrap;
}
.schild.berechtigt { background:var(--green-tint); color:var(--green-ink); }
.schild.grenzfall { background:var(--yellow-tint); color:var(--yellow-ink); }
.schild.nicht_berechtigt { background:var(--gray-tint); color:var(--gray-ink); }
.schild.nacharbeit { background:var(--red-tint); color:var(--red); }
.schild.fehler { background:var(--red-tint); color:var(--red); }
.schild.offen { background:var(--blue-tint); color:var(--blue); }
.schild.entschieden { border:1px dashed currentColor; }

/* Genauigkeitsstufe. Klein und zurueckhaltend -- aber immer sichtbar, denn
   eine Zahl ohne ihre Genauigkeit ist in diesem Werkzeug eine Behauptung. */
.genauigkeit { font-size:11.5px; color:var(--ink-soft); white-space:nowrap; }
.genauigkeit.grob { color:var(--yellow-ink); font-weight:600; }
@media (max-width: 980px) { .nacharbeit-raster { grid-template-columns:1fr; } }
@media (max-width: 640px) { .grundlage-liste { grid-template-columns:1fr; gap:2px 0; }
                            .grundlage-liste dd { margin-bottom:10px; } }

/* ---------- Dr.Brief: Durchgang und Vorlagen ---------- */

/* Der Prompt ist das Ergebnis dieser Anwendung, nicht eine Nebenangabe. Er
   bekommt deshalb Platz und eine Schrift mit fester Breite - wer prueft, ob
   eine Zeile eingerueckt ist oder ein Spiegelstrich steht, braucht das. */
.prompt-feld{width:100%;min-height:180px;font-family:ui-monospace,"Cascadia Mono",
  Consolas,monospace;font-size:12.5px;line-height:1.6;white-space:pre;
  overflow-wrap:normal;overflow-x:auto;resize:vertical}

.gruppe-feld{width:70px;padding:4px 8px;font-size:12.5px}

/* Was nicht sicher belegt ist, wird als solches gezeigt und nicht versteckt.
   Kein Rot: Es ist kein Fehler, sondern eine schwaechere Grundlage. */
.unsicher{color:var(--yellow-ink)}
:root[data-thema="hell"] .unsicher{color:var(--yellow-ink)}

/* Ablageflaeche waehrend des Ziehens. */
.ablage.darueber{border-color:var(--blue);background:var(--blue-tint)}

/* ---------- Einstellungsfenster ----------
 *
 * Uebernommen aus MD-Assist. Hinter dem Zahnrad liegt ein ueberlagerndes
 * Fenster mit Seitenleiste; die Hauptnavigation bleibt der taeglichen Arbeit
 * vorbehalten. Die Gruppen sind zugeklappt bis auf die, in der man steht --
 * ein Menue, das hoeher ist als das Fenster, laesst einen im Menue scrollen,
 * um an die Einstellungen zu kommen.
 */
.verwaltung-kasten { width: min(1180px, 100%); height: min(88vh, 900px); }
.verwaltung-layout {
  flex: 1;
  min-height: 0;
  align-items: stretch;
  margin: 0;
  padding: 16px 20px 20px;
  gap: 20px;
}
.verwaltung-layout .mnav { position: static; overflow-y: auto; width: 220px; }
.verwaltung-layout .mnav-body { overflow-y: auto; padding-right: 4px; }

/* Ueberschrift ueber einer Gruppe von Unterpunkten. Sie muss sich deutlich
   von den Eintraegen unterscheiden: Beide in derselben gedaempften Farbe zu
   setzen, liesse offen, was sich anklicken laesst. */
.mnav-gruppe {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-soft) 70%, transparent);
  padding: 8px 12px 5px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}
.mnav-gruppe:first-child { margin-top: 0; border-top: none; padding-top: 2px; }
.mnav-gruppe::before { content: "\25b8"; font-size: 9px; color: var(--ink-soft);
  transition: transform .15s }
.mnav-gruppe.offen::before { transform: rotate(90deg) }
.mnav-gruppe > span:first-of-type { flex: 1 }
.mnav-zahl { font-size: 11px; color: var(--ink-soft); font-weight: 400 }
.mnav-eintraege { display: flex; flex-direction: column }

/* Eintraege lesen sich als anklickbar: normale Textfarbe statt gedaempft. */
.verwaltung-layout .mnav button { color: var(--ink) }
.verwaltung-layout .mnav button:hover { background: var(--blue-tint); color: var(--blue) }
.verwaltung-layout .mnav button.active { color: var(--blue); background: var(--blue-tint) }

.verwaltung-layout .karte { margin-bottom: 16px }
.verwaltung-layout .karte:last-child { margin-bottom: 0 }

/* Das Protokoll ist breiter als das Fenster -- es scrollt in sich, statt das
   ganze Fenster in die Breite zu ziehen. */
.protokoll-rahmen { overflow-x: auto; margin-top: 10px }
.protokoll-rahmen .datentabelle { min-width: 820px }

@media (max-width: 820px) {
  .verwaltung-kasten { height: 92vh }
  .verwaltung-layout { flex-direction: column; gap: 10px }
  .verwaltung-layout .mnav {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 0 0 8px;
  }
  .verwaltung-layout .mnav button { width: auto; white-space: nowrap }
  .mnav-gruppe { display: none }
}
