/* public/design-components.css — wiederverwendbare Bausteine nach der Vorlage (Karte/Pille/
   Feld-Zustände/Quellen-Chip). Setzt public/design-tokens.css voraus (muss davor verlinkt sein). */

.card {
  background: var(--card);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  padding: 14px 15px;
  position: relative;
  transition: transform var(--ease-move), box-shadow var(--ease-move);
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 22%, transparent) 0%,
    color-mix(in srgb, var(--accent) 6%, transparent) 45%, transparent 78%);
  opacity: 0; transition: opacity var(--ease-color);
}
.card:hover::after { opacity: 1; }
.card:hover { transform: translateY(-1px); box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 14%, transparent); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 5px 13px; color: var(--text-muted); font-family: var(--font); font-size: var(--fs-secondary);
  cursor: pointer; transition: background var(--ease-color), color var(--ease-color);
}
.pill[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent); }

.field {
  border: 1px solid transparent; border-radius: var(--radius-field);
  padding: 9px 11px; background: var(--surface-raised);
  transition: background var(--ease-color);
}
.field.warn { background: var(--warning-bg); }
.field.geprueft { background: var(--success-bg); }

.source-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-secondary);
  border: 1px solid transparent; border-radius: var(--radius-pill); padding: 3px 10px;
  background: var(--surface-raised); color: var(--text-muted); cursor: pointer;
  transition: background var(--ease-color);
}
.source-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.source-badge:hover { background: var(--accent-tint); color: var(--accent); }

/* ── Liste+Akte (Design-System Runde 2, Phase A) ─────────────────────────────────────────── */
.list-detail {
  display: grid; grid-template-columns: minmax(260px, 320px) 1fr; grid-template-rows: minmax(0, 1fr);
  gap: var(--space-4); min-height: 0;
  /* 260px deckt den größten gemessenen Chrome-Wert unter den 8 Liste+Akte-Seiten ab (Topbar +
     Container-Padding + ggf. Intro-Text/Tabs/Typ-Filter oberhalb von .list-detail — gemessen
     zwischen 200px (rechnungs-extraktionen.html/zahlungs-vorschlaege.html) und 241px
     (wissens-vorschlaege.html) bei 900px Viewport-Höhe, s. Puppeteer-Verifikation Finding 3). */
  max-height: calc(100vh - 260px);
}
.list-detail-list {
  list-style: none; margin: 0; padding: var(--space-1);
  display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0;
}
.list-detail-row {
  display: block; width: 100%; text-align: left; border: none; border-radius: var(--radius-field);
  padding: 9px 11px; background: transparent; color: var(--text); font-family: var(--font);
  cursor: pointer; transition: background var(--ease-color);
}
.list-detail-row:hover { background: var(--surface-raised); }
.list-detail-row[aria-current="true"] { background: var(--accent-tint); }
.list-detail-row-title {
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--fs-card-title); font-weight: var(--fw-card-title);
}
.list-detail-row-meta {
  font-size: var(--fs-secondary); color: var(--text-muted);
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px;
}
.list-detail-panel {
  background: var(--card); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5);
  overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); min-height: 0;
}
.list-detail-content { display: flex; flex-direction: column; gap: var(--space-4); }
.list-detail-empty { color: var(--text-dim); padding: 30px 0; text-align: center; font-size: var(--fs-body); }
.list-detail-back { display: none; }

@media (max-width: 700px) {
  .list-detail { grid-template-columns: 1fr; }
  .list-detail-panel { display: none; }
  .list-detail.list-detail-show-panel .list-detail-list { display: none; }
  .list-detail.list-detail-show-panel .list-detail-panel { display: flex; }
  .list-detail-back {
    display: inline-block; align-self: flex-start; margin-bottom: 2px;
    background: none; border: none; color: var(--accent); font-family: var(--font);
    font-size: var(--fs-secondary); cursor: pointer; padding: 4px 0;
  }
}

/* ── Vorschläge-Zähler (Nutzerauftrag 2026-08-21: "oben die Anzahl der Vorschläge" auf allen
   Vorschläge-Seiten) — ein Element, id="countLabel", direkt unter den Status-Tabs; zeigt die
   Anzahl der gerade sichtbaren Liste (passt sich beim Tab-/Filter-Wechsel automatisch mit an,
   keine zusätzliche Abfrage nötig). ─────────────────────────────────────────────────────────── */
.count-label { color: var(--text-muted); font-size: 0.8rem; margin: -4px 0 14px; }

/* ── Verlauf-Zeitleiste (Schäden-Akte u.a.) ──────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-step { display: grid; grid-template-columns: 20px 1fr; gap: 10px; position: relative; padding-bottom: 14px; }
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step::before {
  content: ""; position: absolute; left: 9px; top: 20px; bottom: 0; width: 2px; background: var(--border);
}
.timeline-step:last-child::before { display: none; }
.timeline-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); background: var(--card); z-index: 1; }
.timeline-step.done .timeline-dot { background: var(--success); border-color: var(--success); }
.timeline-step.done::before { background: var(--success); opacity: 0.4; }
.timeline-step.active .timeline-dot { background: var(--accent); border-color: var(--accent); }
.timeline-step.rejected .timeline-dot { background: var(--danger); border-color: var(--danger); }
.timeline-step-title { font-size: var(--fs-body); font-weight: 600; }
.timeline-step-meta { font-size: var(--fs-secondary); color: var(--text-muted); margin-top: 1px; }