/* ════════════════════════════════════════════════════════════════════════
   components-gear-library.css — Item-Bibliothek des Gear-Planers (editor-only).
   EIN Item-Katalog (tasks/gear-planner.md): Vollbreite-Tabelle über alle Items + Baum-Ansicht;
   Bearbeiten inline (geteilter Item-Editor). Modus-Umschalter Planer ↔ Bibliothek in der Sidebar.
   Steuerung: js/gear/library.js. NUR components-Layer, keine Magic-Values, kein !important.
   ════════════════════════════════════════════════════════════════════════ */

@layer components {
  /* ── Modus-Umschalter (Sidebar, editor-only) ── */
  .gp-mode-switch {
    display: flex;
    gap: 2px;
    margin-bottom: var(--sp-3);
    padding: 3px;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .gp-mode-btn {
    flex: 1;
    padding: 6px var(--sp-2);
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--text-2);
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
  }

  .gp-mode-btn:hover {
    color: var(--text-1);
  }

  .gp-mode-btn.is-on {
    font-weight: 600;
    color: var(--bg-base);
    background: var(--accent-bright);
  }

  /* Zähler an den Kategorien-Einträgen der Bibliothek-Nav */
  .gp-lib-count {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
  }

  /* ── Kategorien-Baum (Sidebar, library.js rendert): 3 Ebenen, nur der aktive Pfad offen.
     Grund-Optik kommt von .sidebar-item (+aria-current = Gold-Balken); hier nur Einrückung
     je Ebene + Chevron (▸ Auf/Zu-Indikator, Leaf unsichtbar aber platzhaltend → Flucht). ── */
  .gp-lib-cat {
    gap: 6px;
  }

  .gp-lib-sub1 {
    padding-left: 22px;
    font-size: var(--fs-sm);
  }

  .gp-lib-sub2 {
    padding-left: 38px;
    font-size: var(--fs-sm);
  }

  .gp-lib-chev {
    flex: 0 0 auto;
    width: 10px;
    font-size: 0.6rem;
    color: var(--text-3);
    transition: rotate var(--t-fast);
  }

  .gp-lib-chev.is-open {
    rotate: 90deg;
  }

  .gp-lib-chev.is-leaf {
    visibility: hidden;
  }

  /* ── Bibliothek-Fläche ── */
  .gp-lib-panel {
    display: flex;
    flex-direction: column;
    /* Gleiche Höhe wie Planer/Inventar (geteilter --gp-area-h) → alle drei Modi fluchten, die
       Bibliothek endet nicht mehr zu früh. Aktiviert den schon vorhandenen Innen-Scroll
       (.gp-lib-scroll: flex 1 + overflow), statt die Seite wachsen zu lassen. */
    height: var(--gp-area-h);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }

  /* Werkzeugzeile sitzt jetzt IN der geteilten Kopfleiste (.gp-headbar liefert Hülle/Höhe/
     vertikale Zentrierung) → hier nur noch der Abstand. Die Suche (flex:1, s. u.) füllt die
     Breite bis zu den Buttons, die Buttons sitzen dadurch rechts. */
  .gp-lib-tools {
    gap: var(--sp-2);
  }

  /* Suchfeld mit ×-Knopf IM Feld (eigener Button: Gecko hat keinen nativen, WebKits nativer
     wird ausgeblendet → beide Engines gleich). Breite lebt am Wrapper. */
  .gp-lib-searchwrap {
    position: relative;
    display: flex;
    flex: 1;
  }

  .gp-lib-search {
    width: 100%;
    padding: 0 30px 0 var(--sp-3);
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--text-1);
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    block-size: var(--control-h); /* bündig mit den evpw-btn--md-Buttons der Zeile */
  }

  .gp-lib-search::placeholder {
    color: var(--text-3);
  }

  .gp-lib-search::-webkit-search-cancel-button {
    display: none;
  }

  .gp-lib-search-clear {
    position: absolute;
    top: 50%;
    right: 4px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    font: inherit;
    font-size: var(--fs-base);
    line-height: 1;
    color: var(--text-3);
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    translate: 0 -50%;
  }

  .gp-lib-search-clear:hover {
    color: var(--text-1);
    background: var(--bg-hover);
  }

  .gp-lib-search-clear[hidden] {
    display: none;
  }

  /* Buttons der Werkzeugzeile (Tabelle/Baum · Neu · Bibliothek leeren) = evpw-btn-Matrix
     (evpw-ui.css, DESIGN-SYSTEM §1) — hier bewusst KEINE eigenen Button-Klassen mehr. */

  /* Ansichts-Umschalter Tabelle ↔ Baum (zwischen Suche und „Neu"). */
  .gp-lib-viewtabs {
    display: flex;
    gap: var(--sp-1);
  }

  .gp-lib-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
  }

  /* ── Baum-Ansicht: Rezept-Abhängigkeiten des Item-Katalogs sichtbar UND bearbeitbar.
     Wurzeln = nirgends Zutat; Kinder eingerückt an einer Spine-Linie (--text-3, wie die
     Baum-Linien des Planers). Klick auf eine Zeile klappt DEN Item-Editor darunter auf. ── */
  .gp-libtree {
    padding: var(--sp-3) var(--sp-4);
  }

  .gp-libtree[hidden] {
    display: none;
  }

  .gp-libtree-kids {
    margin-left: 0.85rem;
    padding-left: var(--sp-3);
    border-left: 1px solid var(--text-3);
  }

  .gp-libtree-row {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    width: 100%;
    padding: var(--sp-1) var(--sp-2);
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--text-1);
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
  }

  .gp-libtree-row:hover {
    background: var(--bg-card-2);
  }

  .gp-libtree-nm {
    font-weight: 600;
  }

  .gp-libtree-qty {
    font-size: var(--fs-xs);
    color: var(--text-3);
  }

  /* ── Tabelle (Variante B) ── */
  .gp-lib-table {
    width: 100%;
    font-size: var(--fs-sm);
    border-collapse: collapse;
  }

  .gp-lib-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-lib-table th.gp-lib-r,
  .gp-lib-table td.gp-lib-r {
    text-align: right;
  }

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

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

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

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

  /* Sortier-Grip (nur Items-Tabelle): startet das Drag; dezent, greift bei Hover die Leitfarbe. */
  .gp-lib-grip {
    flex: 0 0 auto;
    color: var(--text-3);
    cursor: grab;
    user-select: none;
  }

  .gp-lib-grip:hover {
    color: var(--accent-bright);
  }

  /* Drag-Zustände beim Sortieren (Items). */
  .gp-lib-row.gp-lib-dragging td {
    opacity: 0.5;
  }

  .gp-lib-row.gp-lib-over td {
    box-shadow: inset 0 2px 0 0 var(--accent);
  }

  .gp-lib-nm {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
  }

  .gp-lib-nm b {
    font-weight: 600;
  }

  .gp-lib-ic {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    overflow: hidden;
    font-size: var(--fs-xs);
    color: var(--text-3);
    background: linear-gradient(135deg, var(--bg-card-2), var(--bg-base));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }

  .gp-lib-ic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
  }

  .gp-lib-num {
    font-variant-numeric: tabular-nums;
  }

  /* Rezept-Sicht: Zutaten-Spalte gekappt (erste Zutat + „+n weitere"-Chip mit Tooltip). */
  .gp-lib-mats {
    max-inline-size: 18rem;
    overflow: hidden;
    font-size: var(--fs-xs);
    color: var(--text-3);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* „Neu" in der Rezept-Sicht: Besitzer-Item-Auswahl (Suchfeld + Trefferliste) inline oben. */
  .gp-lib-recpick {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    max-width: 28rem;
    padding: var(--sp-2) 0;
  }

  .gp-lib-recpick .evpw-input {
    width: 100%;
  }

  .gp-lib-recpick-list {
    display: flex;
    flex-direction: column;
    gap: 2px;

    /* Alle Items in der Liste, Höhe deckelt das Scrollen (wie gp-recipe-tpl-list: ≈5 Zeilen
       sichtbar, angeschnittene sechste = Scroll-Signal). */
    max-block-size: 12rem;
    overflow-y: auto;
  }

  /* Herkunft (freie Info): gekappt, Volltext im title — die Spalte darf nicht wuchern. */
  .gp-lib-src {
    max-inline-size: 12rem;
    overflow: hidden;
    font-size: var(--fs-xs);
    color: var(--text-3);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* „Kein Preis/Rezept"-Marker (Tabelle + Baum): weder Preis noch Rezept — Baustellen nach dem
     Tiefe-0-Import wiederfinden. Hinweis-Optik in der Leitfarbe (kein Fehler → kein Rot);
     eckig wie die etablierten Badges (.gp-set-badge/.badge-status — KEINE Pillenform). */
  .gp-lib-unsourced {
    flex: 0 0 auto;
    padding: 1px var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--accent-bright);
    white-space: nowrap;
    background: var(--accent-glow);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-sm);
  }

  /* Verwendung: gedeckelt (max-Breite + Ellipsis) — die Spalte darf die Tabelle nie sprengen;
     ab zwei Nutzern zeigt der „+N weitere"-Chip alle Namen per evpw-tooltip (library.js). */
  .gp-lib-use {
    max-inline-size: 16rem;
    overflow: hidden;
    font-size: var(--fs-xs);
    color: var(--text-3);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gp-lib-use-more {
    display: inline-block;
    padding: 0 var(--sp-1);
    margin-left: var(--sp-1);
    color: var(--text-2);
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }

  .gp-lib-use-more:hover {
    color: var(--text-1);
    border-color: var(--border-accent);
  }

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

  /* ── Aufklapp-Editor (geteilter Item-Editor, item-editor.js) — unter Tabellen-Zeile ODER Baum-Knoten ── */
  .gp-lib-edrow > td {
    padding: var(--sp-2) var(--sp-4);
  }

  .gp-libtree-ed {
    padding: var(--sp-2) var(--sp-3);
    margin: var(--sp-1) 0 var(--sp-2);
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .gp-libtree-row.is-open {
    background: var(--bg-card-2);
  }

  /* Sprechende Lösch-Sperre („Item ist noch Zutat in Rezepten von: …") unter dem Editor. */
  .gp-lib-ederr {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--danger);
  }

  .gp-lib-ederr[hidden] {
    display: none;
  }

  /* Feste Fläche = Planer-Höhe ab breit (Editieren ist Desktop-only; darunter natürlich hoch). */
  @media (width >= 821px) {
    .gp-lib-panel {
      height: var(--gp-area-h, 42rem);
    }
  }
}