/* CoreForge · Build-Space · Backlog (Welle A3). Eigene Klassen mit Präfix bl-.
   Farben nur über die Variablen aus tokens.css (--cf-*); Hell und Dunkel kommen damit aus
   denselben Regeln. Knopf, Chip, Tabelle, Panel, Reiter, Dialog und Meldung kommen aus
   komponenten.css (cfk-) und werden hier nur angeordnet. */

.bl {
  display: grid;
  gap: 12px;
  min-width: 0;
}

/* ---------- Kopfzeile ---------- */

.bl-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.bl-kopf select,
.bl-kopf input[type="search"] {
  min-height: 36px;
  font: inherit;
  font-size: 14px;
}

.bl-kopf .cfk-eingabe,
.bl-listenkopf .cfk-eingabe,
.bl-auswahlleiste .cfk-eingabe,
.bl-feldreihe .cfk-eingabe,
.bl-kopfaktionen .cfk-eingabe {
  width: auto;
}

.bl-suche {
  flex: 1 1 220px;
  max-width: 320px;
}

.bl-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--cf-text-zwei);
}

.bl-kopf-luecke {
  flex: 1 1 0;
}

.bl-ansichten {
  display: inline-flex;
  overflow: hidden;
  background: var(--cf-karte);
  border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius);
}

.bl-ansicht-knopf {
  min-width: 36px;
  min-height: 34px;
  padding: 4px 10px;
  font: inherit;
  font-size: 16px;
  color: var(--cf-text-leise);
  background: none;
  border: 0;
  cursor: pointer;
}

.bl-ansicht-knopf + .bl-ansicht-knopf {
  border-left: 1px solid var(--cf-rahmen);
}

.bl-ansicht-knopf:hover {
  background: var(--cf-markierung);
}

.bl-ansicht-knopf[aria-pressed="true"] {
  color: var(--cf-akzent-schrift);
  background: var(--cf-akzent-weich);
}

/* ---------- Aktionsleiste der Mehrfachauswahl ---------- */

.bl-auswahlleiste {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 12px;
  background: var(--cf-akzent-weich);
  border: 1px solid var(--cf-akzent);
  border-radius: var(--cf-radius-karte);
}

.bl-auswahlleiste[hidden] {
  display: none;
}

.bl-auswahl-zahl {
  margin-right: 4px;
  color: var(--cf-akzent-schrift);
}

.bl-auswahlleiste select {
  min-height: 34px;
  font: inherit;
  font-size: 14px;
}

/* ---------- Statuszeile ---------- */

.bl-status {
  min-height: 1.4em;
  margin: 0;
  font-size: 14px;
  color: var(--cf-text-leise);
}

.bl-status[data-art="ok"] {
  color: var(--cf-erfolg-schrift);
}

.bl-status[data-art="fehler"] {
  color: var(--cf-gefahr);
  font-weight: 600;
}

/* ---------- Liste und Board als Karte ---------- */

.bl-listenkarte {
  display: grid;
  min-width: 0;
  background: var(--cf-karte);
  border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius-karte);
}

.bl-listenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cf-rahmen);
}

.bl-listentitel {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.bl-listenkopf select {
  font: inherit;
  font-size: 14px;
  color: var(--cf-text-zwei);
  background: transparent;
  border-color: transparent;
}

.bl-listenkarte .cfk-tabelle-huelle {
  min-width: 0;
}

.bl-listenkarte .cfk-tabelle-rahmen {
  border: 0;
  border-radius: 0;
}

.bl-listenfuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--cf-text-leise);
  border-top: 1px solid var(--cf-rahmen);
}

.bl-blaettern {
  display: inline-flex;
  gap: 4px;
}

.bl-zeile-issue {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.bl-typpunkt {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 2px;
  background: var(--cf-text-leise);
}

.bl-typ-feature {
  background: var(--cf-link);
}

.bl-typ-bug {
  background: var(--cf-gefahr);
}

.bl-typ-chore {
  background: var(--cf-warnung);
}

.bl-zeile-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bl-kennung,
.bl-mono {
  font-family: var(--cf-schrift-mono);
  font-size: 12px;
  color: var(--cf-text-leise);
}

.bl-zeile-titel {
  overflow-wrap: anywhere;
}

.bl-haken {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--cf-akzent);
}

/* ---------- Board ---------- */

.bl-brett {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  overflow-x: auto;
}

.bl-spalte {
  display: flex;
  flex: 0 0 236px;
  flex-direction: column;
  gap: 8px;
  min-width: 220px;
  padding: 10px;
  background: var(--cf-flaeche);
  border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius-karte);
}

.bl-spalte-ueber {
  border-color: var(--cf-gefahr);
}

.bl-spalte-ziel {
  border-color: var(--cf-fokus);
  box-shadow: inset 0 0 0 1px var(--cf-fokus);
}

/* Über der Grenze: die Ablage ist ein Hinweis, keine Sperre. */
.bl-spalte-voll {
  border-color: var(--cf-gefahr);
  box-shadow: inset 0 0 0 1px var(--cf-gefahr);
  background: var(--cf-gefahr-weich);
}

.bl-spalte-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bl-spalte-punkt {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cf-text-leise);
}

.bl-ton-ok { background: var(--cf-erfolg); }
.bl-ton-warn { background: var(--cf-warnung); }
.bl-ton-bad { background: var(--cf-gefahr); }
.bl-ton-info { background: var(--cf-link); }
.bl-ton-neutral { background: var(--cf-text-leise); }

.bl-spalte-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.bl-spalte-zahl {
  min-width: 22px;
  padding: 0 7px;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  color: var(--cf-text-zwei);
  background: var(--cf-markierung);
  border-radius: var(--cf-radius-voll);
  font-variant-numeric: tabular-nums;
}

.bl-karten {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bl-karte {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  background: var(--cf-karte);
  border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius);
  box-shadow: var(--cf-schatten-klein);
  cursor: grab;
}

.bl-karte:hover {
  border-color: var(--cf-text-leise);
}

.bl-karte-aktiv {
  border-color: var(--cf-akzent);
  box-shadow: inset 3px 0 0 var(--cf-akzent);
}

.bl-karte-laeuft {
  opacity: 0.6;
}

.bl-karte-oben {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 6px 8px;
}

/* Die Priorität steht unter dem Titel: in den schmalen Spalten bräche der Titel sonst mitten im Wort. */
.bl-karte-oben > :nth-child(3) {
  grid-column: 2;
  justify-self: start;
}

.bl-karte-oben .bl-haken {
  margin-top: 2px;
}

.bl-karte-titel {
  padding: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  color: var(--cf-text);
  background: none;
  border: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  cursor: pointer;
}

.bl-karte-titel:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bl-karte-zeile,
.bl-karte-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.bl-karte-fuss {
  justify-content: space-between;
  font-size: 12px;
  color: var(--cf-text-leise);
}

.bl-leer {
  padding: 8px 4px;
  font-size: 13px;
  color: var(--cf-text-leise);
}

.bl-zieht .bl-karte-titel,
.bl-zieht .bl-haken {
  pointer-events: none;
}

.bl-boardkarte > .bl-hinweis {
  padding: 0 14px 12px;
}

/* ---------- Panel ---------- */

/* Kopf des Panels: Kennung und Zustand oben, der Titel bekommt die volle Breite. */
.bl-md .cfk-md-kopf {
  flex-wrap: wrap;
}

.bl-md .cfk-md-titelblock {
  flex: 1 1 100%;
  order: 2;
}

.bl-md .cfk-md-kopfaktionen {
  flex: 1 1 100%;
  justify-content: flex-end;
  order: 1;
}

.bl-kopfaktionen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bl-statuswahl {
  min-height: 32px;
  padding: 4px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--cf-text);
  background: var(--cf-karte);
  border: 1px solid var(--cf-rahmen);
  border-left-width: 4px;
  border-radius: var(--cf-radius);
}

.bl-statuswahl.bl-ton-ok { border-left-color: var(--cf-erfolg); background: var(--cf-karte); }
.bl-statuswahl.bl-ton-warn { border-left-color: var(--cf-warnung); background: var(--cf-karte); }
.bl-statuswahl.bl-ton-bad { border-left-color: var(--cf-gefahr); background: var(--cf-karte); }
.bl-statuswahl.bl-ton-info { border-left-color: var(--cf-link); background: var(--cf-karte); }
.bl-statuswahl.bl-ton-neutral { border-left-color: var(--cf-text-leise); background: var(--cf-karte); }

.bl-panel {
  display: grid;
  gap: 14px;
}

.bl-block {
  display: grid;
  gap: 8px;
}

.bl-block-titel {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cf-text-leise);
}

.bl-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bl-leise,
.bl-zeile-klein {
  margin: 0;
  font-size: 13px;
  color: var(--cf-text-leise);
}

.bl-zeile-klein {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.bl-zuweisung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bl-feldreihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.bl-feldreihe select {
  flex: 1 1 140px;
  min-width: 0;
  font: inherit;
  font-size: 14px;
}

.bl-beschriftet {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--cf-text-zwei);
}

.bl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.bl-prioreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bl-priochip {
  min-height: 34px;
  padding: 4px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--cf-text);
  background: var(--cf-karte);
  border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius-voll);
  cursor: pointer;
}

.bl-priochip:hover {
  background: var(--cf-markierung);
}

.bl-priochip[aria-pressed="true"] {
  font-weight: 600;
}

.bl-prio-low[aria-pressed="true"] { border-color: var(--cf-text-leise); background: var(--cf-markierung); }
.bl-prio-medium[aria-pressed="true"] { border-color: var(--cf-link); color: var(--cf-link); background: var(--cf-info-weich); }
.bl-prio-high[aria-pressed="true"] { border-color: var(--cf-warnung); background: var(--cf-warnung-weich); }
.bl-prio-urgent[aria-pressed="true"] { border-color: var(--cf-gefahr); color: var(--cf-gefahr); background: var(--cf-gefahr-weich); }

.bl-kette {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  font-size: 14px;
  background: var(--cf-flaeche);
  border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius);
}

.bl-kette-dies {
  border: 2px solid var(--cf-akzent);
  background: var(--cf-karte);
}

.bl-liste-einfach {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bl-eintrag {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  background: var(--cf-flaeche);
  border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius);
}

.bl-eintrag-kopf {
  font-size: 12px;
  color: var(--cf-text-leise);
}

.bl-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.bl-aktionen-ende {
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--cf-rahmen);
}

.bl-fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--cf-text-leise);
}

.bl-hinweis {
  margin: 0;
  font-size: 13px;
  color: var(--cf-text-leise);
}

.bl-fehler {
  margin: 0;
  font-size: 14px;
  color: var(--cf-gefahr);
}

/* ---------- Dialog „Board konfigurieren“ ---------- */

.bl-konfig {
  display: grid;
  gap: 12px;
}

.bl-konfig-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 12px;
}

/* ---------- Schmale Fenster ---------- */

@media (max-width: 719.98px) {
  .bl-suche {
    max-width: none;
  }

  .bl-kopf-luecke {
    display: none;
  }
}

/* ---------- Liste neben offenem Panel: nur die Kernspalten ---------- */

.bl-zeile-issue {
  min-width: 200px;
}

.bl-md[data-offen="true"] .bl-listenkarte th:nth-child(3),
.bl-md[data-offen="true"] .bl-listenkarte td:nth-child(3),
.bl-md[data-offen="true"] .bl-listenkarte th:nth-child(n+5),
.bl-md[data-offen="true"] .bl-listenkarte td:nth-child(n+5) {
  display: none;
}

/* ---------- Verweise auf Issues (Graph, Roadmap, Planung) ---------- */

.bl-verweise {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bl-verweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
}

.bl-verweis .cfk-knopf {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
}

/* ---------- Graph ---------- */

.bl-graph-summe {
  padding: 10px 14px 0;
}

.bl-graph {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px 14px 14px;
  list-style: none;
}

.bl-graph-eintrag {
  padding: 10px 12px;
  background: var(--cf-flaeche);
  border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius);
}

.bl-graph-aktiv {
  border-color: var(--cf-akzent);
  box-shadow: inset 3px 0 0 var(--cf-akzent);
}

.bl-graph-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.bl-graph-titel {
  padding: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: var(--cf-text);
  background: none;
  border: 0;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.bl-graph-titel:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bl-graph-titel:focus-visible {
  outline: 2px solid var(--cf-fokus);
  outline-offset: 2px;
}

.bl-graph-liste {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
}

.bl-graph-zeile {
  display: grid;
  grid-template-columns: minmax(110px, 140px) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.bl-graph-zeile dt {
  font-size: 13px;
  color: var(--cf-text-leise);
}

.bl-graph-zeile dd {
  margin: 0;
  min-width: 0;
}

/* ---------- Roadmap ---------- */

.bl-roadmap {
  display: grid;
  gap: 12px;
  padding: 12px 14px 14px;
}

.bl-roadmap-gruppe {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--cf-rahmen);
  border-left: 4px solid var(--cf-akzent);
  border-radius: var(--cf-radius);
}

.bl-roadmap-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.bl-roadmap-titel {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.bl-roadmap-fuss {
  padding: 0 14px 12px;
}

/* ---------- Planung im Detail ---------- */

.bl-planung-teil {
  display: grid;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid var(--cf-rahmen);
}

.bl-planung-titel {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--cf-text-zwei);
}

.bl-planung-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
}

@media (max-width: 719.98px) {
  .bl-graph-zeile {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}