/* Die Vollzugs-Schublade und der gedruckte Bogen (f1, Welle F).
 *
 * Eigene Datei aus demselben Grund wie `gwg.css`, `verwahrung.css`,
 * `katalog.css` und `urkunden.css`: an `notarflow.css` arbeiten in jeder Welle
 * mehrere Sessions gleichzeitig. Hier steht nichts, was eine bestehende Regel
 * aendert — nur eigene Klassen (`vz-*` fuer den Bildschirm, `vzb-*` fuer den
 * Bogen) und ein `@media print`-Block fuer das Blatt.
 *
 * Zwei Regeln aus `druck.css` gelten hier weiter und werden nicht wiederholt:
 * das Blatt haengt in `#druckblatt` und ist am Bildschirm aus, und es ist
 * schwarz auf weiss. Toner ist kein Gestaltungsmittel.
 *
 * Die eine Farbe, die diese Schublade benutzt, ist `--warn` — und zwar genau
 * an einer Stelle: wo eine Rueckmeldung erwartet wird und niemand eingetragen
 * hat, von wem. Farbe ist nirgends der EINZIGE Traeger einer Aussage: neben
 * jedem Zeichen steht die Lage als Wort.
 */

/* -------------------------------------------------- 1. Kopf der Schublade */

.vz-umschalter {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0 8px;
  border-bottom: 1px solid var(--line-stark);
}
.vz-tab {
  border: 1px solid var(--line-stark); border-radius: 7px;
  background: var(--paper); color: var(--ink-soft);
  font: inherit; font-size: 12px; padding: 4px 9px; cursor: pointer;
}
.vz-tab:hover { background: var(--panel); }
.vz-tab[aria-pressed="true"] {
  background: var(--panel-tief); color: var(--blau-tief); font-weight: 600;
}
.vz-drucken {
  margin-left: auto;
  border: 1px solid var(--line-stark); border-radius: 7px;
  background: var(--paper); color: var(--ink-soft);
  font: inherit; font-size: 12px; padding: 4px 9px; cursor: pointer;
}
.vz-drucken:hover { color: var(--blau-tief); border-color: var(--blau-tief); }

/* ------------------------------------------- 2. Ansicht 1 — diese Urkunde */

/* Die zwei Datumsspalten des Papierbogens. Sie stehen hier in derselben
   Breite wie in den Zeilen darunter — eine Ueberschrift, die ueber der
   falschen Spalte steht, ist schlimmer als keine. */
.vz-spaltenkopf, .vz-zeile-kopf {
  display: grid;
  grid-template-columns: 18px 1fr 78px 96px;
  gap: 8px; align-items: baseline;
}
.vz-spaltenkopf {
  grid-template-columns: calc(18px + 1fr) 78px 96px;
  padding: 4px 0 2px;
  font-size: 10.5px; color: var(--ink-soft); text-transform: lowercase;
}
.vz-sp-datum { text-align: right; }

.vz-zeile { border-bottom: 1px solid var(--line); padding: 2px 0; }
.vz-zeile-kopf {
  width: 100%; text-align: left;
  background: none; border: none; border-radius: 6px;
  font: inherit; color: inherit; padding: 5px 4px; cursor: pointer;
}
.vz-zeile-kopf:hover { background: var(--panel); }
.vz-zeichen { font-size: 12px; color: var(--ink-soft); }
.vz-text-haupt { display: block; font-size: 12.5px; }
.vz-text-lage { display: block; font-size: 10.5px; color: var(--ink-soft); }
.vz-datum { text-align: right; font-size: 11px; color: var(--ink-soft); }

/* Wo gewartet wird, steht das Zeichen kraeftiger — die Zeilen, die das Gate
   zuhalten, sollen beim Ueberfliegen auffallen. */
.vz-zeile[data-lage="wartet_auf_rueckmeldung"] .vz-zeichen,
.vz-zeile[data-lage="unentschieden"] .vz-zeichen { color: var(--blau-tief); }
.vz-zeile[data-lage="erledigt"] .vz-zeichen { color: var(--blau-tief); }

.vz-zusatz {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 0 4px 6px 30px;
  font-size: 10.5px; color: var(--ink-soft);
}
.vz-von--fehlt { color: var(--warn); }
.vz-wv { font-variant-numeric: tabular-nums; }

.vz-gate[data-frei="false"] { border-color: var(--line-stark); }
.vz-gate[data-frei="true"] { border-color: var(--blau-tief); }

/* ---------------------------------------------------------- 3. Die Maske */

.vz-maske {
  display: flex; flex-direction: column; gap: 7px;
  margin: 2px 4px 8px 30px; padding: 9px 10px;
  border: 1px solid var(--line-stark); border-radius: 8px;
  background: var(--panel);
}
.vz-feld { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.vz-feld-name { color: var(--ink-soft); }
.vz-feld input, .vz-feld select {
  font: inherit; font-size: 12px; padding: 4px 6px;
  border: 1px solid var(--line-stark); border-radius: 6px;
  background: var(--paper); color: var(--ink);
}
.vz-heute, .vz-ok, .vz-ab {
  font: inherit; font-size: 12px; padding: 5px 10px; cursor: pointer;
  border: 1px solid var(--line-stark); border-radius: 7px;
  background: var(--paper); color: var(--ink-soft);
}
.vz-heute { align-self: flex-start; color: var(--blau-tief); border-color: var(--blau-tief); }
.vz-maske-knoepfe { display: flex; gap: 6px; justify-content: flex-end; }
.vz-ok { background: var(--blau-tief); border-color: var(--blau-tief); color: #fff; }

/* ------------------------------------------------ 4. Ansicht 2 — was wartet */

/* Drei Zeilen statt sechs Spalten — BEFUND I3-2.
 *
 * Vorher stand hier `grid-template-columns: 56px 84px 92px 1fr 110px 74px`:
 * 416px feste Spalten plus fuenf Abstaende, also mindestens 456px in einem
 * Schubladenkoerper von rund 308px nutzbarer Breite. „von" und „WV" lagen
 * damit hinter der rechten Kante, und der Koerper scrollte waagerecht.
 * Die Begruendung der Aufteilung steht bei `WARTET_ZEILEN` in `vollzug.js`;
 * hier steht nur, was sie in der Schublade haelt.
 *
 * **Drei Zusagen, und jede einzelne ist noetig, damit nichts mehr uebersteht:**
 * jede Spur beginnt bei `minmax(0, …)` statt bei `auto`/`1fr` — sonst ist ihre
 * Untergrenze der laengste unteilbare Inhalt und die Spur waechst ueber den
 * Kasten hinaus; jedes Feld bekommt `min-width: 0` (die Vorgabe in einem Raster
 * ist `auto`, und die tut dasselbe); und `overflow-wrap: anywhere` bricht auch
 * das, was kein Leerzeichen hat — ein Aktenzeichen, eine lange Behoerde.
 *
 * **Zwei Spuren stehen in Pixeln und nicht auf `auto`.** Kopf und jede Zeile
 * sind eigene Raster; mit `auto` misst jedes seine eigenen Spalten, und dann
 * steht „Akte" ueber dem Aktenzeichen der einen Zeile und daneben bei der
 * naechsten. Der Satz galt schon fuer die Spaltenkoepfe der ersten Ansicht und
 * gilt hier genauso: eine Ueberschrift ueber der falschen Spalte ist schlimmer
 * als keine.
 *
 * **Und die Wartedauer bekommt die bewegliche Spur, nicht das Aktenzeichen** —
 * obwohl sie die kuerzere Angabe ist. Sie ist die einzige der drei, deren
 * Laenge springt: „seit 18 T" sind 51px, „ohne Absendedatum" (wo kein
 * Absendedatum eingetragen ist) sind 131px, und „Absendedatum" allein schon
 * 96px. In einer schmalen festen Spur brach genau dieses Wort mitten durch —
 * „Absendedat/um", gemessen bei 66px. Ein Aktenzeichen und ein Datum haben
 * dagegen eine Laenge, die man kennt: 92px und 76px, und was dort einmal
 * laenger ausfaellt, bricht am Leerzeichen. */

.vz-wartet-kopf, .vz-wartet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 92px) minmax(0, 76px);
  gap: 2px 8px; align-items: baseline;
}
.vz-wartet-kopf > *, .vz-wartet > *,
.vz-w-reihe1 > *, .vz-w-reihe2 > * { min-width: 0; overflow-wrap: anywhere; }

/* Zeile 2 (worauf) und Zeile 3 (Urkunde/von) laufen ueber die volle Breite;
 * Zeile 3 teilt sie in zwei gleiche Haelften, damit die zwei Beschriftungen im
 * Kopf ueber den zwei Werten darunter stehen und nicht daneben. */
.vz-w-reihe1, .vz-w-reihe2 { grid-column: 1 / -1; display: grid; }
.vz-w-reihe2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }

.vz-wartet-kopf {
  padding: 4px 4px 2px;
  font-size: 10.5px; color: var(--ink-soft);
  border-bottom: 1px solid var(--line-stark);
}
.vz-wartet {
  width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--line);
  border-radius: 6px; font: inherit; font-size: 11.5px;
  color: inherit; padding: 6px 4px; cursor: pointer;
}
.vz-wartet:hover { background: var(--panel); }
.vz-w-seit { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.vz-w-wv { text-align: right; font-variant-numeric: tabular-nums; }
/* Worauf gewartet wird, ist die Sache und steht in der Schriftgroesse der
 * Zeile; Urkunde und Absender darunter sind Beiwerk und stehen kleiner und
 * blasser. Ohne diesen Unterschied waeren die drei Zeilen einer Karte drei
 * gleich laute Zeilen, und die Ansicht liesse sich nicht mehr ueberfliegen. */
.vz-wartet .vz-w-reihe2 { font-size: 10.5px; color: var(--ink-soft); }
.vz-wartet[data-lage="unentschieden"] .vz-w-seit { color: var(--warn); }

/* -------------------------------------------------- 5. Der gedruckte Bogen
 *
 * Alles darunter gilt NUR im Druck. Am Bildschirm ist `#druckblatt` aus
 * (`druck.css`), und diese Klassen kommen dort nie vor. */

@media print {
  .vzb-kopf {
    display: grid; grid-template-columns: 1fr auto 1fr;
    gap: 10pt; align-items: start;
    padding-bottom: 5pt; border-bottom: 0.8pt solid #000;
  }
  .vzb-titel {
    font-family: "Bricolage Grotesque", Georgia, serif;
    font-size: 15pt; font-weight: 700; letter-spacing: 0.5pt;
    text-align: center; align-self: center;
  }
  .vzb-kopf-zeile { display: flex; gap: 5pt; align-items: baseline; font-size: 8.5pt; }
  .vzb-kopf-name { color: #333; min-width: 24mm; }
  .vzb-kopf-wert { font-weight: 600; }
  /* Was das System nicht weiss, ist eine Linie zum Handeintrag — kein
     erfundener Wert und kein leeres Feld, das aussieht wie ein Fehler. */
  .vzb-linie { flex: 1; min-width: 22mm; border-bottom: 0.4pt solid #000; }

  .vzb-scan { font-size: 8.5pt; text-align: left; }
  .vzb-scan-zeile { display: flex; gap: 4pt; align-items: baseline; margin-bottom: 2pt; }

  /* Das Ankreuzkaestchen. Es ist IMMER leer — auch die beiden im Kopf, auch
     wenn Urschrift und Reinschrift an der Akte liegen. Der Haken bedeutet
     „ich habe es eingescannt", nicht „es liegt ein Dokument vor", und ein
     vorgehaktes Kaestchen waere eine Behauptung des Systems ueber die
     Handlung eines Menschen. */
  .vzb-kasten {
    flex: none; display: inline-block;
    width: 3mm; height: 3mm; border: 0.5pt solid #000;
  }

  .vzb-spalten, .vzb-zeile {
    display: grid; grid-template-columns: 3mm 1fr 32mm 32mm;
    gap: 3mm; align-items: baseline;
  }
  .vzb-spalten {
    margin-top: 6pt; padding-bottom: 2pt;
    border-bottom: 0.5pt solid #000;
    font-size: 8pt; color: #333;
  }
  .vzb-sp-datum { text-align: center; }

  .vzb-block { break-inside: avoid; }
  .vzb-zeile { padding: 2.2pt 0; font-size: 9pt; }
  .vzb-text-haupt { display: block; }
  .vzb-text-zusatz { display: block; font-size: 7.5pt; color: #333; }
  .vzb-unterpunkt { display: block; font-size: 8pt; padding-left: 4mm; }
  /* Die senkrechte Trennung zwischen „beantragt am" und „eingegangen am"
     steht auf dem Papier der Kanzlei gedruckt. Sie steht hier auch. */
  .vzb-punktlinie {
    border-bottom: 0.4pt dotted #000;
    border-left: 0.4pt solid #000;
    min-height: 9pt; padding-left: 2mm;
  }
  /* Was NotarFlow schon weiss, steht klein und grau vor — die Kanzlei
     ueberschreibt oder streicht es. In derselben Schwaerze wie das Formular
     saehe es aus wie Teil des Formulars. */
  .vzb-vorgedruckt { font-size: 7.5pt; color: #777; }

  .vzb-unter { padding-left: 6mm; }
  .vzb-zeile .vzb-linie { border-bottom: 0.4pt solid #000; min-height: 9pt; }

  /* Nicht einschlaegig heisst grau, nicht weg: welche Zeilen dieses Geschaeft
     braucht, entscheidet die Kanzlei am Papier selbst. */
  .vzb-zeile[data-grau="true"] { color: #888; }
  .vzb-zeile[data-grau="true"] .vzb-kasten { border-color: #888; }
}

/* ------------------------------------------- 6. Die Papiere zum Vollzug
 *
 * Der eingescannte Bogen und seine Geschwister. Sie stehen in der
 * Vollzugs-Schublade, weil sie etwas ueber den Vollzug sagen — im
 * Belegbetrachter bleiben sie trotzdem, wo sie sind. */

.vz-papier {
  display: grid; grid-template-columns: 96px 1fr auto auto;
  gap: 8px; align-items: baseline;
  padding: 5px 4px; border-bottom: 1px solid var(--line);
  font-size: 11.5px;
}
.vz-papier-art { color: var(--blau-tief); font-weight: 600; }
.vz-papier-wer { color: var(--ink-soft); font-size: 10.5px; }
.vz-papier-los {
  font: inherit; font-size: 10.5px; padding: 2px 7px; cursor: pointer;
  border: 1px solid var(--line-stark); border-radius: 6px;
  background: var(--paper); color: var(--ink-soft);
}
.vz-papier-neu { display: flex; gap: 6px; align-items: center; padding: 8px 4px; }
.vz-papier-neu select {
  font: inherit; font-size: 11.5px; padding: 4px 6px; min-width: 0;
  border: 1px solid var(--line-stark); border-radius: 6px;
  background: var(--paper); color: var(--ink);
}
.vz-papier-neu select:first-of-type { flex: 1; }

/* Der Zeichnende des Absendevermerks — die einzige der vier Dokumentarten,
   die unterschrieben wird. Fehlt er, steht das da; ein aus der Urkundsperson
   abgeleiteter Name waere im Vertretungsfall schlicht falsch. */
.vz-papier-zeichner { grid-column: 2 / 4; color: var(--ink-soft); font-size: 10.5px; }
.vz-papier-zeichnerfeld { flex: 1; }
.vz-papier-zeichnerfeld[hidden] { display: none; }