/* Phase 7 - the single source of every colour, size, radius and type step in the portal.
   Light values live on :root; dark mode overrides only the colours that differ, under
   :root[data-theme="dark"]. No .razor/.css outside this file may name a raw hex colour -
   everything references these custom properties. Product colours (aidax/aidatouch/datacenter)
   appear ONLY in ProductChip. Status colours always pair with an icon + text, never colour alone. */

:root {
    /* Surfaces. Light mode: white content canvas (--surface-0); cards/panels/tables a faint BLUE
       tint (--surface-1, not grey - grey read as "disabled"); the chrome (sidebar + top bar) a light
       blue (--sidebar-bg); hover/active + table headers a deeper blue (--surface-2). Palette from
       Markus (2026-08-20). Dark mode mirrors the hierarchy: content near-black, cards/chrome raised. */
    --surface-0: #ffffff;
    --surface-1: #eef5fb;
    --surface-2: #d6e7f2;

    /* Sidebar is a surface one step off the page in BOTH modes: light in light mode (white rail with
       a hairline divider), dark in dark mode. All sidebar tokens are therefore themed (dark block
       overrides below), not mode-independent. Locked-entry and section colours meet WCAG AA. */
    --sidebar-bg: #eaf2f8;
    --sidebar-fg: #4a5b6b;
    --sidebar-fg-active: #1d4ed8;
    --sidebar-active-bg: #d6e7f2;
    --sidebar-section: #5c6f7e;
    --sidebar-fg-locked: #5c6f7e;
    --sidebar-border: rgba(36, 55, 70, 0.14);
    --sidebar-brand: #243746;

    /* Borders (blue-grey to match the light-blue chrome) */
    --border: #d9e4ec;
    --border-strong: #c4d5e2;

    /* Bildlaufleisten (Markus, 10.09.2026: "nicht unbedingt thin - schoen zu bedienen und
       sichtbar, aber nicht die Standardleiste"). Die Bahn liegt eine Stufe unter der Flaeche,
       der Daumen nimmt --border-strong und wird beim Zeigen kraeftiger. */
    --scroll-track: #e7eff6;
    --scroll-thumb: #b3c8d9;
    --scroll-thumb-hover: #8fabc2;

    /* Input wells: white on the light-blue cards so fields pop; a faint blue every-other grid row. */
    --field-bg: #ffffff;
    --row-alt: #f4f9fd;

    /* Kopfzeile der Grids. Eigener Token statt --surface-2, obwohl der Wert hier derselbe ist:
       --surface-2 ist AUCH die Hover-/Aktiv-Flaeche, und der Kopf musste im Dunkelmodus kraeftiger
       werden (Markus, 2026-09-03) - ohne diesen Token wuerde jeder Hover mitlauter. */
    --grid-header-bg: #d6e7f2;

    /* Text */
    --text-primary: #243746;
    --text-secondary: #4a5b6b;
    --text-muted: #5c6f7e;

    /* Accent (links, focus, active) */
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-bg: #e8f0fe;

    /* Solid accent for fills that carry WHITE text (buttons, active segments, pager). Kept dark
       enough that white text meets WCAG AA (>=4.5:1) in BOTH themes - see the A11y doc. The plain
       --accent above stays tuned for link/focus contrast against the page, not for white-on-fill. */
    --accent-solid: #2563eb;
    --accent-solid-hover: #1d4ed8;

    /* Der Akzent zusaetzlich als Zahlentripel fuer Bootstrap (rgba-Varianten der Links). Muss zu
       --accent passen und mit dem Modus umschalten - siehe Dunkelblock unten. */
    --accent-rgb: 37, 99, 235;

    /* Text/glyph colour ON a solid accent fill (buttons, active segments, pager). White in both
       themes - a semantic token so no raw #fff sits in app.css. */
    --on-accent: #ffffff;

    /* Primary action (dark slate, matches the text colour) */
    --primary: #243746;
    --primary-fg: #ffffff;
    --primary-hover: #1a2a37;

    /* Status */
    --ok: #0f7536;
    --ok-bg: #e6f6ee;
    /* Zwei Stufen dunkler als das frueher hier stehende #b45309: das erreichte auf
       --warn-bg nur 4,496:1 und lag damit knapp unter der Grenze - sichtbar nur im
       Messwert, nicht am Bildschirm (gemessen 2026-09-03). */
    --warn: #b25108;
    --warn-bg: #fdf1dd;
    --danger: #b91c1c;
    --danger-bg: #fdeaea;

    /* Products (used only in ProductChip) */
    --prod-aidax: #2563eb;
    --prod-aidax-bg: #e6eefb;
    --prod-aidax-fg: #1d4ed8;
    --prod-aidatouch: #0d9488;
    --prod-aidatouch-bg: #dcf1ec;
    --prod-aidatouch-fg: #0f766e;
    --prod-datacenter: #7c3aed;
    --prod-datacenter-bg: #ede7fc;
    --prod-datacenter-fg: #6d28d9;

    /* Sizing / density (compact) */
    --row-h: 36px;
    --control-h: 34px;
    --gap-xs: 6px;
    --gap-sm: 8px;
    --gap-md: 12px;
    --gap-lg: 16px;
    --gap-xl: 24px;
    --radius: 8px;
    --radius-card: 10px;

    /* Typography */
    --font-sans: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, Consolas, "Courier New", monospace;
}

:root[data-theme="dark"] {
    /* "Mitternacht" (Markus, 2026-09-03). Vorher stand hier ein neutrales Anthrazit
       (#1b1e24 / #232730 / #2c313c). Der Grund fuer den Wechsel war nicht der Kontrast, sondern
       der Farbton: jenes Grau widersprach der Regel, nach der der Lichtmodus oben gebaut ist
       ("grey read as 'disabled'"). Beide Modi tragen jetzt dieselbe Farbe - Blau -, der
       Dunkelmodus nur tiefer und entsaettigter.

       Die Helligkeit der Leiter ist am 2026-09-03 ZWEIMAL angehoben worden. Der erste Wurf
       (#060b13 / #0d1520 / #16212e) war Max "einen Ticken" zu dunkel, die zweite Fassung noch
       eine "kleine, kleine Spur"; gueltig ist die dritte. Der zweite Schritt ist mit Absicht nur
       halb so gross wie der erste (Luminanz der Karte +0,0021 gegen +0,0045 vorher).

       Der Farbton bleibt dabei unveraendert, nur die Helligkeit steigt. Es kostet Textkontrast
       (Text auf der Karte 14,1:1 statt 15,7:1 im ersten Wurf), gewinnt aber Flaechentrennung -
       Kopf gegen Karte 1,54 statt 1,37. Die Karte liegt jetzt praktisch auf der Variante
       "A Nachtblau" aus der Auswahl (Luminanz 0,0139 gegen 0,0146); eine weitere Stufe wuerde
       den Charakter "Mitternacht" verlassen. */
    --surface-0: #0c1421;
    --surface-1: #14202f;
    --surface-2: #1e2c3e;

    /* The sidebar is a raised panel, lighter than the content, so it reads as its own surface. */
    --sidebar-bg: #14202f;
    --sidebar-fg: #a4b5c9;
    --sidebar-fg-active: #ffffff;
    --sidebar-active-bg: #243549;
    --sidebar-section: #8fa3ba;
    --sidebar-fg-locked: #96a8bf;
    --sidebar-border: rgba(150, 190, 240, 0.12);
    --sidebar-brand: #ffffff;

    --border: #253345;
    --border-strong: #364a61;

    /* Bildlaufleisten im Dunkelmodus: die Bahn verschwindet fast, der Daumen bleibt deutlich -
       im Dunkeln stoert eine helle Bahn mehr, als sie hilft. */
    --scroll-track: #101b28;
    --scroll-thumb: #33475e;
    --scroll-thumb-hover: #4a637f;

    --field-bg: #09101a;
    --row-alt: #182534;

    /* Kopfzeile der Grids: heller als die Zeilen (#182534) UND als --surface-2 (#1e2c3e), damit
       der Kopf die hellste Flaeche der Tabelle ist und als eigene Leiste liest (Markus,
       2026-09-03). Ohne diesen eigenen Token wuerde jeder Hover mitlauter, weil --surface-2 auch
       die Hover-Flaeche ist. Gemessen: 1,54 gegen die Karte, --text-primary darauf 9,1:1. */
    --grid-header-bg: #2a4058;

    --text-primary: #e9eef6;
    --text-secondary: #a4b5c9;
    --text-muted: #96a8bf;

    /* Links/focus need a LIGHTER blue to stay >=4.5:1 on the dark cards; white-on-fill buttons use
       the darker --accent-solid below instead (they conflict - one token cannot serve both).
       --accent-bg traegt an mehreren Stellen --accent als Textfarbe (Hinweisfelder, Spin-Button-
       Hover) - deshalb ist es kein beliebiges dunkles Blau, sondern darauf abgestimmt (5,9:1). */
    --accent: #62a8ff;
    --accent-hover: #8abfff;
    --accent-bg: #16294a;
    --accent-solid: #2563eb;
    --accent-solid-hover: #1d4ed8;

    /* Bootstrap braucht den Akzent zusaetzlich als Zahlentripel (rgba-Varianten der Links). Ein
       fester Wert kann nicht beiden Modi dienen - deshalb ein Token, das mit umschaltet. */
    --accent-rgb: 98, 168, 255;

    --primary: #e9eef6;
    --primary-fg: #0c1421;
    --primary-hover: #cdd6e2;

    --ok: #4ade80;
    --ok-bg: #113827;
    --warn: #fbbf24;
    --warn-bg: #3e2e0d;
    --danger: #f87171;
    --danger-bg: #401c1f;

    --prod-aidax: #3b82f6;
    --prod-aidax-bg: #182943;
    --prod-aidax-fg: #9cc0f7;
    --prod-aidatouch: #14b8a6;
    --prod-aidatouch-bg: #0d3131;
    --prod-aidatouch-fg: #5ed1c0;
    --prod-datacenter: #8b5cf6;
    --prod-datacenter-bg: #282047;
    --prod-datacenter-fg: #c4b5fd;
}

html, body {
    background: var(--surface-0);
    color: var(--text-primary);
    font-family: var(--font-sans);
}

a {
    color: var(--accent);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Bildlaufleisten fuer die ganze Anwendung (Markus, 10.09.2026).
   Bewusst NICHT "thin": die Leiste soll man treffen koennen. 14 px breit, der
   Daumen abgerundet und durch einen 3 px breiten Rand in Bahnfarbe optisch
   schmaler - so wirkt sie leicht, bleibt aber voll anfassbar.
   Erst Firefox (scrollbar-color/-width), dann die WebKit-Familie; beide Wege
   sind noetig, denn keiner der beiden versteht den anderen.
   Gilt auch fuer die Gitter: Syncfusion scrollt in normalen Elementen.
   --------------------------------------------------------------------------- */
* {
    scrollbar-width: auto;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background: var(--scroll-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 999px;
    border: 3px solid var(--scroll-track);
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover);
    background-clip: padding-box;
}

/* Die Ecke, in der sich waagrechte und senkrechte Leiste treffen - ohne diese
   Regel bleibt dort ein hellgrauer Fleck aus der Voreinstellung des Browsers
   stehen, der im Dunkelmodus sofort auffaellt. */
::-webkit-scrollbar-corner {
    background: var(--scroll-track);
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}