/* ============================================================================
   TGV DESIGN-SYSTEM — KOMPONENTEN-BIBLIOTHEK  (PLAT#06, SSOT)
   ----------------------------------------------------------------------------
   Wiederverwendbare HTML/CSS-Snippets — geteilt über Chat · Cockpit · Mobile.
   Benutzt AUSSCHLIESSLICH die semantische Token-Schicht aus tokens.css.
   Kein React. Plain CSS-Klassen → in jedem Cockpit per <link> einbindbar.

   Inventar:
     · Grund-Layout    .ds-card / .ds-row / .ds-between / .ds-stack
     · Typo            .ds-h1/h2/h3 .ds-muted .ds-hint
     · Buttons         .ds-btn  (--primary/--confirm/--secondary/--ghost/--danger)
     · Chips           .ds-chip
     · Status-Badges   3 GETRENNTE ACHSEN: .ds-badge--ent-* / --cls-* / --conf-*
     · Scope-Breadcrumb.ds-scope
     · Beleg-/Doc-Karte.ds-doc
     · Approval-Karte  .ds-approval
     · Tabelle+Zeilen-Aktion .ds-table
     · Quick-Action-Chips .ds-quick
     · Empty/Onboarding .ds-empty
   Konvention: PRIMÄRE Aktion steht RECHTS in Karten; Bestätigen|Ablehnen-Paar.
   Alle Snippets HTML-Beispiele stehen im showcase.html + STYLE_GUIDE.md.
   ============================================================================ */

/* ───────────────────────────── GRUND-LAYOUT ─────────────────────────────── */
.ds-card{
  background:var(--surface); border:var(--bd-width) solid var(--border);
  border-radius:var(--radius-lg); padding:var(--sp-3) var(--sp-4);
  box-shadow:var(--shadow-card); color:var(--text);
}
.ds-row     { display:flex; align-items:center; gap:var(--sp-3); }
.ds-between { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-3); }
.ds-stack   { display:flex; flex-direction:column; gap:var(--sp-2); }
.ds-spread  { flex:1; }                    /* Schub-Element: drängt Folgendes nach rechts */

/* ───────────────────────────────── TYPO ─────────────────────────────────── */
.ds-h1{ font:var(--fw-bold) var(--fs-h1)/1.25 var(--font-sans); margin:0; color:var(--text); }
.ds-h2{ font:var(--fw-bold) var(--fs-h2)/1.3  var(--font-sans); margin:0; color:var(--text); }
.ds-h3{ font:var(--fw-medium) var(--fs-h3)/1.35 var(--font-sans); margin:0; color:var(--text); }
.ds-muted{ color:var(--text-muted); }
.ds-hint { color:var(--text-hint); font-size:var(--fs-small); }
.ds-amt  { font-weight:var(--fw-bold); font-variant-numeric:tabular-nums; text-align:right; }

/* ──────────────────────────────── BUTTONS ────────────────────────────────
   Default = sekundär (outline). Genau EINE primäre Aktion pro Karte, rechts. */
.ds-btn{
  font:var(--fw-medium) var(--fs-small)/1 var(--font-sans);
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:var(--radius-md);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text);
  cursor:pointer; white-space:nowrap; transition:background .12s, border-color .12s, transform .04s;
}
.ds-btn:hover{ background:var(--surface-2); }
.ds-btn:active{ transform:scale(.98); }
.ds-btn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.ds-btn:disabled{ opacity:.5; cursor:not-allowed; }

.ds-btn--primary{ border:1.5px solid var(--c-action);  color:var(--c-action);  }
.ds-btn--primary:hover{ background:var(--c-action-bg); }
.ds-btn--confirm{ border:1.5px solid var(--c-confirm); color:var(--c-confirm); }
.ds-btn--confirm:hover{ background:var(--c-confirm-bg); }
.ds-btn--danger { border:1.5px solid var(--c-danger);  color:var(--c-danger);  }
.ds-btn--danger:hover{ background:var(--c-danger-bg); }
.ds-btn--secondary{ /* = default outline, explizit benennbar */ }
.ds-btn--ghost{ border:none; background:none; color:var(--c-action); padding:6px 8px; }
.ds-btn--ghost:hover{ background:var(--c-action-bg); }

/* gefüllte Variante (selten — Haupt-CTA in leeren/Onboarding-Zuständen) */
.ds-btn--solid{ border:1.5px solid var(--c-action); background:var(--c-action); color:var(--surface); }
.ds-btn--solid:hover{ filter:brightness(1.08); background:var(--c-action); }

.ds-btn--sm{ padding:6px 10px; }
.ds-btn--block{ width:100%; justify-content:center; }

/* ───────────────────────────────── CHIP ──────────────────────────────────
   Neutraler Label-Träger (Meta, Datum, Kategorie). Für Status → Badge nehmen. */
.ds-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:var(--fs-micro); line-height:1.6; padding:3px 9px;
  border-radius:var(--radius-md); white-space:nowrap;
  background:var(--surface-2); color:var(--text-muted);
}

/* ════════════════════════════════ STATUS-BADGES ══════════════════════════════
   DREI ORTHOGONALE ACHSEN — bewusst getrennte Klassen-Präfixe, damit sie NIE
   wieder vermischt werden (rka_v2 nutzte ci/cii/civ für Entität UND Sektion UND
   Status — genau das wird hier aufgelöst):
     A) Entität     .ds-badge--ent-{c3|c4|privat}     (wer/welche Firma)
     B) Einstufung  .ds-badge--cls-{public|internal|confidential|strict}
     C) Konfidenz   .ds-badge--conf-{high|medium|low}  + .is-locked (🔒)
   Ein Doc trägt typ. EINEN Badge je Achse — sie schließen sich NICHT aus. */
.ds-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:var(--fs-micro); font-weight:var(--fw-medium); line-height:1.6;
  padding:3px 9px; border-radius:var(--radius-md); white-space:nowrap;
  border:1px solid transparent;
}
.ds-badge .ds-badge__dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }

/* A — Entität */
.ds-badge--ent-c3    { color:var(--ent-c3);     background:var(--ent-c3-bg);     }
.ds-badge--ent-c4    { color:var(--ent-c4);     background:var(--ent-c4-bg);     }
.ds-badge--ent-privat{ color:var(--ent-privat); background:var(--ent-privat-bg); }

/* B — Einstufung / Confidentiality (eskalierend; strict trägt Rahmen + Schloss) */
.ds-badge--cls-public      { color:var(--cls-public);       background:var(--cls-public-bg);       }
.ds-badge--cls-internal    { color:var(--cls-internal);     background:var(--cls-internal-bg);     }
.ds-badge--cls-confidential{ color:var(--cls-confidential); background:var(--cls-confidential-bg); }
.ds-badge--cls-strict      { color:var(--cls-strict);       background:var(--cls-strict-bg); border-color:var(--cls-strict); }

/* C — Konfidenz (wie sicher); .is-locked = vom User/Korroboration bestätigt → 🔒 */
.ds-badge--conf-high  { color:var(--conf-high);   background:var(--conf-high-bg);   }
.ds-badge--conf-medium{ color:var(--conf-medium); background:var(--conf-medium-bg); }
.ds-badge--conf-low   { color:var(--conf-low);    background:var(--conf-low-bg);    }
.ds-badge.is-locked   { font-weight:var(--fw-bold); }
.ds-badge.is-locked .ds-badge__lock{ color:var(--conf-locked); }

/* ── STATUS-BADGES (semantisch, KEINE der 3 Achsen) — promoviert aus PLAT#03 rka_v2.
   Für allgemeine Zustände: erledigt/dienstlich (confirm) · prüfen/needs_review (warn) ·
   Fehler/abgelehnt (danger) · Info/aktiv (info) · neutral. Nutzen die Aktions-Rollen-
   Tokens → marken-konsistent (info folgt --c-action; confirm/warn/danger bleiben Anker). */
.ds-badge--confirm{ color:var(--c-confirm); background:var(--c-confirm-bg); }
.ds-badge--warn   { color:var(--c-warn);    background:var(--c-warn-bg);    }
.ds-badge--danger { color:var(--c-danger);  background:var(--c-danger-bg);  }
.ds-badge--info   { color:var(--c-action);  background:var(--c-action-bg);  }
.ds-badge--neutral{ color:var(--c-neutral); background:var(--c-neutral-bg); }

/* ── DOMÄNEN-BADGE-BASIS — gemeinsame Basis für domänen-/marken-spezifische Badges
   (z.B. gabriel Provenance „dit/lu/inféré" · univers · work_class). Domäne definiert
   NUR ihre Farb-Variable + Modifier-Klasse auf dieser Basis — Form/Größe bleiben gleich.
   Default neutral; eine Domäne setzt --dom-c / --dom-bg in ihrem Modifier.
   Beispiel:  .ds-badge--dom-provenance{ --dom-c:var(--c-action); --dom-bg:var(--c-action-bg); } */
.ds-badge--domain{ color:var(--dom-c, var(--c-neutral)); background:var(--dom-bg, var(--c-neutral-bg)); }

/* Zahlungs-Hinweise (RKA) — Domänen-Badge-Beispiel (eigene semantische Tokens) */
.ds-badge--pay-private{ color:var(--pay-private); background:var(--pay-private-bg); }
.ds-badge--pay-firm   { color:var(--pay-firm);    background:var(--pay-firm-bg);    }

/* ───────────────────────────── SCOPE-BREADCRUMB ──────────────────────────
   IMMER sichtbar (Multi-Tenant-Sicherheit): Mandant › Entität › Projekt + Rolle.
   Letztes Segment = aktueller Fokus (kräftiger). Rollen-Badge ganz rechts. */
.ds-scope{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2);
  font-size:var(--fs-small); color:var(--text-muted);
  padding:var(--sp-2) var(--sp-3); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-md);
}
.ds-scope__seg{ display:inline-flex; align-items:center; gap:5px; }
.ds-scope__seg--current{ color:var(--text); font-weight:var(--fw-medium); }
.ds-scope__sep{ color:var(--text-hint); }
.ds-scope__role{ margin-left:auto; }

/* ─────────────────────────────── BELEG-/DOC-KARTE ────────────────────────
   Thumbnail + Drive-Link (GOLDENE REGEL: jede #ID klickbar) + Meta + Aktionen.
   Badges nutzen die 3 Achsen. Primär-Aktion rechts. */
.ds-doc{
  display:grid; grid-template-columns:48px 1fr auto; gap:var(--sp-3);
  align-items:start; padding:var(--sp-3); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg);
}
.ds-doc.is-selected{ background:var(--selected-bg); border-color:var(--selected-bd); }
.ds-doc.is-weak{ opacity:.7; }
.ds-doc__thumb{
  width:48px; height:48px; border-radius:var(--radius-md);
  background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--text-hint);
  overflow:hidden;
}
.ds-doc__thumb img{ width:100%; height:100%; object-fit:cover; }
.ds-doc__body{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.ds-doc__title{ font-weight:var(--fw-medium); color:var(--text); }
.ds-doc__title a{ color:var(--c-action); text-decoration:none; }
.ds-doc__title a:hover{ text-decoration:underline; }
.ds-doc__meta{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ds-doc__actions{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }

/* ─────────────────────────────── APPROVAL-KARTE ──────────────────────────
   Aktions-VORSCHAU + Bestätigen|Ablehnen + Konfidenz/Quelle + Audit-Hinweis.
   „Nichts ohne Klick" (P3). Bestätigen = grün, rechts; Ablehnen = outline. */
.ds-approval{
  background:var(--surface); border:1px solid var(--c-action);
  border-left:3px solid var(--c-action);
  border-radius:var(--radius-lg); padding:var(--sp-3) var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-3);
}
.ds-approval__head{ display:flex; align-items:center; gap:var(--sp-2); }
.ds-approval__icon{ font-size:18px; }
.ds-approval__preview{
  background:var(--surface-2); border:1px dashed var(--border-strong);
  border-radius:var(--radius-md); padding:var(--sp-3); font-size:var(--fs-small); color:var(--text);
}
.ds-approval__foot{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.ds-approval__source{ color:var(--text-hint); font-size:var(--fs-small); margin-right:auto; }
.ds-approval__actions{ display:flex; gap:var(--sp-2); }  /* rechts: [Ablehnen] [Bestätigen] */

/* ───────────────────────── TABELLE MIT ZEILEN-AKTION ─────────────────────
   Jede Zeile trägt ihre Aktion (z.B. „zuordnen") in der letzten Spalte. */
.ds-table{ width:100%; border-collapse:collapse; font-size:var(--fs-small); color:var(--text); }
.ds-table th{
  text-align:left; font-weight:var(--fw-medium); color:var(--text-muted);
  padding:8px 10px; background:var(--surface-2);
  border-bottom:1px solid var(--border); position:sticky; top:0;
}
.ds-table td{ padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.ds-table tbody tr:hover{ background:var(--surface-2); }
.ds-table tr.is-selected{ background:var(--selected-bg); }
.ds-table .ds-table__num{ text-align:right; font-variant-numeric:tabular-nums; }
.ds-table .ds-table__action{ text-align:right; white-space:nowrap; }

/* ──────────────────────────── QUICK-ACTION-CHIPS ─────────────────────────
   Vorgeschlagene Folge-Fragen/Aktionen unter einer Chat-Antwort. */
.ds-quick{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.ds-quick__chip{
  font:var(--fw-medium) var(--fs-small)/1 var(--font-sans);
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--c-action); color:var(--c-action); background:var(--surface);
  cursor:pointer; transition:background .12s;
}
.ds-quick__chip:hover{ background:var(--c-action-bg); }

/* ──────────────────────────── EMPTY / ONBOARDING ─────────────────────────
   Führt durch (neuer Mandant = 0 Daten). Genau ein Haupt-CTA. */
.ds-empty{
  text-align:center; padding:var(--sp-6) var(--sp-4);
  color:var(--text-muted); display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
}
.ds-empty__icon{ font-size:34px; opacity:.7; }
.ds-empty__title{ font-weight:var(--fw-medium); color:var(--text); }

/* ──────────────────────────────── DOCK-PANEL ─────────────────────────────
   Andockbares Seiten-/Chat-Panel (AGENT-CHAT#01). Kopf (Titel + Aktionen) ·
   scrollbarer Körper · optionale Fuß-Eingabe. Breite per --dock-w überschreibbar
   (resizable-Backlog). Auf Mobile = volle Breite (siehe Responsive). */
.ds-dock{
  display:flex; flex-direction:column;
  width:var(--dock-w, 380px); max-width:100%; height:100%;
  background:var(--surface); border-left:1px solid var(--border);
  box-shadow:var(--shadow-pop);
}
.ds-dock__head{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border);
  background:var(--surface-2); color:var(--text);
}
.ds-dock__title{ font:var(--fw-medium) var(--fs-h3)/1.3 var(--font-sans); margin:0; }
.ds-dock__actions{ margin-left:auto; display:flex; gap:var(--sp-2); }
.ds-dock__body{ flex:1; overflow-y:auto; padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); }
.ds-dock__foot{ padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--border); background:var(--surface); }

/* ─────────────────────────────── RESPONSIVE ──────────────────────────────
   Mobile-first-Anpassung: Doc-Karte gestapelt, Aktionen volle Breite, Dock = Vollbild. */
@media (max-width:560px){
  .ds-doc{ grid-template-columns:40px 1fr; }
  .ds-doc__actions{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:stretch; }
  .ds-approval__actions{ width:100%; }
  .ds-approval__actions .ds-btn{ flex:1; justify-content:center; }
  .ds-dock{ width:100%; border-left:none; }
}