/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — patterns/list.css
   Version: 0.1.2 · Build: 2026-09-29

   0.1.2 — .bh-list__row: die Listenzeile selbst. Sie fehlte, obwohl das
   Pattern Werkzeugleiste, Auswahl und Fuß schon hatte — der Team Hub führte
   zwei eigene Familien dafür (.list-row, .member-row). Drei Modifier:
   --flush (Behälter polstert selbst), --divided (Linien statt Abstand),
   --stacked (senkrecht). Die Hoverfläche hängt an a.bh-list__row, nicht an
   einem Modifier.

   0.1.1 — Die Breite des Suchfelds war auf 240px festgenagelt. In einer
   Karte passend, in einer breiten Werkzeugleiste zu eng. Jetzt
   --bh-list-search-w mit clamp(), nach dem Vorbild von patterns/detail.css
   (--bh-detail-aside-w).
   Benötigt: tokens.css, base.css, table.css, segmented.css, pagination.css,
             patterns/shell.css, patterns/overview.css (Seitenkopf)
   VENDORED — READ-ONLY.

   Aufbau, verbindlich: Seitenkopf → Werkzeugleiste → Tabelle → Pagination.
   Der Statusfilter ist ein segmented, keine Tabs.
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-list { display: flex; flex-direction: column; gap: var(--bh-space-4); }

/* ── Werkzeugleiste ──────────────────────────────────────────────────────
   Links Filter, rechts Suche und Aktionen. Nie umgekehrt.                   */
.bh-list__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bh-space-3);
  flex-wrap: wrap;
}
.bh-list__filters { display: flex; align-items: center; gap: var(--bh-space-2); flex-wrap: wrap; min-width: 0; }
.bh-list__tools   { display: flex; align-items: center; gap: var(--bh-space-2); margin-left: auto; }

/* Wie breit das Suchfeld sein soll, hängt davon ab, wonach gesucht wird und
   wie viel Platz die Werkzeugleiste hat — beides weiß nur die Seite. clamp()
   hält es zwischen „noch tippbar" und „nimmt nicht die halbe Leiste".

   Vorbild: patterns/detail.css mit --bh-detail-aside-w. */
.bh-list__search { position: relative; display: flex; align-items: center; --bh-list-search-w: 240px; }
.bh-list__search > svg {
  position: absolute;
  left: var(--bh-space-3);
  width: var(--bh-icon-size); height: var(--bh-icon-size);
  color: var(--bh-text-muted);
  pointer-events: none;
}
.bh-list__search .bh-input {
  width: clamp(160px, var(--bh-list-search-w), 480px);
  padding-left: calc(var(--bh-space-6) + var(--bh-space-1));
}

/* ── Auswahlleiste — erscheint, wenn Zeilen markiert sind ────────────────── */
.bh-list__selection {
  display: flex;
  align-items: center;
  gap: var(--bh-space-3);
  padding: var(--bh-space-2) var(--bh-space-4);
  border: 1px solid var(--bh-color-accent);
  border-radius: var(--bh-radius-lg);
  background: var(--bh-color-accent-soft);
  color: var(--bh-text-primary);
  font-size: var(--bh-text-sm);
}
.bh-list__selection[hidden] { display: none; }
.bh-list__selection-count { font-weight: var(--bh-weight-semibold); font-variant-numeric: tabular-nums; }
.bh-list__selection-actions { margin-left: auto; display: flex; gap: var(--bh-space-2); }

/* ── Fuß ─────────────────────────────────────────────────────────────────── */
.bh-list__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--bh-space-3); }

/* ── Die Listenzeile ────────────────────────────────────────────────────────

   EIN Eintrag, waagerecht, anklickbar oder nicht. Sie ist NICHT .bh-entity:
   Die Entitätszeile ist der INHALT einer Karte und bringt keine Fläche mit;
   diese hier IST die Zeile — mit Polsterung, Radius und, wenn sie ein Link
   ist, einer Hoverfläche.

   Zusammengeführt aus zwei Familien im Team Hub: .list-row (zehn Stellen,
   immer ein <a>) und .member-row (sieben, immer ein <div>). Drei
   Deklarationen waren gleich, sieben verschieden — die Unterschiede stehen
   als Modifier hier, nicht als zweite Klasse.

   DIE HÖHE IST DAS TOUCH-ZIEL, nicht die Steuerhöhe: Eine Zeile, die man
   antippt, braucht 44px. Im Bestand stand das schon so da, nur ohne Token
   (.member-row hatte 44px hart geschrieben, .list-row 36px) — hier gewinnt
   der größere Wert, weil er der begründete ist. */
.bh-list__row {
  display: flex;
  align-items: center;
  gap: var(--bh-space-3);
  min-width: 0;

  min-height: var(--bh-control-height-touch);
  padding: var(--bh-space-2) var(--bh-space-3);
  border-radius: var(--bh-radius-md);
  color: var(--bh-text-secondary);
}

/* DIE HOVERFLÄCHE HÄNGT AM ELEMENT, NICHT AN EINEM MODIFIER.
   Eine Zeile aus <div> trägt oft mehrere Ziele in sich — einen Namenslink,
   ein Abzeichen, einen Knopf. Eine Fläche, die auf Hover reagiert,
   verspricht dort eine Klickbarkeit, die die Zeile nicht hat. Als <a> hat
   sie sie. Der Selektor entscheidet das von allein; ein Modifier wäre eine
   zweite Stelle, an der dieselbe Frage beantwortet wird (DESIGN.md §0). */
a.bh-list__row {
  transition: background var(--bh-transition), color var(--bh-transition);
}
a.bh-list__row:hover {
  background: var(--bh-surface-hover);
  color: var(--bh-text-primary);
}
a.bh-list__row:focus-visible {
  outline: var(--bh-focus-width) solid var(--bh-focus-color);
  outline-offset: var(--bh-focus-offset);
}

/* Bündig: für Zeilen, die in einem Behälter stehen, der selbst polstert —
   eine Karte, ein Seitenleisten-Abschnitt. Ohne das polstert es zweimal. */
.bh-list__row--flush { padding-left: 0; padding-right: 0; }

/* Getrennt: durchgezogene Liste mit Linien statt Zeilen mit Abstand.
   Zwei Bildsprachen, und keine darf die andere erzwingen — deshalb ein
   Modifier und keine Vorgabe. Die Linie sitzt OBEN am Nachfolger, damit die
   erste Zeile keine bekommt. */
.bh-list__row--divided + .bh-list__row--divided {
  border-top: 1px solid var(--bh-border-subtle);
}

/* Gestapelt: dieselbe Zeile, aber senkrecht. Für schmale Behälter, in denen
   Marke und Text nicht nebeneinander passen. Kein Radius und keine seitliche
   Polsterung — gestapelt ist sie kein Kasten mehr, sondern ein Absatz. */
.bh-list__row--stacked {
  display: block;
  min-height: 0;
  padding: var(--bh-space-2) 0;
  border-radius: 0;
}

@media (max-width: 767px) {
  .bh-list__toolbar { flex-direction: column; align-items: stretch; }
  .bh-list__tools { margin-left: 0; }
  .bh-list__search { flex: 1; }
  .bh-list__search .bh-input { width: 100%; }
}