:root {
    /* Backgrounds */
    --bg: #061c31;
    --bg-2: #192638;
    /* Surfaces (Cards, Panels) */
    --surface: #1b283a;
    --surface-2: #202e3f;
    /* Borders */
    --border: rgba(255,255,255,.08);
    /* Text */
    --text: rgba(255,255,255,.92);
    /* NEW: Muted je nach Hintergrund */
    --po-text-muted-dark: rgba(255, 255, 255, 0.72);
    --po-text-subtle-dark: rgba(255, 255, 255, 0.60);
    /* Für helle Flächen (Bootstrap default Richtung) */
    --po-text-muted-light: rgba(33, 37, 41, 0.65);
    --po-text-subtle-light: rgba(33, 37, 41, 0.55);
    /* Inputs – Dark Surface: nicht rein weiss, sondern leicht abgedunkelt */
    --po-input-bg-dark: rgba(255, 255, 255, 0.92);
    --po-input-border-dark: rgba(255, 255, 255, 0.18);
    --po-input-placeholder-dark: rgba(15, 23, 42, 0.55); /* dunkles Placeholder-Grau */
    /* Inputs – Light Surface: Standard */
    --po-input-bg-light: #ffffff;
    --po-input-border-light: rgba(15, 23, 42, 0.18);
    --po-input-placeholder-light: rgba(15, 23, 42, 0.45);
    /* Brand / Accent */
    --primary: #2b8cff;
    --primary-2: #13a8de;
    /* State Colors */
    --success: #2bd27d;
    --warning: #f5c542;
    --danger: #ff4d6d;
    /* Radius */
    --radius-lg: 18px;
    --radius-md: 12px;
    /* Shadows */
    --shadow-soft: 0 10px 30px rgba(0,0,0,.35);
    --shadow-card: 0 14px 40px rgba(0,0,0,.45);
    /* Spacing */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    /* Typography */
    --font-sans: system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans","Liberation Sans",sans-serif;
    --po-chart-axis: rgba(255, 255, 255, 0.78);
    --po-chart-grid: rgba(255, 255, 255, 0.10);
    --po-chart-tooltip-bg: rgba(10, 16, 27, 0.96);
    --po-chart-tooltip-border: rgba(255, 255, 255, 0.18);
    --po-chart-legend: rgba(255, 255, 255, 0.75);
    --po-chart-donut-border: rgba(255, 255, 255, 0.18);
    /* Stern */
    --po-fav-star-empty-fill: rgba(255, 255, 255, 0.18);
    --po-fav-star-empty-stroke: rgba(255, 255, 255, 0.35);
    --po-fav-star-filled-fill: rgba(255, 205, 66, 0.95);
    --po-fav-star-filled-stroke: rgba(255, 205, 66, 1);
    --po-fav-star-filled-shadow: rgba(255, 205, 66, 0.25);
    --po-fav-star-hover-fill: rgba(255, 205, 66, 0.35);
    --po-fav-star-hover-stroke: rgba(255, 205, 66, 0.55);
    /* Runway Cart */
    --po-runway-gauge-fill: #1f9cf0;
    --po-runway-gauge-track: rgba(255, 255, 255, 0.12);
    --po-runway-gauge-inner: #24354d;
    --po-runway-toggle-active-bg: #d7ebff;
    --po-runway-toggle-active-border: rgba(43, 140, 255, 0.55);
    --po-runway-toggle-active-text: #0f172a;
    --po-runway-toggle-hover-bg: rgba(43, 140, 255, 0.12);
    --po-runway-toggle-hover-border: rgba(43, 140, 255, 0.40);
    --po-runway-toggle-hover-text: var(--text);

    /* Card Design Test */
    --po-card-bg-start: #24344a;
    --po-card-bg-end: #1a2740;
    --po-card-border-strong: rgba(88, 170, 255, 0.18);
    --po-card-glow: rgba(47, 132, 255, 0.18);
    --po-card-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}


    :root[data-po-theme="light"] {
        /* Backgrounds */
        --bg: #f4f7fb;
        --bg-2: #e9eef5;
        /* Surfaces (Cards, Panels) */
        --surface: #ffffff;
        --surface-2: #f7f9fc;
        /* Borders */
        --border: rgba(15, 23, 42, 0.10);
        /* Text */
        --text: rgba(15, 23, 42, 0.92);
        /* Muted / subtle text on light backgrounds */
        --po-text-muted-dark: rgba(15, 23, 42, 0.68);
        --po-text-subtle-dark: rgba(15, 23, 42, 0.55);
        /* Inputs – when light mode is active */
        --po-input-bg-dark: #ffffff;
        --po-input-border-dark: rgba(15, 23, 42, 0.15);
        --po-input-placeholder-dark: rgba(15, 23, 42, 0.45);
        /* Existing light tokens can stay as-is, but we set them explicitly for clarity */
        --po-text-muted-light: rgba(33, 37, 41, 0.65);
        --po-text-subtle-light: rgba(33, 37, 41, 0.55);
        --po-input-bg-light: #ffffff;
        --po-input-border-light: rgba(15, 23, 42, 0.18);
        --po-input-placeholder-light: rgba(15, 23, 42, 0.45);
        /* Brand / Accent */
        --primary: #2b8cff;
        --primary-2: #13a8de;
        /* State Colors */
        --success: #1fae67;
        --warning: #d9a600;
        --danger: #dc3545;
        /* Shadows */
        --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
        --shadow-card: 0 14px 40px rgba(15, 23, 42, 0.10);
        --po-chart-axis: rgba(15, 23, 42, 0.78);
        --po-chart-grid: rgba(15, 23, 42, 0.10);
        --po-chart-tooltip-bg: rgba(255, 255, 255, 0.96);
        --po-chart-tooltip-border: rgba(15, 23, 42, 0.14);
        --po-chart-legend: rgba(15, 23, 42, 0.78);
        --po-chart-donut-border: rgba(15, 23, 42, 0.16);
        /* Stern */
        --po-fav-star-empty-fill: rgba(15, 23, 42, 0.08);
        --po-fav-star-empty-stroke: rgba(15, 23, 42, 0.42);
        --po-fav-star-filled-fill: rgba(217, 166, 0, 0.95);
        --po-fav-star-filled-stroke: rgba(217, 166, 0, 1);
        --po-fav-star-filled-shadow: rgba(217, 166, 0, 0.22);
        --po-fav-star-hover-fill: rgba(217, 166, 0, 0.22);
        --po-fav-star-hover-stroke: rgba(217, 166, 0, 0.48);
        /* Runway Cart */
        --po-runway-gauge-fill: #1f9cf0;
        --po-runway-gauge-track: rgba(15, 23, 42, 0.10);
        --po-runway-gauge-inner: #f5f7fb;
        --po-runway-toggle-active-bg: #cfe6ff;
        --po-runway-toggle-active-border: rgba(43, 140, 255, 0.70);
        --po-runway-toggle-active-text: #0b2540;
        --po-runway-toggle-hover-bg: rgba(43, 140, 255, 0.18);
        --po-runway-toggle-hover-border: rgba(43, 140, 255, 0.52);
        --po-runway-toggle-hover-text: #0f172a;
        /* Progressbar */
        --progress-track-bg: rgba(15,23,42,.04);
        --progress-track-border: rgba(15,23,42,.18);
        /* Button Hover */
        --button-primary-hover-bg: #256fd0;
        --button-primary-hover-border: #256fd0;
        --button-primary-hover-text: #ffffff;

        /* Card Design Test */
        --po-card-bg-start: #f8fbff;
        --po-card-bg-end: #eef4fb;
        --po-card-border-strong: rgba(43, 140, 255, 0.16);
        --po-card-glow: rgba(43, 140, 255, 0.10);
        --po-card-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
    }


    :root[data-po-theme="light"] .btn-outline-light {
        color: #1f2937;
        border-color: rgba(15, 23, 42, 0.28);
        background-color: rgba(15, 23, 42, 0.05);
    }

        :root[data-po-theme="light"] .btn-outline-light:hover {
            color: rgba(15, 23, 42, 0.95);
            border-color: rgba(15, 23, 42, 0.32);
            background-color: rgba(15, 23, 42, 0.07);
        }

        :root[data-po-theme="light"] .btn-outline-light:focus,
        :root[data-po-theme="light"] .btn-outline-light:active {
            color: rgba(15, 23, 42, 0.95);
            border-color: rgba(15, 23, 42, 0.36);
            background-color: rgba(15, 23, 42, 0.10);
        }

    :root[data-po-theme="light"] .form-control,
    :root[data-po-theme="light"] .form-select,
    :root[data-po-theme="light"] textarea {
        background-color: #ffffff;
        color: #111827;
        border-color: rgba(15, 23, 42, 0.18);
    }

        :root[data-po-theme="light"] .form-control::placeholder,
        :root[data-po-theme="light"] textarea::placeholder {
            color: rgba(15, 23, 42, 0.45);
        }

        :root[data-po-theme="light"] .form-control:focus,
        :root[data-po-theme="light"] .form-select:focus,
        :root[data-po-theme="light"] textarea:focus {
            background-color: #ffffff;
            color: #111827;
            border-color: rgba(43, 140, 255, 0.55);
            box-shadow: 0 0 0 0.2rem rgba(43, 140, 255, 0.12);
        }

        :root[data-po-theme="light"] input[type="date"],
        :root[data-po-theme="light"] input[type="time"],
        :root[data-po-theme="light"] input[type="datetime-local"] {
            color-scheme: light;
        }

            :root[data-po-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
            :root[data-po-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
            :root[data-po-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
                opacity: 0.9;
                filter: contrast(1.4) brightness(0.45);
                cursor: pointer;
            }

        :root[data-po-theme="light"] .form-select {
            background-color: #ffffff !important;
            color: #111827 !important;
            border-color: rgba(15, 23, 42, 0.18) !important;
            color-scheme: light;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        }

            :root[data-po-theme="light"] .form-select:focus {
                background-color: #ffffff !important;
                color: #111827 !important;
                border-color: rgba(43, 140, 255, 0.55) !important;
                box-shadow: 0 0 0 0.2rem rgba(43, 140, 255, 0.12);
            }

            :root[data-po-theme="light"] .form-select option {
                background-color: #ffffff;
                color: #111827;
            }

.po-budget-progress {
    background: var(--progress-track-bg);
    border: 1px solid var(--progress-track-border);
    border-radius: 999px;
    overflow: hidden;
}

.btn-po-primary:hover,
.btn-po-primary:focus {
    background: var(--button-primary-hover-bg);
    border-color: var(--button-primary-hover-border);
    color: var(--button-primary-hover-text);
}