/* ════════════════════════════════════════════════════════════════════════
   components-gear-catalog.css — durchsuchbare Ansicht des elements.data-Voll-Katalogs
   (evpw_items), als Overlay aus der Bibliothek-Toolbar geöffnet (editor-only).
   Strang: .project/tasks/pwdata-elements-import.md (Modell B, Katalog-Ebene).
   Steuerung: js/gear/catalog.js. Overlay-Hülle gespiegelt an .img-lib-* (components-base.css),
   Tabelle an .gp-lib-table. NUR components-Layer, keine Magic-Values, kein !important.
   ════════════════════════════════════════════════════════════════════════ */

@layer components {
  /* Inline-Ansicht (kein Overlay): lebt im Content-Bereich der Bibliothek, während Toolbar + Tabelle
     ausgeblendet sind. Vertikaler Fluss: Kopf, dann Tabelle (Details klappen IN der Tabelle auf). */
  .gp-cat {
    /* Breite der Filter-Gruppe rechts im Kopf (Sektion + Klasse teilen sie sich). */
    --gp-cat-aside: 300px;

    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  /* Kopf: links Zurück · Titel · Suche (schließt bündig mit der Tabelle ab), rechts die beiden
     Filter in fester Breite (--gp-cat-aside). Vorbild: Facetten beim Admin-Datengrid/Wowhead. */
  .gp-cat-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--gp-cat-aside);
    gap: var(--sp-5);
    align-items: center;
  }

  .gp-cat-head-main {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
  }

  .gp-cat-head-aside {
    display: flex;
    gap: var(--sp-3);
    min-width: 0;
  }

  .gp-cat-back {
    flex: 0 0 auto;
  }

  .gp-cat-title {
    font-family: var(--font-head);
    font-size: var(--fs-md);
    color: var(--accent);
  }

  /* Nimmt den Rest der linken Spalte ein → schließt bündig mit der Tabelle darunter ab.
     ⚠ js/shared/search.js wickelt das <input> in .search-field (Leeren-X) → der WRAPPER ist das
     Flex-Kind von .gp-cat-head-main und trägt daher das Wachsen, nicht mehr das <input> direkt
     (das bekommt sein flex:1 + Padding fürs X aus .search-field selbst). */
  .gp-cat-head-main > .search-field {
    flex: 1 1 auto;
    min-width: 8ch;
  }

  /* Beide Filter teilen sich die Panel-Spalte zu gleichen Teilen.
     ⚠ `flex-basis: 0` + `min-width: 0` ist hier KEINE Kosmetik: ein <select> ist von sich aus so
     breit wie seine GEWÄHLTE Option — und die Sektions-Optionen tragen ihre Trefferzahl
     („Waffen (3.071)", catalog.js). Ohne das wüchse der Filter bei jeder Auswahl, schöbe seinen
     Nachbarn weg und bliebe dann so. So bleibt die Leiste ruhig und beide sind gleich breit;
     zu lange Optionstexte kürzt der Browser, das Aufklapp-Menü zeigt sie voll. */
  .gp-cat-section,
  .gp-cat-class {
    flex: 1 1 0;
    min-width: 0;
  }

  .gp-cat-main {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
  }

  .gp-cat-tablewrap {
    max-height: 62vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }

  .gp-cat-table {
    width: 100%;
    font-size: var(--fs-sm);
    border-collapse: collapse;
  }

  .gp-cat-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-3);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
  }

  .gp-cat-table th.gp-cat-r,
  .gp-cat-table td.gp-cat-r {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* Sortierbarer Spaltenkopf (WAI-ARIA-APG „Sortable Table"): der Knopf trägt die Bedienung, das
     <th> den Zustand (aria-sort). Der Knopf ersetzt das Kopf-Padding und füllt die ganze Zelle —
     sonst wäre nur die Beschriftung klickbar und der Rest des Kopfes tote Fläche. Er erbt die
     Kopf-Typografie und bringt kein eigenes Chrom mit; der Fokus-Ring kommt global aus base.css. */
  .gp-cat-table th:has(.gp-cat-sort) {
    padding: 0;
  }

  .gp-cat-sort {
    display: flex;
    gap: var(--sp-1);
    align-items: center;
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    background: none;
    border: 0;
  }

  .gp-cat-table th.gp-cat-r .gp-cat-sort {
    justify-content: flex-end;
  }

  .gp-cat-sort:hover,
  .gp-cat-table th[aria-sort='ascending'] .gp-cat-sort,
  .gp-cat-table th[aria-sort='descending'] .gp-cat-sort {
    color: var(--text-1);
  }

  /* Richtungs-Anzeige: reines Zustands-Zeichen am aria-sort, kein Deko-Icon — und nur hier, damit
     DOM und Anzeige nicht zwei Wahrheiten über dieselbe Richtung führen. Die leere Grundregel hält
     die Breite frei, sonst ruckte die Beschriftung beim ersten Sortieren zur Seite. */
  .gp-cat-sort::after {
    width: 1ch;
    font-size: var(--fs-xs);
    content: '';
  }

  /* `/ ''` = leerer Alt-Text: der Pfeil ist NUR fürs Auge. Die Richtung steht schon im aria-sort;
     ohne den Alt-Text läse ein Screenreader zusätzlich „schwarzes Dreieck nach unten" vor. */
  .gp-cat-table th[aria-sort='ascending'] .gp-cat-sort::after {
    content: '▲' / '';
  }

  .gp-cat-table th[aria-sort='descending'] .gp-cat-sort::after {
    content: '▼' / '';
  }

  .gp-cat-table td {
    padding: var(--sp-2) var(--sp-3);
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
  }

  .gp-cat-name {
    font-weight: 600;
  }

  /* Item-Icon = Fenster auf das Atlas-Sprite (iconlist_ivtrm.png, 128×128 Zellen à 32px). JS setzt
     background-position je Zelle (ein Bild für alle Icons statt tausender Einzeldateien — wie im Spiel/Editor). */
  /* Ein Item-Icon = EIN 32×32-PNG vom Server (img[loading=lazy], gear/catalog.js itemIcon()).
     Vorher: ein Fenster per background-position in EIN 21-MB-Sprite — nichts war sichtbar, bevor
     der ganze Atlas geladen war (Strang §48/§51.2). `is-empty` (span) hält den Platz, wenn zu
     einem Item in keinem Atlas ein Icon liegt. */
  .gp-cat-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin-right: var(--sp-2);
    vertical-align: middle;
  }

  .gp-cat-sec {
    color: var(--text-3);
  }

  .gp-cat-row {
    cursor: pointer;
  }

  .gp-cat-row:hover td {
    background: var(--bg-hover);
  }

  .gp-cat-row.is-selected td {
    background: var(--bg-card-2);
  }

  .gp-cat-empty {
    padding: var(--sp-6);
    text-align: center;
    color: var(--text-3);
  }

  /* Paginierung: Gesamtzahl links, Blättern rechts. */
  .gp-cat-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-3);
  }

  .gp-cat-pagernav {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
  }

  .gp-cat-pageinfo {
    min-width: 6ch;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  /* Detail-Aufklapper: Voll-Breiten-Zeile direkt unter dem geklickten Item — in der OPTIK des
     Bibliothek-Aufklapp-Editors (User 2026-07-21 „gleicher Stil wie in der Bibliothek"): Zelle
     behält Padding (gespiegelt an .gp-lib-edrow > td), innen eine eingerückte Karte mit
     Akzent-Rand (gespiegelt an .gp-add-form: margin/padding/bg/border/radius). Eigener Zusatz:
     die Karte DECKELT ihre Höhe und scrollt INNEN — sonst schöbe ein Item mit 40 data-Feldern
     die restliche Trefferliste kilometerweit nach unten. */
  .gp-cat-detailtr td {
    padding: var(--sp-2) var(--sp-4);
  }

  .gp-cat-detail {
    max-height: clamp(14rem, 45vh, 26rem);
    padding: var(--sp-4);
    margin: var(--sp-1) 0 var(--sp-2);
    overflow-y: auto;
    background: var(--bg-base);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius);

    /* Scrollbalken in BEIDEN Engines sichtbar machen: Gecko (Zen) zeichnet ihn sonst kaum
       sichtbar, Chromium (Vivaldi) kräftig — scrollbar-color können beide (User 2026-07-21). */
    scrollbar-color: var(--border-accent) transparent;
  }

  /* ⚠ BEWUSST KEIN Scroll-Fade/Scrim an der Unterkante: drei Anläufe (v2.35.39–41) — selbst die
     gedimmte Fassung stand beim Scrollen dauerhaft über der untersten Zeile („IMMER störend",
     User 2026-07-21). Das „mehr unten"-Signal trägt allein der sichtbare Scrollbalken
     (scrollbar-color oben). Nicht wieder einbauen. */

  .gp-cat-detail-hint {
    color: var(--text-3);
  }

  /* Aktions-Balken im Aufklapper („In Bibliothek übernehmen" / Set). Keine Namens-Überschrift
     darüber: Icon + Name (samt Rarität-Farbe) stehen in der Item-Zeile direkt über dem Aufklapper. */
  .gp-cat-actions {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
  }

  .gp-cat-adopt.is-done {
    opacity: 0.6;
  }

  /* Kerndaten | Set | Rezepte | Drops nebeneinander — die volle Breite ist der Gewinn des
     Aufklappers (im 300px-Panel stapelte sich das zur langen Wurst). */
  .gp-cat-detail-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sp-2) var(--sp-5);
    align-items: start;
  }

  /* Box-Beschriftungen („Rezepte", „Drop-Quellen", Set-Kopf) in NORMALER Schrift.
     ⚠ Der Kern ist die FONT-FAMILIE: base.css gibt jedem h4 die Marken-Serif Cinzel
     (--font-head) — genau das war der „andere Font" (User 2026-07-21, dreimal moniert).
     Im Aufklapper bleibt h4 nur Semantik: Fließtext-Schrift (--font-body), halbfett + gedämpft. */
  .gp-cat-detail-sec h4 {
    margin-bottom: var(--sp-2);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;

    /* Fließtext-Zeilenhöhe statt der gestauchten Überschriften-1.2 aus base.css: der Set-Kopf
       wird durch die Bestands-Angabe (normale 1.6) höher — mit 1.2 auf „Rezepte" starteten die
       Boxen-Raster ~6px versetzt und keine Zeilenlinie stand der anderen gegenüber (User 2026-07-21:
       „das Wort Rezepte ist kleiner" — gleiche Größe, flachere Zeile). */
    line-height: inherit;
    color: var(--text-3);
  }

  /* Schlüssel/Wert-Liste: je Paar ein Wrapper (<div> in <dl>, valide) — Label links, Wert rechts.
     Der Wrapper existiert, damit „Alle Felder" die Paare unten mehrspaltig fließen lassen kann. */
  .gp-cat-kv {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--fs-sm);
  }

  .gp-cat-kv-pair {
    display: grid;
    grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
    gap: 2px var(--sp-3);
  }

  /* Alles EINZEILIG (User 2026-07-21): Überlauf → „…", der Volltext steckt im title-Tooltip
     (kvList setzt ihn) — Haus-Muster der gekappten Bibliothek-Spalten (.gp-lib-src/.gp-lib-mats). */
  .gp-cat-kv dt {
    overflow: hidden;
    color: var(--text-3);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gp-cat-kv dd {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Gekappter Text in Flex-Zeilen (Drop-Name, Set-Teil-Name): braucht min-width:0, sonst
     weigert sich das Flex-Kind zu schrumpfen und die „…"-Kappung greift nie. */
  .gp-cat-clip {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Klassen-Bitmaske: die Rohzahl erklärt sich nicht selbst, die tragenden Klassen hängen als
     Hover daran (js/gear/catalog.js → attachHoverTip). Gepunktete Unterlinie + cursor:help =
     das <abbr title>-Muster, damit sichtbar ist, dass hier etwas zu holen ist. */
  .gp-cat-mask {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: help;
  }

  /* ⚠ KEIN gap zwischen Name- und Zutaten-Zeile: Rezept- und Set-Zeile stehen nebeneinander und
     MÜSSEN pixelgleich hoch sein (geteilte Formel 2lh + Polsterung + Border, s. Set-Zeile) —
     ein früherer 1px-gap ließ die Zeilenlinien pro Zeile 1px auseinanderlaufen (User 2026-07-21). */
  .gp-cat-recipe,
  .gp-cat-drop {
    display: flex;
    flex-direction: column;
    padding: var(--sp-2) 0;
    font-size: var(--fs-sm);
    border-top: 1px solid var(--border);
  }

  .gp-cat-recipe {
    min-height: calc(2lh + var(--sp-4) + 1px);
  }

  .gp-cat-drop {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--sp-3);
  }

  .gp-cat-recipe strong,
  .gp-cat-recipe span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gp-cat-recipe span {
    color: var(--text-3);
  }

  /* Set-Zugehörigkeit: Bestand + jedes Teil einzeln. Bereits übernommene Teile werden gedimmt
     (Muster wie .gp-cat-adopt.is-done) — der Blick soll auf dem liegen, was noch fehlt. */
  /* Set-Kopf EINZEILIG: „Set: <Name>" + Bestand in einer Zeile; der Name kappt (.gp-cat-clip),
     der Bestand bleibt ganz (nowrap) und rechtsbündig. BEIDE in NORMALER Fließtext-Typo —
     die Versalien-Kopfzeilen-Typo (v2.35.43) war falsch herum gedacht: 99 % der UI ist normal,
     also normal statt noch mehr Versalien (User 2026-07-21). Das h4 bleibt nur semantisch. */
  .gp-cat-suite-head {
    display: flex;
    gap: var(--sp-2);
    align-items: baseline;
    margin-bottom: var(--sp-2);
  }

  .gp-cat-suite-head h4 {
    margin-bottom: 0;
    font-weight: 400;
    color: inherit;
  }

  .gp-cat-suite-count {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: var(--fs-sm);
    color: var(--text-3);
    white-space: nowrap;
  }

  .gp-cat-suite-member {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    padding: var(--sp-2) 0;
    font-size: var(--fs-sm);
    border-top: 1px solid var(--border);

    /* Zeilenhöhe = Rezept-Zeile: die Boxen stehen nebeneinander, ungleiche Zeilenraster wirken
       unruhig (User 2026-07-21). Eine Rezept-Zeile ist natürlich 2 Textzeilen (Name + Zutaten)
       + Polsterung + Border hoch — 2lh rechnet exakt dasselbe in der eigenen fs-sm-Typo. */
    min-height: calc(2lh + var(--sp-4) + 1px);
  }

  .gp-cat-suite-member.is-owned {
    opacity: 0.6;
  }

  .gp-cat-suite-member .gp-cat-r {
    margin-left: auto;
    color: var(--text-3);
  }

  .gp-cat-allfields {
    margin-top: var(--sp-4);
    font-size: var(--fs-sm);
  }

  .gp-cat-allfields summary {
    cursor: pointer;
    color: var(--text-3);
  }

  .gp-cat-allfields[open] summary {
    margin-bottom: var(--sp-2);
  }

  /* „Alle Felder": mehrere Feld|Wert-Spaltenpaare nebeneinander (die volle Breite nutzen),
     aber TABELLEN-streng ausgerichtet: die Feld-Spur ist FIX (12rem) — dadurch beginnt jeder
     Wert an derselben Kante, statt am unterschiedlich langen Feldnamen zu kleben (User #1).
     Die Paare fließen SPALTENWEISE (CSS multicol: erst runter, dann nächste Spalte — Lesefolge
     bleibt die Record-Reihenfolge), so viele Spalten wie die Breite hergibt (column-width);
     Trennlinie zwischen den Spalten + Zeilenlinien je Paar = Tabellen-Optik. */
  .gp-cat-allfields .gp-cat-kv {
    display: block;
    columns: 26rem;
    column-gap: var(--sp-6);
    column-rule: 1px solid var(--border);
  }

  .gp-cat-allfields .gp-cat-kv-pair {
    grid-template-columns: 12rem minmax(0, 1fr);
    padding: var(--sp-1) 0;
    border-bottom: 1px solid var(--border);
    break-inside: avoid;
  }

  /* Schmaler Viewport (Editor ist Desktop-only, aber nichts soll brechen): Kopf einspaltig,
     die Filter rutschen unter die Suche (statt sich 300px zu teilen). */
  @media (width <= 60rem) {
    .gp-cat-head {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}