/* Die Verwahrungs-Schublade (C2).
 *
 * Eigene Datei aus demselben Grund, aus dem A7 `benutzer-hilfe.css` und B6
 * `katalog.css` angelegt haben: an `notarflow.css` arbeiten in dieser Welle
 * mehrere Sessions gleichzeitig, und ein Merge-Konflikt in einer Stildatei ist
 * reine Reibungsverschwendung. Die Variablen (`--blau`, `--ink-soft`,
 * `--line`, `--warn`) kommen von dort — sie werden benutzt, nicht kopiert.
 * `.bz` und `.quelle-zeile` ebenso: die Verwahrung sieht aus wie der Vollzug
 * daneben, weil sie in derselben Schublade steht.
 */

/* --------------------------------------------------- Abhaken in der Zeile */

/* Der Knopf sitzt IN der Zeile und nicht in einem Dialog: eine
   Auszahlungsvoraussetzung abzuhaken ist ein Vermerk und keine Entscheidung
   mit Rückfrage. Die Entscheidung stand vorher — dies ist ihre Nachschrift. */
.bz-knopf {
  flex: none; font: inherit; font-size: 10.5px; cursor: pointer;
  background: none; color: var(--blau-tief);
  border: 1px solid var(--line-stark); padding: 2px 8px;
}
.bz-knopf:hover { border-color: var(--blau-tief); }
.bz-knopf:disabled { opacity: .5; cursor: default; }

/* ---------------------------------------------------------- Kontoauszug */

.einwurf {
  border: 1px dashed var(--line-stark); padding: 11px 12px; margin: 4px 0 14px;
}
.einwurf .t { display: block; font-size: 11px; color: var(--ink-soft); margin-bottom: 8px; }
.einwurf input[type="file"] { font: inherit; font-size: 11.5px; max-width: 100%; }
.einwurf .bereich-hinweis[data-art="warn"] { color: var(--warn); }

/* ----------------------------------------------------------- Prüf-Queue */

/* Eine Buchung ist mehr als eine Zeile: Betrag, Zweck, Gegenkonto, der
   Vorschlag der Zuordnung und die Entscheidung darüber gehören zusammen
   gelesen. Deshalb ein Block und keine Tabellenzeile. */
.buchung {
  border: 1px solid var(--line); border-left: 3px solid var(--line-stark);
  padding: 9px 11px; margin-bottom: 8px;
}
/* Ein Abgang vom Anderkonto wird am Rand markiert. Er löst nichts aus — aber
   er ist die Bewegung, die ein Mensch als Erstes sehen soll. */
.buchung[data-richtung="ausgang"] { border-left-color: var(--warn); }

.buchung-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.buchung .betrag { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.buchung[data-richtung="ausgang"] .betrag { color: var(--warn); }
.buchung .datum { font-size: 11px; color: var(--ink-soft); }
.buchung .chip {
  font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--line-stark); color: var(--ink-soft); padding: 0 5px;
}

/* Der Verwendungszweck steht ungekürzt und umbricht. Er ist die Stelle, an der
   die Zuordnung hängt — wer ihn abschneidet, nimmt dem Menschen genau die
   Angabe weg, die er prüfen soll. */
.buchung .zweck {
  font-size: 12.5px; margin-top: 5px; overflow-wrap: anywhere;
}
.buchung .gegenkonto { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.buchung .vorschlag { font-size: 11px; color: var(--blau-tief); margin-top: 5px; }
.buchung .hinweis { font-size: 11px; color: var(--warn); margin-top: 3px; }

.buchung-entscheidung {
  display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center;
}
.buchung-entscheidung select { font: inherit; font-size: 11.5px; padding: 2px 4px; }
.buchung-entscheidung button {
  font: inherit; font-size: 11.5px; padding: 3px 10px; cursor: pointer;
  background: none; border: 1px solid var(--line-stark); color: inherit;
}
.buchung-entscheidung button.primaer { border-color: var(--blau-tief); color: var(--blau-tief); }
.buchung-entscheidung button:disabled { opacity: .5; cursor: default; }