/* Team app ▸ Bug Report ▸ list view (28.10.2026, modules/botTestingListe.js, mockup team-bugreport-review scenes 1 + 2).
   Classes bgl-…; app tokens only (status dots: --status-punkt-* in style.css, dark and light). Panels never scroll:
   the list pages (15 rows), the detail panel sticks below the tab bar and grows with its content. */

#botTestingView .bgl { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

/* ---------- status tabs, legend, select ---------- */
#botTestingView .bgl-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
#botTestingView .bgl-tabs { flex-wrap: wrap; }
#botTestingView .bgl-legende { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0 0 0 auto; padding: 0; list-style: none; font-size: var(--fs-12); color: var(--text-2); }
#botTestingView .bgl-legende li { display: inline-flex; align-items: center; gap: var(--space-1); }
#botTestingView .bgl-waehlen.is-aktiv { box-shadow: inset 0 0 0 1px var(--bgn-akzent); }
#botTestingView .bgl-fehler { margin: 0; color: var(--text-danger); }

/* ---------- status dot ---------- */
.bgl-punkt {
  position: relative; flex: none; display: inline-block; width: 12px; height: 12px; box-sizing: border-box;
  border-radius: 50%; background: var(--status-punkt-offen); box-shadow: inset 0 0 0 1px var(--status-punkt-offen-rand);
}
.bgl-punkt.is-in_arbeit { background: var(--status-punkt-arbeit); box-shadow: none; }
.bgl-punkt.is-abgelehnt { background: var(--status-punkt-abgelehnt); box-shadow: none; }
.bgl-punkt.is-review { background: transparent; box-shadow: inset 0 0 0 2px var(--status-punkt-fertig); }
.bgl-punkt.is-fertig { background: var(--status-punkt-fertig); box-shadow: none; }
.bgl-punkt.is-leer { background: transparent; box-shadow: inset 0 0 0 1px var(--status-punkt-leer); }
/* Sent back after review: orange dot with a small red corner (mockup „Nacharbeit“). */
.bgl-punkt.is-nacharbeit::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--status-punkt-abgelehnt); box-shadow: 0 0 0 1.5px var(--bgn-karte-grund, var(--surface-1));
}

/* ---------- teams strip ---------- */
#botTestingView .bgl-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
#botTestingView .bgl-team {
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3) var(--space-4);
  border: 0; border-radius: var(--bgn-radius-karte); background: var(--bgn-karte-grund); box-shadow: var(--bgn-kante);
  color: var(--text-1); font: inherit; text-align: left; cursor: pointer;
}
#botTestingView .bgl-team:hover { background: var(--bgn-fuellung); }
#botTestingView .bgl-team.is-aktiv { box-shadow: var(--bgn-kante), inset 0 0 0 1px var(--bgn-akzent); }
#botTestingView .bgl-team:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bgl-team__kopf { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.bgl-team__name { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgl-team__zahlen { font-size: var(--fs-12); color: var(--text-2); font-variant-numeric: tabular-nums; }
.bgl-teil-balken { display: flex; height: 4px; gap: 2px; border-radius: var(--radius-pill); overflow: hidden; background: var(--bgn-fuellung-stark); }
.bgl-teil-balken > span { min-width: 0; }
.bgl-teil-balken .is-fertig { background: var(--status-punkt-fertig); }
.bgl-teil-balken .is-review { background: color-mix(in srgb, var(--status-punkt-fertig) 45%, transparent); }
.bgl-teil-balken .is-in_arbeit { background: var(--status-punkt-arbeit); }
.bgl-teil-balken .is-offen { background: var(--bgn-fuellung-stark); }

/* ---------- list + detail grid ---------- */
#botTestingView .bgl-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (min-width: 1100px) {
  #botTestingView .bgl-raster { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr); }
}
#botTestingView .bgl-spalte {
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3);
  border-radius: var(--bgn-radius-karte); background: var(--bgn-karte-grund); background-image: var(--w3-glanz, none); box-shadow: var(--bgn-kante);
}
#botTestingView .bgl-liste { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bgl-gruppe {
  margin: var(--space-3) var(--space-2) var(--space-1); font-size: var(--fs-12); font-weight: var(--fw-semibold);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
}
.bgl-gruppe:first-child { margin-top: var(--space-1); }

#botTestingView .bgl-zeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-3);
  min-width: 0; padding: var(--space-2) var(--space-3); border-radius: var(--bgn-radius-feld); cursor: pointer;
  outline: none;
}
#botTestingView .bgl.is-waehlen .bgl-zeile { grid-template-columns: auto auto minmax(0, 1fr) auto; }
#botTestingView .bgl.is-waehlen .bgl-zeile.is-glied { grid-template-columns: auto minmax(0, 1fr) auto; }
#botTestingView .bgl-zeile:hover { background: var(--w3-zeile-hover, var(--surface-2)); }
#botTestingView .bgl-zeile.is-gewaehlt { background: var(--bgn-fuellung); box-shadow: var(--bgn-kante-feld); }
#botTestingView .bgl-zeile.is-fest { box-shadow: inset 0 0 0 1px var(--bgn-akzent); }
#botTestingView .bgl-zeile:focus-visible { box-shadow: var(--focus-ring); }
#botTestingView .bgl-zeile.is-glied { margin-left: var(--space-6); border-left: 1px solid var(--border-2); border-radius: 0 var(--bgn-radius-feld) var(--bgn-radius-feld) 0; }
#botTestingView .bgl-zeile.is-gedimmt { opacity: .6; }
.bgl-zeile__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bgl-titel { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.bgl-nr { color: var(--text-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.bgl-titel__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); font-size: var(--fs-14); }
.bgl-titel__text--sammel { font-weight: var(--fw-semibold); }
.bgl-wer { display: flex; align-items: center; gap: var(--space-1); min-width: 0; font-size: var(--fs-12); color: var(--text-2); white-space: nowrap; overflow: hidden; }
.bgl-wer__trenner { color: var(--text-3); }
.bgl-namen { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bgl-avs { display: inline-flex; flex: none; }
.bgl-avs .bgl-av + .bgl-av { margin-left: -5px; }
#botTestingView .bgl-av { width: 18px; height: 18px; font-size: 9px; box-shadow: 0 0 0 1.5px var(--bgn-karte-grund, var(--surface-1)); }
.bgl-marken { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-1); }
.bgl-marke {
  display: inline-flex; align-items: center; min-height: 20px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-pill);
  background: var(--bgn-fuellung-stark); color: var(--text-2); font: inherit; font-size: var(--fs-11, 11px); white-space: nowrap;
}
.bgl-marke.is-dringlich, .bgl-marke.is-nacharbeit, .bgl-marke.is-loeschen { color: var(--text-danger); background: color-mix(in srgb, var(--status-punkt-abgelehnt) 14%, transparent); }
.bgl-marke.is-sammel { color: var(--c-blue); background: color-mix(in srgb, var(--c-blue) 14%, transparent); }
.bgl-marke.is-review-offen { color: var(--text-success); background: color-mix(in srgb, var(--status-punkt-fertig) 14%, transparent); }
.bgl-marke.is-review-zurueck { color: var(--text-warning); background: color-mix(in srgb, var(--status-punkt-arbeit) 14%, transparent); }
.bgl-zahl { font-size: var(--fs-12); color: var(--text-1); font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.bgl-klapp { border: 0; padding: 0 2px; background: transparent; color: var(--text-2); font: inherit; cursor: pointer; border-radius: var(--radius-sm); }
.bgl-klapp:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bgl-kasten { width: 16px; height: 16px; margin: 0; accent-color: var(--c-blue); }

.bgl-balken { display: inline-block; flex: none; width: 100%; max-width: 160px; height: 4px; border-radius: var(--radius-pill); background: var(--bgn-fuellung-stark); overflow: hidden; }
.bgl-balken--klein { width: 44px; }
.bgl-balken__fuell { display: block; height: 100%; background: var(--status-punkt-fertig); border-radius: inherit; }

/* ---------- multi-select bar ---------- */
#botTestingView .bgl-auswahl {
  position: sticky; bottom: var(--space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-3); border-radius: var(--bgn-radius-karte); background: var(--bgn-fuellung-stark); box-shadow: var(--bgn-kante), inset 0 0 0 1px var(--c-blue);
}
.bgl-sammel-form { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 1 1 320px; }
.bgl-sammel-form .dbot-feld { flex: 1 1 180px; min-width: 0; }
#botTestingView .bgl-select { min-height: 32px; padding: 0 var(--space-2); font-size: var(--fs-13); max-width: 100%; }

/* ---------- detail panel ---------- */
#botTestingView .bgl-detail {
  position: sticky; top: calc(var(--bgn-kopf-oben) + var(--space-4)); display: flex; flex-direction: column; gap: var(--space-3);
  min-width: 0; padding: var(--space-5, 20px); border-radius: var(--bgn-radius-karte); background: var(--bgn-karte-grund);
  background-image: var(--w3-glanz, none); box-shadow: var(--bgn-kante);
}
#botTestingView .bgl-detail--inline { position: static; margin: var(--space-1) 0 var(--space-2) var(--space-4); padding: var(--space-4); }
.bgl-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; font-size: var(--fs-12); color: var(--text-2); }
.bgl-detail__titel { margin: 0; font-size: var(--fs-17, 17px); font-weight: var(--fw-semibold); color: var(--text-1); overflow-wrap: anywhere; }
.bgl-detail__zahlen { margin: 0; font-size: var(--fs-13); color: var(--text-2); }
.bgl-link { cursor: pointer; }
.bgl-leise { color: var(--text-3); }
.bgl-zeit { color: var(--text-3); font-size: var(--fs-12); }

.bgl-stepper { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-12); color: var(--text-3); }
.bgl-schritt { display: inline-flex; align-items: center; gap: var(--space-1); }
.bgl-schritt + .bgl-schritt::before { content: ""; width: 16px; height: 1px; background: var(--border-3); margin-right: var(--space-1); }
.bgl-schritt.is-vorbei { color: var(--text-2); }
.bgl-schritt.is-jetzt { color: var(--text-1); font-weight: var(--fw-semibold); }

.bgl-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--fs-13); }
.bgl-meta__zeile { display: contents; }
.bgl-meta dt { color: var(--text-2); }
.bgl-meta dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; min-width: 0; }
.bgl-person { display: inline-flex; align-items: center; gap: var(--space-1); padding: 1px var(--space-2) 1px 2px; border-radius: var(--radius-pill); background: var(--bgn-fuellung-stark); }
.bgl-plus {
  min-height: 24px; padding: 0 var(--space-2); border: 1px dashed var(--border-3); border-radius: var(--radius-pill);
  background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-12); cursor: pointer;
}
.bgl-plus:hover { color: var(--text-1); border-color: var(--text-3); }
.bgl-plus:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bgl-text { padding: var(--space-3); border-radius: var(--bgn-radius-feld); background: var(--bgn-fuellung); color: var(--bgn-text-hell); font-size: var(--fs-13); overflow-wrap: anywhere; }
.bgl-text .bgn-beschreibung { margin: 0; -webkit-line-clamp: unset; display: block; max-height: none; }

.bgl-box { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--bgn-radius-feld); background: var(--bgn-fuellung); box-shadow: var(--bgn-kante-feld); }
.bgl-box.is-review { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-punkt-fertig) 50%, transparent); background: color-mix(in srgb, var(--status-punkt-fertig) 6%, var(--bgn-fuellung)); }
.bgl-box.is-nacharbeit, .bgl-box.is-loeschen { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-punkt-abgelehnt) 50%, transparent); background: color-mix(in srgb, var(--status-punkt-abgelehnt) 6%, var(--bgn-fuellung)); }
.bgl-box__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-13); }
.bgl-box__text { margin: 0; font-size: var(--fs-13); color: var(--bgn-text-hell); overflow-wrap: anywhere; }
.bgl-knoepfe, .bgl-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
#botTestingView .bgl-gefahr { color: var(--text-danger); }
.bgl-status { display: inline-flex; }
.bgl-feld-label { margin: 0; font-size: var(--fs-12); color: var(--text-2); }
.bgl-zurueck { display: flex; flex-direction: column; gap: var(--space-2); }

.bgl-wahl { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); border-radius: var(--bgn-radius-feld); background: var(--bgn-fuellung); box-shadow: var(--bgn-kante-feld); }
.bgl-wahl .dbot-feld { margin-top: var(--space-1); }
.bgl-wahl__zeile { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: var(--fs-13); color: var(--text-1); cursor: pointer; }
.bgl-wahl__zeile:hover { background: var(--bgn-fuellung-stark); }
.bgl-wahl__knopf { border: 0; background: transparent; font: inherit; text-align: left; }
.bgl-wahl__knopf:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.bgl-abschnitt { margin: var(--space-2) 0 0; font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.bgl-zeitstrahl { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-13); color: var(--text-2); }
.bgl-zeitstrahl__punkt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
.bgl-zeitstrahl__punkt strong { color: var(--text-1); }
.bgl-zeitstrahl__text { display: block; margin-top: 2px; color: var(--bgn-text-hell); overflow-wrap: anywhere; }
.bgl-notiz { display: flex; gap: var(--space-2); }
.bgl-notiz .dbot-feld { flex: 1 1 auto; min-width: 0; }

/* collective ticket checklist */
.bgl-fortschritt { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.bgl-check { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.bgl-check__zeile {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--space-2);
  min-height: 34px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: var(--fs-13);
}
.bgl-check__zeile:hover { background: var(--bgn-fuellung); }
.bgl-check__zeile input { width: 16px; height: 16px; margin: 0; accent-color: var(--status-punkt-fertig); }
.bgl-check__titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; padding: 0; background: transparent; color: var(--text-1); font: inherit; text-align: left; }
.bgl-check__titel:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bgl-check__zeile.is-zu .bgl-check__titel { text-decoration: line-through; color: var(--text-3); }
.bgl-check__wer { font-size: var(--fs-12); color: var(--text-3); white-space: nowrap; }
.bgl-check__bilder { display: inline-flex; align-items: center; gap: 2px; border: 0; padding: 0; background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-11, 11px); cursor: pointer; }
.bgl-check__bilder img { width: 28px; height: 20px; object-fit: cover; border-radius: 3px; box-shadow: var(--bgn-kante-feld); }

.bgn-review-option { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-13); color: var(--text-2); cursor: pointer; }
.bgn-review-option input { width: 16px; height: 16px; margin: 0; }
#botTestingView .bgn-ansicht { flex: none; }

/* ---------- phones: detail below the row, no horizontal scroll ---------- */
@media (max-width: 759px) {
  #botTestingView .bgl-legende { margin-left: 0; }
  #botTestingView .bgl-zeile { grid-template-columns: auto minmax(0, 1fr); }
  #botTestingView .bgl.is-waehlen .bgl-zeile { grid-template-columns: auto auto minmax(0, 1fr); }
  #botTestingView .bgl-zeile .bgl-marken { grid-column: 2 / -1; justify-content: flex-start; }
  #botTestingView .bgl-zeile.is-glied { margin-left: var(--space-3); }
  #botTestingView .bgl-detail--inline { margin-left: 0; }
  #botTestingView .bgl-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  #botTestingView .bgl-team { padding: var(--space-2) var(--space-3); gap: var(--space-1); }
  #botTestingView .bgl-team .bgl-avs { display: none; }
  .bgl-team__zahlen { font-size: var(--fs-11, 11px); }
  .bgl-check__zeile { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .bgl-check__wer, .bgl-check__bilder { display: none; }
  .bgl-meta { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .bgl-meta dt { margin-top: var(--space-1); }
}

/* team detail „Wer ist wie weit“ */
.bgl-wer-weit { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.bgl-wer-weit__zeile { display: grid; grid-template-columns: auto minmax(0, 7rem) minmax(60px, 1fr) auto; align-items: center; gap: var(--space-2); font-size: var(--fs-13); }
.bgl-wer-weit__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); }
.bgl-wer-weit__zeile .bgl-balken { max-width: none; }
.bgl-wer-weit__zahlen { font-size: var(--fs-12); color: var(--text-2); white-space: nowrap; }
#botTestingView .bgl-detail > .dbot-knopf { align-self: flex-start; }
@media (max-width: 759px) {
  .bgl-wer-weit__zeile { grid-template-columns: auto minmax(0, 1fr) auto; }
  .bgl-wer-weit__zeile .bgl-balken { display: none; }
}

/* Review 28.10.2026: the note field stays reachable – a long history scrolls inside its own box, and the sticky
   panel keeps room at the bottom for the floating „Ask FRF“ button. */
#botTestingView .bgl-zeitstrahl { max-height: min(40vh, 360px); overflow-y: auto; overscroll-behavior: contain; padding-right: var(--space-1); }
#botTestingView aside.bgl-detail { margin-bottom: 88px; }
#botTestingView .bgl-notiz { padding-right: 0; }
@media (max-width: 759px) {
  #botTestingView .bgl-zeitstrahl { max-height: 50vh; }
}