/* Verwaltung der Ableser-Aufträge (nur Admins). Ergänzt css/style.css,
   nutzt dessen Farben und Abstände. Alle Klassen beginnen mit "abl-". */

.abl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.abl-tags .tag a { color: inherit; }
.abl-rot { color: var(--color-danger); }
.abl-warn { color: var(--color-warning); font-size: 0.9rem; }
.abl-leer { color: var(--color-text-muted); font-weight: 400; font-size: 0.9rem; }

/* Hinweiszeile oben in der Übersicht (z. B. "3 Werte warten auf Prüfung") */
.abl-hinweis {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  background: #fdf1e0; color: var(--color-text); text-decoration: none;
  border-radius: var(--radius); padding: 12px var(--space-3); margin-bottom: var(--space-3); font-size: 0.9rem;
}
.abl-hinweis span { color: var(--color-brand); font-weight: 600; white-space: nowrap; }
.abl-hinweis-ruhig { background: #fbeceb; }
.abl-hinweis-ruhig span { color: var(--color-text-muted); font-weight: 400; white-space: normal; text-align: right; }

/* Zeilen innerhalb einer Karte (Zähler, Meldungen) */
.abl-zeile { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.abl-zeile:first-of-type { padding-top: var(--space-1); }
.abl-zeile:last-child { border-bottom: none; padding-bottom: 0; }
.abl-zeile-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.abl-wert { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.abl-wert small { font-size: 0.75rem; font-weight: 400; color: var(--color-text-muted); }
.abl-zeile .hint { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 4px; }

/* Stammdaten des Auftrags als zweispaltige Liste */
.abl-daten { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); margin: var(--space-2) 0; font-size: 0.9rem; }
.abl-daten dt { color: var(--color-text-muted); }
.abl-daten dd { margin: 0; overflow-wrap: anywhere; }

.abl-details { margin-top: var(--space-2); }
.abl-details > summary { cursor: pointer; color: var(--color-brand); font-weight: 600; font-size: 0.9rem; padding: 6px 0; }
.abl-details[open] > summary { margin-bottom: var(--space-2); }
.abl-details table { margin-bottom: var(--space-2); }

.abl-haken, .field label.abl-haken { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 0.9rem; margin: 6px 0; }
.abl-haken input { width: auto; flex: 0 0 auto; margin: 0; }
a.abl-knopf { text-decoration: none; }

.abl-liste { margin: 0 0 var(--space-2); padding-left: 20px; font-size: 0.9rem; }
.abl-ergebnis { margin-top: var(--space-3); padding: var(--space-3); background: var(--color-bg); border-radius: var(--radius); font-size: 0.9rem; }

/* Neu erzeugter Zugangslink (wird nur einmal angezeigt) */
.abl-link-box { background: #e6edf2; border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-3); }
.abl-link-box code { display: block; background: #fff; padding: 8px; border-radius: 6px; font-size: 0.8rem; word-break: break-all; margin-bottom: 6px; user-select: all; }

.abl-protokoll { font-size: 0.82rem; }
.abl-protokoll td:first-child { white-space: nowrap; color: var(--color-text-muted); }
.abl-protokoll .hint { font-size: 0.78rem; color: var(--color-text-muted); overflow-wrap: anywhere; }

/* Einstellungen */
.abl-einstellung { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.abl-einstellung:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.abl-eingabe input:disabled, .abl-eingabe select:disabled, .abl-eingabe textarea:disabled { background: var(--color-bg); color: var(--color-text-muted); }
.abl-fehler { color: var(--color-danger); font-size: 0.85rem; font-weight: 600; margin-top: 4px; }
.abl-anleitung > label { margin-top: var(--space-2); }
.abl-anleitung textarea, .abl-einstellung textarea { font-family: inherit; }
.abl-schritt { background: var(--color-bg); border-radius: var(--radius); padding: var(--space-2); margin-bottom: var(--space-2); display: flex; flex-direction: column; gap: 6px; }
.abl-schritt .btn { padding: 8px 12px; font-size: 0.85rem; flex: 0 0 auto; }
.abl-schritt-neu { margin-bottom: var(--space-2); }

/* Am Schreibtisch darf die Verwaltung breiter werden als die Handy-Ansicht */
@media (min-width: 900px) {
  .app-view:has(.abl-protokoll), .app-view:has(#abl-auftraege) { max-width: 820px; }
}