/* components.css – wiederverwendbare Komponenten (Klassennamen verbindlich, Kap. 4.3).
   Enthält auch die aus style.css übernommenen Basis-Komponenten (.btn, .badge, .hint,
   .dimension-status, .dimension-filter-btn, .save-success-toast, .cron-status).

   Regeln des ruhigen Design-Passes (7.4.0):
   - Farbe nur für Abweichung: danger = Rahmen + Fläche (--danger-soft, einzige
     Vollfarbfläche), warn = linker Balken oder Text, ok/info/neutral = Punkt
     (.status-dot) oder Text, nie als Fläche.
   - Genau eine Uppercase-Regel (.data-table thead th, .kpi-label, .stat-label).
   - Schriftschnitte nur 400/500/600, Schriftstufen nur --fs-12 … --fs-28.
   - Eine Pille (.pill + Aliase), eine Kachel (.kpi-tile + Aliase), eine Ampel
     (.status-dot), ein Schalter (.switch), eine Kette (.chain). */

/* ── Sidebar-Link ──────────────────────────────────────────────────────── */
.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-3);
  border-radius: var(--r-sm);
  color: var(--muted);
  text-decoration: none;
  font-weight: var(--weight-medium);
  font-size: var(--fs-14);
  transition: background var(--motion), color var(--motion);
  min-width: 0;
}

.nav-link::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
}

.nav-link:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-link.is-active,
.nav-link[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: var(--weight-semibold);
}

.nav-link.is-active::before,
.nav-link[aria-current="page"]::before {
  background: var(--accent);
}

.nav-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-icon svg {
  width: 18px;
  height: 18px;
}

.nav-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* .nav-badge ist ein Alias der Pille (siehe „Pill“); hier nur Lage und Ton.
   Kein Pulsieren, kein Schein – die Zahl selbst ist der Hinweis. */
.nav-badge {
  flex: 0 0 auto;
}

.nav-badge[data-tone="danger"] {
  background: var(--danger-soft);
  color: var(--danger-text);
  border-color: var(--danger);
}

.nav-badge[data-tone="warn"] {
  background: transparent;
  color: var(--warn-text);
  border-color: var(--warn);
}

/* ── Status-Punkt (einzige Ampel-Komponente) ───────────────────────────── */
.status-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--muted);
  vertical-align: middle;
}

.status-dot[data-tone="ok"] {
  background: var(--ok);
}

.status-dot[data-tone="warn"] {
  background: var(--warn);
}

.status-dot[data-tone="danger"] {
  background: var(--danger);
}

.status-dot[data-tone="neutral"],
.status-dot[data-tone="muted"] {
  background: var(--muted);
}

/* ── Topbar-Status: ein Punkt + Text, Details im Popover ───────────────── */
.topbar-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 100%;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-13);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.topbar-summary:hover,
.topbar-summary[aria-expanded="true"] {
  border-color: var(--border);
  background: var(--surface-2);
}

.topbar-summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.topbar-summary-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-status {
  position: relative;
}

.topbar-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: min(360px, calc(100vw - 24px));
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.topbar-popover-title {
  font-size: var(--fs-12);
  font-weight: var(--weight-semibold);
  color: var(--muted);
  margin-bottom: var(--s-2);
}

.topbar-popover-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-1);
}

.topbar-popover-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: 6px 0;
  color: var(--text);
  font-size: var(--fs-13);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.topbar-popover-list li:last-child .topbar-popover-row {
  border-bottom: 0;
}

.topbar-popover-row .status-dot {
  margin-top: 5px;
}

a.topbar-popover-row:hover .topbar-chip-text,
a.topbar-popover-row:focus-visible .topbar-chip-text {
  text-decoration: underline;
}

.topbar-popover-row[data-tone="warn"] .topbar-chip-text {
  color: var(--warn-text);
}

.topbar-popover-row[data-tone="danger"] .topbar-chip-text {
  color: var(--danger-text);
}

.topbar-popover .cron-status {
  display: grid;
  gap: 2px;
}

.topbar-popover .cron-label {
  color: var(--muted);
}

.theme-toggle[aria-pressed="true"] svg {
  fill: currentColor;
}

@media (max-width: 760px) {
  .topbar-summary-text {
    display: none;
  }

  .topbar-summary {
    padding: 4px 8px;
  }

  /* Die Topbar ist auf 375 px höhenbegrenzt (overflow hidden): das Popover
     liegt deshalb fest unter der Topbar statt im Fluss. */
  .topbar-popover {
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    width: auto;
  }
}

/* ── Topbar-Chip ───────────────────────────────────────────────────────── */
.topbar-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-12);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
}

a.topbar-chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.topbar-chip .dot,
.topbar-chip .status-dot {
  flex: 0 0 auto;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--muted);
}

.topbar-chip[data-tone="ok"] .dot {
  background: var(--ok);
}

.topbar-chip[data-tone="warn"] .dot {
  background: var(--warn);
}

.topbar-chip[data-tone="danger"] .dot {
  background: var(--danger);
}

.topbar-chip[data-tone="warn"] {
  color: var(--warn-text);
}

.topbar-chip[data-tone="danger"] {
  border-color: var(--danger);
  color: var(--danger-text);
}

.cron-status {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: var(--fs-12);
  line-height: 1.2;
}

.cron-line {
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
}

.cron-label {
  color: var(--muted);
}

.cron-value {
  font-family: var(--font);
  color: var(--text);
}

/* ── View ──────────────────────────────────────────────────────────────── */
.view {
  min-width: 0;
}

.tab-content {
  display: none;
  gap: var(--s-6);
}

.tab-content.is-active {
  display: grid;
}

.view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.view-header > div:first-child {
  min-width: 0;
  flex: 1 1 360px;
}

.view-title {
  font-size: var(--fs-20);
  font-weight: var(--weight-semibold);
}

.view-desc {
  margin-top: var(--s-1);
  color: var(--muted);
  font-size: var(--fs-13);
  max-width: 60ch;
}

.view-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  flex: 0 1 auto;
}

.view-toolbar {
  margin-top: calc(-1 * var(--s-3));
}

.subtab-panel {
  display: grid;
  gap: var(--s-6);
  min-width: 0;
}

.panel-grid {
  display: grid;
  gap: var(--s-6);
  min-width: 0;
}

.panel-grid.two {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* ── Subtabs ───────────────────────────────────────────────────────────── */
.subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding: var(--s-1);
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border);
  width: fit-content;
  max-width: 100%;
}

.subtab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font-weight: var(--weight-medium);
  font-size: var(--fs-13);
  cursor: pointer;
  transition: background var(--motion), color var(--motion);
}

.subtab:hover {
  color: var(--text);
}

.subtab[aria-selected="true"],
.subtab.is-active {
  background: var(--surface);
  color: var(--text);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-1);
}

/* .subtab-badge ist ein Alias der Pille (siehe „Pill“). */

/* ── Panel ─────────────────────────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: clip;
  min-width: 0;
}

.panel-header {
  padding: var(--s-4) var(--space-panel) var(--s-3);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--surface);
}

.panel-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.panel-header-top > div:first-child {
  min-width: 0;
}

.panel h2,
.panel-title {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.panel-body {
  padding: var(--space-panel);
  min-width: 0;
}

/* Auf-/Zuklappen: Text-Schalter mit CSS-Chevron, keine Versalien, kein Rahmen.
   Gleiches Bild wie <details class="panel-help"><summary>. */
.panel-toggle {
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: var(--r-sm);
  padding: 4px 6px;
  background: transparent;
  color: var(--accent);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-13);
  cursor: pointer;
}

.panel-toggle:hover {
  background: var(--surface-2);
}

.panel-toggle::before,
.panel-help summary::before,
.panel-details > summary::before {
  content: "";
  flex: 0 0 auto;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--s-2);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--motion);
  vertical-align: middle;
}

.panel-toggle[aria-expanded="true"]::before,
.panel-help[open] > summary::before,
.panel-details[open] > summary::before {
  transform: rotate(45deg);
}

.panel.collapsed .panel-body {
  display: none;
}

.panel-help {
  font-size: var(--fs-13);
}

.panel-help summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: var(--weight-semibold);
  list-style: none;
}

.panel-help summary::-webkit-details-marker,
.panel-details > summary::-webkit-details-marker {
  display: none;
}

.panel-help .hint {
  margin-top: var(--s-2);
}

.panel-help > :not(summary) {
  margin-top: var(--s-3);
}

/* Eingeklapptes Panel: <details class="panel panel-details"><summary class="panel-title"> */
.panel-details > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-4) var(--space-panel);
}

.panel-details[open] > summary {
  border-bottom: 1px solid var(--border);
}

.panel-details > .panel-body {
  padding-top: var(--s-4);
}

/* Karte-in-Karte vermeiden: verschachtelte Panels in einem eingeklappten
   Bereich ohne eigenen Rahmen und Schatten. */
.panel-details > .panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.panel-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.hint {
  color: var(--muted);
  margin-top: 0;
  font-size: var(--fs-13);
}

.footnote {
  color: var(--muted);
  font-size: var(--fs-12);
  margin: 0;
}

.kv-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s-1) var(--s-4);
  margin: 0;
  font-size: var(--fs-13);
}

.kv-list dt {
  color: var(--muted);
  font-weight: var(--weight-medium);
}

.kv-list dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Beispieldaten-Markierung (Debug-Fallback) */
.is-sample-data {
  position: relative;
  border-color: var(--warn) !important;
}

.is-sample-data::after {
  content: "Beispieldaten";
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 8px;
  border-radius: 0 var(--r-lg) 0 var(--r-sm);
  background: var(--warn);
  color: #1a1207;
  font-size: var(--fs-12);
  font-weight: var(--weight-semibold);
  z-index: 1;
}

/* ── KPI-Tile (eine Kachel; Aliase .stat, .versand-stat-card,
   .mediamarkt-import-counter, .mm-transfer-metric, .custom-shop-kpi) ────
   Zahl 20 px links, Label 13 px rechts, optional Nebentext darunter.
   Farbe nur bei Abweichung: warn = linker Balken, danger = Rahmen + Fläche. */
.kpi-grid,
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}

.kpi-tile,
.stat,
.versand-stat-card,
.mediamarkt-import-counter,
.mm-transfer-metric,
.custom-shop-kpi {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  min-width: 0;
  transition: border-color var(--motion), background var(--motion);
}

a.kpi-tile:hover,
a.stat:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.kpi-tile[data-tone="danger"],
.stat[data-tone="danger"] {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.kpi-tile[data-tone="warn"],
.stat[data-tone="warn"] {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--warn);
}

.kpi-tile[data-tone="ok"],
.stat[data-tone="ok"],
.kpi-tile[data-tone="info"],
.stat[data-tone="info"],
.kpi-tile[data-tone="neutral"],
.stat[data-tone="neutral"],
.stat.highlight {
  border-color: var(--border);
  background: var(--surface);
}

.kpi-tile.is-primary {
  border-color: var(--border-strong);
}

.stat-icon {
  display: none;
}

.stat-body,
.kpi-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--s-2);
  min-width: 0;
  flex: 1 1 auto;
}

.kpi-label,
.stat-label {
  color: var(--muted);
  font-size: var(--fs-13);
  font-weight: var(--weight-medium);
  min-width: 0;
}

.kpi-value,
.stat-value {
  order: -1;
  font-weight: var(--weight-semibold);
  font-size: var(--fs-20);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kpi-tile.is-primary .kpi-value,
.kpi-tile.is-primary .stat-value {
  font-size: var(--fs-28);
}

.kpi-sub {
  flex-basis: 100%;
  color: var(--muted);
  font-size: var(--fs-12);
}

/* Alias-Kacheln mit strong/span/small statt .kpi-*-Klassen */
.mediamarkt-import-counter,
.mm-transfer-metric {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--s-2);
}

.mediamarkt-import-counter > strong,
.mm-transfer-metric > strong {
  order: -1;
  font-weight: var(--weight-semibold);
  font-size: var(--fs-20);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.mediamarkt-import-counter > span,
.mm-transfer-metric > span {
  color: var(--muted);
  font-size: var(--fs-13);
  font-weight: var(--weight-medium);
}

.mediamarkt-import-counter > small,
.mm-transfer-metric > small {
  flex-basis: 100%;
  color: var(--muted);
  font-size: var(--fs-12);
}

/* ── Tabelle ───────────────────────────────────────────────────────────── */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
}

.data-table th,
.data-table td {
  text-align: left;
  padding: var(--row-y) 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: var(--weight-semibold);
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Die einzige Uppercase-Regel der Oberfläche (L17). */
.data-table thead th,
.kpi-label,
.stat-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.data-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
}

.data-table tbody tr:hover {
  background: var(--surface-2);
}

.data-table td.num,
.data-table th.num {
  text-align: right;
}

.data-table tr.group-row td {
  background: var(--surface-2);
  border-top: 2px solid var(--border);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-12);
  color: var(--muted);
  padding: 6px 10px;
}

.data-table tr.is-selected {
  background: var(--accent-soft);
}

.data-table tr[data-kind="stale"] td:first-child {
  box-shadow: inset 3px 0 0 var(--danger);
}

.data-table th[aria-sort] {
  cursor: pointer;
}

.data-table th[aria-sort="ascending"]::after {
  content: " ▲";
}

.data-table th[aria-sort="descending"]::after {
  content: " ▼";
}

/* Kartenansicht: Tabellen mit mehr als vier Spalten unter 640 px.
   Jede Zelle trägt data-label="Spaltenname". */
@media (max-width: 640px) {
  .data-table.is-cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .data-table.is-cards,
  .data-table.is-cards tbody,
  .data-table.is-cards tr,
  .data-table.is-cards td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .data-table.is-cards tr {
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--border);
  }

  .data-table.is-cards tbody tr:nth-child(even),
  .data-table.is-cards tbody tr:hover {
    background: transparent;
  }

  .data-table.is-cards td {
    display: grid;
    grid-template-columns: minmax(0, 96px) minmax(0, 1fr);
    gap: var(--s-2);
    padding: 4px 0;
    border-bottom: 0;
    text-align: left;
  }

  .data-table.is-cards td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--fs-12);
    font-weight: var(--weight-medium);
  }

  .data-table.is-cards td:not([data-label]) {
    grid-template-columns: minmax(0, 1fr);
  }

  .data-table.is-cards td:not([data-label])::before {
    content: none;
  }

  .data-table.is-cards td.num {
    text-align: left;
  }

  .data-table.is-cards td .btn {
    white-space: normal;
    justify-self: start;
    text-align: left;
  }

  .data-table.is-cards td > .pill {
    justify-self: start;
  }
}

/* ── Pill (eine Pille; Aliase .badge, .subtab-badge, .chip-count, .nav-badge,
   .mm-transfer-badge, .article-type-badge, .versand-collapsible-badge,
   .reconcile-conn-badge, .vault-field-chip, .vault-inline-state) ────────
   Höhe 20 px, --fs-12, 600. Grau ist der Normalfall; warn = Text + Rahmen
   ohne Fläche; rot nur für Fehler/Abweichung. */
.pill,
.badge,
.subtab-badge,
.chip-count,
.nav-badge,
.mm-transfer-badge,
.article-type-badge,
.versand-collapsible-badge,
.reconcile-conn-badge,
.vault-field-chip,
.vault-inline-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: var(--weight-semibold);
  line-height: 18px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.pill[data-kind="missing"],
.pill[data-kind="oversell"],
.pill[data-kind="deviation"],
.pill[data-kind="stale"],
.pill[data-kind="high"],
.pill[data-kind="vault-error"],
.pill[data-kind="danger"],
.pill[data-tone="danger"] {
  background: var(--danger-soft);
  color: var(--danger-text);
  border-color: var(--danger);
}

.pill[data-kind="medium"],
.pill[data-kind="vault-missing"],
.pill[data-kind="warn"],
.pill[data-tone="warn"] {
  background: transparent;
  color: var(--warn-text);
  border-color: var(--warn);
}

.pill[data-kind="watch"],
.pill[data-kind="unknown"],
.pill[data-kind="ok"],
.pill[data-kind="tolerance"],
.pill[data-kind="vault-ok"],
.pill[data-kind="muted"],
.pill[data-kind="neutral"],
.pill[data-tone="ok"],
.pill[data-tone="neutral"],
.pill[data-tone="muted"] {
  background: var(--surface-3);
  color: var(--muted);
  border-color: var(--border);
}

/* ── Badge (bestehend, Alias der Pille) ────────────────────────────────── */
.badge {
  text-align: center;
}

.badge.danger {
  color: var(--danger-text);
  background: var(--danger-soft);
  border-color: var(--danger);
}

/* ── Button ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  font-weight: var(--weight-semibold);
  font-size: var(--fs-13);
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--motion), border-color var(--motion), color var(--motion);
  white-space: nowrap;
}

.btn:hover {
  border-color: var(--muted);
  color: var(--text);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn.primary {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--on-accent);
}

.btn.primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--on-accent);
  filter: brightness(0.94);
}

.btn.outline {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.btn.outline:hover {
  background: var(--accent-soft);
}

.btn.danger {
  background: var(--danger-strong);
  border-color: var(--danger-strong);
  color: var(--on-accent);
}

.btn.danger:hover {
  filter: brightness(0.94);
  color: var(--on-accent);
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

.btn.ghost:hover {
  background: var(--surface-2);
  color: var(--text);
}

.btn.sm,
.btn.small {
  padding: 5px 10px;
  font-size: var(--fs-12);
}

.btn.icon {
  padding: 6px;
  width: 36px;
  height: 36px;
}

.btn.is-loading {
  position: relative;
  cursor: progress;
}

.btn.is-loading::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Schalter (.switch) ────────────────────────────────────────────────── */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  font-size: var(--fs-13);
  font-weight: var(--weight-medium);
  color: var(--text);
  min-width: 0;
}

.switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.switch input + span {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.switch input + span::before {
  content: "";
  flex: 0 0 auto;
  display: inline-block;
  box-sizing: border-box;
  width: 36px;
  height: 20px;
  margin-right: var(--s-2);
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  vertical-align: middle;
  transition: background var(--motion), border-color var(--motion);
}

.switch input + span::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--text);
  transition: transform var(--motion), background var(--motion);
}

.switch input:checked + span::before {
  background: var(--accent);
  border-color: var(--accent);
}

.switch input:checked + span::after {
  transform: translateX(16px);
  background: var(--on-accent);
}

.switch input:focus-visible + span::before {
  box-shadow: var(--focus);
}

.switch input:disabled + span {
  opacity: 0.5;
  cursor: not-allowed;
}

.switch:has(input:disabled) {
  cursor: not-allowed;
}

/* ── Kette (.chain) ────────────────────────────────────────────────────── */
.chain {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.chain-step {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 120px;
  min-width: 120px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion);
}

.chain-step:hover {
  border-color: var(--border-strong);
}

.chain-step[aria-pressed="true"] {
  border-color: var(--accent);
}

.chain-step:disabled {
  cursor: default;
}

.chain-value {
  font-size: var(--fs-20);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.chain-label {
  font-size: var(--fs-13);
}

.chain-sub {
  font-size: var(--fs-12);
  color: var(--muted);
  min-height: 1.4em;
}

.chain-arrow {
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
  color: var(--muted);
}

.chain-arrow::after {
  content: "→";
}

@media (max-width: 640px) {
  .chain {
    flex-direction: column;
  }

  .chain-step {
    flex: 0 0 auto;
    min-width: 0;
  }

  .chain-arrow {
    display: none;
  }
}

/* ── Toolbar / Chip / Suchfeld ─────────────────────────────────────────── */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

.chip,
.dimension-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: var(--fs-12);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--muted);
  background: var(--surface-2);
  cursor: pointer;
  transition: background var(--motion), color var(--motion), border-color var(--motion);
}

.chip:hover,
.dimension-filter-btn:hover {
  color: var(--text);
  border-color: var(--muted);
}

.chip[aria-pressed="true"],
.chip[aria-checked="true"],
.chip.active,
.dimension-filter-btn.active {
  border-color: var(--accent);
  color: var(--text);
  background: var(--accent-soft);
}

/* Chip-Ton nur im gedrückten Zustand (JS setzt data-tone nur bei Wert > 0). */
.chip[aria-pressed="true"][data-tone="danger"],
.chip[aria-checked="true"][data-tone="danger"] {
  border-color: var(--danger);
  color: var(--danger-text);
  background: var(--danger-soft);
}

.chip[aria-pressed="true"][data-tone="warn"],
.chip[aria-checked="true"][data-tone="warn"] {
  border-color: var(--warn);
  color: var(--warn-text);
  background: transparent;
}

.chip[data-count="0"],
.chip.is-empty {
  opacity: 0.6;
}

.chip-static {
  cursor: default;
}

/* .chip-count ist ein Alias der Pille (siehe „Pill“). */
.chip-count {
  min-width: 20px;
  padding: 0 6px;
}

.search-input,
input[data-view-search],
.input {
  min-width: 0;
  width: 100%;
  max-width: 480px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-13);
}

.toolbar > .input,
.toolbar > .search-input {
  flex: 1 1 200px;
  width: auto;
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast-stack {
  position: fixed;
  right: var(--s-6);
  bottom: var(--s-6);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: min(92vw, 420px);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r);
  border: 1px solid var(--border-strong);
  border-left-width: 4px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-2);
  pointer-events: auto;
  animation: toast-in 180ms ease;
  font-size: var(--fs-13);
}

.toast.is-leaving {
  opacity: 0;
  transition: opacity 160ms ease;
}

.toast[data-tone="ok"] {
  border-left-color: var(--ok);
}

.toast[data-tone="warn"] {
  border-left-color: var(--warn);
}

.toast[data-tone="danger"] {
  border-left-color: var(--danger);
}

.toast[data-tone="info"] {
  border-left-color: var(--info);
}

.toast-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.toast-action {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  padding: 0 4px;
}

.toast-close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-20);
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.toast-close:hover {
  color: var(--text);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Speichern-Bestätigung („Gespeichert.“): wie ein Toast mit grünem Balken,
   keine grüne Fläche. */
.save-success-toast {
  position: fixed;
  right: var(--s-6);
  bottom: calc(var(--s-6) + 64px);
  z-index: 91;
  max-width: min(92vw, 460px);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--ok);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-13);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.save-success-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Dialog ────────────────────────────────────────────────────────────── */
.dialog {
  width: min(92vw, 560px);
  max-height: 85vh;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.dialog::backdrop {
  background: rgba(2, 6, 23, 0.6);
}

.dialog[data-tone="danger"] .dialog-title {
  color: var(--danger-text);
}

.dialog-title {
  margin: 0;
  padding: var(--s-4) var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-16);
}

.dialog-body {
  padding: var(--s-4) var(--s-5);
  max-height: 60vh;
  overflow: auto;
  display: grid;
  gap: var(--s-3);
  font-size: var(--fs-13);
}

.dialog-body p {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.dialog-list {
  margin: 0;
  padding-left: 20px;
  max-height: 200px;
  overflow: auto;
}

.dialog-pre {
  margin: 0;
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-12);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 40vh;
  overflow: auto;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5) var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.shortcuts-table th {
  width: 90px;
}

/* ── Drawer ────────────────────────────────────────────────────────────── */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: min(100vw, var(--drawer-w));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2);
  transform: translateX(100%);
  transition: transform var(--motion);
  margin: 0;
  padding: 0;
}

.drawer.is-open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
}

.drawer-title {
  margin: 0;
  font-size: var(--fs-16);
  min-width: 0;
  overflow-wrap: anywhere;
}

.drawer-close {
  font-size: var(--fs-20);
  line-height: 1;
}

.drawer-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: var(--s-4) var(--s-5);
  display: grid;
  gap: var(--s-4);
  align-content: start;
  font-size: var(--fs-13);
}

/* ── Empty-State ───────────────────────────────────────────────────────── */
.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r);
  text-align: center;
  color: var(--muted);
}

.empty-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-20);
}

.empty-state[data-tone="ok"] .empty-icon {
  color: var(--ok-text);
}

.empty-state[data-tone="warn"] .empty-icon {
  color: var(--warn-text);
}

.empty-state[data-tone="danger"] .empty-icon {
  background: var(--danger-soft);
  color: var(--danger-text);
}

.empty-title {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

.empty-text {
  font-size: var(--fs-13);
  max-width: 60ch;
}

.empty-action {
  margin-top: var(--s-1);
}

/* ── Skeleton ──────────────────────────────────────────────────────────── */
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--surface-3), transparent);
  animation: skeleton-shimmer 1.4s infinite;
}

.skeleton-row {
  height: 44px;
}

.skeleton-tile {
  height: 84px;
}

.skeleton-group {
  display: grid;
  gap: var(--s-2);
}

@keyframes skeleton-shimmer {
  to {
    transform: translateX(100%);
  }
}

/* ── Formular ──────────────────────────────────────────────────────────── */
.field,
.dimension-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-12);
  font-weight: var(--weight-medium);
  min-width: 0;
}

.field-label,
.dimension-label,
.field > label {
  font-size: var(--fs-13);
  color: var(--muted);
  font-weight: var(--weight-medium);
}

.field-input,
.dimension-input,
.field select,
.field input:not([type="checkbox"]):not([type="radio"]),
.dimension-field select {
  padding: 9px 12px;
  min-height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-weight: var(--weight-medium);
  font-size: var(--fs-13);
  transition: border-color var(--motion), box-shadow var(--motion);
  width: 100%;
  min-width: 0;
}

.field-input::placeholder,
.dimension-input::placeholder {
  color: var(--muted);
  font-weight: var(--weight-regular);
}

.field-input:focus,
.dimension-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus);
}

.field-input.is-invalid,
.dimension-input.missing {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.field-help {
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: var(--weight-regular);
}

.field-help.is-danger {
  color: var(--danger-text);
}

.field-error {
  color: var(--danger-text);
  font-size: var(--fs-12);
}

/* Kontrollkästchen mit Beschriftung */
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-13);
  font-weight: var(--weight-regular);
  cursor: pointer;
  min-width: 0;
}

.check input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
}

/* .vault-inline-state ist ein Alias der Pille (Farbe, Schrift); der Inhalt ist
   heute eine mehrzeilige Textzeile (Vault-Slug, Feld, Zustand, Link), daher
   umbrechend und mit kleinem Radius, bis 7.4.1 die Vault-Felder neu ordnet. */
.vault-inline-state {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
  min-height: 0;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  font-weight: var(--weight-medium);
}

.vault-inline-state[data-state="ok"] {
  color: var(--muted);
  border-color: var(--border);
  background: var(--surface-3);
}

.vault-inline-state[data-state="missing"],
.vault-inline-state[data-state="not_configured"] {
  color: var(--warn-text);
  border-color: var(--warn);
  background: transparent;
}

.vault-inline-state[data-state="error"] {
  color: var(--danger-text);
  border-color: var(--danger);
  background: var(--danger-soft);
}

.vault-inline-state[data-state="unchecked"] {
  color: var(--muted);
}

.dimension-status {
  font-size: var(--fs-12);
  color: var(--muted);
}

.dimension-status.ok {
  color: var(--ok-text);
}

.dimension-status.warn {
  color: var(--warn-text);
}

/* ── Callout ───────────────────────────────────────────────────────────── */
.callout {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--border-strong);
  border-left-width: 4px;
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: var(--fs-13);
}

.callout[data-tone="danger"] {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.callout[data-tone="warn"] {
  border-left-color: var(--warn);
  background: var(--surface-2);
}

.callout[data-tone="info"] {
  border-left-color: var(--info);
  background: var(--surface-2);
}

.callout[data-tone="ok"] {
  border-left-color: var(--ok);
  background: var(--surface-2);
}

.callout-title {
  font-weight: var(--weight-semibold);
}

.callout-text {
  overflow-wrap: anywhere;
}

.callout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.callout > .btn {
  justify-self: start;
}

/* ── Worklist ──────────────────────────────────────────────────────────── */
.worklist {
  display: grid;
  gap: var(--s-4);
}

.worklist-group {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.worklist-group-header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.worklist-group-title {
  flex: 1 1 200px;
  font-size: var(--fs-14);
  font-weight: var(--weight-semibold);
  min-width: 0;
}

.worklist-group-count {
  color: var(--muted);
  font-weight: var(--weight-semibold);
}

.worklist-group-link {
  font-size: var(--fs-13);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.worklist-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--row-y) var(--s-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-13);
}

.worklist-row:last-child {
  border-bottom: 0;
}

.worklist-row:hover {
  background: var(--surface-2);
}

.worklist-main {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  flex-wrap: wrap;
}

.worklist-label {
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.worklist-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  color: var(--muted);
  font-size: var(--fs-12);
  min-width: 0;
}

.worklist-actions {
  display: flex;
  gap: var(--s-1);
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .worklist-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .worklist-actions {
    justify-content: flex-start;
  }
}

/* ── Selection-Bar ─────────────────────────────────────────────────────── */
.selection-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-13);
}

/* ── Timeline ──────────────────────────────────────────────────────────── */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--s-4);
  border-left: 2px solid var(--border-strong);
  display: grid;
  gap: var(--s-3);
}

.timeline-item {
  position: relative;
  display: grid;
  gap: 2px;
  font-size: var(--fs-13);
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s-4) - 6px);
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.timeline-sig {
  font-family: var(--mono);
  font-weight: var(--weight-semibold);
}

.timeline-range {
  color: var(--muted);
  font-size: var(--fs-12);
}

/* ── Progress ──────────────────────────────────────────────────────────── */
.progress,
progress.progress {
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3);
  accent-color: var(--accent);
}

/* ── Sonstiges ─────────────────────────────────────────────────────────── */
.market-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  box-shadow: var(--shadow-1);
}

.subtab .market-logo {
  width: 20px;
  height: 20px;
  border-radius: 6px;
}