/* pilanda_theme_bridge.css
 *
 * ============================================================== *
 * DIE BRÜCKE — frappe-ui ⇄ Pilanda --pp-* Tokens                *
 * ============================================================== *
 *
 * Problem (A1): frappe-ui-Komponenten (Button, Input, Card,
 * Select, Badge, Table, Checkbox, Switch, Tooltip, Dropdown …)
 * lesen NICHT unsere --pp-*-Tokens, sondern das vollständige
 * espresso-Token-Set, das frappe-ui via tailwind-plugin
 * (`generateCSSVariables`) bzw. das Frappe-Desk-Bundle unter
 * `:root` (Light) und `[data-theme="dark"]` (Dark) als feste
 * Hex-Werte backt.
 *
 * Quelle der vollständigen Liste (verifiziert im Container):
 *   frappe-ui/tailwind/colors.json → themedVariables.{light,dark}
 *   → 75 themed Variablen in drei Kategorien:
 *       outline-*  (16)  Ränder / Border / Fokus
 *       surface-*  (32)  Flächen-Hintergründe (inkl. State-Tints)
 *       ink-*      (27)  Text- / Icon-Farben (inkl. State-Text)
 *
 * Frühere Brücke mappte nur ~40 davon → INNERE Element-Teile
 * (Input-Text/Placeholder, Hover/Active/Focus, Dropdown-Items,
 * Tabellenzellen, innere Borders, Disabled, State-Tints, Icon-
 * Farben) blieben auf den espresso-Defaults hängen → „hell im
 * Dark". Diese Datei mappt JETZT ALLE 75 + die Legacy-Kurzvars.
 *
 * KASKADE / SPEZIFITÄT (verifiziert):
 *   frappe-ui + Frappe-Desk definieren ihre Tokens unter EINFACHEM
 *     `:root`              → Spezifität (0,1,0)
 *     `[data-theme="dark"]`→ Spezifität (0,1,0)
 *   Diese Datei nutzt bewusst ERHÖHTE Spezifität, damit sie
 *   UNABHÄNGIG von der Ladereihenfolge gewinnt (im Desk lädt das
 *   Desk-Bundle DAVOR, auf /theme-preview DANACH):
 *     :root:root                       → (0,2,0)  > :root
 *     :root:root[data-theme="dark"]    → (0,2,1)  > [data-theme="dark"]
 *     html[data-theme="dark"]:root     → (0,2,1)  (Reserve-Selektor)
 *
 * MUSS NACH pilanda_theme_tokens.css geladen werden (referenziert
 * dessen --pp-*-Tokens). Reihenfolge in hooks.py/Templates beachten.
 *
 * MAPPING-LOGIK (semantisch, nicht 1:1 Hex):
 *   surface-gray-1..7 : Light hell→dunkel, Dark invertiert.
 *                       1..4 = Flächen (Page/Card/Input/Hover),
 *                       5..7 = dunkle Akzentflächen (Avatare etc.).
 *   ink-gray-1..9     : 9 = Haupttext, 1 = quasi-Untergrund.
 *                       Light aufsteigend dunkler, Dark invertiert.
 *   outline-gray-1..5 : 1/2 = subtil, 3 = default, 4 = strong,
 *                       5 = "strongest" (im Dark = hell).
 *   State-Skalen (red/green/amber/blue/orange/violet/cyan/pink):
 *       surface-N-1/2 = helle Tönungs-Hintergründe → color-mix
 *           aus dem State-Token + Surface, damit sie im Dark
 *           dunkel-getönt statt knallig erscheinen.
 *       surface-N-3/5 = kräftige Fill-Farbe (Solid-Badges/-Buttons)
 *           → direktes State-/Brand-Token.
 *       ink-N         = State-Textfarbe → State-/Brand-Token.
 */

/* =============================================================
 * LIGHT
 * ============================================================= */
:root:root {

  /* ----------------------------------------------------------- *
   * SURFACE — Flächen-Hintergründe (32)
   * ----------------------------------------------------------- */
  --surface-white:    var(--pp-bg-surface);   /* Karten/Panels/Inputs-Grund */
  --surface-cards:    var(--pp-bg-surface);
  --surface-modal:    var(--pp-bg-elevated);  /* Dialoge */
  --surface-selected: var(--pp-bg-pressed);
  --surface-menu-bar: var(--pp-bg-sunken);

  --surface-gray-1: var(--pp-bg-base);        /* Page-Background  */
  --surface-gray-2: var(--pp-bg-sunken);      /* Input-Grund/inset*/
  --surface-gray-3: var(--pp-slate-200);      /* Hover-Fläche     */
  --surface-gray-4: var(--pp-slate-300);
  --surface-gray-5: var(--pp-slate-600);      /* dunkle Akzentfl. */
  --surface-gray-6: var(--pp-slate-800);
  --surface-gray-7: var(--pp-slate-900);

  /* State-Tints (helle getönte Hintergründe) — color-mix hält sie
   * an die --pp-State-Tokens gekoppelt und kippt mit dem Theme. */
  --surface-red-1:   color-mix(in oklab, var(--pp-state-danger)  8%,  var(--pp-bg-surface));
  --surface-red-2:   color-mix(in oklab, var(--pp-state-danger)  14%, var(--pp-bg-surface));
  --surface-red-3:   color-mix(in oklab, var(--pp-state-danger)  22%, var(--pp-bg-surface));
  --surface-red-4:   color-mix(in oklab, var(--pp-state-danger)  35%, var(--pp-bg-surface));
  --surface-red-5:   var(--pp-state-danger);   /* Solid-Fill     */
  --surface-red-6:   var(--pp-state-danger);
  --surface-red-7:   var(--pp-state-danger);
  --surface-green-1: color-mix(in oklab, var(--pp-state-success) 8%,  var(--pp-bg-surface));
  --surface-green-2: color-mix(in oklab, var(--pp-state-success) 14%, var(--pp-bg-surface));
  --surface-green-3: var(--pp-state-success);
  --surface-amber-1: color-mix(in oklab, var(--pp-state-warning) 8%,  var(--pp-bg-surface));
  --surface-amber-2: color-mix(in oklab, var(--pp-state-warning) 14%, var(--pp-bg-surface));
  --surface-amber-3: var(--pp-state-warning);
  --surface-blue-1:  color-mix(in oklab, var(--pp-brand-primary) 8%,  var(--pp-bg-surface));
  --surface-blue-2:  color-mix(in oklab, var(--pp-brand-primary) 14%, var(--pp-bg-surface));
  --surface-blue-3:  var(--pp-brand-primary);
  --surface-orange-1: color-mix(in oklab, var(--pp-state-warning) 10%, var(--pp-bg-surface));
  --surface-violet-1: color-mix(in oklab, var(--pp-accent-violet) 12%, var(--pp-bg-surface));
  --surface-cyan-1:  color-mix(in oklab, var(--pp-state-info)    12%, var(--pp-bg-surface));
  --surface-pink-1:  color-mix(in oklab, var(--pp-accent-rose)   12%, var(--pp-bg-surface));

  /* ----------------------------------------------------------- *
   * INK — Text- / Icon-Farben (27)
   * gray-9 = Haupttext (dunkelst), gray-1 = quasi-Untergrund.
   * ----------------------------------------------------------- */
  --ink-white:  var(--pp-bg-surface);
  --ink-gray-1: var(--pp-slate-100);
  --ink-gray-2: var(--pp-slate-200);
  --ink-gray-3: var(--pp-slate-300);
  --ink-gray-4: var(--pp-text-disabled);   /* Placeholder/disabled */
  --ink-gray-5: var(--pp-text-tertiary);   /* sekundär-schwach    */
  --ink-gray-6: var(--pp-text-secondary);
  --ink-gray-7: var(--pp-text-secondary);
  --ink-gray-8: var(--pp-text-primary);    /* Input-/Body-Text    */
  --ink-gray-9: var(--pp-text-primary);    /* Haupttext           */

  /* State-Text */
  --ink-red-1:    color-mix(in oklab, var(--pp-state-danger)  10%, var(--pp-bg-surface));
  --ink-red-2:    color-mix(in oklab, var(--pp-state-danger)  60%, var(--pp-text-primary));
  --ink-red-3:    var(--pp-state-danger);
  --ink-red-4:    var(--pp-state-danger);
  --ink-green-1:  color-mix(in oklab, var(--pp-state-success) 10%, var(--pp-bg-surface));
  --ink-green-2:  var(--pp-state-success);
  --ink-green-3:  var(--pp-state-success);
  --ink-amber-1:  color-mix(in oklab, var(--pp-state-warning) 10%, var(--pp-bg-surface));
  --ink-amber-2:  var(--pp-state-warning);
  --ink-amber-3:  var(--pp-state-warning);
  --ink-blue-1:   color-mix(in oklab, var(--pp-brand-primary) 10%, var(--pp-bg-surface));
  --ink-blue-2:   var(--pp-brand-primary);
  --ink-blue-3:   var(--pp-brand-primary);
  --ink-cyan-1:   var(--pp-state-info);
  --ink-pink-1:   var(--pp-accent-rose);
  --ink-violet-1: var(--pp-accent-violet);
  --ink-blue-link: var(--pp-text-link);

  /* ----------------------------------------------------------- *
   * OUTLINE — Ränder / Border / Fokus (16)
   * ----------------------------------------------------------- */
  --outline-white:       var(--pp-bg-surface);
  --outline-gray-1:      var(--pp-border-subtle);
  --outline-gray-2:      var(--pp-border-subtle);
  --outline-gray-3:      var(--pp-border-default);
  --outline-gray-4:      var(--pp-border-strong);
  --outline-gray-5:      var(--pp-text-primary);   /* "strongest"  */
  --outline-gray-modals: var(--pp-border-default); /* Hover-Border */
  --outline-red-1:    color-mix(in oklab, var(--pp-state-danger)  30%, var(--pp-border-subtle));
  --outline-red-2:    color-mix(in oklab, var(--pp-state-danger)  55%, var(--pp-border-default));
  --outline-red-3:    var(--pp-state-danger);
  --outline-green-1:  color-mix(in oklab, var(--pp-state-success) 30%, var(--pp-border-subtle));
  --outline-green-2:  color-mix(in oklab, var(--pp-state-success) 55%, var(--pp-border-default));
  --outline-amber-1:  color-mix(in oklab, var(--pp-state-warning) 30%, var(--pp-border-subtle));
  --outline-amber-2:  color-mix(in oklab, var(--pp-state-warning) 55%, var(--pp-border-default));
  --outline-blue-1:   var(--pp-brand-primary);
  --outline-orange-1: color-mix(in oklab, var(--pp-state-warning) 45%, var(--pp-border-default));

  /* ----------------------------------------------------------- *
   * LEGACY-KURZVARS — einige frappe-ui-Komponenten (Tabs, Tree,
   * ListView) referenzieren --bg/--text/--border/--subtext samt
   * -hover/-active-Varianten direkt (siehe grep frappe-ui/src).
   * ----------------------------------------------------------- */
  --bg:            var(--pp-bg-surface);
  --bg-hover:      var(--pp-bg-hover);
  --bg-active:     var(--pp-bg-pressed);
  --text:          var(--pp-text-primary);
  --text-active:   var(--pp-text-primary);
  --subtext:       var(--pp-text-secondary);
  --subtext-active: var(--pp-text-primary);
  --border:        var(--pp-border-default);
  --border-active: var(--pp-border-strong);

  /* Reka/frappe-ui Fokus-Ringe folgen dem Brand-Akzent */
  --primary: var(--pp-brand-primary);
}

/* =============================================================
 * DARK — überschreibt frappe-uis + Frappe-Desks
 * [data-theme="dark"]-Block (Spezifität 0,2,1 > 0,1,0).
 * Die --pp-*-Tokens kippen in tokens.css bereits selbst; daher
 * genügt hier dieselbe semantische Zuordnung. Nur dort, wo die
 * espresso-Skala Light/Dark BEWUSST invertiert (gray-Skalen),
 * spiegeln wir explizit.
 * ============================================================= */
:root:root[data-theme="dark"],
html[data-theme="dark"]:root {

  /* SURFACE */
  --surface-white:    var(--pp-bg-surface);
  --surface-cards:    var(--pp-bg-elevated);
  --surface-modal:    var(--pp-bg-elevated);
  --surface-selected: var(--pp-bg-pressed);
  --surface-menu-bar: var(--pp-bg-sunken);

  --surface-gray-1: var(--pp-bg-base);        /* dunkler Page-BG  */
  --surface-gray-2: var(--pp-slate-700);      /* Input-Grund      */
  --surface-gray-3: var(--pp-slate-600);      /* Hover            */
  --surface-gray-4: var(--pp-slate-500);
  --surface-gray-5: var(--pp-slate-400);      /* invertiert: hell */
  --surface-gray-6: var(--pp-slate-300);
  --surface-gray-7: var(--pp-slate-50);

  --surface-red-1:   color-mix(in oklab, var(--pp-state-danger)  15%, var(--pp-bg-surface));
  --surface-red-2:   color-mix(in oklab, var(--pp-state-danger)  22%, var(--pp-bg-surface));
  --surface-red-3:   color-mix(in oklab, var(--pp-state-danger)  30%, var(--pp-bg-surface));
  --surface-red-4:   color-mix(in oklab, var(--pp-state-danger)  45%, var(--pp-bg-surface));
  --surface-red-5:   var(--pp-state-danger);
  --surface-red-6:   var(--pp-state-danger);
  --surface-red-7:   var(--pp-state-danger);
  --surface-green-1: color-mix(in oklab, var(--pp-state-success) 15%, var(--pp-bg-surface));
  --surface-green-2: color-mix(in oklab, var(--pp-state-success) 22%, var(--pp-bg-surface));
  --surface-green-3: var(--pp-state-success);
  --surface-amber-1: color-mix(in oklab, var(--pp-state-warning) 15%, var(--pp-bg-surface));
  --surface-amber-2: color-mix(in oklab, var(--pp-state-warning) 22%, var(--pp-bg-surface));
  --surface-amber-3: var(--pp-state-warning);
  --surface-blue-1:  color-mix(in oklab, var(--pp-brand-primary) 15%, var(--pp-bg-surface));
  --surface-blue-2:  color-mix(in oklab, var(--pp-brand-primary) 22%, var(--pp-bg-surface));
  --surface-blue-3:  var(--pp-brand-primary);
  --surface-orange-1: color-mix(in oklab, var(--pp-state-warning) 18%, var(--pp-bg-surface));
  --surface-violet-1: color-mix(in oklab, var(--pp-accent-violet) 20%, var(--pp-bg-surface));
  --surface-cyan-1:  color-mix(in oklab, var(--pp-state-info)    20%, var(--pp-bg-surface));
  --surface-pink-1:  color-mix(in oklab, var(--pp-accent-rose)   20%, var(--pp-bg-surface));

  /* INK — Dark: gray-9 (Haupttext) ist HELL, gray-1 dunkel */
  --ink-white:  var(--pp-bg-surface);
  --ink-gray-1: var(--pp-slate-900);
  --ink-gray-2: var(--pp-slate-700);
  --ink-gray-3: var(--pp-slate-500);
  --ink-gray-4: var(--pp-text-disabled);
  --ink-gray-5: var(--pp-text-tertiary);
  --ink-gray-6: var(--pp-text-secondary);
  --ink-gray-7: var(--pp-text-secondary);
  --ink-gray-8: var(--pp-text-primary);
  --ink-gray-9: var(--pp-text-primary);

  --ink-red-1:    color-mix(in oklab, var(--pp-state-danger)  18%, var(--pp-bg-surface));
  --ink-red-2:    color-mix(in oklab, var(--pp-state-danger)  70%, var(--pp-text-primary));
  --ink-red-3:    var(--pp-state-danger);
  --ink-red-4:    var(--pp-state-danger);
  --ink-green-1:  color-mix(in oklab, var(--pp-state-success) 18%, var(--pp-bg-surface));
  --ink-green-2:  var(--pp-state-success);
  --ink-green-3:  var(--pp-state-success);
  --ink-amber-1:  color-mix(in oklab, var(--pp-state-warning) 18%, var(--pp-bg-surface));
  --ink-amber-2:  var(--pp-state-warning);
  --ink-amber-3:  var(--pp-state-warning);
  --ink-blue-1:   color-mix(in oklab, var(--pp-brand-primary) 18%, var(--pp-bg-surface));
  --ink-blue-2:   var(--pp-brand-primary);
  --ink-blue-3:   var(--pp-brand-primary);
  --ink-cyan-1:   var(--pp-state-info);
  --ink-pink-1:   var(--pp-accent-rose);
  --ink-violet-1: var(--pp-accent-violet);
  --ink-blue-link: var(--pp-text-link);

  /* OUTLINE */
  --outline-white:       var(--pp-bg-surface);
  --outline-gray-1:      var(--pp-border-subtle);
  --outline-gray-2:      var(--pp-border-subtle);
  --outline-gray-3:      var(--pp-border-default);
  --outline-gray-4:      var(--pp-border-strong);
  --outline-gray-5:      var(--pp-text-primary);
  --outline-gray-modals: var(--pp-border-default);
  --outline-red-1:    color-mix(in oklab, var(--pp-state-danger)  40%, var(--pp-border-subtle));
  --outline-red-2:    color-mix(in oklab, var(--pp-state-danger)  60%, var(--pp-border-default));
  --outline-red-3:    var(--pp-state-danger);
  --outline-green-1:  color-mix(in oklab, var(--pp-state-success) 40%, var(--pp-border-subtle));
  --outline-green-2:  color-mix(in oklab, var(--pp-state-success) 60%, var(--pp-border-default));
  --outline-amber-1:  color-mix(in oklab, var(--pp-state-warning) 40%, var(--pp-border-subtle));
  --outline-amber-2:  color-mix(in oklab, var(--pp-state-warning) 60%, var(--pp-border-default));
  --outline-blue-1:   var(--pp-brand-primary);
  --outline-orange-1: color-mix(in oklab, var(--pp-state-warning) 50%, var(--pp-border-default));

  /* LEGACY-KURZVARS */
  --bg:            var(--pp-bg-surface);
  --bg-hover:      var(--pp-bg-hover);
  --bg-active:     var(--pp-bg-pressed);
  --text:          var(--pp-text-primary);
  --text-active:   var(--pp-text-primary);
  --subtext:       var(--pp-text-secondary);
  --subtext-active: var(--pp-text-primary);
  --border:        var(--pp-border-default);
  --border-active: var(--pp-border-strong);
  --primary:       var(--pp-brand-primary);
}

/* =============================================================
 * Popover / Dropdown / Menu — dezenter halbtransparenter Grund
 * + leichter backdrop-blur für bessere Lesbarkeit über Text (B).
 * Trifft frappe-ui/reka-ui Popper-Inhalte und Frappe-Desk-Menüs.
 * color-mix hält den Grund an --pp-bg-elevated gekoppelt (SSOT),
 * mit ~8% Transparenz; @supports-Fallback ohne blur bleibt opak.
 * ============================================================= */
[data-reka-popper-content-wrapper] > *,
[data-radix-popper-content-wrapper] > *,
.popover-content,
[role="menu"],
[role="listbox"],
.dropdown-menu {
  background-color: var(--pp-bg-elevated);
}
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
  [data-reka-popper-content-wrapper] > *,
  [data-radix-popper-content-wrapper] > *,
  .popover-content,
  [role="menu"],
  [role="listbox"],
  .dropdown-menu {
    background-color: color-mix(in oklab, var(--pp-bg-elevated) 88%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    backdrop-filter: blur(8px) saturate(1.4);
  }
}

/* =============================================================
 * HARTKODIERTE TAILWIND-GRAUSTUFEN-UTILITIES (Dark)
 * -------------------------------------------------------------
 * URSACHE (im ausgelieferten pilanda-desk.css verifiziert):
 *   frappe-uis tailwind-Plugin backt die Farb-Palette (gray/white/
 *   black) als FESTE rgb()-Werte in die Utility-Klassen — NICHT als
 *   var(--surface-… / --ink-…). Beispiele (Light-Werte, hart):
 *     .bg-white     { background-color: rgb(255 255 255) }
 *     .bg-gray-50   { background-color: rgb(248 248 248) }
 *     .text-gray-900{ color: rgb(23 23 23) }
 *     .text-gray-600{ color: rgb(124 124 124) }
 *     .border-gray-200 { border-color: rgb(237 237 237) }
 *   Die Token-Brücke (--surface-… / --ink-…) kann diese NICHT erreichen,
 *   weil die Komponenten keine Variablen, sondern diese Utilities
 *   rendern. Betroffen u. a.:
 *     Card.vue      → `bg-white` (weiße Karte), `text-gray-600` (Subtitle)
 *     ListItem.vue  → `text-gray-900` (Titel), `text-gray-600` (Subtitle)
 *   → deshalb blieben Card/ListItem im Dark hell. FIX: im Dark die
 *   konkreten Utilities auf die --pp-*-Tokens umbiegen. !important,
 *   weil die tailwind-Utilities (0,1,0) gleich spezifisch sind und
 *   die Ladereihenfolge (Desk-Bundle ggf. danach) nicht garantiert
 *   ist; der html-Präfix hebt die Spezifität zusätzlich auf (0,2,0).
 * ============================================================= */
html[data-theme="dark"] .bg-white,
:root:root[data-theme="dark"] .bg-white {
  background-color: var(--pp-bg-surface) !important;
}
html[data-theme="dark"] .bg-black,
:root:root[data-theme="dark"] .bg-black {
  /* im Dark ist "schwarz" die hellste Akzentfläche → invertieren */
  background-color: var(--pp-slate-50) !important;
}
html[data-theme="dark"] .bg-gray-50,
:root:root[data-theme="dark"] .bg-gray-50 {
  background-color: var(--pp-bg-base) !important;
}
html[data-theme="dark"] .bg-gray-100,
:root:root[data-theme="dark"] .bg-gray-100 {
  background-color: var(--pp-bg-sunken) !important;
}
html[data-theme="dark"] .bg-gray-200,
:root:root[data-theme="dark"] .bg-gray-200 {
  background-color: var(--pp-slate-700) !important;
}
html[data-theme="dark"] .bg-gray-300,
:root:root[data-theme="dark"] .bg-gray-300 {
  background-color: var(--pp-slate-600) !important;
}
html[data-theme="dark"] .bg-gray-400,
:root:root[data-theme="dark"] .bg-gray-400 {
  background-color: var(--pp-slate-500) !important;
}
html[data-theme="dark"] .bg-gray-500,
:root:root[data-theme="dark"] .bg-gray-500 {
  background-color: var(--pp-slate-400) !important;
}

/* Text — im Dark hell statt dunkel. gray-900/800/700 = Haupttext,
 * 600/500 = sekundär, 400 = tertiär/disabled. */
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
:root:root[data-theme="dark"] .text-black,
:root:root[data-theme="dark"] .text-gray-900,
:root:root[data-theme="dark"] .text-gray-800 {
  color: var(--pp-text-primary) !important;
}
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600,
:root:root[data-theme="dark"] .text-gray-700,
:root:root[data-theme="dark"] .text-gray-600 {
  color: var(--pp-text-secondary) !important;
}
html[data-theme="dark"] .text-gray-500,
:root:root[data-theme="dark"] .text-gray-500 {
  color: var(--pp-text-tertiary) !important;
}
html[data-theme="dark"] .text-gray-400,
:root:root[data-theme="dark"] .text-gray-400 {
  color: var(--pp-text-disabled) !important;
}

/* Borders — im Dark dunkle statt heller Ränder. */
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200,
:root:root[data-theme="dark"] .border-gray-100,
:root:root[data-theme="dark"] .border-gray-200 {
  border-color: var(--pp-border-default) !important;
}
html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .border-gray-400,
:root:root[data-theme="dark"] .border-gray-300,
:root:root[data-theme="dark"] .border-gray-400 {
  border-color: var(--pp-border-strong) !important;
}

/* =============================================================
 * CircularProgressBar (Dark) — frappe-ui/src/components/
 *   CircularProgressBar/CircularProgressBar.vue
 * -------------------------------------------------------------
 * URSACHE (scoped CSS im Bundle verifiziert):
 *   .progressbar::after { background: #fff }  ← HARTKODIERT weiß:
 *       das ist die innere Scheibe (Donut-Loch). Bleibt im Dark weiß.
 *   --color-progress / --color-remaining-circle kommen aus einer JS-
 *   themeMap (primary '#333', secondary '#888') und werden per v-bind
 *   als gehashte INLINE-Custom-Props gesetzt → der gerenderte Ring
 *   (conic-gradient) ist hart grau, das Label kaum lesbar.
 * FIX:
 *   - ::after-Scheibe auf --pp-bg-surface (höhere Spezifität als die
 *     scoped Regel .progressbar[data-v]::after = (0,2,1); unser
 *     html[data-theme=dark] .progressbar::after = (0,2,2) gewinnt).
 *   - --color-progress / --color-remaining-circle / --color-complete
 *     literal überschreiben: html[data-theme=dark] .progressbar
 *     = (0,2,1) > scoped .progressbar[data-v] = (0,2,0); die inline
 *     gesetzten gehashten Vars (--v…) werden dadurch nicht mehr
 *     referenziert. Default-Theme (black) → Brand; explizite Themes
 *     (green/orange/red/blue) liefern eigene Inline-Werte, deren
 *     dunkler Track hier trotzdem auf einen sichtbaren Wert gehoben
 *     wird. Label erbt --pp-text-primary über den Text-Block oben. */
html[data-theme="dark"] .progressbar::after {
  background: var(--pp-bg-surface) !important;
}
html[data-theme="dark"] .progressbar {
  /* CAVEAT/Annahme: ohne Theme-Klasse am Element lässt sich der
   * Default-Fall (theme='black', #333 → unsichtbar auf slate-800)
   * nicht selektiv vom explizit themed Fall (green/orange/blue)
   * trennen. Per Spec wird der Fill auf --pp-brand-primary gehoben;
   * Nebenwirkung: explizit themed CircularProgressBars erscheinen im
   * Dark ebenfalls in Brand statt ihrer Theme-Farbe. Bewusst in Kauf
   * genommen, da der Default-Fall (unlesbar) der Regelfall ist. */
  --color-progress: var(--pp-brand-primary);
  --color-remaining-circle: var(--pp-slate-600);
  --color-complete: var(--pp-state-success);
  color: var(--pp-text-primary);
}
html[data-theme="dark"] .progressbar p {
  color: var(--pp-text-primary);
}

/* Lineare Progress (frappe-ui, role=progressbar): die unbefuellte Spur ist
 * bg-surface-gray-2 (≈ weiss) und verschwindet auf hellem Grund (weiss-in-
 * weiss) — gilt auch fuer die Intervall-Variante (mehrere Spur-Segmente).
 * Spur kraeftiger + dezente Innenkante fuer klare Abgrenzung. Trifft nur
 * frappe-ui Progress (eigene Gantt-/Dash-Balken nutzen andere Klassen). */
[role="progressbar"] {
  background: color-mix(in oklab, var(--pp-border-default) 55%, var(--pp-bg-sunken)) !important;
  box-shadow: inset 0 0 0 1px var(--pp-border-subtle);
}

/* TabButtons (frappe-ui): aktiver Button rendert hartes !rounded-[9px]
 * (zu rund fuer Enterprise). Cap auf --pp-radius-ui. Diese Datei laedt
 * NACH dem Vue-Bundle -> gewinnt gegen die !important-Tailwind-Klasse. */
[data-slot="tab-button"],
[data-slot="tab-button"] > * {
  border-radius: var(--pp-radius-ui) !important;
}
/* Aktiver Tab (data-state="checked") deutlich abheben: kräftige
 * Brand-Füllung statt des dezenten frappe-ui-bg-surface-white.
 * Höhere Spezifität ([data-slot][data-state]) + !important schlagen
 * die !-Tailwind-Klassen. */
[data-slot="tab-button"][data-state="checked"] {
  background: var(--pp-brand-primary) !important;
  border-color: var(--pp-brand-primary) !important;
  box-shadow: var(--pp-shadow-sm) !important;
}
[data-slot="tab-button"][data-state="checked"],
[data-slot="tab-button"][data-state="checked"] * {
  color: var(--pp-text-on-accent) !important;
}