@layer components {
/* ══════════════════════════════════════════════════════════════════════════
   v3/components.css — Bestehende Primitives umstylen statt neu bauen
   Dashboard-v3 WP8, 27.07.2026

   Leitregel: was existiert und token-getrieben ist, wird umgestylt. Neubau nur,
   wo es nichts gibt. `.btn` hat ueber 100 Aufrufstellen - eine Parallelklasse
   `.u-btn` waere eine zweite Wahrheit, die sofort auseinanderlaeuft.

   Liegt im Layer `components`, also nach `legacy` und nach `layout`. Damit
   genuegen NORMALE Deklarationen; kein !important noetig.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Elevation: Flaeche statt Schatten ───────────────────────────────────────
   Perplexity baut Tiefe ueber Flaechenstufe plus Haarlinie. Echter Blur bleibt
   den vier Dingen vorbehalten, die ueber dem Layout schweben: Popover, Modal,
   Rail-Flyout, Command-Palette.
   Das Legacy-.card ist VIER Mal definiert (index.html, editorial, mobile,
   mobile-perfect) und traegt Schatten plus Hover-Schatten. Hier flachgelegt. */
.card, .card-sm, .stat-card, .row-grid, .crud-goal, .v-card, .ov-section {
  box-shadow: none;
  border-radius: var(--r-lg);
}
.card:hover, .card-sm:hover, .stat-card:hover, .v-card:hover {
  box-shadow: none;
  background: var(--surface-2);
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-2xs);
  padding: 2px var(--sp-2);
}

/* ── Buttons ────────────────────────────────────────────────────────────────
   Kein .u-btn: ueber 100 Aufrufstellen haengen an .btn.
   Perplexity faerbt beim Hover die FLAECHE, nicht die Kante. Und das
   scale(0.97) beim Klick faellt weg - v4 will ruhige, gerade Bewegungen. */
.btn, .btn-primary, .btn-danger, .theme-toggle, .btn-logout {
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
  transition: background var(--dur-1) var(--ease-standard),
              border-color var(--dur-1) var(--ease-standard),
              color var(--dur-1) var(--ease-standard);
}
.btn:active, .btn-primary:active, .btn-danger:active { transform: none; }
.btn:hover, .theme-toggle:hover, .btn-logout:hover {
  background: var(--surface-2);
  border-color: var(--line-2);
}
.btn-primary {
  background: var(--accent-1);
  border-color: transparent;
  color: var(--accent-on);
}
.btn-primary:hover { background: var(--accent-2); border-color: transparent; }

/* Neu und einziger Zusatz: Icon-only fuer Toolbars und Rail. */
.btn-ghost {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text-1); }

/* ── Eingaben ───────────────────────────────────────────────────────────── */
.crud-field input, .crud-field select, .crud-field textarea,
.crud-input, input[type="text"], input[type="password"], input[type="search"],
input[type="number"], input[type="date"], select, textarea {
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  transition: border-color var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard);
}
.crud-field input:focus, .crud-input:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: var(--shadow-focus);
}

/* ── Listen und Tabellen ────────────────────────────────────────────────────
   Kopfzeile ohne Fuellung, nur eine Haarlinie darunter - das ist der
   Perplexity-Griff, der Tabellen ruhig macht. */
.row-header {
  background: transparent;
  border-bottom: 1px solid var(--line-1);
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-2xs);
  text-transform: uppercase;
  color: var(--text-3);
}
.row-item { border-bottom: 1px solid var(--line-1); min-height: var(--row-h); }
.row-item:hover { background: var(--surface-2); }

/* ── Modals: konvergieren, kein viertes bauen ───────────────────────────────
   Vier unabhaengige Overlay-Systeme existieren (.modal-overlay z200,
   .crud-modal z1000, .w1-wizard-overlay, #cmdk-overlay z9500). Ein einziger
   Regelblock adressiert alle gemeinsam - damit sehen sie gleich aus, ohne dass
   irgendein Panel migriert werden muesste. */
.modal-overlay, .crud-modal, .w1-wizard-overlay, #cmdk-overlay {
  background: var(--surface-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-box, .crud-modal-box, .w1-wizard-modal, .cmdk-modal {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}

/* ── Empty-States: Sketch bleibt ────────────────────────────────────────────
   Die handgezeichneten SVGs (EMPTY_SVGS) bleiben ausdruecklich erhalten -
   Illustration ist kein UI-Chrome, und sie sind Akh-Signatur. Nur der TEXT
   wird ruhiger: Sans statt kursiver Serif. */
.empty-state {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
/* Ihre Strichfuehrung bekommt die Zweitstimme statt currentColor. */
.empty-state svg { stroke: var(--accent-alt-1); opacity: .7; }

/* ── Skeletons: ein hart kodiertes Coral rausnehmen ─────────────────────────
   polish.css:11 hat rgba(217,119,87,0.08) fest im Shimmer-Gradienten. Als
   normale Deklaration ist sie hier ohne !important zu ersetzen. */
.polish-skeleton, .polish-skeleton-card, .polish-skeleton-row {
  background: linear-gradient(90deg,
    var(--surface-2) 25%, var(--accent-wash) 37%, var(--surface-2) 63%);
  border-radius: var(--r-sm);
}

/* ── Scrollbar-Bug aus polish.css:88-90 ─────────────────────────────────────
   Dort faerbt @media (prefers-color-scheme: dark) die Scrollbar coral. Das
   greift am BETRIEBSSYSTEM statt am Theme - wer hell eingestellt ist, aber
   narr benutzt, bekommt die falsche Farbe. Hier theme-korrekt. */
::-webkit-scrollbar-thumb { background: var(--line-3); }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ── Charts entschaerfen ────────────────────────────────────────────────────
   polish.css zeichnet Balken und Achsen mit stroke-dasharray, also bewusst
   "handgezeichnet". v4 will gerade Linien - der Sketch-Anteil bleibt den
   Illustrationen vorbehalten. */
.polish-chart-bar-stroke, .polish-chart-axis { stroke-dasharray: none; }
.polish-chart-bar { fill: var(--accent-1); opacity: 1; }
.polish-chart-axis { stroke: var(--line-2); }

/* ── Tooltips ───────────────────────────────────────────────────────────── */
.polish-tooltip {
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  background: var(--surface-3);
  color: var(--text-1);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2);
}

/* ── Neue Primitives ────────────────────────────────────────────────────────
   Nur das, wofuer es nichts Brauchbares gibt. */
.u-card {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: none;
}

.u-stat { display: flex; flex-direction: column; gap: var(--sp-1); }
.u-stat__value {
  font-family: var(--font-num);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  line-height: var(--lh-xl);
}
.u-stat__label {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-2xs);
  text-transform: uppercase;
  color: var(--text-3);
}

.u-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border-radius: var(--r-md);
}
.u-seg > button {
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
}
.u-seg > button[aria-selected="true"] {
  background: var(--surface-canvas);
  color: var(--text-1);
}

/* ── Pet: praesent, aber kein Etikett ───────────────────────────────────────
   akhilius-pet.css setzt Zinnober (#b52d23) und 112x122px - das machte den
   Narren zum lautesten Element der Oberflaeche. Er ist ein Konzept, kein
   Label: kleiner, ruhiger, in der Akzentfamilie, und im Ruhezustand
   zurueckgenommen. Beim Hover kommt er ganz. */
.akh-pet {
  --akh-pet-accent: var(--accent-alt-1);
  --akh-pet-accent-soft: var(--accent-alt-wash);
  width: 84px;
  height: 92px;
  opacity: .55;
  transition: opacity var(--dur-3) var(--ease-standard);
}
.akh-pet:hover, .akh-pet:focus-within, .akh-pet.is-active { opacity: 1; }
.akh-pet img, .akh-pet canvas { width: 100%; height: 100%; }
}