/*
 * Kurzbeschreibung: Aussehen der Übersicht „Kundenrückmeldungen" im Requests-Panel.
 * Hält sich an BRANDING.md: Radien 6/9/12/999 (§13), Schriftstufen 11/12/13/15/24 (§8a),
 * Stärken 400/600/700, Karten mit sichtbarem Rahmen (§15), Chips und Pillen aus dem
 * Kanon (§16). Hier steht nur die Anordnung — Farben kommen aus brand.css.
 *
 * WICHTIG: Der Workspace läuft standardmäßig DUNKEL und kennt kein --surface2.
 * Eine eigene Flächenvariable, die in beiden Themes trägt — feste helle Werte
 * ergaben auf dunklem Grund leuchtende Kästen.
 */

.ap {
  --ap-flaeche: rgba(255,255,255,0.05);
  --ap-flaeche-stark: rgba(255,255,255,0.08);
}
:root[data-theme="light"] .ap {
  --ap-flaeche: rgba(15,15,30,0.04);
  --ap-flaeche-stark: rgba(15,15,30,0.07);
}

.ap { display: block; margin-bottom: 16px; container-type: inline-size; }
.ap-unten { display: flex; flex-direction: column; gap: 0; }

/* Keine Karten (Ralph, 01.09.2026): alles steht flach auf dem Blatt, getrennt
   nur durch Linien — kein Rahmen, kein Kasten, keine eigene Flaeche. */
.ap > *, .ap-unten > * { border: 0; background: none; box-shadow: none; border-radius: 0; }
/* Kopf und Gruppen-Ueberschriften bleiben beim Scrollen stehen (Ralph,
   01.09.2026) — gescrollt wird nur durch die Eintraege. Die Kopfhoehe misst
   der Workspace nach jedem Zeichnen in --ap-kopf-h. */
.ap-kopf {
  position: sticky; top: 0; z-index: 30;
  background: var(--a4h-flaeche, var(--surface, #fff));
}
.ap-gruppe > .ap-summary {
  position: sticky; top: var(--ap-kopf-h, 150px); z-index: 20;
  background: var(--a4h-flaeche, var(--surface, #fff));
}
.ap-kopf, .ap-liste { padding: 12px 0; }
.ap-liste { padding-top: 4px; }

/* ── Kundenauswahl: Dropdown im Kopf ───────────────────────────────── */
/* Nur das Logo ist sichtbar; das Auswahlfeld liegt unsichtbar darueber. */
.ap-kundenwahl { position: relative; flex: none; width: 128px; height: 128px; }
.ap-kunde-logo {
  width: 128px; height: 128px; border-radius: 12px; object-fit: contain;
  background: #fff; padding: 8px; display: block;
  border: 1px solid var(--border);
}
.ap-kunde-ersatz {
  display: flex; align-items: center; justify-content: center;
  font-size: 54px; font-weight: 700; color: #111; padding: 0;
}
.ap-kunde-select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; appearance: none; border: 0; padding: 0;
}
.ap-select { width: auto; min-width: 190px; font-size: 13px; font-weight: 600; padding: 7px 10px; }

/* ── Kopf mit den Kennzahlen ───────────────────────────────────────── */
.ap-kopf { display: flex; flex-direction: column; gap: 10px; }
/* Kopfzeile: Kunde links, Kennzahlen daneben, Countdown rechts. */
.ap-kopf-zeile { position: relative; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ap-kpis { display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap; margin-left: 24px; }
.ap-kpi { min-width: 68px; }
.ap-kpi-rechts { margin-left: auto; text-align: right; }
.ap-kpi .a4h-label { margin-bottom: 2px; }
.ap-kpi-zahl { font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--text, #eeeef5); }
.ap-kpi.is-leer .ap-kpi-zahl { color: var(--text3); }
.ap-kpi.is-ok .ap-kpi-zahl { color: var(--gruen, #3ecf8e); }
.ap-kpi.is-warn .ap-kpi-zahl { color: var(--bernstein, #f0a500); }
.ap-kpi.is-danger .ap-kpi-zahl { color: var(--rot, #e5484d); }

/* Sitzungszustand + Kontingent: mittig rechts neben den Kennzahlen. */
.ap-sitzungsinfo {
  display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap;
  /* Auch dieser Block steht mittig zwischen seinen Nachbarn: mit „auto" an
     beiden Blöcken teilt Flex den freien Raum in drei gleiche Luecken auf. */
  margin: 0 auto;
}
/* Die Laufzeiten stehen mittig zwischen Kontingent und Trigger: beidseitig
   „auto" teilt den freien Raum gleich auf (Ralph, 01.09.2026). */
.ap-dauerinfo {
  display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap;
  margin: 0 auto;
}
/* Wortwerte (live/geschlossen, „4 von 4") tragen exakt dieselbe Schrift und
   Groesse wie die Kennzahlen links (Ralph, 01.09.2026). */
.ap-kpi.is-text .ap-kpi-zahl { white-space: nowrap; }
.ap-laufend { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text2); }
.ap-spin { width: 11px; height: 11px; border-width: 2px; flex: none; }

/* ── Aufklappbare Karten (Steuerung, Erledigt, Sitzung) ────────────── */
.ap-summary {
  display: flex; align-items: baseline; gap: 8px; cursor: pointer;
  list-style: none; padding: 2px 0;
}
.ap-summary::-webkit-details-marker { display: none; }
.ap-summary::before { content: '▸'; color: var(--text3); font-size: 11px; }
details[open] > .ap-summary::before { content: '▾'; }
.ap-summary-titel { font-size: 15px; font-weight: 700; color: var(--text, #eeeef5); }

/* Steuerung rechts im Kopf: dieselbe Form wie die Kennzahlen links, nur mit
   Auswahl dahinter (Ralph, 01.09.2026). */
.ap-steuerung {
  display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap;
  margin-left: auto; justify-content: flex-end;
}
.ap-wahl-feld { position: relative; display: inline-block; }
/* Das Auswahlfeld liegt unsichtbar ueber dem Wert — geklickt wird der Wert. */
.ap-wahl-feld > select,
.ap-wahl-feld > input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; appearance: none; border: 0; padding: 0;
}
.ap-kpi-wahl .ap-kpi-zahl { cursor: pointer; white-space: nowrap; }
.ap-kpi-wahl:hover .ap-kpi-zahl { text-decoration: underline; text-underline-offset: 3px; }
.ap-wahl-pfeil { font-size: 11px; color: var(--text3); margin-left: 5px; vertical-align: middle; }
.ap-push-knopf {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--text, #eeeef5);
  white-space: nowrap;
}
.ap-push-knopf:hover { text-decoration: underline; text-underline-offset: 3px; }
.ap-kpi-push { position: relative; }
.ap-push-menu {
  position: absolute; right: 0; top: 100%; z-index: 20; margin-top: 6px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  background: var(--surface, #16161f); border: 1px solid var(--border); border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25); min-width: 150px;
}
.ap-push-zeile {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text, #eeeef5);
  padding: 4px 2px; white-space: nowrap;
}
.ap-push-zeile input { accent-color: var(--brand, #635bff); width: 15px; height: 15px; cursor: pointer; }

.ap-select-s { min-width: 0; font-size: 12px; font-weight: 600; padding: 5px 8px; }
.ap-zeit { width: auto; padding: 5px 8px; font-size: 12px; }
.ap-push { display: flex; align-items: center; gap: 5px; }
.ap-push .a4h-label { margin-right: 2px; }

/* ── Liste der Rückmeldungen ───────────────────────────────────────── */
/* Keine Linie je Zeile (Ralph, 01.09.2026) — es waren zu viele. Getrennt wird
   nur noch nach Gruppe; die einzelne Zeile hebt sich beim Zeigen hervor. */
.ap-zeile { border-radius: 6px; }
.ap-zeile:hover { background: var(--ap-flaeche); }
/* Erledigte sind genauso lesbar wie offene (Ralph, 01.09.2026) — sie sind das
   Archiv der Arbeit, kein Abfall. Unterschieden wird ueber die gruene Pille. */
.ap-zeile.is-fertig .ap-text { color: var(--text, #eeeef5); }
.ap-zeile-kopf {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; cursor: pointer;
  font-size: 13px;
}
.ap-zeile-kopf:hover .ap-text { color: var(--text, #eeeef5); }
.ap-nr { flex: none; width: 34px; font-size: 12px; font-weight: 700; color: var(--text3); }
.ap-pille { flex: none; display: inline-flex; align-items: center; gap: 5px; }
.ap-bereich { flex: none; width: 54px; font-size: 12px; color: var(--text2); }
.ap-text {
  flex: 1; min-width: 0; color: var(--text, #eeeef5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Zeiten stehen links vor der Nummer (Ralph, 01.09.2026) — feste Spalten,
   damit die Nummern darunter trotzdem alle auf einer Linie beginnen. */
.ap-zeiten {
  flex: none; display: flex; gap: 10px; font-size: 12px; color: var(--text2);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ap-zeiten > span { display: inline-block; width: 84px; }
.ap-zeiten > .ap-zeit-fertig { width: 94px; }
.ap-zeit-fertig { color: var(--gruen, #3ecf8e); }
.ap-pfeil { flex: none; color: var(--text3); font-size: 11px; }

.ap-detail {
  padding: 12px 14px 12px 14px; margin: 0 0 10px 44px; display: flex; flex-direction: column; gap: 10px;
  background: var(--ap-flaeche); border-radius: 6px;
}
.ap-detail .ap-hinweis { background: var(--ap-flaeche-stark); }
/* Was bei der Umsetzung gemacht wurde — steht direkt am erledigten Eintrag. */
.ap-umgesetzt {
  font-size: 12px; line-height: 1.5; color: var(--text2);
  background: var(--ap-flaeche-stark); border-radius: 6px; padding: 8px 10px;
  border-left: 3px solid var(--gruen, #3ecf8e);
}
.ap-volltext { font-size: 13px; line-height: 1.55; color: var(--text, #eeeef5); white-space: pre-wrap; }
.ap-hinweis {
  font-size: 12px; line-height: 1.5; color: var(--text2);
  background: var(--ap-flaeche); border-radius: 6px; padding: 8px 10px;
}
.ap-bild { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ap-bild img {
  display: block; max-width: 320px; width: 100%; border-radius: 6px;
  border: 1px solid var(--border);
}
.ap-bild.is-ersatz img { opacity: 0.75; }

/* Die vier Klassifizierungen als Akkordeon — eine Zeile pro Gruppe. */
/* Keine Trennlinien mehr (Ralph, 01.09.2026) — es trennt der Abstand. */
.ap-gruppe { padding: 6px 0; }
.ap-gruppe > .ap-summary .ap-summary-titel { font-size: 13px; font-weight: 700; }
.ap-gruppe[open] > .ap-summary { margin-bottom: 4px; }

/* ── Sitzung mitlesen: Fenster ueber der Ansicht, per Auge geoeffnet ── */
.ap-auge {
  display: inline-flex; align-items: center; justify-content: center;
  /* Mittig zu den Werten der Kennzahlen, nicht darunter (Ralph, 01.09.2026):
     Beschriftung 11px + 2px Abstand, Wert 25px hoch — Mitte liegt bei ~27px. */
  width: 34px; height: 34px; margin-top: 10px; flex: none;
  background: none; border: 1px solid var(--border); border-radius: 9px;
  color: var(--text2); cursor: pointer;
}
.ap-auge:hover { color: var(--text, #eeeef5); border-color: var(--text3); }
.ap-auge.is-on { color: #fff; background: var(--brand, #635bff); border-color: transparent; }
.ap-sitzung-hinter { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.35); }
.ap-sitzung {
  position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: min(560px, 92vw);
  display: flex; flex-direction: column; padding: 16px 18px;
  background: var(--surface, #16161f); border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(0,0,0,0.3);
}
.ap-sitzung-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ap-sitzung-zu {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--text3); padding: 0 2px;
}
.ap-sitzung-zu:hover { color: var(--text, #eeeef5); }
.ap-sitzung-text {
  margin: 10px 0 0; padding: 10px 12px; flex: 1; min-height: 0; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.5; color: var(--text2);
  background: var(--ap-flaeche); border-radius: 6px;
}

@media (max-width: 640px) {
  .ap-kpis { gap: 14px; margin-left: 0; }
  .ap-sitzungsinfo, .ap-dauerinfo { margin: 0; width: 100%; }
  .ap-steuerung { margin-left: 0; justify-content: flex-start; gap: 16px; width: 100%; }
  .ap-select { min-width: 0; flex: 1; }
  .ap-kpi-rechts { margin-left: 0; text-align: left; }
  .ap-kundenwahl, .ap-kunde-logo { width: 88px; height: 88px; }
  .ap-bereich, .ap-zeiten { display: none; }
  .ap-detail { padding-left: 0; }
  .ap-reihe > .a4h-field-label { width: 100%; }
}

/* Bild nicht die Ansicht dominieren lassen — Plakate sind hochformatig. */
.ap-bild img { max-width: 220px; max-height: 260px; width: auto; object-fit: contain; }

/* Handeln, ohne die Ansicht zu verlassen. */
.ap-aktionen {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 10px;
}
.ap-aktionen .ap-herkunft { margin-left: auto; }

/* Markierungen des Kunden — als Punkte über dem Bild, aus Koordinaten gezeichnet. */
/* Muss sich auf das Bild schrumpfen, sonst sitzen die Punkte daneben statt darauf:
   als Flex-Kind streckt sich der Link sonst über die volle Breite. */
.ap-bild-flaeche {
  position: relative; display: inline-block; line-height: 0;
  align-self: flex-start; width: max-content; max-width: 100%;
}
.ap-marker {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; background: #e5484d; color: #fff; border: 2px solid #fff;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 2px 8px rgba(229,72,77,0.5);
}

/* Vorher/Nachher nebeneinander — bei schmalem Fenster untereinander. */
.ap-vergleich { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.ap-vergleich .ap-bild { flex: 1 1 200px; max-width: 260px; }
.ap-vergleich .ap-bild img { max-width: 100%; max-height: 320px; }
.ap-vergleich .is-nachher figcaption { color: var(--text2); font-weight: 600; }
/* Rahmen um die geänderten Stellen — ausgerechnet, nicht geraten. */
.ap-diff {
  position: absolute; border: 2px solid #f0a500; border-radius: 3px;
  background: rgba(240,165,0,0.14); box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset;
  pointer-events: none;
}