/* FCP Begehung — Knopfleiste, Kanban Cockpit und Pruefpunkte (06.09.2026
 * Owner-Auftrag "Begehungsmodus", am 08.09.2026 vom Popover auf ein Modal
 * umgestellt). Nur sichtbar fuer Superadmins mit gesetztem Flag
 * (public/js/fcp-begehung.js), auf jeder /app/*-Route.
 *
 * Die Modal-Schale selbst steht NICHT hier, sondern beim Dialog-Host
 * (.catch-dialog--content / .catch-dialog--wide in public/css/main.css) --
 * es gibt genau eine Dialogquelle. Hier stehen die Leiste, die Bereiche im
 * Modal (Reiter, Umschalter, Meldezeile) und die Pruefpunkt-Liste.
 *
 * Tokens: umgestellt auf die --rd-*-Familie aus public/css/
 * app-shell-redesign.css (Owner-Auftrag 06.09.2026) -- dieselbe Familie,
 * die die App-Huelle und der Elementpicker (Begehung Stufe 1) tragen.
 * Erreichbarkeit geprueft: body[data-app-theme="fcp_tactical"] ist auf
 * /app/*-Routen immer aktiv (main.css, Site.astro effectiveAppTheme) und
 * setzt dort --rd-bg/--rd-surface/--rd-surface-2/--rd-on-accent bereits im
 * Hellen; html[data-fcp-theme="dark"] body[data-app-theme="fcp_tactical"]
 * ergaenzt im Dunkeln zusaetzlich --rd-line/--rd-ink/--rd-ink-2/--rd-muted/
 * --rd-gold (main.css). Diese Leiste haengt wie der Elementpicker direkt an
 * document.body, ausserhalb von .is-redesign -- fuer genau diesen Fall
 * (body-angehaengtes Popover ausserhalb .is-redesign) benutzt der Bestand
 * in app-shell-redesign.css (.fcp-dt-overlay--popover .fcp-dt-menu, Owner-
 * Befund 04.09.2026, dort kommentiert) durchgehend die Fallback-Schreibweise
 * var(--rd-…, <heller Literalwert>): im Hellen greift der Fallback (dort
 * ist z. B. --rd-line noch nicht gesetzt), im Dunkeln loest dieselbe
 * Variable auf den echten dunklen Tabellenwert auf. Dieselbe Schreibweise
 * und dieselben Literalwerte werden hier 1:1 uebernommen, nichts neu
 * erfunden. Keine Hex-Literale ausser als var-Fallback wie im Bestand --
 * Status-Unterscheidung laeuft weiter ueber Fuellung/Kontur/Deckkraft.
 */

.fcpb-bar {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 640;
  display: flex;
  gap: 10px;
  align-items: center;
}

.fcpb-btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--rd-line, rgba(var(--tint-rgb), .14));
  background: var(--rd-surface, #ffffff);
  color: var(--rd-ink, #2a2d24);
  font-size: 13.5px;
  font-weight: 650;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.fcpb-btn:hover {
  border-color: var(--rd-gold, #d46a20);
}

.fcpb-btn:focus-visible {
  outline: 2px solid var(--rd-gold, #d46a20);
  outline-offset: 2px;
}

.fcpb-btn--list.is-active {
  border-color: var(--rd-gold, #d46a20);
  color: var(--rd-gold, #d46a20);
}

.fcpb-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--rd-gold, #d46a20);
  color: var(--rd-on-accent, #fff);
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Karte 817ea491 (Owner-Entscheidung 13.09.2026): 0 offen heisst fertig, und
   das soll man sehen. Der Zaehler traegt dann "fertig" statt einer Zahl, und
   Knopf wie Badge wechseln von Gold auf Gruen. Tokens statt fester Farbe,
   damit Hell und Dunkel mitgehen. */
.fcpb-btn--list.is-fertig {
  border-color: var(--rd-ok, #2e7d32);
  color: var(--rd-ok, #2e7d32);
}

.fcpb-btn--list.is-fertig .fcpb-badge {
  background: var(--rd-ok, #2e7d32);
  color: var(--rd-on-accent, #fff);
}

/* ── Popover: Tester-Liste ─────────────────────────────────────────── */

/* ── Kanban Cockpit je Seite (08.09.2026, Meldung 817ea491) ──────────
   Loest das Popover ab. Die Schale selbst (Kopf, Schliessen 36x36, feste
   Aktionsleiste, Desktop-Modal / Handy-Vollbild) gehoert dem Dialog-Host
   (.catch-dialog--content.catch-dialog--wide in public/css/main.css,
   FCP_UI_STANDARDS §1). Hier steht nur, was IM Modal liegt: Reiter,
   Umschalter, Board-Platz, Meldezeile. Innerhalb der Schale gelten deren
   Farben (main.css) -- deshalb hier keine eigene Flaeche und kein eigener
   Rahmen, nur Abstaende, Typografie und die --rd-*-Familie fuer Text. */

.fcpb-cockpit__title {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
}

.fcpb-cockpit__context {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--rd-muted, #7a7c68);
}

.fcpb-cockpit__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.fcpb-cockpit__tab {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--rd-line, rgba(var(--tint-rgb), .14));
  background: transparent;
  color: var(--rd-muted, #7a7c68);
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.fcpb-cockpit__tab.is-active {
  border-color: var(--rd-gold, #d46a20);
  color: var(--rd-gold, #d46a20);
}

.fcpb-cockpit__tab:focus-visible {
  outline: 2px solid var(--rd-gold, #d46a20);
  outline-offset: 2px;
}

/* Ein Bereich je Reiter. Bewusst ohne eigene display-Regel, damit das
   hidden-Attribut greift -- die zusaetzliche Zeile darunter ist der
   ausdrueckliche Riegel gegen den Fehler aus Befund 7101e0e6 (eine
   display-Regel schlug hidden). */
.fcpb-cockpit__pane[hidden] {
  display: none;
}

.fcpb-cockpit__scope {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.fcpb-cockpit__scope-btn.is-active {
  border-color: var(--rd-gold, #d46a20);
  color: var(--rd-gold, #d46a20);
}

.fcpb-cockpit__msg {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--rd-muted, #7a7c68);
  min-height: 18px;
}

.fcpb-bar__error {
  max-width: min(360px, calc(100vw - 32px));
}

.fcpb-empty,
.fcpb-loading {
  margin: 8px 0;
  font-size: 13px;
  color: var(--rd-muted, #7a7c68);
}

.fcpb-error {
  margin: 8px 0;
  font-size: 13px;
  color: var(--rd-ink, #2a2d24);
  background: var(--rd-surface-2);
  border: 1px dashed var(--rd-line, rgba(var(--tint-rgb), .14));
  border-radius: 10px;
  padding: 10px 12px;
}

.fcpb-group {
  margin: 0 0 14px;
}

.fcpb-group:last-child {
  margin-bottom: 0;
}

.fcpb-group__title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rd-muted, #7a7c68);
}

.fcpb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fcpb-item {
  border: 1px solid var(--rd-line, rgba(var(--tint-rgb), .14));
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--rd-surface-2);
}

.fcpb-item__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.fcpb-item__nr {
  font-size: 11px;
  font-weight: 700;
  color: var(--rd-muted, #7a7c68);
  flex: none;
}

.fcpb-item__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere; /* 06.09.: lange Elementtexte (AlleAktivInaktiv…) sprengten das Popover seitlich */
  font-size: 13px;
  line-height: 1.4;
}

.fcpb-item__jump {
  font-size: 11.5px;
  color: var(--rd-gold, #d46a20);
  text-decoration: none;
  flex: none;
}

.fcpb-item__jump:hover {
  text-decoration: underline;
}

.fcpb-item__befund {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--rd-muted, #7a7c68);
  line-height: 1.4;
}

.fcpb-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* ── Status-Pille ──────────────────────────────────────────────────── */

.fcpb-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  flex: none;
  border: 1px solid var(--rd-line, rgba(var(--tint-rgb), .14));
  color: var(--rd-muted, #7a7c68);
  background: transparent;
}

.fcpb-pill--passt {
  border-color: var(--rd-gold, #d46a20);
  color: var(--rd-gold, #d46a20);
}

.fcpb-pill--befund {
  border-style: dashed;
  color: var(--rd-ink, #2a2d24);
}

.fcpb-pill--entfaellt {
  opacity: .6;
  text-decoration: line-through;
}

/* ── Mini-Knoepfe je Pruefpunkt ────────────────────────────────────── */

.fcpb-mini-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--rd-line, rgba(var(--tint-rgb), .14));
  background: transparent;
  color: var(--rd-muted, #7a7c68);
  font-size: 12px;
  font-weight: 650;
  font-family: inherit;
  cursor: pointer;
}

.fcpb-mini-btn:hover {
  color: var(--rd-ink, #2a2d24);
  border-color: var(--rd-muted, #7a7c68);
}

.fcpb-mini-btn--warn:hover {
  border-color: var(--rd-gold, #d46a20);
  color: var(--rd-gold, #d46a20);
}

.fcpb-mini-btn--ghost {
  opacity: .8;
}

.fcpb-mini-btn[disabled] {
  opacity: .5;
  cursor: progress;
}

@media (max-width: 480px) {
  .fcpb-btn {
    padding: 0 14px;
    font-size: 12.5px;
  }

  .fcpb-bar {
    right: 8px;
  }
}

/* ── Begehung Stufe 3 (06.09.2026): Kurz-ID/Kanal-Chips (Tester-Liste,
   Cockpit- und Feedback-Tabelle), Screenshot-Vorschau im Meldedialog,
   Screenshot-Overlay im Cockpit, Hinweis-Pille "Feature fehlt". Gleiche
   --rd-*-Familie wie oben, keine neuen Farbwerte, kein --accent. ────── */

.fcpb-btn--feature:hover {
  border-color: var(--rd-gold, #d46a20);
}

.fcpb-chip-id {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--rd-line, rgba(var(--tint-rgb), .14));
  background: var(--rd-surface-2);
  color: var(--rd-muted, #7a7c68);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  flex: none;
}

.fcpb-chip-channel {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--rd-line, rgba(var(--tint-rgb), .14));
  color: var(--rd-muted, #7a7c68);
  font-size: 10.5px;
  font-weight: 700;
  flex: none;
}

.fcpb-chip-channel--feature {
  border-color: var(--rd-gold, #d46a20);
  color: var(--rd-gold, #d46a20);
}

/* Hinweis-Pille im Feature-Modus des Elementpickers ("Element antippen
   oder Esc für die ganze Seite"), public/js/fcp-elementpicker.js. */
.fcpb-hint {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 642;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--rd-surface, #ffffff);
  border: 1px solid var(--rd-gold, #d46a20);
  color: var(--rd-ink, #2a2d24);
  font-size: 12.5px;
  font-weight: 650;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

/* Screenshot-Vorschau im Meldedialog (fcp-elementpicker.js #fcpEpScreenshotPreview). */
/* Owner-Befund 06.09.2026 (Meldung 546da82c „screenshot springt immernoch nicht
   zurück“): display:flex überschrieb das hidden-Attribut, die alte Vorschau blieb
   nach dem Zurücksetzen sichtbar. Deshalb :not([hidden]). */
.fcpb-shot-preview:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}

.fcpb-shot-thumb {
  max-width: 160px;
  max-height: 160px;
  border-radius: 8px;
  border: 1px solid var(--rd-line, rgba(var(--tint-rgb), .14));
}

.fcpb-shot-size {
  font-size: 11.5px;
  color: var(--rd-muted, #7a7c68);
}

.fcpb-shot-remove {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--rd-line, rgba(var(--tint-rgb), .14));
  background: transparent;
  color: var(--rd-muted, #7a7c68);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}

/* Screenshot-Overlay im Feedback-Cockpit (public/js/fcp-mask-data-resolver.js
   openScreenshotOverlay(), Spalte fcp_screenshot_action). */
.fcpb-shot-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .6);
  padding: 24px;
  /* Seit dem Owner-Befund 7101e0e6 (08.09.2026) ist die Schale ein <dialog>
     und wird mit showModal() geoeffnet — nur so liegt sie ueber dem Dialog,
     aus dem heraus der Screenshot geoeffnet wird (Top-Layer schlaegt jeden
     z-index). Die folgenden Zeilen raeumen die Browservorgaben des
     dialog-Elements weg; z-index bleibt fuer den Fall stehen, dass die Schale
     ohne Modalmodus benutzt wird. */
  border: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  color: inherit;
}

.fcpb-shot-overlay:not([open]) {
  display: none;
}

.fcpb-shot-overlay::backdrop {
  background: rgba(0, 0, 0, .6);
}

.fcpb-shot-overlay__img {
  max-width: min(90vw, 1200px);
  max-height: 85vh;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}

.fcpb-shot-overlay__close {
  position: fixed;
  top: 18px;
  right: 22px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--rd-line, rgba(var(--tint-rgb), .3));
  background: var(--rd-surface, #ffffff);
  color: var(--rd-ink, #2a2d24);
  font-size: 20px;
  cursor: pointer;
}