/* Testaufzeichnung — der Bereich links oben im Hauptmenü.
 * ======================================================
 * ANSAGE (Edgar, 21.08.2026):
 *
 *     „wir können die aufzeichnung auch in einem Bereich links oben im
 *      Hauptmenü machen, mit einem X zum Beenden (X nur aktivierbar wenn die
 *      Aufzeichnung beendet ist)."
 *     „Im popup brauch ich NUR den Aufnahmen / beenden Button und eine
 *      Sekundenanzeige" … „du kannst dir schritte im Testfenster behalten"
 *
 * Davor war das ein schwebendes Popup. Es hat vier Fehler produziert, die alle
 * daher kamen, dass es ein Overlay über einer arbeitenden Seite war (siehe
 * `aufzeichner_leiste.js`). Als Bereich in der Sidebar entfällt das komplett —
 * und mit ihm die Hälfte des Stylesheets: kein z-index, keine gemerkte
 * Position, keine gemerkte Größe.
 *
 * KEINE TRANSITION AUF DEN ZUSTANDSFARBEN: Ein Zustand, den der Nutzer sofort
 * sehen muss (Aufnahme läuft oder nicht), darf nicht animiert sein. Genau das
 * war Fehler Nummer eins.
 */
.djb-aufz {
  margin: 0 10px 10px;
  padding: 8px 9px 9px;
  background: rgba(var(--dbt-fg-rgb, 255, 255, 255), 0.04);
  border: 1px solid rgba(var(--dbt-fg-rgb, 255, 255, 255), 0.12);
  border-radius: 8px;
}

.djb-aufz[hidden] { display: none; }

.djb-aufz-kopf {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 7px;
}

.djb-aufz-titel {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.djb-aufz-zuknopf {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 0 4px;
  border-radius: 4px;
  cursor: pointer;
  opacity: .6;
  flex: 0 0 auto;
}

.djb-aufz-zuknopf:hover:not(:disabled) {
  opacity: 1;
  background: rgba(220, 38, 38, .8);
  color: var(--dbt-text, #fff);
}

/* „X nur aktivierbar wenn die Aufzeichnung beendet ist" (Ansage). */
.djb-aufz-zuknopf:disabled {
  opacity: .25;
  cursor: not-allowed;
}

/* Der Knopf: das Hauptelement des Bereichs. */
.djb-aufz-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid rgba(var(--dbt-tief-rgb, 0, 0, 0), 0.3);
  background: #ffffff;
  color: #111111;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.djb-aufz-knopf:disabled { cursor: default; }

.djb-aufz-punkt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dc2626;
  border: 1px solid rgba(var(--dbt-tief-rgb, 0, 0, 0), 0.3);
  flex: 0 0 auto;
}

.djb-aufz-knopf.laeuft .djb-aufz-punkt {
  animation: djb-aufz-blinken 1.4s ease-in-out infinite;
}

@keyframes djb-aufz-blinken {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
  .djb-aufz-knopf.laeuft .djb-aufz-punkt { animation: none; }
}

/* Sekunden und Schritte — die einzige Anzeige neben dem Knopf. */
.djb-aufz-zaehler {
  margin: 7px 0 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  opacity: .75;
  min-height: 1.25em;
}

.djb-aufz-zaehler b { opacity: 1; font-weight: 600; }

@media print {
  .djb-aufz { display: none; }
}

/* ── Play und Löschen in der Liste ────────────────────────────────────────── */
/* ANSAGE (Edgar, 21.08.2026): „Kannst du in der Liste bei jedeM Testcase auch
   einen Play Button einblenden, der die Aktionen ausführt, also das UI
   steuert?" — beide Knöpfe teilen sich eine Spalte. */
.au-tun {
  display: flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
}

.au-play {
  border: 1px solid var(--dbt-ok-rand, #166534);
  background: transparent;
  color: var(--dbt-ok-text, #4ade80);
  border-radius: 4px;
  padding: 1px 6px;
  cursor: pointer;
  font: inherit;
}

.au-play:hover { background: #166534; color: #fff; }

/* Der erste Klick fragt nach — Abspielen drückt echte Knöpfe. */
.au-play-frage {
  border-color: #92400e;
  color: var(--dbt-warn-text, #fbbf24);
  font-size: .85em;
}

.au-play-frage:hover { background: #92400e; color: #fff; }

/* ── Der Abspieler-Bereich (unter dem Aufnahme-Bereich) ─────────────── */
/* ANSAGE (Edgar, 21.08.2026): „der abspieler kann auch auf der Hauptseite sein
   (unter dem Aufnahme)". Er erbt `.djb-aufz` — gleicher Rahmen, gleicher Kopf,
   gleiches X. Eine fixe Leiste am oberen Rand gab es davor; sie ist entfallen,
   weil der Bereich hier ohnehin auf jeder Seite steht und nichts verdeckt. */
.djb-absp { margin-top: -4px; }

.djb-absp-wahl {
  width: 100%;
  margin-bottom: 7px;
  padding: 5px 6px;
  border-radius: 6px;
  border: 1px solid rgba(var(--dbt-fg-rgb, 255, 255, 255), 0.18);
  background: rgba(var(--dbt-tief-rgb, 0, 0, 0), 0.25);
  color: inherit;
  font: inherit;
  font-size: 12px;
}

.djb-absp-wahl:disabled { opacity: .5; }

.djb-absp-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid rgba(var(--dbt-tief-rgb, 0, 0, 0), 0.3);
  background: #ffffff;
  color: #111111;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.djb-absp-pfeil { font-size: 11px; line-height: 1; }

.djb-absp-fehler { color: var(--dbt-warn-text, #fbbf24); }

/* ── Ohne djangoBase-Sidebar: der Bereich steht frei ──────────────────────── */
/* BEFUND (21.08.2026, gemeldet aus CamTrack): „djangoBase legt die Bedienung in
   seine eigene Seitenleiste … beides benutzt CamTrack nicht. Ergebnis: Auf
   /kameras/, /live/kalender/ und jeder anderen Seite gab es weder den Bereich
   noch die Module."

   Ein Projekt mit eigener Basis-Vorlage erbt `_sidebar.html` nicht. Dort legt
   `aufzeichner_leiste.js` den Bereich selbst an und markiert ihn mit
   `djb-aufz-frei` — dann steht er schwebend unten links.

   UNTEN LINKS, NICHT RECHTS: Rechts unten sitzen in vielen Anwendungen
   Chat-Widgets und Nach-oben-Knöpfe. Links ist verlässlicher frei, und dort
   erwartet man die Bedienung auch, wenn ein Projekt eine eigene Seitenleiste
   hat. */
.djb-aufz-frei {
  position: fixed;
  left: 14px;
  bottom: 14px;
  width: 218px;
  margin: 0;
  /* Über allem: Chart- und Dialog-Ebenen liegen in diesen Projekten bei 9999. */
  z-index: 2147483000;
  background: var(--dbt-flaeche-tief, #111827);
  border: 1px solid var(--dbt-rand-stark, #374151);
  border-radius: 9px;
  box-shadow: 0 6px 22px rgba(var(--dbt-tief-rgb, 0, 0, 0), 0.55);
  color: var(--dbt-text, #e5e7eb);
  font: 13px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Der Abspieler sitzt darüber, damit beide nebeneinander Platz haben, ohne
   sich zu überlappen — die Höhe des Aufnahme-Bereichs ist bekannt. */
.djb-absp-frei { bottom: 138px; }

.djb-aufz-frei .djb-aufz-titel { opacity: .8; }
.djb-aufz-frei .djb-aufz-zaehler { opacity: .8; }

/* Der Knopf, der aus einer Aufzeichnung einen Testfall schreibt. */
.au-test {
  border: 1px solid var(--dbt-knopf, #1e40af);
  background: transparent;
  color: var(--dbt-akzent-text, #93c5fd);
  border-radius: 4px;
  padding: 1px 6px;
  cursor: pointer;
  font: inherit;
}

.au-test:hover:not(:disabled) { background: var(--dbt-knopf-hover, #1e40af); color: #fff; }
.au-test:disabled { opacity: .4; cursor: default; }

/* Die Rückmeldung darunter — sie nennt Pfad und Zahl der geprüften Abrufe,
   damit niemand übersieht, dass Quelltext im Projekt entstanden ist. */
.au-meldung td { font-size: 11.5px; padding: 3px 6px !important; }
.au-gut { color: var(--dbt-ok-text, #4ade80); }
.au-schlecht { color: var(--dbt-warn-text, #fbbf24); }