/* Schichtuebergabe - Gestaltung zu public/uebergabe.js.

   Arbeitet ausschliesslich mit den Werten aus styles.css: Farben ueber var,
   Schriftgroessen ueber --fs-xs..--fs-xl, Abstaende in 4/8/12/16px. Keine
   neuen Farben, keine neuen Groessen, kein Schatten. Dunkelmodus kommt damit
   von selbst - die Marken sitzen alle in :root[data-theme="dark"].

   ======================================================================
   DIE VIER ENTSCHEIDUNGEN, DIE HIER WIRKLICH ETWAS AENDERN

   1. 44 PIXEL, AUSNAHMSLOS.
      Reiter, Zeilen, Felder, Knoepfe. Der Alltag dieser Ansicht ist nachts,
      unterwegs, mit Handschuhen, oft im Regen vor einem Tor. Ein Ziel, das
      man zweimal treffen muss, ist hier kein Schoenheitsfehler, sondern der
      Grund, warum jemand das Telefon wieder einsteckt.

   2. DER BESTAETIGUNGSKNOPF KLEBT NICHT.
      Er ist bewusst NICHT position:sticky und steht nicht in einer Leiste am
      unteren Rand. Ein Knopf, der immer sichtbar mitfaehrt, laesst sich
      druecken, ohne dass ein einziger Absatz des Textes am Auge vorbei war -
      und genau das ist der Haken unter der eingeklappten Liste, den der
      Server mit dem Auslieferungsvermerk verhindert. Die Gestaltung darf
      nicht wieder aufmachen, was die Route zugesperrt hat. Also: ganz unten,
      hinter dem letzten Absatz, erreichbar nur durch Scrollen.

   3. DER UEBERGABETEXT SIEHT AUS WIE EIN DOKUMENT, NICHT WIE BEDIENUNG.
      Eigene Flaeche, eigener Rahmen, ruhige Schrift, grosszuegige Zeilen.
      Er ist das Beweismittel; alles andere auf dem Schirm ist Zubehoer und
      ordnet sich unter.

   4. FARBE TRAEGT NUR, WAS EINE HANDLUNG AUSLOEST.
      Der Status steht als WORT da, wie in vorgaenge.css - kein Farbklecks an
      jeder Zeile. Farbe bekommen genau zwei Dinge: die Marke "wartet auf
      dich" und die Meldekaesten, die sagen, dass etwas NICHT gewusst wird.
      Eine Liste, die immer bunt ist, sieht niemand mehr an.

   Geladen in index.html nach styles.css. */

.ug {
  display: flex;
  flex-direction: column;
  gap: var(--luft-block);
  min-width: 0;
}

/* ============================================================== Reiter */

/* Vier Reiter passen auf einem schmalen Handy nicht nebeneinander, ohne dass
   die Woerter brechen. Statt sie zu kuerzen (aus "Für mich" wird sonst "Für"
   und damit sinnlos) darf die Leiste seitlich rollen. */
.ug-reiter {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}

.ug-reiter::-webkit-scrollbar { display: none; }

.ug-reiter-knopf {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.ug-reiter-knopf:hover { color: var(--text-primary); }

.ug-reiter-knopf.an {
  color: var(--accent-fg);
  border-bottom-color: var(--accent-fg);
}

/* ====================================================== Meldekaesten */

/* Diese Kaesten sind die Stelle, an der die Ansicht zugibt, was sie NICHT
   weiss. Sie duerfen darum nicht wie Dekor aussehen und nicht wie eine
   Fusszeile: linker Balken in der Farbe der Lage, damit sie sich vom
   Fliesstext abheben, ohne zu schreien. */
.ug-kasten {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ug-kasten + .ug-kasten { margin-top: var(--luft-eng); }

.ug-kasten-titel {
  font-size: var(--fs-md);
  color: var(--text-primary);
}

.ug-kasten-satz {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 68ch;
}

/* Ausgefallen: hier fehlt eine Auskunft, auf die sich jemand verlassen
   wuerde. Der kraeftigste Ton, den diese Datei kennt. */
.ug-fehler { border-left-color: var(--critical); }
/* Unvollstaendig: es geht weiter, aber nicht mit allem. */
.ug-warnung { border-left-color: var(--warning); }
/* Sachlage ohne Handlungsbedarf - etwa "ist bereits bestaetigt". */
.ug-ruhig { border-left-color: var(--border-strong); }

.ug-leiste:empty { display: none; }

/* Die Buehne traegt Liste oder Formular. min-width: 0 ist hier kein Beiwerk:
   Ohne die Angabe waechst ein Flex-Kind an seinem laengsten unteilbaren
   Inhalt auf - und der laengste Inhalt dieser Ansicht ist eine Pruefsumme aus
   64 Zeichen ohne Leerstelle. Die schoebe auf dem Handy die ganze Seite
   seitlich hinaus. */
.ug-buehne { min-width: 0; }

/* ================================================================ Liste */

.ug-karte {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--luft-eng);
  min-width: 0;
}

.ug-zeile {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
  overflow: hidden;
}

.ug-zeile.ist-offen { border-color: var(--border-strong); }

.ug-zeile-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ug-zeile-kopf:hover { background: var(--surface-sunken); }

.ug-zeile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.ug-zeile-titel {
  font-size: var(--fs-lg);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die zweite Zeile sagt, WARUM die Zeile hier steht: von wem, an wen, wann.
   Sie darf umbrechen - auf einem schmalen Schirm ist "von" wichtiger als
   eine gerade Kante. */
.ug-zeile-unter {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.45;
}

.ug-status {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Bestaetigt ist der einzige Status mit eigener Tinte, und es ist die ruhige:
   Er ist das Ziel des Vorgangs, keine Warnung. Abgegeben und zurueckgezogen
   bleiben grau - sie sind Zwischenstaende. */
.ug-status.ist-bestaetigt { color: var(--good-ink); }

/* Das einzige farbige Zeichen in der Liste. Es steht fuer eine Handlung, die
   dieses Konto ausfuehren kann - und nur dafuer. */
.ug-marke {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent-fg);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Auf dem Handy hat die Kopfzeile keinen Platz fuer vier Dinge nebeneinander.
   Statt zu kuerzen bricht sie um: Status und Marke rutschen unter den Text. */
@media (max-width: 560px) {
  .ug-zeile-kopf { flex-wrap: wrap; gap: 8px; }
  .ug-zeile-text { flex: 1 0 100%; }
}

/* =============================================================== Detail */

.ug-detail {
  border-top: 1px solid var(--border);
  padding: var(--luft-block) 12px;
  display: flex;
  flex-direction: column;
  gap: var(--luft-block);
  min-width: 0;
}

.ug-laedt {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.ug-h {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.ug-h4 {
  margin: var(--luft-liste) 0 4px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-secondary);
}

.ug-satz {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.55;
  max-width: 68ch;
}

/* Fussnoten tragen die Saetze, die sagen, was eine Angabe NICHT belegt.
   Klein, aber nicht versteckt: --text-muted haelt den Kontrast ueber 4,5:1. */
.ug-fussnote {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 72ch;
}

/* Eine Kuerzung ist keine Fussnote wie jede andere: Sie sagt, dass etwas
   FEHLT. Darum bekommt sie den Rand, der im Haus fuer "Angabe ohne
   Vollstaendigkeit" steht. */
.ug-kuerzung {
  border-left: 2px solid var(--warning);
  padding-left: 10px;
  color: var(--text-secondary);
}

/* ---- Kopfdaten ---- */

.ug-daten {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 4px 16px;
  margin: 0;
  font-size: var(--fs-md);
}

.ug-daten-was { color: var(--text-muted); }
.ug-daten-wert { margin: 0; color: var(--text-primary); }

@media (max-width: 560px) {
  /* Zweispaltig wird auf einem schmalen Schirm zu zwei sehr schmalen Spalten,
     und dann bricht jeder Wert dreimal um. Untereinander liest sich besser. */
  .ug-daten { grid-template-columns: 1fr; gap: 0 0; }
  .ug-daten-was { margin-top: 8px; font-size: var(--fs-sm); }
}

/* ---- Der Wortlaut: das Dokument ---- */

.ug-wortlaut {
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-0);
  padding: var(--luft-block);
  min-width: 0;
}

.ug-posten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--luft-eng);
}

.ug-posten-zeile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.ug-posten-zeile:last-child { border-bottom: 0; }

.ug-posten-haupt {
  font-size: var(--fs-md);
  color: var(--text-primary);
  line-height: 1.5;
}

.ug-posten-neben {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Hinweise sind Fliesstext aus dem Feld, und die Umbrueche sind Absicht: Wer
   um sechs Uhr frueh drei Dinge uebergibt, gliedert sie. pre-wrap haelt sie -
   ein pauschales Zusammenziehen machte aus drei Punkten einen Satz. */
.ug-hinweise {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-primary);
  max-width: 68ch;
}

/* Der Rohtext, wenn sich der Wortlaut nicht gliedern liess. Er wird gezeigt
   und nicht verschwiegen - auf ihn bezieht sich die Pruefsumme. */
.ug-roh {
  margin: 8px 0 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-sunken);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- Zeitfenster ---- */

.ug-fenster {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-bottom: var(--luft-eng);
  border-bottom: 1px solid var(--border);
}

.ug-fenster-was { font-size: var(--fs-sm); color: var(--text-muted); }

.ug-fenster-wert {
  font-size: var(--fs-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Woher das Fenster stammt, gehoert unmittelbar daneben - sonst liest jemand
   eine Uhrzeit und weiss nicht, in welcher Zone sie gilt. */
.ug-fenster-quelle {
  flex: 1 0 100%;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---- Pruefsumme ---- */

.ug-summe-block {
  margin-top: var(--luft-block);
  padding-top: var(--luft-liste);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ug-summe-was { font-size: var(--fs-sm); color: var(--text-muted); }

/* Alle 64 Zeichen, in Vierergruppen - dieselbe Schreibweise wie im
   Siegelblock. Eine Summe, die sich nicht vollstaendig vergleichen laesst,
   ist ein Erkennungszeichen und kein Beweismittel; darum wird hier nichts
   abgeschnitten und nichts mit Auslassungspunkten versehen. */
.ug-summe {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
  user-select: all;
}

.ug-auslieferung { margin: 0; }

/* ========================================================== Bestaetigen */

.ug-bestaetigen,
.ug-bestaetigt,
.ug-eigenes {
  display: flex;
  flex-direction: column;
  gap: var(--luft-liste);
  padding-top: var(--luft-block);
  border-top: 1px solid var(--border);
  min-width: 0;
}

/* Der Satz, der bestaetigt wird. Er steht abgesetzt und in ruhiger Groesse:
   Er ist der Wortlaut einer Erklaerung, nicht die Beschriftung eines Knopfes.
   Kursiv waere hier falsch - eine Erklaerung, die man abgibt, wird nicht
   zitiert, sie wird abgegeben. */
.ug-bestaetigungstext {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--accent-fg);
  background: var(--accent-soft);
  border-radius: 0 8px 8px 0;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-primary);
  max-width: 68ch;
}

/* ================================================================ Felder */

.ug-feld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ug-feld-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-secondary);
}

/* Die Hilfe steht UNTER dem Feld und nicht als Platzhalter darin: Ein
   Platzhalter verschwindet beim ersten Zeichen - genau dann, wenn jemand
   nachlesen will, was er hier eigentlich schreiben soll. */
.ug-feld-hilfe {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 68ch;
}

.ug-eingabe {
  width: 100%;
  min-height: 44px;
  font: inherit;
  font-size: var(--fs-md);
}

textarea.ug-eingabe { line-height: 1.55; }

.ug-verborgen { display: none; }

.ug-feldpaar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-liste);
}

.ug-feldpaar > .ug-feld { flex: 1 1 12rem; }
.ug-feldpaar > .ug-feld-hilfe { flex: 1 0 100%; margin: 0; }

/* ================================================================ Knoepfe */

.ug-tat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-eng);
}

/* 44 Pixel auch dann, wenn .btn aus styles.css kleiner ausfaellt. Und keine
   volle Breite auf dem Desktop: Ein Knopf, der die ganze Zeile einnimmt,
   wird auch dort getroffen, wo niemand ihn treffen wollte. */
.ug-knopf {
  min-height: 44px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 560px) {
  /* Auf dem Handy umgekehrt: volle Breite, weil der Daumen im Dunkeln keine
     Zielflaeche von 140 Pixeln sucht. */
  .ug-tat { flex-direction: column; }
  .ug-knopf { width: 100%; }
}

/* =============================================================== Vorschau */

.ug-vorschau { min-width: 0; }

.ug-vorschau:empty { display: none; }

/* ================================================================ Papier

   Der Uebergabetext wird ausgedruckt und weitergereicht - er ist das
   Dokument, um das es geht. Auf Papier faellt weg, was nur zum Bedienen da
   ist; stehen bleibt der Text samt Pruefsumme.

   druck.css blendet Knoepfe pauschal aus (`button { display: none }`). Das
   trifft hier die Zeilenkoepfe, und mit ihnen verschwaende der Objektname -
   dieselbe Fehlerklasse, durch die in diesem Projekt schon Angaben vom Blatt
   gefallen sind. Darum werden genau sie als stiller Text zurueckgeholt. */
@media print {
  .ug-reiter,
  .ug-tat,
  .ug-feld,
  .ug-kasten .btn { display: none !important; }

  .ug-zeile-kopf {
    display: flex !important;
    color: #000 !important;
    background: none !important;
    border: none !important;
    padding: 0 0 8px !important;
    cursor: default;
  }

  .ug-karte,
  .ug-zeile,
  .ug-wortlaut {
    border-color: #000;
    background: none;
  }

  /* Ein Beweistext darf nicht mitten in der Pruefsumme umbrechen. */
  .ug-summe-block,
  .ug-posten-zeile { break-inside: avoid; }
}