/* ══════════════════════════════════════════════════════════════
   BB-Verwaltung — Design Tokens
   Alle Farben, Surfaces, Schatten und Komponenten-Tokens.
   Einmal ändern → überall wirksam.
   ══════════════════════════════════════════════════════════════ */

:root {
    /* ── Markenfarben ──────────────────────────────────────── */
    --clr-primary:          #6366f1;
    --clr-primary-light:    #818cf8;
    --clr-primary-dim:      rgba(99, 102, 241, 0.12);
    --clr-primary-hover:    #4f46e5;
    --clr-primary-text:     #ffffff;

    /* ── Status ────────────────────────────────────────────── */
    --clr-success:          #10b981;
    --clr-success-bg:       rgba(16, 185, 129, 0.12);
    --clr-success-text:     #1a7a40;

    --clr-danger:           #ef4444;
    --clr-danger-bg:        rgba(239, 68, 68, 0.12);
    --clr-danger-text:      #b91c1c;

    --clr-warning:          #f59e0b;
    --clr-warning-bg:       rgba(245, 158, 11, 0.12);
    --clr-warning-text:     #92400e;

    /* ── Surfaces ──────────────────────────────────────────── */
    --clr-bg:               #f8fafc;
    --clr-surface:          #ffffff;
    --clr-surface-raised:   #f1f5f9;
    --clr-border:           #e2e8f0;
    --clr-border-strong:    #cbd5e1;

    /* ── Text ──────────────────────────────────────────────── */
    --clr-text:             #1e293b;
    --clr-text-muted:       #475569;
    --clr-text-faint:       #94a3b8;

    /* ── Schatten ──────────────────────────────────────────── */
    --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:            0 4px 6px -1px rgba(0, 0, 0, 0.10);
    --shadow-lg:            0 8px 24px rgba(0, 0, 0, 0.12);

    /* ── Komponente: Card ──────────────────────────────────── */
    --card-bg:              var(--clr-surface);
    --card-border:          var(--clr-border);
    --card-shadow:          var(--shadow-md);
    --card-radius:          1rem;

    /* ── Komponente: Button ────────────────────────────────── */
    --btn-bg:               var(--clr-primary);
    --btn-text:             #ffffff;
    --btn-hover-bg:         var(--clr-primary-hover);
    --btn-danger-bg:        var(--clr-danger);
    --btn-danger-text:      #ffffff;
    --btn-warning-bg:       var(--clr-warning);
    --btn-warning-text:     #ffffff;

    /* ── Komponente: Input ─────────────────────────────────── */
    --input-bg:             var(--clr-surface);
    --input-border:         var(--clr-border);
    --input-text:           var(--clr-text);
    --input-focus-border:   var(--clr-primary);
    --input-focus-shadow:   rgba(99, 102, 241, 0.15);

    /* ── Komponente: Tabelle ───────────────────────────────── */
    --table-head-bg:        var(--clr-surface-raised);
    --table-head-text:      var(--clr-text-muted);
    --table-row-hover:      var(--clr-surface-raised);
    --table-border:         var(--clr-border);
    --table-sticky-bg:      var(--clr-surface);

    /* ── Komponente: Badge ─────────────────────────────────── */
    --badge-success-bg:     var(--clr-success-bg);
    --badge-success-text:   var(--clr-success-text);
    --badge-danger-bg:      var(--clr-danger-bg);
    --badge-danger-text:    var(--clr-danger-text);
    --badge-warning-bg:     var(--clr-warning-bg);
    --badge-warning-text:   var(--clr-warning-text);
    --badge-primary-bg:     var(--clr-primary-dim);
    --badge-primary-text:   var(--clr-primary);

    /* ── Komponente: Navigation ────────────────────────────── */
    --nav-active-bg:        var(--clr-primary-dim);
    --nav-active-border:    var(--clr-primary);
    --nav-active-text:      var(--clr-primary);
    --nav-hover-bg:         var(--clr-surface-raised);

    /* ── Komponente: Tab-Button ────────────────────────────── */
    --tab-active-bg:        var(--clr-primary);
    --tab-active-text:      #ffffff;
    --tab-inactive-bg:      transparent;
    --tab-inactive-text:    var(--clr-text-muted);

    /* ── Rückwärtskompatibilität (Templates nutzen diese) ──── */
    --color-primary:        var(--clr-primary);
    --color-primary-light:  var(--clr-primary-light);
    --color-danger:         var(--clr-danger);
    --color-success:        var(--clr-success);
    --color-warning:        var(--clr-warning);
    --color-white:          var(--clr-surface);
    --color-dark:           var(--clr-text);
    --color-dark-variant:   var(--clr-text-muted);
    --color-light:          var(--clr-surface-raised);
    --color-background:     var(--clr-bg);
    --box-shadow:           var(--shadow-md);
    --box-shadow-lg:        var(--shadow-lg);
}

/* ── Dark Mode ─────────────────────────────────────────────── */
.dark-theme-variables {
    color-scheme: dark;

    /* Surfaces */
    --clr-bg:               #0f172a;
    --clr-surface:          rgba(15, 23, 42, 0.85);
    --clr-surface-raised:   rgba(255, 255, 255, 0.04);
    --clr-border:           rgba(255, 255, 255, 0.07);
    --clr-border-strong:    rgba(255, 255, 255, 0.13);

    /* Text */
    --clr-text:             #f1f5f9;
    --clr-text-muted:       #94a3b8;
    --clr-text-faint:       #64748b;

    /* Schatten */
    --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-md:            0 4px 6px -1px rgba(0, 0, 0, 0.30);
    --shadow-lg:            0 8px 32px rgba(0, 0, 0, 0.45),
                            inset 0 1px 0 rgba(255, 255, 255, 0.06);

    /* Buttons */
    --btn-bg:               rgba(99, 102, 241, 0.40);
    --btn-text:             #c7d2fe;
    --btn-hover-bg:         rgba(99, 102, 241, 0.55);
    --btn-danger-bg:        rgba(239, 68, 68, 0.35);
    --btn-danger-text:      #fca5a5;
    --btn-warning-bg:       rgba(245, 158, 11, 0.35);
    --btn-warning-text:     #fcd34d;

    /* Inputs */
    --input-bg:             rgba(255, 255, 255, 0.04);
    --input-border:         rgba(255, 255, 255, 0.10);
    --input-text:           #cbd5e1;
    --input-focus-border:   rgba(99, 102, 241, 0.6);
    --input-focus-shadow:   rgba(99, 102, 241, 0.12);

    /* Tabelle */
    --table-head-bg:        rgba(255, 255, 255, 0.04);
    --table-head-text:      #94a3b8;
    --table-row-hover:      rgba(99, 102, 241, 0.07);
    --table-border:         rgba(255, 255, 255, 0.05);
    --table-sticky-bg:      transparent;

    /* Badges */
    --badge-success-bg:     rgba(39, 174, 96, 0.15);
    --badge-success-text:   #6ee7a0;
    --badge-danger-bg:      rgba(231, 76, 60, 0.15);
    --badge-danger-text:    #fca5a5;
    --badge-warning-bg:     rgba(245, 158, 11, 0.15);
    --badge-warning-text:   #fcd34d;
    --badge-primary-bg:     rgba(99, 102, 241, 0.15);
    --badge-primary-text:   #a5b4fc;

    /* Navigation */
    --nav-active-bg:        rgba(99, 102, 241, 0.18);
    --nav-active-border:    rgba(99, 102, 241, 0.40);
    --nav-active-text:      #a5b4fc;
    --nav-hover-bg:         rgba(255, 255, 255, 0.04);

    /* Tab-Button */
    --tab-active-bg:        rgba(99, 102, 241, 0.70);
    --tab-active-text:      #ffffff;
    --tab-inactive-bg:      rgba(255, 255, 255, 0.07);
    --tab-inactive-text:    #94a3b8;

    /* Rückwärtskompatibilität */
    --color-white:          #1e293b;
    --color-dark:           #f1f5f9;
    --color-dark-variant:   #94a3b8;
    --color-light:          #334155;
    --color-background:     #0f172a;
}

/* Chrome vererbt color-scheme nicht an Form-Elemente — direkt setzen */
.dark-theme-variables select {
    color-scheme: dark;
}