/* 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; }
}

/* F6: "Auftrag manuell anlegen" als runder Knopf unten rechts, über der
   Tab-Leiste. Bewusst nur ein Symbol: die manuelle Anlage ist die Ausnahme. */
.abl-fab {
  position: fixed; z-index: 20;
  right: max(var(--space-3), calc((100vw - 640px) / 2 + var(--space-3)));
  bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom) + var(--space-3));
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--color-brand); color: #fff; font-size: 2rem; line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); cursor: pointer;
  display: grid; place-items: center;
}
.abl-fab:hover { background: var(--color-brand-light); }
.abl-fab:focus-visible { outline: 3px solid var(--color-brand-light); outline-offset: 3px; }

.abl-dialog {
  border: none; border-radius: var(--radius); padding: var(--space-3);
  width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.abl-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.abl-dialog h3 { margin-top: 0; }

/* F8: Zuständigkeiten in der Übersicht */
.zust-karte { margin-bottom: var(--space-3); font-size: 0.9rem; }
.zust-karte h3 { margin: 0 0 var(--space-2); font-size: 1rem; }
.zust-karte dl { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3); margin: 0; }
.zust-karte dt { color: var(--color-text-muted); }
.zust-karte dd { margin: 0; overflow-wrap: anywhere; }
.zust-karte .hint { margin-top: 2px; font-size: 0.8rem; }
.zust-karte dd { margin-bottom: var(--space-2); }
.abl-dialog .hint { font-size: 0.85rem; color: var(--color-text-muted); }
/* Platz unter dem letzten Inhalt, damit der "+"-Knopf nichts verdeckt */
.abl-fab-platz { height: 80px; }
/* F15: Zählernummer als Link zum Verlauf */
.abl-zeile .list-item-title a, #abl-pruefliste .list-item-title a { color: var(--color-brand); }

/* F5: einheitliches Kennzeichen für korrigierte Werte (Auftrag, Protokoll,
   Prüfliste, Zählerverlauf): Symbol ✎ + "korrigiert" + eigene Farbe */
.tag-korrigiert { background: #ece6f5; color: #5b3a8c; }
.abl-korrektur-hinweis, .hint.abl-korrektur-hinweis { color: #5b3a8c; }
.abl-protokoll td.abl-korrigiert { color: #5b3a8c; font-weight: 600; }
tr.abl-korrigiert-zeile td { background: #f6f2fb; }

/* F16: Verlauf als Zeitleiste */
.abl-verlauf { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--color-border); }
.abl-verlauf li { position: relative; padding: 0 0 var(--space-3) var(--space-2); font-size: 0.9rem; }
.abl-verlauf li::before {
  content: ""; position: absolute; left: -21px; top: 4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-border); border: 2px solid var(--color-surface);
}
.abl-verlauf li.abl-verlauf-wichtig::before { background: var(--color-warning); }
.abl-verlauf li:last-child { padding-bottom: 0; }
.abl-verlauf-zeit { font-size: 0.78rem; color: var(--color-text-muted); }
.abl-verlauf .hint { font-size: 0.8rem; color: var(--color-text-muted); }
.abl-verlauf-grund { font-size: 0.85rem; margin-top: 2px; }

/* F4: Auswahl der Zähler bei "Zur Korrektur freigeben" */
.abl-auswahl { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); }
.abl-auswahl legend { font-weight: 600; font-size: 0.9rem; padding: 0 4px; }
.abl-auswahl .hint { font-size: 0.8rem; color: var(--color-text-muted); font-weight: 400; }

/* F11: Prüfliste mit Abschnitten */
.abl-abschnitt { margin: var(--space-4, 24px) 0 var(--space-2); font-size: 1.05rem; }
.abl-wechsel-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-2) 0; }
.abl-wechsel-zahlen > div { background: var(--color-bg); border-radius: var(--radius); padding: 8px var(--space-2); font-size: 0.85rem; }
.abl-wechsel-zahlen strong { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* casavi-Vorgang: Ergebnis des Versands */
.abl-casavi-box { background: #e6edf2; border-radius: var(--radius); padding: var(--space-3); margin: var(--space-2) 0; font-size: 0.9rem; }
.abl-casavi-ok { background: #e3f3e8; }
.abl-casavi-fehler { background: #fbeceb; }
.abl-casavi-box code { display: block; background: #fff; padding: 8px; border-radius: 6px; font-size: 0.8rem; word-break: break-all; user-select: all; }
.abl-casavi-text { white-space: pre-wrap; background: #fff; border-radius: 6px; padding: 8px; font-size: 0.8rem; margin: 6px 0 0; font-family: inherit; }

/* 04.11.2026: Auftragsnummer = Nummer des casavi-Vorgangs */
.abl-nummer { font-variant-numeric: tabular-nums; color: var(--color-text-muted); font-weight: 600; margin-right: 2px; }