/* ════════════════════════════════════════════════════════════════════════════
   TIGA DESIGN SYSTEM · KANONISCHE KOMPONENTEN  (Prefix: tds-)
   Charge 1: Button · Card · Field · Badge · Toggle
   Gebaut ausschließlich auf den Tokens aus tokens.css (data-cockpit="on").
   Eine richtige Version je Baustein — neue UI nutzt diese Klassen.
   Bestands-/Kunden-UI bleibt unangetastet (kein Legacy-Selektor überschrieben).
════════════════════════════════════════════════════════════════════════════ */

/* ── BUTTON ────────────────────────────────────────────────────────────────── */
.tds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-body); font-size: 14px; font-weight: var(--weight-body-strong);
  letter-spacing: var(--tracking-label); line-height: 1;
  border: 1px solid transparent; border-radius: var(--r-md);
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease-cockpit), border-color var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast), transform var(--t-instant);
}
.tds-btn:active { transform: translateY(1px); }
.tds-btn:focus-visible { outline: none; box-shadow: var(--field-ring-focus); }
.tds-btn:disabled { opacity: .5; pointer-events: none; }
.tds-btn .tds-i { width: var(--icon-md); height: var(--icon-md); }

.tds-btn--primary { background: var(--accent); color: var(--text-on-accent); }
.tds-btn--ghost   { background: var(--interactive); color: var(--on-interactive); border-color: var(--border-default); }
.tds-btn--subtle  { background: transparent; color: var(--text-secondary); }
.tds-btn--danger  { background: var(--danger); color: var(--text-on-accent); }

@media (hover: hover) {
  .tds-btn--primary:hover { filter: brightness(1.07); box-shadow: 0 var(--s-1) var(--s-4) calc(-1 * var(--s-1)) var(--accent-glow); }
  .tds-btn--danger:hover  { filter: brightness(1.07); box-shadow: 0 var(--s-1) var(--s-4) calc(-1 * var(--s-1)) var(--glow-danger); }
  .tds-btn--ghost:hover   { background: var(--interactive-hover); border-color: var(--border-strong); }
  .tds-btn--subtle:hover  { background: var(--interactive); color: var(--text-primary); }
}

.tds-btn--sm { padding: var(--s-2) var(--s-3); font-size: 13px; border-radius: var(--r-sm); }
.tds-btn--lg { padding: var(--s-4) var(--s-6); font-size: 15px; }
.tds-btn--block { width: 100%; }

/* ── CARD ──────────────────────────────────────────────────────────────────── */
.tds-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-1);
}
.tds-card--raised   { box-shadow: var(--shadow-2); }
.tds-card--flush    { padding: 0; overflow: hidden; }
.tds-card--interactive { cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-instant); }
@media (hover: hover) { .tds-card--interactive:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); } }
.tds-card--interactive:active { transform: translateY(1px); }
.tds-card__title { font-family: var(--font-display); font-size: 16px; font-weight: var(--weight-label); letter-spacing: var(--tracking-display); color: var(--text-display); }
.tds-card__sub   { font-size: 13px; font-weight: var(--weight-body); color: var(--text-secondary); margin-top: var(--s-1); line-height: 1.5; }

/* ── FIELD (Label + Input/Textarea/Select) ────────────────────────────────── */
.tds-field { display: flex; flex-direction: column; gap: var(--s-2); }
.tds-label { font-size: 12px; font-weight: var(--weight-label); letter-spacing: var(--tracking-label); color: var(--text-secondary); }
.tds-hint  { font-size: 12px; font-weight: var(--weight-body); color: var(--text-muted); }
.tds-field--error .tds-hint { color: var(--danger); }

.tds-input, .tds-textarea, .tds-select {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-family: var(--font-body); font-size: 14px; font-weight: var(--weight-body);
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
@media (hover: hover) { .tds-input:hover, .tds-textarea:hover, .tds-select:hover { background: var(--field-bg-hover); } }
.tds-input:focus, .tds-textarea:focus, .tds-select:focus {
  outline: none; border-color: var(--field-border-focus); box-shadow: var(--field-ring-focus); background: var(--field-bg-hover);
}
.tds-input::placeholder, .tds-textarea::placeholder { color: var(--text-faint); }
.tds-input:disabled, .tds-textarea:disabled, .tds-select:disabled { opacity: .5; cursor: not-allowed; }
.tds-field--error .tds-input, .tds-field--error .tds-textarea, .tds-field--error .tds-select { border-color: var(--danger); }
.tds-textarea { resize: vertical; min-height: var(--s-10); line-height: 1.6; }
.tds-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: var(--s-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s-4) center;
}
/* Native Dropdown-Liste solide + lesbar (sonst weiß-auf-weiß im Dark Mode) */
.tds-select option { background: var(--surface-2); color: var(--text-primary); }

/* ── BADGE / STATUS-PILL ──────────────────────────────────────────────────── */
.tds-badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-3);
  font-size: 11px; font-weight: var(--weight-body-strong); letter-spacing: var(--tracking-label);
  border-radius: var(--r-pill);
  background: var(--interactive); color: var(--text-secondary);
}
.tds-badge .tds-i { width: var(--icon-xs); height: var(--icon-xs); }
.tds-badge--accent  { background: var(--accent-soft);  color: var(--accent); }
.tds-badge--success { background: var(--success-soft); color: var(--success); }
.tds-badge--warning { background: var(--warning-soft); color: var(--warning); }
.tds-badge--danger  { background: var(--danger-soft);  color: var(--danger); }
.tds-badge--info    { background: var(--info-soft);    color: var(--info); }

/* ── TOGGLE / SWITCH ──────────────────────────────────────────────────────── */
.tds-toggle { position: relative; display: inline-flex; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
.tds-toggle input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.tds-toggle__track {
  position: absolute; inset: 0; border-radius: var(--r-pill);
  background: var(--interactive-active);
  transition: background var(--t-base) var(--ease-cockpit);
}
.tds-toggle__thumb {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: var(--r-pill);
  background: var(--text-secondary);
  transition: transform var(--t-base) var(--ease-spring), background var(--t-base);
}
.tds-toggle input:checked ~ .tds-toggle__track { background: var(--accent); }
.tds-toggle input:checked ~ .tds-toggle__thumb { transform: translateX(20px); background: var(--text-on-accent); }
.tds-toggle input:focus-visible ~ .tds-toggle__track { box-shadow: var(--field-ring-focus); }
.tds-toggle input:disabled ~ .tds-toggle__track { opacity: .5; }

/* ── ACCORDION (native <details>) ──────────────────────────────────────────── */
.tds-accordion {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
}
.tds-accordion + .tds-accordion { margin-top: var(--s-2); }
.tds-accordion > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  font-size: 14px; font-weight: var(--weight-body-strong); color: var(--text-primary);
  transition: background var(--t-fast);
}
.tds-accordion > summary::-webkit-details-marker { display: none; }
.tds-accordion > summary:focus-visible { outline: none; box-shadow: var(--field-ring-focus); }
@media (hover: hover) { .tds-accordion > summary:hover { background: var(--interactive); } }
.tds-accordion__chev { width: var(--icon-md); height: var(--icon-md); color: var(--text-muted); flex-shrink: 0; transition: transform var(--t-base) var(--ease-cockpit); }
.tds-accordion[open] > summary .tds-accordion__chev { transform: rotate(180deg); }
.tds-accordion__body { padding: 0 var(--s-5) var(--s-5); font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* ── TABLE ─────────────────────────────────────────────────────────────────── */
.tds-table { width: 100%; border-collapse: collapse; font-size: 13px; font-weight: var(--weight-body); }
.tds-table thead th {
  text-align: left; padding: var(--s-3) var(--s-4);
  font-size: 11px; font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid var(--border-default); white-space: nowrap;
}
.tds-table tbody td { padding: var(--s-3) var(--s-4); color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); }
.tds-table tbody tr:last-child td { border-bottom: none; }
.tds-table td.tds-num, .tds-table th.tds-num { text-align: right; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .tds-table tbody tr:hover { background: var(--interactive); } }

/* ── TABS ──────────────────────────────────────────────────────────────────── */
.tds-tabs { display: inline-flex; gap: var(--s-1); background: var(--interactive); padding: var(--s-1); border-radius: var(--r-md); }
.tds-tab {
  padding: var(--s-2) var(--s-4); border: none; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: var(--weight-label); color: var(--text-secondary);
  border-radius: var(--r-sm); transition: background var(--t-fast), color var(--t-fast); white-space: nowrap;
}
.tds-tab:focus-visible { outline: none; box-shadow: var(--field-ring-focus); }
.tds-tab.is-active { background: var(--pill-active-bg); color: var(--pill-active-fg); }
@media (hover: hover) { .tds-tab:not(.is-active):hover { color: var(--text-primary); } }
.tds-tabpanel { display: none; }
.tds-tabpanel.is-active { display: block; }

/* ── MODAL / DIALOG (native <dialog>) ─────────────────────────────────────── */
.tds-modal {
  border: 1px solid var(--border-default); border-radius: var(--r-lg);
  background: var(--surface-1); color: var(--text-primary);
  padding: var(--s-6); max-width: 480px; width: calc(100vw - var(--s-8));
  box-shadow: var(--shadow-overlay);
}
.tds-modal::backdrop { background: var(--surface-scrim); backdrop-filter: blur(var(--blur-overlay)); -webkit-backdrop-filter: blur(var(--blur-overlay)); }
.tds-modal__title { font-family: var(--font-display); font-size: 18px; font-weight: var(--weight-label); letter-spacing: var(--tracking-display); color: var(--text-display); }
.tds-modal__body { font-size: 14px; font-weight: var(--weight-body); color: var(--text-secondary); line-height: 1.6; margin: var(--s-3) 0 var(--s-6); }
.tds-modal__actions { display: flex; justify-content: flex-end; gap: var(--s-3); }
@media (prefers-reduced-motion: no-preference) {
  .tds-modal[open] { animation: tds-modal-in var(--t-base) var(--ease-cockpit); }
}
@keyframes tds-modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }