/* Der Bereich „Datenblatt" (Session B4).
 *
 * Eigene Datei aus demselben Grund wie `benutzer-hilfe.css` (A7): an
 * `notarflow.css` arbeiten in dieser Welle mehrere Sessions gleichzeitig, und
 * ein Block darin wäre ein Konflikt, der niemandem etwas bringt. Was hier steht,
 * gilt nur für den Kopfknopf und den Inhalt des Datenblatt-Dialogs; Dialoghülle,
 * Knöpfe und Meldungen kommen unverändert aus `nf-ui.js` und den beiden
 * bestehenden Stylesheets.
 */

/* Der Knopf im Vorgangskopf, neben Aktenzeichen und Statuspille. */
.kopf-vorgang .kopf-knopf {
  margin-left: 10px;
  padding: 4px 10px;
  border: 1px solid var(--linie, #DCE3EA);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.kopf-vorgang .kopf-knopf:hover {
  border-color: var(--blau, #1478E8);
  color: var(--blau, #1478E8);
}

/* -------------------------------------------------------------- Der Dialog */

.nf-abschnitt {
  margin: 18px 0 8px;
  font-size: 0.95rem;
}

.nf-karte-innen {
  border: 1px solid var(--linie, #DCE3EA);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0;
}

.nf-karte-innen h3 { margin: 0 0 6px; font-size: 0.95rem; }

.db-zeile {
  border: 1px solid var(--linie, #DCE3EA);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 8px;
}

.db-zeile-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.db-bezeichnung { font-weight: 600; }

.db-status {
  font-size: 0.78rem;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
}

/* Die Zustände in den drei Farben, die die Oberfläche sonst auch benutzt.
   Grün heisst „da", Gelb „läuft", Grau „vorbei" — und nichts davon steht
   allein: das Wort daneben sagt dasselbe. */
.db-zeile[data-status="eingereicht"] .db-status { color: var(--ok, #1E7A4B); }
.db-zeile[data-status="begonnen"] .db-status,
.db-zeile[data-status="offen"] .db-status { color: var(--blau, #1478E8); }
.db-zeile[data-status="abgelaufen"] .db-status,
.db-zeile[data-status="zurueckgezogen"] .db-status { color: var(--grau, #5B6875); }

.db-link input,
.db-erinnerung textarea,
.db-neu select,
.db-neu input {
  width: 100%;
  padding: 7px 9px;
  margin: 4px 0 10px;
  border: 1px solid var(--linie, #DCE3EA);
  border-radius: 6px;
  font: inherit;
  background: #fff;
  color: inherit;
}

.db-link input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; }

.db-neu label { display: block; font-size: 0.85rem; font-weight: 600; margin-top: 6px; }

.db-warnung { color: var(--warn, #C4381F); font-weight: 600; }

.db-angaben { margin: 10px 0 0; border-top: 1px solid var(--linie, #DCE3EA); padding-top: 8px; }
.db-angaben h4 { margin: 8px 0 4px; font-size: 0.82rem; color: var(--grau, #5B6875); }

.db-angabe {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 0;
  font-size: 0.88rem;
}

.db-angabe-label { color: var(--grau, #5B6875); }
.db-angabe-wert { text-align: right; }

.db-erinnerung { margin: 10px 0 0; border-top: 1px solid var(--linie, #DCE3EA); padding-top: 8px; }
.db-betreff { font-weight: 600; margin: 4px 0; }