/* ════════════════════════════════════════════════════════════════════════
   components-pwdata.css — nativer elements.data-Browser (Lese-Pfad, Phase 1).
   Master-Detail (Vorbild sELedit): Sektionsliste · Record-Liste · Feld-Inspektor.
   Steuerung: js/pwdata/viewer.js. Nur components-Layer, keine Magic-Values, kein !important.
   ════════════════════════════════════════════════════════════════════════ */

@layer components {
  .pwd {
    /* EINE Wahrheit für die Spaltenhöhe (alle drei Spalten scrollen unabhängig auf gleicher Höhe). */
    --pwd-col-h: 68vh;

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

  .pwd-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--sp-4);
  }

  .pwd-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);

    & > span {
      font-size: 0.85rem;
      color: var(--text-3);
    }

    &.pwd-field--search {
      flex: 1 1 16rem;
    }
  }

  /* Suchfeld mit eingebetteter Zahl (Sektionszahl des Stands) rechts im Input. */
  .pwd-search {
    position: relative;
    display: block;
  }

  .pwd-search .evpw-input {
    width: 100%;
    padding-inline-end: 6.5rem;
  }

  .pwd-count {
    position: absolute;
    inset-block: 0;
    inset-inline-end: var(--sp-3);
    display: flex;
    align-items: center;
    color: var(--text-3);
    font-size: 0.8rem;
    pointer-events: none;
  }

  /* Drei Spalten: Sektionen · Records · Feld-Inspektor. Jede scrollt für sich. */
  .pwd-body {
    display: grid;
    grid-template-columns: minmax(12rem, 15rem) minmax(14rem, 22rem) minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
  }

  .pwd-col {
    max-height: var(--pwd-col-h);
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  /* ── Sektionsliste ── */
  .pwd-section {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text-1);
    text-align: start;
    cursor: pointer;

    &:hover {
      background: var(--bg-hover);
    }

    &.is-active {
      background: var(--accent-glow);
      color: var(--accent-bright);
    }

    /* Config-/Service-Sektionen (nicht feldweise darstellbar) treten optisch zurück. */
    &.is-raw .pwd-section-name {
      color: var(--text-3);
    }
  }

  .pwd-section-name {
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pwd-section-count {
    flex: none;
    color: var(--text-3);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
  }

  /* ── Record-Liste ── */
  .pwd-records-head {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
    background: var(--bg-card-2);
  }

  .pwd-record {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    width: 100%;
    padding: var(--sp-1) var(--sp-3);
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text-1);
    text-align: start;
    cursor: pointer;

    &:hover {
      background: var(--bg-hover);
    }

    &.is-active {
      background: var(--accent-glow);
    }

    &.is-empty .pwd-record-name {
      color: var(--text-3);
      font-style: italic;
    }
  }

  .pwd-record-id {
    flex: none;
    width: 5rem;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
  }

  .pwd-list-msg {
    padding: var(--sp-4);
    text-align: center;
  }

  .pwd-record-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pwd-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
  }

  .pwd-pager-info {
    color: var(--text-3);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
  }

  /* ── Feld-Inspektor ── */
  .pwd-detail {
    padding: var(--sp-3) var(--sp-4);
  }

  .pwd-detail-head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    margin-block-end: var(--sp-3);
    padding-block-end: var(--sp-2);
    border-bottom: 1px solid var(--border);
  }

  .pwd-fields {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: var(--sp-1) var(--sp-4);
    margin: 0;

    & dt {
      color: var(--text-3);
      font-family: var(--font-mono);
      font-size: 0.8rem;
    }

    & dd {
      margin: 0;
      font-family: var(--font-mono);
      font-size: 0.8rem;
      overflow-wrap: anywhere;
    }
  }

  .pwd-muted {
    color: var(--text-3);
    font-size: 0.85rem;
  }

  /* ── Editieren (Desktop-only; geschrieben wird in die Arbeitskopie) ── */
  .pwd-edited-group {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-inline-start: auto;
    align-self: end;
  }

  /* „editiert" sitzt als Statuschip in der Button-Reihe (Look aus evpw-btn--gold), ist aber KEIN
     Knopf: pointer-events aus → kein Hover/Klick, reine Zustandsanzeige. */
  .pwd-edited-badge {
    pointer-events: none;
  }

  .pwd-edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .pwd-fields--edit {
    align-items: center;
  }

  .pwd-field-label {
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 0.8rem;
  }

  .pwd-field-input {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.8rem;
  }

  /* Speichern-Leiste bleibt beim Scrollen langer Feldlisten sichtbar. */
  .pwd-edit-foot {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-block-start: var(--sp-2);
    background: var(--bg-card);
  }

  .pwd-edit-msg {
    color: var(--text-3);
    font-size: 0.85rem;
  }

  /* ── gshop-Editor (js/pwdata/gshop.js) — teilt die pwd-Bausteine; hier nur Eigenes ── */

  /* TimeStamp-Anzeige + „auf jetzt setzen" in der Kopfzeile. */
  .pwd-ts {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }

  .pwd-ts-value {
    color: var(--text-2);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
  }

  /* Unterkategorien eingerückt unter ihrer Kategorie (Baum wie die In-Game-Boutique). */
  .pwd-section--sub {
    padding-inline-start: var(--sp-6);
  }

  .pwd-cats-tools {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
  }

  /* Inline-Umbenennen im Kategorien-Bearbeiten-Modus (kein Modal). */
  .pwd-cat-input {
    width: 100%;
    margin-block: var(--sp-1);
  }

  .pwd-cat-input--sub {
    width: calc(100% - var(--sp-4));
    margin-inline-start: var(--sp-4);
  }

  /* Preis (Verkaufsoption 1) rechtsbündig in der Item-Zeile. */
  .pwd-record-price {
    flex: none;
    margin-inline-start: auto;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
  }

  /* Beschreibung ist mehrzeilig (Zeilenumbrüche sind Teil der Daten). */
  .pwd-field-input--multi {
    resize: vertical;
  }

  /* Gruppen-Überschrift im Feld-Inspektor (Grunddaten · Kaufvariante 1–4 · Geschenk · …);
     spannt im 2-Spalten-Grid beide Spalten. */
  .pwd-fgroup-title {
    grid-column: 1 / -1;
    margin-block-start: var(--sp-3);
    padding-block-end: var(--sp-1);
    border-block-end: 1px solid var(--border);
    color: var(--accent-bright);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .pwd-fgroup-title:first-child {
    margin-block-start: 0;
  }

  /* Label mit Erklär-Tooltip: Cursor signalisiert „hier gibt's Hilfe". */
  .pwd-field-label[title] {
    cursor: help;
  }

  /* Dezenter Hinweis unter dem Lead (z. B. Preis-0-Verhalten der Boutique). */
  .pwd-hint {
    margin-block-end: var(--sp-4);
    color: var(--text-3);
    font-size: 0.9rem;
  }

  /* Item-hinzufügen-Leiste (zwischen Toolbar und Spalten). */
  .pwd-addbar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }

  .pwd-add-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-2, 6px);
    background: var(--bg-card);
  }

  .pwd-add-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--sp-3);
  }

  .pwd-add-search {
    flex: 1 1 18rem;
  }

  .pwd-add-price,
  .pwd-add-count {
    width: 8rem;
  }

  /* Trefferliste der elements-Suche. */
  .pwd-add-results {
    display: flex;
    flex-direction: column;
    max-height: 14rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-2, 6px);
  }

  .pwd-add-results:empty {
    display: none;
  }

  .pwd-add-result {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-1) var(--sp-3);
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text-1);
    text-align: start;
    cursor: pointer;

    &:hover {
      background: var(--bg-hover);
    }
  }

  .pwd-add-result-meta {
    flex: none;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 0.8rem;
  }

  .pwd-add-picked-name {
    color: var(--accent-bright);
    font-weight: 600;
  }

  /* Massen-Preis-Leiste über der Item-Liste (wirkt auf die aktuelle Auswahl). */
  .pwd-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
  }

  .pwd-bulk-label {
    color: var(--text-3);
    font-size: 0.85rem;
  }

  .pwd-bulk-input {
    width: 6rem;
  }

  /* Trenner zwischen den Massen-Aktionen (Preis · Namen). */
  .pwd-bulk-sep {
    align-self: stretch;
    width: 1px;
    background: var(--border);
  }

  /* ── tasks-Browser (Vorbild RAE): Quest-BAUM links, Detail rechts ── */
  /* Nur zwei Spalten (Baum + Detail) statt der drei des elements-Browsers. */
  .pwd-body--tasks {
    grid-template-columns: minmax(16rem, 26rem) minmax(0, 1fr);
  }

  /* Leerer-Filter-Checkbox in der Toolbar. */
  .pwd-check {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2);
    align-self: end;
    cursor: pointer;
    user-select: none;
  }

  .tsk-tree {
    display: flex;
    flex-direction: column;
  }

  /* Eine Baum-Zeile: Aufklapp-Knopf + klickbares Label. Einrückung entsteht durch die
     DOM-Verschachtelung (.tsk-tree-children), nicht durch Inline-Style (CSP verbietet style-Attr). */
  .tsk-tree-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);

    &.is-active {
      background: var(--accent-glow);
    }
  }

  /* Kind-Ebene: eingerückt + Führungslinie (wie ein Datei-Explorer-Baum). */
  .tsk-tree-children {
    margin-inline-start: var(--sp-4);
    border-inline-start: 1px solid var(--border);
  }

  .tsk-tree-toggle {
    flex: none;
    width: 1.6rem;
    padding: var(--sp-1);
    border: 0;
    background: transparent;
    color: var(--text-3);
    font-size: 0.7rem;
    cursor: pointer;

    &.is-leaf {
      cursor: default;
    }

    &:hover:not(.is-leaf) {
      color: var(--accent-bright);
    }
  }

  .tsk-tree-label {
    display: flex;
    flex: 1;
    gap: var(--sp-2);
    align-items: center;
    min-width: 0;
    padding: var(--sp-1) var(--sp-2);
    border: 0;
    background: transparent;
    color: var(--text-1);
    text-align: start;
    cursor: pointer;

    &:hover {
      background: var(--bg-hover);
    }
  }

  .tsk-tree-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Kleiner Zähler = Anzahl Sub-Quests (eckig, kein Pillen-Badge — DESIGN-SYSTEM). */
  .tsk-tree-badge {
    flex: none;
    padding: 0 var(--sp-1);
    border-radius: var(--radius-sm);
    background: var(--bg-card-2);
    color: var(--text-3);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
  }

  /* ── Detail (nur der gewählte Task) ── */
  .tsk-detail-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .tsk-detail-head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding-block-end: var(--sp-2);
    border-bottom: 1px solid var(--border);
  }

  .tsk-detail-name {
    font-size: 1rem;
  }

  .tsk-tag {
    padding: 0 var(--sp-1);
    border-radius: var(--radius-sm);
    background: var(--bg-card-2);
    color: var(--text-3);
    font-size: 0.75rem;
  }

  .tsk-detail-subhint {
    margin: 0;
  }

  .tsk-text-label {
    margin-block-end: var(--sp-1);
    color: var(--text-3);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .tsk-text-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  /* Dialoge als aufklappbare <details> (Fenster → Optionen eingerückt). */
  .tsk-dialog {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius);
    background: var(--bg-card-2);
  }

  .tsk-dialog-label {
    color: var(--text-3);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
  }

  .tsk-dialog-head {
    margin-block-start: var(--sp-1);
    font-weight: 600;
  }

  .tsk-dialog-text {
    margin-block: var(--sp-1);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .tsk-dialog-opt {
    padding-inline-start: var(--sp-3);
    border-inline-start: 2px solid var(--accent);
    color: var(--text-2);
    font-size: 0.9rem;
  }

  /* sTASKedit-Editor (1:1 im v1-Design): Tab-Leiste + je Tab ein Formular aus GroupBox-Karten
     (fieldset), darin Feld-Zeilen „Label → Eingabe-Widget" in einem geteilten Grid. */
  .tsk-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--border);
  }

  .tsk-tab {
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-2);
    font-size: 0.85rem;
    cursor: pointer;
  }

  .tsk-tab:hover {
    color: var(--text-1);
  }

  .tsk-tab.is-active {
    border-bottom-color: var(--accent);
    color: var(--text-1);
    font-weight: 600;
  }

  .tsk-tab-panel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

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

  .tsk-group-title {
    padding: 0 var(--sp-1);
    color: var(--text-3);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .tsk-group-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
  }

  .tsk-fld-label {
    color: var(--text-2);
    font-size: 0.85rem;
  }

  .tsk-fld-widget {
    min-width: 0;
  }

  .tsk-input {
    width: 100%;
    max-width: 22rem;
    padding: var(--sp-1) var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-1);
    font: inherit;
    font-variant-numeric: tabular-nums;
  }

  .tsk-input:read-only {
    color: var(--text-2);
    background: var(--bg-card-2);
  }

  /* Ja/Nein-Schalter (sTASKedit-Checkboxen) im Feld-Grid. */
  .tsk-check {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--accent);
  }

  /* Schmale Viewports (Ansicht ist möglich, Bearbeiten ist Desktop-only):
     Spalten untereinander statt drei nebeneinander. */
  @media (width < 60rem) {
    .pwd-body {
      grid-template-columns: 1fr;
    }

    .pwd-col {
      max-height: 40vh;
    }
  }
}