/* ═══════════════════════════════════════════════════════════════════════════
   Datenstand-Leiste und Zustandsvokabular — Paket P1-1
   Gehört zu public/js/datenstand.js.
   Farben ausschließlich über die Tokens aus index.html, damit die Umstellung
   auf das helle Design (P2-1) diese Datei nicht erneut anfassen muss.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Innenabstand mobile-first; die beiden Haltepunkte stehen in index.html
   neben den uebrigen Abstaenden der Seite (P2-2). */
.ds-leiste {
  max-width: 1200px;
  padding: 10px 12px 0;
}

.ds-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ds-tz {
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}

/* ── Einzelner Datenstand-Eintrag ─────────────────────────────────────────── */

.ds-eintrag {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 280px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r);
  padding: 8px 12px;
}

.ds-symbol { font-size: 14px; line-height: 1.3; }

.ds-text { min-width: 0; }

.ds-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.ds-quelle { font-size: 13px; font-weight: 600; }

.ds-zustand { font-size: 13px; }

.ds-felder,
.ds-hinweis {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

/* Zustandsfarben nur als Ergänzung — der Text trägt die Aussage allein. */
.ds-aktuell    { border-left-color: var(--green); }
.ds-erreichbar { border-left-color: var(--green); }
.ds-aktuell    .ds-zustand { color: var(--green); }
.ds-erreichbar .ds-zustand { color: var(--green); }

.ds-veraltet   { border-left-color: var(--yellow); }
.ds-degradiert { border-left-color: var(--yellow); }
.ds-veraltet   .ds-zustand { color: var(--yellow); }
.ds-degradiert .ds-zustand { color: var(--yellow); }

.ds-getrennt { border-left-color: var(--red); }
.ds-getrennt .ds-zustand { color: var(--red); }

.ds-unbekannt { border-left-color: var(--muted); }
.ds-unbekannt .ds-zustand { color: var(--muted); }

/* ── Leerzustand für Blöcke ohne aktuelle Datengrundlage ──────────────────── */

.ds-leerzustand {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--r);
  color: var(--muted);
}

.ds-leer-symbol { font-size: 18px; line-height: 1.2; }

.ds-leer-titel {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}

.ds-leer-sub { font-size: 13px; }

/* ── Trefferzeile ueber Listen und Tabellen (P1-2, P1-3) ──────────────────── */

/* Macht sichtbar, wie viele Eintraege der aktive Filter uebrig laesst. */
.treffer-zeile {
  color: var(--muted);
  font-size: 13px;
  margin: 2px 0 10px;
}

.treffer-zeile:empty { display: none; }

/* ── SharePoint-Dateiliste (P1-4) ─────────────────────────────────────────── */

/* Deaktivierte Aktion statt leerem Link. Ein leerer href laedt die aktuelle
   Seite neu — genau das erzeugte den zweiten Dashboard-Tab. */
/* A5 (Phase 3): zwei ausdrücklich benannte Aktionen je Dokument —
   „Dokument öffnen" und „Ordner öffnen". Schmal stapeln sie untereinander,
   beide mit 44 px Berührungshöhe. */
.sp-aktionen { display: flex; flex-direction: column; gap: 2px; }
.sp-aktionen a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--accent); font-size: 13px; text-decoration: none; white-space: nowrap;
}
.sp-aktionen a:hover { text-decoration: underline; }
.sp-aktionen a.sp-aktion-zweit { color: var(--muted); }

.sp-aktion-aus {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  cursor: not-allowed;
}

/* Ordnerpfad unter dem Dateinamen — macht gleichnamige Dateien unterscheidbar. */
.sp-pfad {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
  word-break: break-word;
}

.sp-fehlt {
  color: var(--yellow);
  font-size: 13px;
  margin-top: 3px;
}

.sp-hinweis {
  color: var(--muted);
  font-size: 13px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}

/* ── Nebenkosten-Befunde (P1-6) ───────────────────────────────────────────── */

.nk-befundliste { margin-top: 8px; }

.nk-befund {
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  padding-left: 12px;
}

.nk-befund:last-child { border-bottom: none; }

.nk-befund-blocker { border-left-color: var(--red); }
.nk-befund-warning { border-left-color: var(--yellow); }
.nk-befund-info    { border-left-color: var(--accent); }
.nk-befund-unbekannt { border-left-color: var(--muted); }

.nk-befund-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.nk-befund-titel { font-weight: 600; font-size: 13px; }

.nk-befund-code {
  color: var(--muted);
  font-size: 13px;
  font-family: monospace;
}

/* Ursache / Auswirkung / Nächster Schritt als beschriftete Zeilen — damit der
   blockierende Befund sowohl das Warum als auch das Wie nennt (Spec §4 G). */
.nk-befund-zeile {
  display: flex;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 3px;
}

.nk-befund-marke {
  flex: 0 0 120px;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding-top: 2px;
}

.nk-befund-quelle {
  color: var(--muted);
  font-size: 13px;
  font-family: monospace;
  margin-top: 6px;
  word-break: break-word;
}

.nk-befund-aktion { margin-top: 10px; }

/* Readiness-Matrix: benannter Zustand statt nackter Zahl, Erläuterung
   sichtbar und nicht nur im Hover. */
.nk-matrix-sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.35;
}

.nk-badge-grau {
  background: var(--surface-2);
  color: var(--muted);
}

/* Schmal stehen Marke und Text untereinander — eine 120 px breite Marke
   laesst sonst kaum Platz fuer die Erklaerung (P2-2: Haltepunkt 640 px). */
.nk-befund-zeile { flex-direction: column; gap: 2px; }
.nk-befund-marke { flex: none; }

@media (min-width: 640px) {
  .nk-befund-zeile { flex-direction: row; gap: 10px; }
  .nk-befund-marke { flex: 0 0 120px; }
}

/* ── Zustandsabzeichen in Tabellen und Kacheln ────────────────────────────── */

/* .badge setzt text-transform: uppercase — fuer mehrwortige Zustandstexte
   ("Daten aktuell", "Quelle nicht erreichbar") unleserlich. */
.badge-zustand {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  padding: 3px 9px;
}

/* ── Fünf unterscheidbare Zustände (P2-5) ─────────────────────────────────── */

.zustand {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 16px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r);
}

.zustand-symbol { font-size: 18px; line-height: 1.2; }
.zustand-titel { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.zustand-sub { font-size: 13px; color: var(--muted); line-height: 1.5; }
.zustand-aktion { margin-top: 10px; }

/* Gestrichelt = nichts vorhanden, durchgezogen = etwas stimmt nicht. */
.zustand-laden,
.zustand-keine-daten,
.zustand-keine-treffer,
.zustand-nicht-eingerichtet { border-style: dashed; border-left-color: var(--border-strong); }

.zustand-nicht-eingerichtet { border-left-color: var(--accent); }
.zustand-veraltet { border-left-color: var(--yellow); }
.zustand-fehler   { border-left-color: var(--red); }

/* ── Dokumentlinks: 44 px Beruehrungshoehe (E3, 10.10.2026) ──────────────── */

/* BEFUND Ist-Stand-Diagnose 10.10.2026: Bei 390 px Breite blieben genau zwei
   Berührungsziele unter 44 px — der Link auf ein verknuepftes Dokument unter
   „Reisen" (174x15 px) und „Öffnen ↗" im Bereich SharePoint (53x19 px).
   Beides sind gewoehnliche Inline-Links; ihre Hoehe ist die Zeilenhoehe.

   JETZT: dieselbe Loesung wie bei `.sp-aktionen a` weiter oben — der Link
   wird zu einem inline-flex-Kasten mit 44 px Mindesthoehe. Der Textfluss
   bleibt, nur die anklickbare Flaeche waechst nach oben und unten. Gilt
   bewusst in jeder Breite: ein groesseres Ziel schadet am Schreibtisch
   nicht, und eine Umschaltung per Medienabfrage waere eine zweite Stelle,
   an der dieselbe Regel gepflegt werden muesste. */
.dok-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--accent);
}