/*
  Verwaltungsansichten: Datenpflege (P034), Vorschlagsliste der Suchfelder (P035), Exporte (D7).

  Eigene Datei neben app.css, damit die Ansichten, die parallel entstehen, nicht dieselben
  Zeilen am Ende von app.css ändern. Es gelten dieselben Regeln (docs/PLAN.md 10.5): nur die
  Tokens aus tokens.css, Primärgrün nur für die eine primäre Aktion, Status nie allein über
  Farbe, Touchflächen mindestens --dp-touch-min.
*/

/* ------------------------------------------------------------------ Reiter */

.dp-reiterleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 1rem 0 0;
  border-bottom: 2px solid var(--dp-border);
}

.dp-reiter {
  min-height: var(--dp-touch-min);
  padding: 0.5rem 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--dp-gray);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
}

.dp-reiter:hover {
  color: var(--dp-gray-dark);
  background-color: var(--dp-gray-light);
}

/* Der gewählte Reiter: Schrift und Unterstrich, nicht nur Farbe (10.3). */
.dp-reiter[aria-selected="true"] {
  color: var(--dp-green-dark);
  border-bottom-color: var(--dp-green);
}

.dp-reiterflaeche {
  padding-top: 1rem;
}

/* --------------------------------------------------------------- Entscheidung */

.dp-tabelle tbody tr.dp-entscheidungszeile {
  background-color: var(--dp-white);
}

.dp-entscheidung {
  padding: 0.75rem 0;
}

.dp-entscheidung .dp-feld {
  max-width: 48rem;
}

.dp-vorgabenliste {
  margin: 0;
  padding-left: 1.1rem;
}

.dp-vorgabenliste > li {
  margin-bottom: 0.5rem;
}

.dp-vorgabenliste .dp-beleg,
.dp-tabelle td .dp-beleg {
  display: block;
}

/* ------------------------------------------------------------ Vorschlagsliste */

/* Das Feld trägt die Liste; sie legt sich unter das Eingabefeld und über den folgenden
   Inhalt, ohne ihn zu verschieben. */
.dp-feld-vorschlag {
  position: relative;
}

.dp-vorschlaege {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  max-height: 22rem;
  margin: 0.25rem 0 0;
  padding: 0.25rem 0;
  overflow-y: auto;
  list-style: none;
  background-color: var(--dp-white);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius);
  box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
}

.dp-vorschlag {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  min-height: var(--dp-touch-min);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.dp-vorschlag:hover,
.dp-vorschlag[aria-selected="true"] {
  background-color: var(--dp-green-light);
}

/* Der markierte Vorschlag: Hintergrund und Randstrich, nicht nur Farbe (10.3). */
.dp-vorschlag[aria-selected="true"] {
  box-shadow: inset 3px 0 0 var(--dp-green);
}

.dp-vorschlag-zusatz {
  flex: 0 0 auto;
  font-size: 0.875rem;
  color: var(--dp-gray);
  font-variant-numeric: tabular-nums;
}

.dp-vorschlagsstand {
  display: block;
  font-size: 0.875rem;
  color: var(--dp-gray);
}

/* ------------------------------------------------------------------ Exporte */

.dp-exportliste td:last-child {
  white-space: nowrap;
}