:root {
    /* === Base Color Palette ===
       Fresher, lighter brand green (was #1e5631 dark forest). Lifted toward a
       cleaner sea-green so the accent reads as light and elegant while staying
       on-brand for FeedbackSchool. --primary keeps AA contrast with white for
       button/link text; --primary-strong is the deep tone for large display
       numbers (KPI values) where more weight is wanted. */
    --primary: #2a7d4f;
    --primary-rgb: 42, 125, 79;
    --primary-light: rgba(var(--primary-rgb), 0.10);
    --primary-soft: rgba(var(--primary-rgb), 0.14);
    --primary-hover: #24704a;
    --primary-dark: #1d5b3a;
    --primary-strong: #1e5631; /* deep display tone for big numbers/headings */
    /* Opaker Weichton statt rgba: er liegt auch ueber getoenten Flaechen sauber
       (aktive Tabellenzeile in einer Karte) und ist das Gegenstueck zu
       --ar-primary-soft in AboutRoute. */
    --primary-tint: #e8f2ec;
    --primary-ink: #ffffff;

    /* Aliases for backward compatibility */
    --primary-bg-subtle: var(--primary-light);
    --selected-bg: var(--primary-tint);

    /* One shade deeper than it used to be (#3a8c60). White on the old tone reached
       only 4.12:1, which fails AA for the size a button label is set in — and
       btn-secondary carries the reversible actions ("Stoppen", "Deaktivieren"),
       so its label is one people have to read. The whole ramp moved down with it
       so hover and active stay a visible step apart. */
    --secondary: #357f57;
    --secondary-rgb: 53, 127, 87; /* required by Bootstrap for bg-secondary, btn-secondary, etc. */
    --secondary-hover: #2c6a49;
    --secondary-dark: #23583e;

    --success: #15803d;
    --success-rgb: 21, 128, 61;
    --success-hover: #126c34;
    --success-dark: #0f5c2c;
    --success-tint: #e6f3ea;
    --success-border: #c6e2d0;

    --danger: #b42318;
    --danger-rgb: 180, 35, 24;
    --danger-hover: #961b12;
    --danger-dark: #7f170f;
    --danger-tint: #fbe9e7;
    --danger-border: #f2cfca;

    --info: #2e7d4a;
    --info-rgb: 46, 125, 74;
    --info-hover: #256b3e;
    --info-dark: #1e5631;
    --info-tint: var(--primary-tint);
    --info-bg: #e8f5ed;
    --info-border: #c3e3cd;
    --info-text: #1e5631;

    /* A strong yellow, because that is what a warning looks like. It carries
       fills (buttons, badges) and needs dark type on top; --warning-text is the
       readable amber for warning type on a light ground. */
    --warning: #ffc107;
    --warning-rgb: 255, 193, 7;
    --warning-hover: #e5a900;
    --warning-dark: #7a5600;
    --warning-tint: #fff3cd;
    --warning-border: #ffe69c;
    --warning-text: #b45309;

    --link-color: #2a7d4f;
    --link-color-rgb: 42, 125, 79;
    --link-hover-color: #1d5b3a;
    --link-hover-color-rgb: 29, 91, 58;

    /* === Icon Colors === */
    --icon-color-primary: var(--primary);
    /* Light/pale tints of --primary (#1e5631) used in the corporate colour family
       and in the green half of the traffic-light gradient. */
    --icon-color-primary-light: #4d8c61;
    --icon-color-primary-pale: #a5cdb4;
    --icon-color-red: #d32f2f;
    --icon-color-crimson: #ad1457;
    --icon-color-orange: #e65100;
    --icon-color-amber: #ff8f00;
    --icon-color-yellow: #f9a825;
    --icon-color-lime: #9e9d24;
    --icon-color-green: #2e7d32;
    --icon-color-teal: #00897b;
    --icon-color-cyan: #0097a7;
    --icon-color-blue: #1565c0;
    --icon-color-indigo: #283593;
    --icon-color-purple: #7b1fa2;
    --icon-color-violet: #6a1b9a;
    --icon-color-pink: #c2185b;
    --icon-color-brown: #5d4037;
    /* === Zusätzliche Farben für Charts/Picker === */
    --icon-color-gold: #c9a319;
    --icon-color-mint: #4db6ac;
    --icon-color-navy: #0d2b6b;
    --icon-color-magenta: #b71c8a;
    --icon-color-gray: #6c757d;
    --icon-color-black: #212529;

    /* === Neutral Colors ===
       SIDAN2-inspired soft neutrals: near-white surfaces, gentle blue-grey
       borders and muted text instead of pure greys. This is a large part of the
       lighter, more elegant feel. */
    --white: #fff;
    --black: #000;
    --app-bg: #fbfbfc;               /* page background (near-white, not stark white) */
    --surface: #ffffff;              /* raised surfaces: cards, modals */
    --surface-sunk: #f4f5f7;         /* recessed fills inside surfaces */
    --gray-light: #f8f9fa;
    --gray-medium: #8a92a1;
    --gray-dark: #15181f;            /* primary text — soft near-black */
    --gray-border-light: #e5e7eb;    /* soft hairline border */
    --gray-border-medium: #cbd0d8;   /* stronger border (inputs) */
    --gray-text-secondary: #5b6373;  /* muted blue-grey body text */
    --text-subtle: #8a92a1;          /* subtle helper / placeholder text */

    /* === Layout Colors === */
    --color-topbar: var(--primary);
    --color-sidebar: rgb(var(--primary-rgb));
    --color-background-dark: var(--primary);
    --color-background-light: var(--app-bg);

    /* === Modern theme surfaces (visual modernization) === */
    --surface-subtle: #fafbfc;       /* table head / subtle fills */
    --row-divider: #eef0f2;          /* table row separators */
    --sidebar-bg: #fafbfc;           /* light sidebar (near-white, airier) */
    --sidebar-border: #ebedf0;       /* light sidebar right border */
    --nav-text: #3d4a44;             /* nav link text on light sidebar */
    --nav-icon: #8a97a0;             /* nav link icon (muted) */
    --nav-hover-bg: #f0f2f1;         /* nav link hover background */
    /* Was #97a1a9, which came to 2.54:1 on the light sidebar. These labels are set
       small and in capitals, the two things that make a weak tone hardest to read. */
    --nav-section-label: #667079;    /* uppercase nav section label */

    /* === Navigation === */
    --navbar-item-hover: rgba(255, 255, 255, 0.15);
    --navbar-item-active: rgba(255, 255, 255, 0.25);

    /* === Overlays === */
    --overlay-dark-light: rgba(0, 0, 0, 0.2);
    --overlay-dark-medium: rgba(0, 0, 0, 0.3);
    --overlay-dark-heavy: rgba(0, 0, 0, 0.4);
    --overlay-white-subtle: rgba(255, 255, 255, 0.1);
    --overlay-white-medium: rgba(255, 255, 255, 0.37);
    --overlay-white-half: rgba(255, 255, 255, 0.5);

    /* === Typography === */
    --font-size-base: 1rem;
    --font-size-sm: calc(var(--font-size-base) * 0.875);
    --font-size-lg: calc(var(--font-size-base) * 1.125);
    --font-size-xl: calc(var(--font-size-base) * 1.25);
    --font-size-xxl: calc(var(--font-size-base) * 1.5);

    /* === Navigation Font Sizes === */
    --font-size-nav: var(--font-size-base);
    --font-size-nav-title: var(--font-size-xl);
    --font-size-nav-icon: var(--font-size-xl);
    --font-size-nav-icon-lg: var(--font-size-xxl);

    /* === Border Radius === */
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-pill: 999px;

    /* === Elevation / Shadows ===
       Feather-light, SIDAN2-style. Elevation is carried by the surface + a barely
       perceptible shadow rather than a heavy drop. */
    --shadow-xs: 0 1px 2px rgba(20, 25, 35, 0.03);
    --shadow-sm: 0 1px 2px rgba(20, 25, 35, 0.04), 0 1px 1px rgba(20, 25, 35, 0.03);
    --shadow-md: 0 2px 6px rgba(20, 25, 35, 0.06), 0 6px 18px rgba(20, 25, 35, 0.05);
    --shadow-lg: 0 8px 28px rgba(20, 25, 35, 0.10);
    --shadow-xl: 0 20px 44px rgba(20, 25, 35, 0.14);

    /* === Motion / Easing ===
       --ease-out is the modern UI default for entering/expanding interactions.
       --ease-in-out is reserved for symmetric, reversible state changes. */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 0.12s;
    --duration-base: 0.2s;
    --duration-slow: 0.32s;

    --transition-base: all var(--duration-base) var(--ease-out);
    --transition-colors: background-color var(--duration-base) var(--ease-out),
                         border-color var(--duration-base) var(--ease-out),
                         color var(--duration-base) var(--ease-out);
}

/* ==========================================================================
   Dark theme — the whole application, public shell and signed-in area alike.
   Toggled via html[data-theme] (see toggleSiteTheme in utils.js; App.razor
   seeds it from localStorage or prefers-color-scheme before first paint).
   Everything below only re-points semantic tokens, so the component CSS stays
   untouched. The family is a green-tinted near-black, matching the brand.
   ========================================================================== */

:root {
    /* The brand ground of the public pages. In the light theme it is simply the
       primary green; the dark theme swaps it for a deep green-black. */
    --site-ground: var(--primary);
}

html[data-theme="dark"] {
    --site-ground: #0e211a;

    /* Das Markengruen bleibt das Markengruen. Es wird hier absichtlich NICHT
       aufgehellt: --primary traegt Flaechen — Knoepfe, Plaketten, den Balken oben —
       und Weiss darauf liest sich im dunklen Umfeld genauso gut wie im hellen. Was
       dunkel wird, sind die Flaechen, die vorher weiss waren, nicht der Akzent
       darauf. Eine zweite, hellere Marke nebenher waere genau das, was ein dunkler
       Modus nicht sein soll.

       Aufgehellt wird nur, wo Gruen Schrift ist und nicht Flaeche:
       --primary-dark steht als Text auf --primary-tint (Plaketten, Hinweise, aktive
       Auswahl im Menue), --primary-strong traegt die grossen Zahlen auf der dunklen
       Flaeche. Beide waeren in ihrem hellen Ton dort nicht mehr zu lesen. */
    --primary-dark: #4bab74;
    --primary-strong: #6fc396;
    --primary-bg-subtle: #1c3527;
    --primary-tint: #1c3527;

    /* Surfaces and text. The page ground sits below the raised surfaces. */
    --app-bg: #161a15;
    --surface: #21261f;
    --surface-subtle: #1b201a;
    --surface-sunk: #11150f;
    --gray-light: #262c26;
    --gray-dark: #e7ebe8;
    --gray-medium: #98a29b;
    --gray-text-secondary: #a3aea7;
    --text-subtle: #a3aea7;
    --gray-border-light: #343b36;
    --gray-border-medium: #4a524c;
    --row-divider: #2a302a;
    --link-color: #7ecfa1;
    --link-hover-color: #a8dfc0;
    --selected-bg: #1c3527;

    /* Status tints: same hue as in the light theme, on dark ground.

       Die zugehoerigen "-dark" Toene werden mit aufgehellt — aus demselben Grund
       wie --primary-dark oben: sie sind ueberall Schrift auf dem jeweiligen Tint
       (Hinweisleisten, Plaketten, Warnsymbole) und nie Flaeche. In ihrem hellen
       Ton stand dort dunkelrote Schrift auf dunkelrotem Grund. */
    --success-tint: #142e1d;
    --success-dark: #5cba7d;
    --success-border: #234a31;
    --danger-tint: #391511;
    --danger-dark: #f0968b;
    --danger-border: #5c221c;
    --warning-tint: #33230d;
    --warning-dark: #e8b448;
    --warning-border: #4d3714;
    --warning-text: #f0b429;
    --info-bg: #142e1d;
    --info-border: #2a4a35;
    --info-text: #9fd4b3;

    /* Top bar and navigator. The bar drops from brand green to the deep
       green-black of the public dark pages. */
    --color-topbar: var(--site-ground);
    --sidebar-bg: #1b201a;
    --sidebar-border: #343b36;
    --nav-text: #cfd6d0;
    --nav-icon: #7f8a82;
    --nav-hover-bg: #262c26;
    --nav-section-label: #8b9690;

    /* Footer bridge tokens. */
    --bs-secondary-color: #a3aea7;
}