/* Pflege-Ansicht für MATIK (Admin) - ansicht_admin.js. Präfix pf- bzw. pflege. */

/* ---------- Seite und Reiter ---------- */
.pflege { flex: 1; min-height: 0; overflow: auto; }
.pflege__seite { max-width: 1320px; margin: 0 auto; padding: 20px 24px 48px; display: flex; flex-direction: column; gap: 16px; }
.pflege__kopf { display: flex; flex-direction: column; gap: 12px; }
.pflege__titel h1 { margin: 0; }
.pflege__titel p { margin: 2px 0 0; color: var(--tinte-2); }
.pflege__reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--linie); }
.pflege__reiter-link { display: inline-flex; align-items: center; height: 38px; padding: 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  color: var(--tinte-2); font-weight: 500; text-decoration: none; }
.pflege__reiter-link:hover { color: var(--tinte); }
.pflege__reiter-link.is-aktiv { color: var(--tinte); border-bottom-color: var(--karmin); }

.pf-gedaempft { color: var(--tinte-2); font-weight: 400; }
.pf-fehler { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--karmin-dunkel); }
.pf-problem { color: var(--karmin-dunkel); font-weight: 500; }
.pf-zahl { text-align: right; justify-self: end; font-variant-numeric: tabular-nums; }

/* Kennzahlen links, "Aktualisieren" rechts */
.pf-oben { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pf-kennzahlen { margin-left: 0; flex-wrap: wrap; }
.pf-kz.is-neu .pw-kennzahl { border-color: var(--karmin); box-shadow: inset 3px 0 0 var(--karmin); }
.pf-kz.is-neu .pw-kennzahl__wert { color: var(--karmin-dunkel); }
.pf-kz.is-neu .pw-kennzahl.is-aktiv { background: var(--karmin-hell); }
.pf-aktualisieren { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.pf-hinweis { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--tinte-2); font-weight: 400; }
.pf-hinweis--gross { align-items: flex-start; gap: 10px; padding: 12px 16px; border: 1px solid #d5dff0; border-radius: var(--radius-m);
  background: #eef3fb; color: #24456e; }
.pf-hinweis--gross .pw-icon { margin-top: 2px; }
.pf-hinweis--gross p { margin: 0; }
.pf-hinweis--gross p + p { margin-top: 4px; }
.pf-hinweis--gross .text { color: var(--tinte); }

/* ---------- Filter ---------- */
.pf-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pf-filter .pw-auswahl { height: 36px; width: 230px; }
.pf-filter .pw-auswahl.is-gesetzt { border-color: var(--karmin); background-color: var(--karmin-hell); }
.pf-filter .pw-suche .pw-eingabe { width: 260px; }
.pf-filter__summe { margin-left: auto; white-space: nowrap; color: var(--tinte-2); font-weight: 400; }

/* ---------- Feedback-Eingang ---------- */
.pf-liste { display: flex; flex-direction: column; gap: 10px; }
.pf-meldung { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 12px; border: 1px solid var(--linie); border-radius: var(--radius-m);
  background: var(--flaeche); }
.pf-meldung.is-neu { border-color: #e6b3c3; box-shadow: inset 3px 0 0 var(--karmin), var(--schatten-karte); }
.pf-meldung.is-umgesetzt .pf-meldung__text, .pf-meldung.is-abgelehnt .pf-meldung__text { color: var(--tinte-2); }
.pf-meldung__kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-art { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--linie-stark); border-radius: var(--radius-s);
  font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tinte); background: var(--flaeche); white-space: nowrap; cursor: default; }
.pf-art.is-fehlalarm { border-style: dashed; }
.pf-art.is-allgemein { border-color: var(--linie); background: var(--grund); color: var(--tinte-2); }
.pflege .rueckmeldung-stand.is-neu { background: var(--karmin); color: var(--auf-karmin); }
.pf-meldung__von { color: var(--tinte-2); font-weight: 400; }
.pf-meldung__name { color: var(--tinte); font-weight: 600; }
.pf-meldung__alter { margin-left: auto; color: var(--tinte-2); font-weight: 400; white-space: nowrap; }
.pf-meldung__alter.is-lang { color: var(--karmin-dunkel); font-weight: 600; }
.pf-meldung__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 980px; }
.pf-meldung .anhang-leiste { margin-top: 0; }
.pf-meldung__fuss { display: flex; gap: 8px; margin: 0 -4px; }

.pf-bezug { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.pf-bezug__pruefung { display: inline-flex; align-items: center; gap: 8px; color: var(--tinte-2); font-weight: 400; }
.pf-bezug__alt { padding: 0 6px; border-radius: var(--radius-s); background: var(--flaeche-grau); color: var(--tinte); font-weight: 500; }

/* Knopf "Auftrag · Bauteil" - führt auf die Seite des Bauteils */
.pf-bauteil { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 3px 6px; margin: -3px -6px;
  border: 0; border-radius: var(--radius-s); background: none; color: var(--tinte); text-align: left; cursor: pointer; }
.pf-bauteil:hover { background: var(--flaeche-grau); }
.pf-bauteil:hover .kennung-klein { text-decoration: underline; text-underline-offset: 3px; }
.pf-bauteil .kennung-klein { font-weight: 500; white-space: nowrap; }
.pf-bauteil__bez { color: var(--tinte-2); font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-bauteil > .pw-icon:last-child { color: var(--tinte-2); }

.pf-befund { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--radius-m); background: var(--grund); max-width: 980px; }
.pf-befund__kopf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pf-befund__werte { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-befund__werte > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-befund__werte .klein { color: var(--tinte-2); font-weight: 400; }
.pf-befund__werte .kennung-klein { font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.pf-befund__hinweis { margin: 0; color: var(--tinte-2); font-weight: 400; }

.pf-antwort { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-left: 3px solid var(--gruen); border-radius: var(--radius-s);
  background: var(--gruen-hell); max-width: 980px; }
.pf-antwort .klein { color: var(--gruen-dunkel); }
.pf-antwort p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.pf-bearbeiten { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; border: 1px solid var(--linie-stark); border-radius: var(--radius-m);
  background: var(--flaeche); max-width: 980px; }
.pf-bearbeiten__zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pf-bearbeiten__hinweis { justify-content: space-between; }
.pf-zaehler { flex: none; font-variant-numeric: tabular-nums; }
.pf-bearbeiten__fuss { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- System ---------- */
.pf-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .pf-raster { grid-template-columns: minmax(0, 1fr); } }
.pf-karte { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border: 1px solid var(--linie); border-radius: var(--radius-l);
  background: var(--flaeche); min-width: 0; }
.pf-karte__kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pf-karte__kopf h2 { margin: 0; }
.pf-karte__kopf > .klein { color: var(--tinte-2); font-weight: 400; }
.pf-karte__rechts { margin-left: auto; }
.pf-karte .pw-zustand--flaeche { padding: 20px 16px; }
.pf-karte .pw-zustand--flaeche .pw-zustand__symbol { width: 44px; height: 44px; }

.pf-engine { display: flex; gap: 14px; align-items: flex-start; }
.pf-engine__symbol { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
.pf-engine.is-ok .pf-engine__symbol { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.pf-engine.is-gestoert .pf-engine__symbol { background: var(--gelb-hell); color: var(--gelb-dunkel); }
.pf-engine.is-still .pf-engine__symbol { background: var(--karmin-hell); color: var(--karmin-dunkel); }
.pf-engine.is-still .pf-engine__text > .text-stark { color: var(--karmin-dunkel); }
.pf-engine__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pf-engine__text p { margin: 0; }
.pf-daten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.pf-daten dt { color: var(--tinte-2); font-weight: 400; }
.pf-daten dd { margin: 0; color: var(--tinte); overflow-wrap: anywhere; }

.pf-wartung { display: flex; flex-direction: column; gap: 12px; }
.pf-wartung > p { margin: 0; }
.pf-wartung .pw-eingabe { width: 100%; }
.pf-vorschau { display: flex; flex-direction: column; gap: 4px; }
.pf-vorschau .hinweisleiste { padding: 8px 12px; border: 1px solid var(--linie); border-radius: var(--radius-m); }
.pf-vorschau.is-aus .hinweisleiste { opacity: .5; }

/* Säulen je Tag */
.pf-balken { display: flex; flex-direction: column; gap: 8px; }
.pf-balken__legende { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--tinte-2); font-weight: 400; }
.pf-balken__legende > span { display: inline-flex; align-items: center; gap: 5px; }
.pf-balken__ablesen { margin-left: auto; color: var(--tinte); font-weight: 500; }
.pf-balken__flaeche { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 0 4px; padding-top: 20px; }
.pf-balken__tag { display: flex; flex-direction: column; align-items: stretch; border-radius: var(--radius-s) var(--radius-s) 0 0; outline: none; cursor: default; }
.pf-balken__tag.is-wochenende { background: var(--grund); }
.pf-balken__tag.is-gezeigt { background: var(--flaeche-grau); }
.pf-balken__tag:focus-visible { box-shadow: var(--fokus-ring); }
.pf-balken__plot { position: relative; height: 140px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  border-bottom: 1px solid var(--linie-stark); }
.pf-balken__wert { flex: none; margin-bottom: 2px; color: var(--tinte); font-variant-numeric: tabular-nums; }
.pf-balken__saeule { flex: none; display: flex; flex-direction: column; width: 62%; max-width: 30px; min-height: 3px; border-radius: 3px 3px 0 0; overflow: hidden; }
.pf-balken__teil { flex-basis: 0; min-height: 2px; }
.pf-balken__teil + .pf-balken__teil { border-top: 1px solid var(--flaeche); }
.pf-balken__teil.is-rot { background: var(--rot); }
.pf-balken__teil.is-gelb { background: var(--gelb); }
.pf-balken__teil.is-gruen { background: var(--gruen); }
.pf-balken__datum { padding: 4px 0 2px; text-align: center; font-size: 11px; line-height: 14px; color: var(--tinte-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-balken__tag.is-heute .pf-balken__datum { color: var(--tinte); font-weight: 600; }

/* Tabellen (offene Aufträge, KI, Konten) */
.pf-tabelle { display: flex; flex-direction: column; border: 1px solid var(--linie); border-radius: var(--radius-m); background: var(--flaeche); overflow-x: auto; }
.pf-tabelle__zeile { display: grid; gap: 16px; align-items: center; min-width: min-content; min-height: 44px; padding: 8px 16px; border-bottom: 1px solid var(--linie); }
.pf-tabelle__zeile:last-child { border-bottom: 0; }
.pf-tabelle__kopf { min-height: 34px; padding-top: 6px; padding-bottom: 6px; color: var(--tinte-2); background: var(--flaeche); }
.pf-tabelle__zelle { min-width: 0; }
.pf-tabelle__zeile.is-leer { color: var(--tinte-2); }
.pf-tabelle__zeile.is-problem { background: #fdf6f8; }

.pf-ki { display: flex; flex-direction: column; gap: 12px; }
.pf-ausfaelle h3 { margin: 4px 0 6px; }
.pf-ausfaelle ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pf-ausfaelle li { display: grid; grid-template-columns: 110px minmax(160px, auto) minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 0;
  border-top: 1px solid var(--linie); }
.pf-ausfaelle li .text { overflow-wrap: anywhere; }