/*
 * STEIGER OS – gemeinsame Design-Quelle für alle Module
 * (Support, Retouren, Marketing inkl. WhatsApp/Flows/Kampagnen/Creator Hub, Auswertung, Einstellungen, Finanzen).
 * Ausgenommen: Logistik (InvenTor, /hub/logistik) – eigenes Design. Hornet nutzt seit 10.10.2026 diese Tokens
 * (hornet.html lädt die Datei und setzt html.sos; Zuordnung der Hornet-Klassen dort im Block „Steiger-OS-Design“).
 *
 * Regel (Michael, 06.10.2026): Design-Änderungen nur HIER. Steiger OS (globals.css) und das Finanz-Modul
 * (os.steiger-naturals.de/finanzen, eigenes Repo) lesen ihre Farben, Schrift, Rundungen und Bewegung aus diesen
 * Variablen. Ausgeliefert als statische Datei: /design/steiger-os.css
 *
 * Aufbau:
 *   1. Variablen (:root) – gelten überall, wo die Datei geladen ist.
 *   2. Feinschliff-Schicht – greift NUR unter <html class="sos"> (Opt-in).
 *      Steiger OS setzt die Klasse je Seite (nicht auf Logistik-Seiten, siehe src/lib/design-scope.ts),
 *      Finanzen setzt sie fest im eigenen Root-Layout.
 */
:root {
  /* Schrift (Steiger OS lädt Plus Jakarta Sans über next/font, Finanzen über Google Fonts) */
  --sos-font: var(--font-jakarta, "Plus Jakarta Sans"), -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --sos-font-size: 15px;

  /* Flächen und Text */
  --sos-bg: #f5f5f7;
  --sos-card: #ffffff;
  --sos-ink: #1d1d1f;
  /* #66666b statt #6e6e73: auch auf Füllflächen (#ececf0, Zähler/Pillen) ≥ 4,5:1 */
  --sos-muted: #66666b;
  --sos-line: #e8e8ed;
  --sos-line-strong: #d2d2d7;

  /* Neutrale Füllungen im Apple-Stil: Grau-Knopf, Segment-Spur, Zeilen-Hover */
  --sos-fill: rgba(118, 118, 128, 0.12);
  --sos-fill-hover: rgba(118, 118, 128, 0.18);
  --sos-hover: rgba(0, 0, 0, 0.035);

  /* Marke (Kopf, Logo) und UI-Akzent (Knöpfe, Links, Auswahl) */
  --sos-brand: #1c5a3d;
  --sos-accent: #0071e3;
  --sos-accent-hover: #0062c4;
  --sos-accent-soft: rgba(0, 113, 227, 0.1);
  /* Akzent-Text auf --sos-accent-soft (ausgewählte Zeile/Seitenmenü): #0071e3 hätte dort nur ~4,1:1 */
  --sos-accent-ink: #0062c4;
  /* Textmarkierung: Akzent-Ton, etwas kräftiger als accent-soft, damit die Auswahl sichtbar bleibt */
  --sos-selection: rgba(0, 113, 227, 0.2);

  /* Status */
  /* #1f7a35 statt #248a3d: grüner Text auf Weiß und auf --sos-green-soft ≥ 4,5:1 */
  --sos-green: #1f7a35;
  --sos-green-fill: #34c759;
  --sos-green-soft: rgba(52, 199, 89, 0.14);
  --sos-red: #d70015;
  --sos-red-fill: #ff3b30;
  --sos-red-soft: rgba(255, 59, 48, 0.1);
  --sos-amber: #a05a00;
  --sos-amber-soft: rgba(255, 149, 0, 0.14);

  /* Form (Apple-flach: Karten/Panels 14, Steuerelemente 9, keine Kapseln für Knöpfe) */
  --sos-radius: 14px;
  --sos-radius-s: 10px;
  --sos-radius-btn: 9px;
  --sos-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
  --sos-shadow-pop: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  /* Aktives Segment im Segmented Control (weiße Fläche auf grauer Spur) */
  --sos-shadow-seg: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  /* Kopfleiste/Navigation: einzige erlaubte Transparenz („Vibrancy“ wie macOS-Toolbars) */
  --sos-vibrancy: rgba(255, 255, 255, 0.78);
  --sos-vibrancy-blur: saturate(180%) blur(20px);
  /* Steuerelement-Höhen (HIG: regulär 36, klein 32) – Knöpfe, Eingabefelder, Auswahllisten, Segmente, Suche */
  --sos-control-h: 36px;
  --sos-control-h-s: 32px;
  /* Seitentitel (großer Titel wie im Finanz-Seitenkopf) */
  --sos-title-size: 26px;
  --sos-title-weight: 700;

  /* Bewegung (Design-Engineering: eigene Kurven, UI unter 300 ms, Drücken 160 ms, Ausblenden schneller als Einblenden) */
  --sos-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sos-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sos-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sos-dur-press: 160ms;
  --sos-dur-pop: 150ms;
  --sos-dur-dialog: 200ms;
  --sos-dur-toast: 240ms;
  --sos-dur-drawer: 300ms;
  --sos-dur-exit: 120ms;
  --sos-press-scale: 0.97;
  /* Startgröße für Dialoge/Menüs beim Einblenden – nie scale(0) */
  --sos-enter-scale: 0.97;
  --sos-focus: 0 0 0 3px rgba(0, 113, 227, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FEINSCHLIFF-SCHICHT (nur unter html.sos)

   Zwei Sorten Regeln:
   • Grundwerte in :where(…) – Spezifität 0, jede Modul-Regel gewinnt.
   • Verbindliche Regeln mit „html.sos …“ – gewinnen gegen einfache Modul-Klassen
     (Drücken, Fokusring, Einblenden), damit es überall gleich reagiert.

   Bekannte Modul-Klassen (Stand 06.10.2026; neue Bausteine hier ergänzen oder data-sos-press setzen):
   Knöpfe   Steiger OS: .btn .pill .act .compose-new-btn .btn-bulk .btn-suggest-lg .hint-bulk .update-btn
                        .rd-btn .cs-btn .mv-btn .nase-btn .macro-btn .adr-btn .ret-btn .fb-btn .err-btn .an-scan-btn .hub-tile
            Finanzen:   .btn .glocke-btn .mahn-ampel-feld .tile .accounts-badge .abgleich-chip-btn .company-pick button
   Abdunkler          .cf-overlay .modal-backdrop .nase-ov .adr-ov .lightbox-ov .crl .sheet | .scrim .abgleich-overlay
   Dialoge (zentriert) .cf-dialog .modal-card .macro-dialog .nase-modal .adr-modal .crl .sheet .box | .dialog .abgleich-dialog
   Menüs (vom Auslöser) .tag-menu | .glocke-menu .more-menu
   Seitenleisten      – | .drawer
   Hinweise unten     .update-banner | (Finanzen: .paybar lokal)
   Bewusst OHNE Bewegung (häufig/Tastatur): Reiter (.tab, .tabs button, .segmented button), Listenzeilen (.row),
   Seitennavigation, Suchfelder, Befehlsauswahl.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Text ─────────────────────────────────────────────────── */
:where(html.sos) :where(h1, h2, h3, h4, .page-title, .hub-h1, .ret-title, .list-title, .modal-title, .cf-title, .drawer-title) {
  text-wrap: balance;
}
:where(html.sos) ::selection {
  background: var(--sos-selection);
}

/* Zahlen in Tabellen und Kennzahlen untereinander ausgerichtet */
:where(html.sos) :where(td, th, time, .num, .kpi-value, .stat-value, .dash-card-num, .ret-num, .ret-card-num, .an-result-num, .an-check-num, .we-hit-num, .shop-track-num, .count, .nav-count, .glocke-count) {
  font-variant-numeric: tabular-nums;
}

/* ── Fokus: sichtbarer Ring nur bei Tastatur (nie Umriss weg ohne Ersatz) ─── */
html.sos :is(button, a[href], summary, select, [role="button"], [role="tab"], [role="menuitem"], [role="option"], [role="switch"], [tabindex]:not([tabindex="-1"]), input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 2px solid transparent; /* bleibt im Hochkontrast-Modus sichtbar */
  outline-offset: 2px;
  box-shadow: var(--sos-focus);
}

/* ── Drücken: sofortiges Feedback, nur transform-artig (Eigenschaft „scale“ addiert sich zu bestehenden transforms) ── */
html.sos :is(.btn, .pill, .act, .compose-new-btn, .btn-bulk, .btn-suggest-lg, .hint-bulk, .update-btn, .rd-btn, .cs-btn, .mv-btn, .nase-btn, .macro-btn, .adr-btn, .ret-btn, .fb-btn, .err-btn, .an-scan-btn, .hub-tile, .glocke-btn, .mahn-ampel-feld, .tile, .accounts-badge, .abgleich-chip-btn, .company-pick button, [data-sos-press]) {
  transition:
    background-color var(--sos-dur-pop) ease,
    border-color var(--sos-dur-pop) ease,
    color var(--sos-dur-pop) ease,
    box-shadow var(--sos-dur-pop) ease,
    opacity var(--sos-dur-pop) ease,
    filter var(--sos-dur-pop) ease,
    transform var(--sos-dur-press) var(--sos-ease-out),
    scale var(--sos-dur-press) var(--sos-ease-out);
}
html.sos :is(.btn, .pill, .act, .compose-new-btn, .btn-bulk, .btn-suggest-lg, .hint-bulk, .update-btn, .rd-btn, .cs-btn, .mv-btn, .nase-btn, .macro-btn, .adr-btn, .ret-btn, .fb-btn, .err-btn, .an-scan-btn, .hub-tile, .glocke-btn, .mahn-ampel-feld, .tile, .accounts-badge, .abgleich-chip-btn, .company-pick button, [data-sos-press]):active:not(:disabled, [aria-disabled="true"], .soon, .tile-soon) {
  scale: var(--sos-press-scale);
}

/* ── Abdunkler: weich einblenden ──────────────────────────── */
html.sos :is(.cf-overlay, .modal-backdrop, .nase-ov, .adr-ov, .lightbox-ov, .crl .sheet, .scrim, .abgleich-overlay) {
  animation: none;
  transition: opacity var(--sos-dur-dialog) var(--sos-ease-out);
  @starting-style {
    opacity: 0;
  }
}

/* ── Dialoge: zentriert, leicht vergrößert statt aus dem Nichts ─── */
html.sos :is(.cf-dialog, .modal-card, .macro-dialog, .nase-modal, .adr-modal, .crl .sheet .box, .dialog, .abgleich-dialog) {
  animation: none;
  transform-origin: center;
  transition:
    opacity var(--sos-dur-dialog) var(--sos-ease-out),
    scale var(--sos-dur-dialog) var(--sos-ease-out);
  @starting-style {
    opacity: 0;
    scale: var(--sos-enter-scale);
  }
}

/* Native <dialog>: Ein- UND Ausblenden (aus kürzer), Hintergrund mit */
html.sos dialog {
  opacity: 0;
  scale: 0.98;
  transition:
    opacity var(--sos-dur-exit) ease-out,
    scale var(--sos-dur-exit) ease-out,
    overlay var(--sos-dur-exit) allow-discrete,
    display var(--sos-dur-exit) allow-discrete;
}
html.sos dialog[open] {
  opacity: 1;
  scale: none; /* none statt 1: kein Containing Block für fixierte Kinder */
  transition-duration: var(--sos-dur-dialog);
  transition-timing-function: var(--sos-ease-out);
  @starting-style {
    opacity: 0;
    scale: var(--sos-enter-scale);
  }
}
html.sos dialog::backdrop {
  opacity: 0;
  transition:
    opacity var(--sos-dur-exit) ease-out,
    overlay var(--sos-dur-exit) allow-discrete,
    display var(--sos-dur-exit) allow-discrete;
}
html.sos dialog[open]::backdrop {
  opacity: 1;
  transition-duration: var(--sos-dur-dialog);
  @starting-style {
    opacity: 0;
  }
}

/* ── Menüs/Popover: wachsen aus dem Auslöser ─────────────────── */
html.sos :is(.tag-menu, .glocke-menu, .more-menu, [popover]:popover-open) {
  transition:
    opacity var(--sos-dur-pop) var(--sos-ease-out),
    scale var(--sos-dur-pop) var(--sos-ease-out);
  @starting-style {
    opacity: 0;
    scale: var(--sos-enter-scale);
  }
}
html.sos .tag-menu { transform-origin: top left; }
html.sos :is(.glocke-menu, .more-menu) { transform-origin: top right; }
html.sos [popover] { transform-origin: var(--sos-popover-origin, top center); }

/* ── Seitenleisten von rechts (iOS-Kurve) ─────────────────── */
html.sos .drawer {
  transition: translate var(--sos-dur-drawer) var(--sos-ease-drawer);
  @starting-style {
    translate: 100% 0;
  }
}

/* ── Hinweise unten: kurz von unten ───────────────────────── */
html.sos .update-banner {
  animation: none;
  transition:
    opacity var(--sos-dur-toast) var(--sos-ease-out),
    translate var(--sos-dur-toast) var(--sos-ease-out);
  @starting-style {
    opacity: 0;
    translate: 0 12px;
  }
}

/* ── Weniger Bewegung: nur Überblenden (Deckkraft, Farbe), keine Positions-/Größenwechsel ── */
@media (prefers-reduced-motion: reduce) {
  html.sos *,
  html.sos *::before,
  html.sos *::after {
    transition-property: opacity, color, background-color, border-color, outline-color, box-shadow, fill, stroke !important;
    scroll-behavior: auto !important;
  }
  /* Dauer-Bewegung aus; Lade-Kreisel (Klasse enthält „spin“) dürfen sich weiter drehen */
  html.sos *:not([class*="spin"]),
  html.sos *::before,
  html.sos *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
  }
  html.sos :is(.btn, .pill, .act, .compose-new-btn, .btn-bulk, .btn-suggest-lg, .hint-bulk, .update-btn, .rd-btn, .cs-btn, .mv-btn, .nase-btn, .macro-btn, .adr-btn, .ret-btn, .fb-btn, .err-btn, .an-scan-btn, .hub-tile, .glocke-btn, .mahn-ampel-feld, .tile, .accounts-badge, .abgleich-chip-btn, .company-pick button, [data-sos-press]):active:not(:disabled, [aria-disabled="true"], .soon, .tile-soon) {
    scale: none;
  }
  /* Seitenleiste: statt Hereinschieben nur einblenden */
  html.sos .drawer {
    transition: opacity var(--sos-dur-dialog) ease;
    @starting-style {
      opacity: 0;
    }
  }
}