/* ROOT */
:root {
    --button-font-size: 1.1rem;
    --nb--belltext: black;
    --switchschool-text: black;
    --navbar-dropdownlink-twxt-size: 0.9rem;
    --navbar-link-text-size: 1.15rem;
    --actionlink-color: rgba(63,92,207,.8);
    --body-color: #606c76;
    --html-color: #606c76;
    --bg: #ebebeb;
    --card-bg: #f4f4f4;
    --border: #bfc7d1;
    --text: #1a2640;
    --muted: #667085;
    /* Page-zoom-multiplier (Sida-zoom i FontSizePicker). Påverkar bara
       body-text via `body { font-size: calc(1rem * var(--app-text-zoom)) }`.
       Tabeller/knappar/labels använder `rem`-baserade tema-variabler
       (var(--table-font-size) etc.) och skalas INTE av denna — vilket är
       medvetet så vi inte får dubbel-effekt med FontSizePicker-skalan.
       Default = 1 (100%). Steg via FontSizePicker: 1.0 / 1.10 / 1.20. */
    --app-text-zoom: 1;
    /* Editbutton-bakgrundsfärg per tema. Default = footer-beige (jkpng).
       Override per tema i theme-effects.css så knappen får en passande
       färg som harmonierar med varje temas palette. */
    --editb-bg: #c7c5bf;
    /* Design-system-tokens (FE7a 2026-05-12 — flyttat hit från design-system.css
       så alla tema-variabler bor i root.css). --primary mappas till --saveb-bg så
       ds-* komponenter följer aktivt tema. */
    --primary: var(--saveb-bg);
    --primary-light: #eef6f8;
    /* Status-färger (godkänd/obesvarad/underkänd) — används som inline-styles
       via Common.SetApprovedStatus()/SetRemovedStatus() etc. Default = mjuka
       pastel-färger som passar default-tema. Mörka teman overrider i
       theme-effects.css så kontrasten håller. */
    --status-success-bg: #dff2e3;  /* godkänd — mint-grön */
    --status-warning-bg: #faf3dc;  /* obesvarad — cream-gul */
    --status-danger-bg: #fee4e5;   /* underkänd — blush-rosa */
    --status-danger-text: darkred; /* "Underkänd"-text — mörk röd */
    /* Default till var(--text) så labels följer temat när enskilda teman
       inte explicit sätter --label-color. Teman som vill ha en avvikande
       label-färg (t.ex. banana hot pink) overrider --label-color i sitt
       :root.<tema>-layout-block. */
    --label-color: var(--text);
    --label-font-weight: 500;
    /* Amiga blue button — används av crystal-blue-temat */
    --amiga-blue-button-top: #4f8ff7;
    --amiga-blue-button-mid: #2f78ee;
    --amiga-blue-button-bottom: #1b63e6;
    /* Workbench-style grey header — bas-värdena. Mörka/specialteman
       overrider dessa via :root.<tema>-layout-block. */
    --amiga-header-top: #d6d6d6;
    --amiga-header-mid: #c9c9c9;
    --amiga-header-bottom: #bfbfbf;
    --amiga-highlight: rgba(255,255,255,0.8);
    --amiga-shadow: rgba(0,0,0,0.25);
    /* Sidebar colors */
    --sb-bg: #0c1426;
    --sb-expand: #131E38;
    --sb-text: #b5b9cb;
    --sb-text-soft: rgba(255,255,255,0.8);
    /* Neutral overlay that adapts to any sidebar bg — light on dark, dark on
       light (via color-mix with the sidebar text color). Avoids hardcoded
       blue/purple hover state that clashed with most themes. */
    --sb-hover: color-mix(in srgb, var(--sb-text) 14%, transparent);
    /* App background */
    --app-bg: #0f172a;
    /* Layout */
    --sb-width: 180px;
    --sb-width-wide: 180px;
    /* Sizing */
    --sb-item-h: 36px;
    /* Typography */
    --sb-font: 1.05rem;
    --sb-font-lg: 1.4rem;
    --sb-font-xl: 1.8rem;
    /* Spacing */
    --sb-padding: 1rem;
    --h-text: #1a2640;
    /* Navbar */
    --nb-bg: #0c1426;
    --nb-text: rgba(255,255,255,0.8);
    --tab-bg: #d6d6d6;
    --tab-text: black;
    --tab-text-active: white;
    --tab-bg-hover: #bfbfbf;
    --small-button-blue-color: white;
    --small-button-blue-bg: #00659e;
    --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    
    /*table*/
    --table-header-bg-start: #d6d6d6;
    --table-header-bg-end: #bfbfbf;
    --table-header-border: #999;
    --table-header-text: #1a2640;
    --table-font-size: 0.95rem;
    --table-padding: 8px 12px;
    --table-header-font-size: 1rem;
    /* Tabell-kompression i 960-1799.98px-bandet (responsive.css). Default
       = krympta värden så fler kolumner får plats utan horizontal-scroll
       i hide-cells-zonen. När FontSizePicker står på `lg`/`xl` overrider
       den dessa till `--table-font-size` så användarens zoom-val (för
       läsbarhet/synskadade) vinner över desktop-kompressionen. */
    --table-cell-compressed-tight: 0.8rem;       /* 1200-1366px */
    --table-cell-compressed-loose: 0.82rem;      /* 1367-1799px */
    --table-header-compressed-tight: 0.85rem;
    --table-header-compressed-loose: 0.88rem;
    /*savebutton*/
    --saveb-bg: #183c49;
    --saveb-text: #ffffff;
    --saveb-hover-bg: #819fb5;
    --saveb-hover-text: black;
    --menu-font-size: 0.875rem; /* default (Mud ~14px) */
    --menu-padding-y: 6px;
    --menu-padding-x: 14px;
    --menu-icon-size: 0.95rem;
    --menu-icon-width: 18px;
    /* Button text on Amiga-style gradient buttons */
    --button-text: #1a1a1a;
    /* Alert variants */
    --alert-info-bg: #d9edf7;
    --alert-info-text: #31708f;
    /* Status colors (semantic, only override per theme if contrast fails) */
    --required-color: #D60000;
    /* Typografi-baseline (FE17 Phase 1) — central font-size för labels och
       modaler så de hålls enhetliga oavsett vy. `:root.table-font-*` höjer
       dessa vid lg/xl men aldrig under baseline (floor-modell): användaren
       får krympa tabeller utan att modal-/label-text blir oläsbar.

       Använda klasser i design-system.css:
         .apl-label         — standard label, läser --label-font-size + --label-font-weight
         .apl-label-strong  — emphasized, läser --label-bold-weight
         .apl-info-value    — primärt värde (samma storlek som label)
         .apl-info-muted    — sekundär muted info-text (mindre, --muted-färg) */
    --label-font-size: 1rem;
    --label-bold-weight: 700;
    --info-font-size: 1rem;
    --info-muted-font-size: 0.875rem;
    --modal-body-font-size: 1rem;
    --modal-title-font-size: 1.15rem;
    /* Button & form radii — central så att :has(.apl-square-toggle:checked)
       kan svänga om hela appen från rundat till fyrkantigt utan att lista
       varje selektor. Komponenter som ska följa toggeln läser:
         border-radius: var(--button-radius);   för knappar
         border-radius: var(--form-radius);     för inputs/select/textarea
         border-radius: var(--card-radius);     för cards/alerts/modals
       Cirkulära element (50%, ArrowButton, DottedButton, RadioButton)
       lämnas hardcoded — de ska vara runda oavsett tema. */
    --button-radius: 15px;
    --button-radius-pill: 999px;
    --form-radius: 4px;
    --card-radius: 8px;

    /* ============================================================
       LAYOUT BREAKPOINT — synkad med MudBlazor Breakpoint.Sm (= 960px-gräns)
       ============================================================
       Dessa två variabler dokumenterar projektets EN ENDA breakpoint
       där alla layout-element (sidebar, navbar, userbar) skiftar mellan
       desktop-läge och mobil drawer-läge. MudTable använder samma
       brytpunkt via `Breakpoint="Breakpoint.Sm"`.

       MudBlazor-semantik (verifierad 2026-05-06): `Breakpoint`-attributet
       betyder "stack på och under det breakpoint-bandet". MudBlazors band:
         Xs: 0-599 · Sm: 600-959 · Md: 960-1279 · Lg: 1280-1919
       `Breakpoint.Sm` → stackar Xs+Sm-banden = viewport 0-959 → matchar
       layout-brytpunkten 960 ⇒ båda skiftar SAMTIDIGT.
       (Tidigare antagande att `Md` betyder "stack < 960" var fel — det
       hade triggat stack 0-1279, inkl. skol-skärmar och zoomade desktops.)

       OBS: CSS @media-queries kan inte läsa custom properties (CSS-spec-
       begränsning), så variablerna är DOKUMENTATION + JS-läsbara värden.
       Hårdkodade `959.98px`/`960px` används i alla `@media`-regler i:
         - wwwroot/css/responsive.css        (huvudregler)
         - wwwroot/css/newlook.css           (table-compression bands)
         - wwwroot/css/app-utilities.css     (skip-link)
         - wwwroot/css/apl.css               (legacy resets)
         - Shared/MainLayout.razor.css       (main-content margins)
         - Components/SideBar/*.razor.css    (sidebar collapse)
         - Components/Navbars/**/*.razor.css (navbar/userbar mobile-toggle)
         - Components/Notifications/*.razor.css
         - Pages/Coordinator/SwitchSchool/UserBar.razor.css
         - Pages/**/*.razor.css              (form-layout overrides)

       ⚠ ÄNDRA ALDRIG bara en av dessa platser. Synkad uppdatering MÅSTE
         göras på alla CSS-filer + alla `Breakpoint="Breakpoint.Sm"`-
         attribut på `<MudTable>` (144 stycken per 2026-05-06).

       Brytningens semantik:
         < 960px (mobil)    : drawer + MudTable mobile-stack
         ≥ 960px (desktop)  : sidebar + MudTable desktop-tabell
                              (skol-skärmar 1024×768/1366×768 + boomer-zoom
                               hamnar säkert på desktop-sidan)
       ============================================================ */
    --layout-bp-px: 960;
    --layout-bp-max-px: 959.98;

    /* Mobile topbar-höjd — delas av UserBar (sidebar-layout) och
       `navbar-mobile-bar` (navbar-layout) så att layout-toggle inte
       flyttar runt knapparnas Y-position. Dropdowns från ikoner i
       topbaren ankras till `top: var(--mobile-topbar-height) + 4px`
       med `position: fixed` så de escapar topbarens flex-container
       istället för att klippas inom den. */
    --mobile-topbar-height: 48px;

    /* Button-action-färg — för generiska `<Button>`/`<NoNameButton>`
       (action-länk-style purple-blue). Default matchar tidigare hardcoded
       värden så default-tema är visuellt oförändrat. Per-tema kan
       overrida i `:root.<tema>-layout`-block om en specifik tema-färg
       önskas (ej gjort i denna sweep). Hover-bg är neutral grå-blue som
       fungerar mot både default purple-blue och tema-specifika varianter. */
    --button-action-bg: rgba(63,92,207,.8);
    --button-action-text: #fff;
    --button-action-hover-bg: #606c76;
    --button-action-hover-text: #fff;

    /* Form-control sizing — skalbart system så input/select/textarea har
       konsekvent storlek över hela appen. FontSizePicker `lg`/`xl`
       overrider värdena så formfält följer tabell-zoom. Mobile-media-query
       (<768) i newlook.css höjer `--form-min-height` ytterligare till
       WCAG 2.5.8 touch-target (44px). */
    --form-font-size: 1rem;
    --form-padding-y: 0.45rem;
    --form-padding-x: 0.7rem;
    --form-min-height: 2.5rem;
    --form-control-size: 1.1rem;       /* checkbox/radio bredd-höjd */
    --form-control-size-mobile: 1.3rem;

    /* Browser-scrollbars — tema-medvetna via standard `scrollbar-color`
       + webkit-pseudos. Default refererar redan-tema-aware basvariabler
       så ThemePicker automatiskt ändrar scrollbar-utseendet på alla
       teman (--saveb-bg blir tema-färg, --card-bg blir tema-yta).
       Per-tema kan override om en specifik scrollbar-paljett behövs. */
    --scrollbar-thumb: var(--saveb-bg);
    --scrollbar-thumb-hover: var(--saveb-bg);
    --scrollbar-track: var(--card-bg);
}


/* JKPNG THEME */
    :root.green-layout {
        --label-color: #183c49;
        --app-bg: #0f172a;
        --sb-bg: #183c49;
        --sb-expand: #1E5163;
        --sb-text: #edeae4;
        --h-text: #183c49;
        --bg: #edeae4;
        --card-bg: #f5f3ef;
        --text: #183c49;
        --mud-palette-background: var(--bg);
        --mud-palette-surface: var(--card-bg);
        --nb-bg: #183c49;
        --nb-text: #edeae4;
        --switchschool-text: #edeae4;
        --nb--belltext: #edeae4;
    }
    :root.blue-layout {
        --label-font-weight: 600;
        --sb-bg: #1e2a44;
        --sb-expand: #2a3b5f;
        --sb-text: #e5e7eb;
        --nb-bg: #1e2a44;
        --nb-text: #e5e7eb;
        --small-button-blue-color: #e5e7eb;
        --small-button-blue-bg: #1e2a44;
        --switchschool-text: #e5e7eb;
        --nb--belltext: #edeae4;
    }
    :root.purple-layout {
        --actionlink-color: #A83693;
        --h-text: #3a2a5f;
        --label-font-weight: 600;
        --sb-bg: #2b1e44;
        --sb-expand: #3a2a5f;
        --sb-text: #f3f4f6;
        --sb-text-soft: rgba(255,255,255,0.7);
        --sb-hover: #6d4aff;
        --nb-bg: #2b1e44;
        --nb-text: #f3f4f6;
        --small-button-blue-color: #ffffff;
        --small-button-blue-bg: #6d4aff;
        --accent-purple: #8b5cf6;
        --accent-purple-strong: #6d4aff;
        --saveb-bg: #3a2a5f;
        --saveb-text: #ffffff;
        --saveb-hover-bg: #5B4394;
        --saveb-hover-text: white;
        --switchschool-text: #edeae4;
        --nb--belltext: #edeae4;
    }
    :root.dark-layout {
        --actionlink-color: #93c5fd;
        --label-color: #e5e7eb;
        --body-color: #e5e7eb;
        --html-color: #e5e7eb;
        --app-bg: #0b1220;
        --sb-bg: #111827;
        --sb-expand: #1f2937;
        --sb-text: #e5e7eb;
        --sb-text-soft: rgba(229, 231, 235, 0.7);
        --sb-hover: #374151;
        --h-text: #e5e7eb;
        --bg: #0f172a;
        --card-bg: #1e293b;
        --text: #e5e7eb;
        --muted: #9ca3af;
        --border: #334155;
        --nb-bg: #111827;
        --nb-text: #e5e7eb;
        --tab-bg: #1f2937;
        --tab-text: #e5e7eb;
        --tab-text-active: #ffffff;
        --tab-bg-hover: #374151;
        --table-header-bg-start: #1f2937;
        --table-header-bg-end: #111827;
        --table-header-border: #334155;
        --table-header-text: #e5e7eb;
        --mud-palette-background: var(--bg);
        --mud-palette-surface: var(--card-bg);
        --mud-palette-text-primary: var(--text);
        --mud-palette-text-secondary: var(--muted);
        --mud-palette-action-default: var(--text);
        --mud-palette-divider: var(--border);
        --mud-palette-table-lines: var(--border);
        --mud-palette-table-striped: rgba(255, 255, 255, 0.04);
        --mud-palette-table-hover: rgba(255, 255, 255, 0.08);
        --amiga-header-top: #1f2937;
        --amiga-header-mid: #19212e;
        --amiga-header-bottom: #111827;
        --amiga-highlight: rgba(255,255,255,0.2);
        --amiga-shadow: rgba(0,0,0,0.6);
        --switchschool-text: #edeae4;
        --nb--belltext: #edeae4;
        --button-text: #e5e7eb;
        --alert-info-bg: #1e3a5f;
        --alert-info-text: #cfe2f3;
        --small-button-blue-bg: #3b82f6;
        --small-button-blue-color: #ffffff;
        --saveb-bg: #2c5454;
        --saveb-text: #ffffff;
        --saveb-hover-bg: #3a6e6e;
        --saveb-hover-text: #ffffff;
    }
    :root.red-layout {
        --sb-bg: #2a1a1a;
        --sb-expand: #3a2424;
        --sb-text: #f3f4f6;
        --nb-bg: #2a1a1a;
        --nb-text: #f3f4f6;
        /* Varm guld/amber som komplementär accent mot mörk vinröd tema-bg.
           Tidigare värden: bg #f3f4f6 + color #e5e7eb — båda nästan-vita
           grå, gjorde texten oläslig på sin egen bakgrund. */
        --small-button-blue-color: #2a1a1a;
        --small-button-blue-bg: #d4a057;
        --switchschool-text: #edeae4;
        --nb--belltext: #edeae4;
    }
    :root.neon-layout {
        /* TRON / OUTRUN-tema — djup space-svart bg, cyan som primär läsfärg
           och hot magenta som CTA-/save-färg. Tidigare bara 7 variabler
           satta (sidebar/navbar) → resten av appen ärvde default ljus-grå
           bg + mörk navy text → tema-mismatch. Nu komplett variabelpaket
           så body, kort, tabeller, mud-komponenter, alerts, knappar och
           länkar alla följer space-paletten. */

        /* Bakgrund: solid djup-blå-svart. (Gradient på --bg fungerade inte —
           native <select> och andra form-controls läser --bg som background
           och kan inte rendera linear-gradients, faller tillbaka till vit.
           Body-gradienten flyttad till en separat regel i newlook.css som
           targetar `body` direkt utan att påverka inputs.) */
        --bg: #02020a;
        --app-bg: #000000;
        --card-bg: #0a0d22;
        --text: #b0e8e8;            /* ljus cyan-grön — läsbar som body-text */
        --muted: #5a8a9e;
        --border: #1a4a5a;          /* dim cyan border */
        --label-color: #00ffff;
        --label-font-weight: 600;
        --body-color: #b0e8e8;
        --html-color: #b0e8e8;
        --h-text: #00ffff;
        --actionlink-color: #ff00aa;
        --required-color: #ff00aa;
        --button-text: #000000;

        /* Sidebar — djup svart med cyan-text (Tron grid-look) */
        --sb-bg: #02020a;
        --sb-expand: #0a0d18;
        --sb-text: #00ffff;
        --sb-text-soft: rgba(0, 255, 255, 0.7);
        --sb-hover: rgba(0, 255, 255, 0.18);

        /* Navbar */
        --nb-bg: #02020a;
        --nb-text: #00ffff;
        --nb--belltext: #ff00aa;     /* hot magenta för notiser-bell */
        --switchschool-text: #00ffff;

        /* Tabs */
        --tab-bg: #0a0d22;
        --tab-text: #00ffff;
        --tab-text-active: #ff00aa;
        --tab-bg-hover: #1a3a4a;

        /* Table headers — Tron-grid */
        --table-header-bg-start: #0a0d22;
        --table-header-bg-end: #050818;
        --table-header-border: #00ffff;
        --table-header-text: #00ffff;

        /* MudBlazor palette så MudTable/MudDialog/MudInput följer */
        --mud-palette-background: #02020a;
        --mud-palette-surface: #0a0d22;
        --mud-palette-text-primary: #b0e8e8;
        --mud-palette-text-secondary: #5a8a9e;
        --mud-palette-action-default: #00ffff;
        --mud-palette-divider: #1a4a5a;
        --mud-palette-table-lines: #1a4a5a;
        --mud-palette-table-striped: rgba(0, 255, 255, 0.04);
        --mud-palette-table-hover: rgba(0, 255, 255, 0.10);

        /* Save button — hot magenta CTA (Tron's andra signaturfärg) */
        --saveb-bg: #ff007a;
        --saveb-text: #000000;
        --saveb-hover-bg: #ff3399;
        --saveb-hover-text: #000000;

        /* Small button blue — cyan (primär signaturfärg) */
        --small-button-blue-bg: #00ffff;
        --small-button-blue-color: #000000;

        /* Alert info — cyan-tonad info-blocks */
        --alert-info-bg: #052028;
        --alert-info-text: #00ffff;

        /* Amiga decorative — dim cyan gradient så Workbench-stilade
           element i temat ändå håller sig till paletten */
        --amiga-header-top: #1a4a5a;
        --amiga-header-mid: #0a3344;
        --amiga-header-bottom: #052028;
        --amiga-highlight: rgba(0, 255, 255, 0.3);
        --amiga-shadow: rgba(0, 0, 0, 0.85);
    }
    :root.crystal-blue-layout {
        --label-font-weight: 600;
        /* Define base colors FIRST */
        --amiga-blue-button-top: #4f8ff7;
        --amiga-blue-button-mid: #2f78ee;
        --amiga-blue-button-bottom: #1b63e6;
        /* Then use them */
        --sb-expand: #2f78ee;
        --sb-text: #e5e7eb;
        --nb-text: #e5e7eb;
        --nb--belltext: #ffffff;
        --small-button-blue-color: #ffffff;
        --small-button-blue-bg: var(--amiga-blue-button-top);
        --switchschool-text: #e5e7eb;
        /* Gradients */
        --sb-bg: linear-gradient( to top, var(--amiga-blue-button-top), var(--amiga-blue-button-mid), var(--amiga-blue-button-bottom) );
        --nb-bg: #1b63e6;
        /*--sb-bg: #1b63e6;*/
    }

    /* LIGHT THEME (FE1) — WCAG AA-compliant contrast on white background.
       Dark navy text (#1a2640) on light grey/white surfaces gives ~13.5:1
       contrast (AAA). Brand "Spara"-knappen behåller varumärkesfärg #183c49. */
    :root.light-layout {
        --actionlink-color: #0d6efd;
        --body-color: #1a2640;
        --html-color: #1a2640;
        --label-color: #1a2640;
        --h-text: #1a2640;
        --bg: #ffffff;
        --app-bg: #ffffff;
        --card-bg: #ffffff;
        --text: #1a2640;
        --muted: #495057;
        --border: #dee2e6;
        /* Sidebar */
        --sb-bg: #f8f9fa;
        --sb-expand: #e9ecef;
        --sb-text: #1a2640;
        --sb-text-soft: rgba(26, 38, 64, 0.75);
        --sb-hover: #dee2e6;
        /* Navbar */
        --nb-bg: #f8f9fa;
        --nb-text: #1a2640;
        --nb--belltext: #1a2640;
        --switchschool-text: #1a2640;
        /* Tabs */
        --tab-bg: #e9ecef;
        --tab-text: #1a2640;
        --tab-text-active: #ffffff;
        --tab-bg-hover: #dee2e6;
        /* Buttons (small blue) */
        --small-button-blue-color: #ffffff;
        --small-button-blue-bg: #0d6efd;
        /* Save button (brand color preserved) */
        --saveb-bg: #183c49;
        --saveb-text: #ffffff;
        --saveb-hover-bg: #2a5a6e;
        --saveb-hover-text: #ffffff;
        /* Table headers */
        --table-header-bg-start: #f1f3f5;
        --table-header-bg-end: #e9ecef;
        --table-header-border: #ced4da;
        --table-header-text: #1a2640;
        /* MudBlazor palette */
        --mud-palette-background: var(--bg);
        --mud-palette-surface: var(--card-bg);
        --mud-palette-text-primary: var(--text);
        --mud-palette-text-secondary: var(--muted);
        --mud-palette-action-default: var(--text);
        --mud-palette-divider: var(--border);
        --mud-palette-table-lines: var(--border);
        /* Workbench gradients toned down for light mode */
        --amiga-header-top: #f1f3f5;
        --amiga-header-mid: #e9ecef;
        --amiga-header-bottom: #dee2e6;
        --amiga-highlight: rgba(255, 255, 255, 0.8);
        --amiga-shadow: rgba(0, 0, 0, 0.1);
    }

    /* FRONTPAGE — public-FrontPage-paletten som auth-tema. Light card-on-soft-grey
       layout, navy headings, purple-blue länkar, blå-gradient primary buttons.
       Matchar exakt vad pre-auth `<div class="apl-frontpage">` har, så användare
       som gillar FrontPage-look kan ha den även inloggat. Refined minimalism.
       Strukturerad efter light-tema-mönstret med fullständig variabel-uppsättning
       så MudBlazor/dropdowns/tabs/table-headers alla får rätt FrontPage-färger. */
    :root.frontpage-layout {
        --actionlink-color: rgba(63, 92, 207, .9);
        --body-color: #1a2640;
        --html-color: #1a2640;
        --label-color: #1a2640;
        --h-text: #1a2640;
        --bg: #f5f7f9;
        --app-bg: #eef1f5;
        --card-bg: #ffffff;
        --text: #1a2640;
        --muted: #6b7280;
        --border: #d8dde6;
        --required-color: #d83a4a;
        /* Sidebar — ljus grå (samma mönster som light-tema) med navy text
           och FrontPage-soft-blue hover-tint. Vit navbar + ljus sidebar
           ger konsekvent FrontPage-paletten oavsett layout-läge. */
        --sb-bg: #f5f7f9;
        --sb-expand: #eef1f5;
        --sb-text: #1a2640;
        --sb-text-soft: rgba(26, 38, 64, 0.75);
        --sb-hover: #e1ebf7;
        /* Navbar — vit som FrontPage nav */
        --nb-bg: #ffffff;
        --nb-text: #1a2640;
        --nb--belltext: #1a2640;
        --switchschool-text: #1a2640;
        /* Tabs */
        --tab-bg: #eef1f5;
        --tab-text: #1a2640;
        --tab-text-active: #ffffff;
        --tab-bg-hover: #dde7f5;
        /* Buttons (small blue) */
        --small-button-blue-color: #ffffff;
        --small-button-blue-bg: #1b63e6;
        /* Save-knapp — FrontPage Boka demo blå (slutfärgen i gradienten) */
        --saveb-bg: #1b63e6;
        --saveb-text: #eaeaea;
        --saveb-hover-bg: #1758cc;
        --saveb-hover-text: #ffffff;
        --button-text: #eaeaea;
        /* Table headers — soft FrontPage gradient */
        --table-header-bg-start: #f5f7f9;
        --table-header-bg-end: #eef1f5;
        --table-header-border: #d8dde6;
        --table-header-text: #1a2640;
        /* MudBlazor palette — referera tema-variabler så alla Mud-komponenter
           (dropdown-popups, table-cells, divider, etc.) följer FrontPage */
        --mud-palette-background: var(--bg);
        --mud-palette-surface: var(--card-bg);
        --mud-palette-text-primary: var(--text);
        --mud-palette-text-secondary: var(--muted);
        --mud-palette-action-default: var(--text);
        --mud-palette-divider: var(--border);
        --mud-palette-table-lines: var(--border);
        /* Workbench gradients tonas ner till FrontPage-grey för card-headers etc. */
        --amiga-header-top: #f5f7f9;
        --amiga-header-mid: #eef1f5;
        --amiga-header-bottom: #dde2e8;
        --amiga-highlight: rgba(255, 255, 255, 0.85);
        --amiga-shadow: rgba(15, 23, 42, 0.08);
        /* Editbutton — soft ljus pastel-blå för FrontPage-känsla */
        --editb-bg: #e1ebf7;
    }

    /* SOMMAR — svensk sommardag: lövgröna sidor, ljus himmelsblå bakgrund,
       djup skogsgrön kontrast. Avslappnat men inte blekt. Tänk Astrid Lindgren-
       gård i juli — gräs, björk, klar himmel. WCAG AA på alla text-på-bg-par. */
    :root.sommar-layout {
        --actionlink-color: #1d6b3a;
        --label-color: #1a3d2e;
        --body-color: #1a3d2e;
        --html-color: #1a3d2e;
        /* Bakgrund: ljus himmelsblå */
        --bg: #dbeefb;
        --app-bg: #c9e3f5;
        --card-bg: #f2f9fd;
        --text: #1a3d2e;
        --muted: #4a6b56;
        --border: #a8d5c2;
        --h-text: #1a3d2e;
        /* Sidomeny: lövgrön — tänk björklöv i sol */
        --sb-bg: #6b9b5b;
        --sb-expand: #5d8e4d;
        --sb-text: #ffffff;
        --sb-text-soft: rgba(255, 255, 255, 0.85);
        --sb-hover: color-mix(in srgb, #ffffff 18%, transparent);
        /* Navbar: djupare skogsgrön */
        --nb-bg: #5d8e4d;
        --nb-text: #ffffff;
        --nb--belltext: #fde68a;
        --switchschool-text: #ffffff;
        /* Tabs / table headers */
        --tab-bg: #cfe8d4;
        --tab-text: #1a3d2e;
        --tab-text-active: #ffffff;
        --tab-bg-hover: #a8d5b0;
        --table-header-bg-start: #cfe8d4;
        --table-header-bg-end: #a8d5b0;
        --table-header-border: #6b9b5b;
        --table-header-text: #1a3d2e;
        /* Spara-knapp: skogsgrön */
        --saveb-bg: #2f6e3e;
        --saveb-text: #ffffff;
        --saveb-hover-bg: #1f5c2e;
        --saveb-hover-text: #ffffff;
        --small-button-blue-color: #ffffff;
        --small-button-blue-bg: #2f6e3e;
        --button-text: #1a3d2e;
        --required-color: #b22222;
        --alert-info-bg: #d6ebfa;
        --alert-info-text: #1e4d6b;
        /* MudBlazor palette */
        --mud-palette-background: var(--bg);
        --mud-palette-surface: var(--card-bg);
        --mud-palette-text-primary: var(--text);
        --mud-palette-text-secondary: var(--muted);
        --mud-palette-action-default: var(--text);
        --mud-palette-divider: var(--border);
        --mud-palette-table-lines: var(--border);
        --amiga-header-top: #cfe8d4;
        --amiga-header-mid: #b6dbc0;
        --amiga-header-bottom: #a8d5b0;
        --amiga-highlight: rgba(255, 255, 255, 0.6);
        --amiga-shadow: rgba(26, 61, 46, 0.15);
    }

    /* JUL — varm cream content + röd sidomeny + grön navbar + guld accent.
       Inspirerat av julkort (ljust och festligt) i stället för grandröd-och-mörkgrön
       som blir svårläst. All text på content-area sitter på cream → mörk text fungerar. */
    :root.jul-layout {
        --actionlink-color: #1f6b3a;
        --label-color: #2a1010;
        --body-color: #2a1010;
        --html-color: #2a1010;
        --bg: #fdf6e7;
        --app-bg: #fbf0d6;
        --card-bg: #ffffff;
        --text: #2a1010;
        --muted: #6b4a4a;
        --border: #e7d6b8;
        --h-text: #7a1f1f;
        /* Sidomeny: djup julröd med cream text */
        --sb-bg: #7a1f1f;
        --sb-expand: #5e1717;
        --sb-text: #f4ecd5;
        --sb-text-soft: rgba(244, 236, 213, 0.78);
        --sb-hover: color-mix(in srgb, #d4af37 22%, transparent);
        /* Navbar: grangrön med cream text */
        --nb-bg: #1f6b3a;
        --nb-text: #f4ecd5;
        --nb--belltext: #d4af37;
        --switchschool-text: #f4ecd5;
        /* Tabs / table headers — varm cream m. guld kant */
        --tab-bg: #fbf0d6;
        --tab-text: #2a1010;
        --tab-text-active: #ffffff;
        --tab-bg-hover: #f1deaa;
        --table-header-bg-start: #fbf0d6;
        --table-header-bg-end: #f1deaa;
        --table-header-border: #d4af37;
        --table-header-text: #2a1010;
        /* Spara-knapp: guld med mörk text */
        --saveb-bg: #c9a86a;
        --saveb-text: #2a1010;
        --saveb-hover-bg: #b08c4a;
        --saveb-hover-text: #ffffff;
        --small-button-blue-color: #2a1010;
        --small-button-blue-bg: #d4af37;
        --button-text: #2a1010;
        --required-color: #b22222;
        --alert-info-bg: #e9f5ec;
        --alert-info-text: #1f4d2c;
        /* MudBlazor palette */
        --mud-palette-background: var(--bg);
        --mud-palette-surface: var(--card-bg);
        --mud-palette-text-primary: var(--text);
        --mud-palette-text-secondary: var(--muted);
        --mud-palette-action-default: var(--text);
        --mud-palette-divider: var(--border);
        --mud-palette-table-lines: var(--border);
        --amiga-header-top: #fbf0d6;
        --amiga-header-mid: #f1deaa;
        --amiga-header-bottom: #e7c97e;
        --amiga-highlight: rgba(255, 255, 255, 0.6);
        --amiga-shadow: rgba(122, 31, 31, 0.2);
    }

    /* BANANAS — 80s synthwave/neon. Mörk midnight purple bas, hot pink + cyan
       som accenter, ljus text. Inte längre alla färger samtidigt — disco-
       känslan kommer från accenterna mot den djupt mörka bakgrunden, som
       80s/Tron/Miami Vice-estetik. Läsbart även i längre arbetspass. */
    :root.banana-layout {
        --actionlink-color: #00e5ff;
        --label-color: #f5b8ff;
        --body-color: #f0e7ff;
        --html-color: #f0e7ff;
        --bg: #1a1140;
        --app-bg: #120a30;
        --card-bg: #251a55;
        --text: #f0e7ff;
        --muted: #a89ad6;
        --border: #4a3a85;
        --h-text: #ff5fb0;
        /* Sidomeny: djup synthwave-purple */
        --sb-bg: #1f1450;
        --sb-expand: #2c1d6e;
        --sb-text: #f0e7ff;
        --sb-text-soft: rgba(240, 231, 255, 0.7);
        --sb-hover: color-mix(in srgb, #00e5ff 18%, transparent);
        /* Navbar: aningen ljusare för subtle kontrast */
        --nb-bg: #1f1450;
        --nb-text: #f0e7ff;
        --nb--belltext: #00e5ff;
        --switchschool-text: #f0e7ff;
        /* Tabs / table headers */
        --tab-bg: #251a55;
        --tab-text: #f0e7ff;
        --tab-text-active: #120a30;
        --tab-bg-hover: #00e5ff;
        --table-header-bg-start: #2c1d6e;
        --table-header-bg-end: #1f1450;
        --table-header-border: #ff5fb0;
        --table-header-text: #f0e7ff;
        /* Spara-knapp: hot pink — primär 80s-accent */
        --saveb-bg: #ff5fb0;
        --saveb-text: #120a30;
        --saveb-hover-bg: #ff85c2;
        --saveb-hover-text: #120a30;
        --small-button-blue-color: #120a30;
        --small-button-blue-bg: #00e5ff;
        --button-text: #f0e7ff;
        --required-color: #ff5fb0;
        --alert-info-bg: #2c1d6e;
        --alert-info-text: #00e5ff;
        /* MudBlazor palette */
        --mud-palette-background: var(--bg);
        --mud-palette-surface: var(--card-bg);
        --mud-palette-text-primary: var(--text);
        --mud-palette-text-secondary: var(--muted);
        --mud-palette-action-default: var(--text);
        --mud-palette-divider: var(--border);
        --mud-palette-table-lines: var(--border);
        --mud-palette-table-striped: rgba(255, 95, 176, 0.04);
        --mud-palette-table-hover: rgba(0, 229, 255, 0.08);
        --amiga-header-top: #2c1d6e;
        --amiga-header-mid: #251a55;
        --amiga-header-bottom: #1f1450;
        --amiga-highlight: rgba(255, 95, 176, 0.25);
        --amiga-shadow: rgba(0, 0, 0, 0.5);
    }

    /* Banana neon glow-effekter — flyttat till `theme-effects.css`
       (laddas direkt efter root.css i `_Layout.cshtml`). */

    :root.indigo-dark-layout {
        --button-radius: 4px;
        --button-radius-pill: 4px;
        --form-radius: 4px;
        --card-radius: 8px;
        --actionlink-color: #00a8fc;
        --label-color: #f2f3f5;
        --body-color: #f2f3f5;
        --html-color: #f2f3f5;
        --bg: #313338;
        --app-bg: #1e1f22;
        --card-bg: #2b2d31;
        --text: #f2f3f5;
        --muted: #b5bac1;
        --border: #3f4147;
        --h-text: #f2f3f5;
        --sb-bg: #2b2d31;
        --sb-expand: #232428;
        --sb-text: #dcddde;
        --sb-text-soft: rgba(220, 221, 222, 0.7);
        --sb-hover: color-mix(in srgb, #5865f2 20%, transparent);
        --nb-bg: #1e1f22;
        --nb-text: #f2f3f5;
        --nb--belltext: #5865f2;
        --switchschool-text: #f2f3f5;
        --tab-bg: #232428;
        --tab-text: #b5bac1;
        --tab-text-active: #ffffff;
        --tab-bg-hover: #404249;
        --table-header-bg-start: #232428;
        --table-header-bg-end: #1e1f22;
        --table-header-border: #3f4147;
        --table-header-text: #f2f3f5;
        --saveb-bg: #5865f2;
        --saveb-text: #ffffff;
        --saveb-hover-bg: #4752c4;
        --saveb-hover-text: #ffffff;
        /* Ljusare grå än `#4e5058` (mörk grå, ~1.5:1 mot card-bg = oläsligt).
           `#80848b` ger kompromiss: ~4.5:1 mot vit text (filled-variant) +
           ~3.5:1 mot card-bg (outlined-variant). Matchar Discord's
           muted-text-paletten — naturlig nyans i samma färgschema. */
        --small-button-blue-color: #ffffff;
        --small-button-blue-bg: #80848b;
        --button-text: #f2f3f5;
        --required-color: #f23f43;
        --alert-info-bg: #2b2d31;
        --alert-info-text: #00a8fc;
        --mud-palette-background: var(--bg);
        --mud-palette-surface: var(--card-bg);
        --mud-palette-text-primary: var(--text);
        --mud-palette-text-secondary: var(--muted);
        --mud-palette-action-default: var(--text);
        --mud-palette-divider: var(--border);
        --mud-palette-table-lines: var(--border);
        --mud-palette-table-striped: rgba(255, 255, 255, 0.03);
        --mud-palette-table-hover: rgba(88, 101, 242, 0.12);
        --amiga-header-top: #2b2d31;
        --amiga-header-mid: #232428;
        --amiga-header-bottom: #1e1f22;
        --amiga-highlight: rgba(255, 255, 255, 0.05);
        --amiga-shadow: rgba(0, 0, 0, 0.5);
    }

    :root.violet-dark-layout {
        --button-radius: 0;
        --button-radius-pill: 0;
        --form-radius: 0;
        --card-radius: 0;
        --actionlink-color: #4ec9b0;
        --label-color: #d4d4d4;
        --body-color: #d4d4d4;
        --html-color: #d4d4d4;
        --bg: #1e1e1e;
        --app-bg: #181818;
        --card-bg: #252526;
        --text: #d4d4d4;
        --muted: #858585;
        --border: #474747;
        --h-text: #d4d4d4;
        --sb-bg: #2d2d30;
        --sb-expand: #383838;
        --sb-text: #cccccc;
        --sb-text-soft: rgba(204, 204, 204, 0.7);
        --sb-hover: color-mix(in srgb, #68217a 28%, transparent);
        --nb-bg: #3c3c3c;
        --nb-text: #cccccc;
        --nb--belltext: #c586c0;
        --switchschool-text: #cccccc;
        --tab-bg: #2d2d30;
        --tab-text: #969696;
        --tab-text-active: #ffffff;
        --tab-bg-hover: #1e1e1e;
        --table-header-bg-start: #2d2d30;
        --table-header-bg-end: #252526;
        --table-header-border: #474747;
        --table-header-text: #d4d4d4;
        --saveb-bg: #68217a;
        --saveb-text: #ffffff;
        --saveb-hover-bg: #7d2a91;
        --saveb-hover-text: #ffffff;
        --small-button-blue-color: #ffffff;
        --small-button-blue-bg: #0e639c;
        --button-text: #d4d4d4;
        --required-color: #f48771;
        --alert-info-bg: #2a2d35;
        --alert-info-text: #9cdcfe;
        --mud-palette-background: var(--bg);
        --mud-palette-surface: var(--card-bg);
        --mud-palette-text-primary: var(--text);
        --mud-palette-text-secondary: var(--muted);
        --mud-palette-action-default: var(--text);
        --mud-palette-divider: var(--border);
        --mud-palette-table-lines: var(--border);
        --mud-palette-table-striped: rgba(255, 255, 255, 0.02);
        --mud-palette-table-hover: rgba(104, 33, 122, 0.15);
        --amiga-header-top: #2d2d30;
        --amiga-header-mid: #2a2a2c;
        --amiga-header-bottom: #252526;
        --amiga-highlight: rgba(255, 255, 255, 0.04);
        --amiga-shadow: rgba(0, 0, 0, 0.4);
    }

    /* Square-buttons :has()-toggle — flyttat till `theme-effects.css`. */

    /* ============================================================
       TILLGÄNGLIGHETSTEMAN — färgblindhet och synnedsättning.
       Varje tema bygger på etablerade vetenskapliga rekommendationer
       (Wong/Okabe-Ito-paletten för rödgrön-blindhet) och designar
       primärfärger så de aldrig förlitar sig enbart på hue-skillnader
       för att förmedla mening. Status-information bör alltid kompletteras
       med text/ikon/form, inte bara färg.
       ============================================================ */

    /* DEUTERANOPI — grönblind. Vanligast (6-8% av män). Röd och grön
       förväxlas. Primär = Wong-blå #0072B2 (entydig), danger = vermillion
       #D55E00 (orange-röd, syns även när röd-receptorer är försvagade). */
    :root.deutan-layout {
        --actionlink-color: #0072B2;
        --bg: #f7f7f7;
        --app-bg: #ececec;
        --card-bg: #ffffff;
        --text: #1a1a1a;
        --muted: #5a5a5a;
        --border: #b8b8b8;
        --label-color: #1a1a1a;
        --h-text: #003366;
        --sb-bg: #003366;
        --sb-expand: #002244;
        --sb-text: #ffffff;
        --sb-text-soft: rgba(255, 255, 255, 0.85);
        --sb-hover: color-mix(in srgb, #ffffff 18%, transparent);
        --nb-bg: #003366;
        --nb-text: #ffffff;
        --nb--belltext: #F0E442;
        --switchschool-text: #ffffff;
        --tab-bg: #e0e0e0;
        --tab-text: #1a1a1a;
        --tab-text-active: #ffffff;
        --tab-bg-hover: #c8c8c8;
        --table-header-bg-start: #d8d8d8;
        --table-header-bg-end: #c0c0c0;
        --table-header-border: #888;
        --table-header-text: #1a1a1a;
        --saveb-bg: #0072B2;
        --saveb-text: #ffffff;
        --saveb-hover-bg: #005a8b;
        --saveb-hover-text: #ffffff;
        --small-button-blue-color: #ffffff;
        --small-button-blue-bg: #0072B2;
        --button-text: #1a1a1a;
        --required-color: #D55E00;
        --alert-info-bg: #d0e4f0;
        --alert-info-text: #003366;
        --mud-palette-background: var(--bg);
        --mud-palette-surface: var(--card-bg);
        --mud-palette-text-primary: var(--text);
        --mud-palette-text-secondary: var(--muted);
        --mud-palette-action-default: var(--text);
        --mud-palette-divider: var(--border);
        --mud-palette-table-lines: var(--border);
        --amiga-header-top: #d8d8d8;
        --amiga-header-mid: #c8c8c8;
        --amiga-header-bottom: #b8b8b8;
        --amiga-highlight: rgba(255, 255, 255, 0.8);
        --amiga-shadow: rgba(0, 0, 0, 0.2);
    }

    /* PROTANOPI — rödblind (~1% av män). Röda toner uppfattas som mycket
       mörka. Använder samma Wong/Okabe-Ito-bas som deutan men aningen
       djupare blå sidomeny för tydligare luminanskontrast. */
    :root.protan-layout {
        --actionlink-color: #0072B2;
        --bg: #f7f7f7;
        --app-bg: #ececec;
        --card-bg: #ffffff;
        --text: #1a1a1a;
        --muted: #5a5a5a;
        --border: #b8b8b8;
        --label-color: #1a1a1a;
        --h-text: #1a3a5c;
        --sb-bg: #1a3a5c;
        --sb-expand: #0f2a44;
        --sb-text: #ffffff;
        --sb-text-soft: rgba(255, 255, 255, 0.85);
        --sb-hover: color-mix(in srgb, #ffffff 20%, transparent);
        --nb-bg: #1a3a5c;
        --nb-text: #ffffff;
        --nb--belltext: #F0E442;
        --switchschool-text: #ffffff;
        --tab-bg: #e0e0e0;
        --tab-text: #1a1a1a;
        --tab-text-active: #ffffff;
        --tab-bg-hover: #c8c8c8;
        --table-header-bg-start: #d8d8d8;
        --table-header-bg-end: #c0c0c0;
        --table-header-border: #888;
        --table-header-text: #1a1a1a;
        --saveb-bg: #0072B2;
        --saveb-text: #ffffff;
        --saveb-hover-bg: #005a8b;
        --saveb-hover-text: #ffffff;
        --small-button-blue-color: #ffffff;
        --small-button-blue-bg: #56B4E9;
        --button-text: #1a1a1a;
        --required-color: #D55E00;
        --alert-info-bg: #d0e4f0;
        --alert-info-text: #1a3a5c;
        --mud-palette-background: var(--bg);
        --mud-palette-surface: var(--card-bg);
        --mud-palette-text-primary: var(--text);
        --mud-palette-text-secondary: var(--muted);
        --mud-palette-action-default: var(--text);
        --mud-palette-divider: var(--border);
        --mud-palette-table-lines: var(--border);
        --amiga-header-top: #d8d8d8;
        --amiga-header-mid: #c8c8c8;
        --amiga-header-bottom: #b8b8b8;
        --amiga-highlight: rgba(255, 255, 255, 0.8);
        --amiga-shadow: rgba(0, 0, 0, 0.2);
    }

    /* TRITANOPI — blåblind (<1%). Blå/grön och gul/rosa förväxlas.
       Använder röd + cyan-paret istället för blå/gul. Primärknapp djup
       röd #BC0000, info-länkar cyan #007A85 (tydligt skild från röd
       för tritan-perception). */
    :root.tritan-layout {
        --actionlink-color: #007A85;
        --bg: #f5f5f5;
        --app-bg: #e8e8e8;
        --card-bg: #ffffff;
        --text: #1a1a1a;
        --muted: #5a5a5a;
        --border: #b0b0b0;
        --label-color: #1a1a1a;
        --h-text: #5C0019;
        --sb-bg: #5C0019;
        --sb-expand: #420012;
        --sb-text: #ffffff;
        --sb-text-soft: rgba(255, 255, 255, 0.85);
        --sb-hover: color-mix(in srgb, #ffffff 18%, transparent);
        --nb-bg: #5C0019;
        --nb-text: #ffffff;
        --nb--belltext: #00B7C0;
        --switchschool-text: #ffffff;
        --tab-bg: #e0e0e0;
        --tab-text: #1a1a1a;
        --tab-text-active: #ffffff;
        --tab-bg-hover: #c8c8c8;
        --table-header-bg-start: #d8d8d8;
        --table-header-bg-end: #c0c0c0;
        --table-header-border: #888;
        --table-header-text: #1a1a1a;
        --saveb-bg: #BC0000;
        --saveb-text: #ffffff;
        --saveb-hover-bg: #8a0000;
        --saveb-hover-text: #ffffff;
        --small-button-blue-color: #ffffff;
        --small-button-blue-bg: #007A85;
        --button-text: #1a1a1a;
        --required-color: #BC0000;
        --alert-info-bg: #e0f5f7;
        --alert-info-text: #00525a;
        --mud-palette-background: var(--bg);
        --mud-palette-surface: var(--card-bg);
        --mud-palette-text-primary: var(--text);
        --mud-palette-text-secondary: var(--muted);
        --mud-palette-action-default: var(--text);
        --mud-palette-divider: var(--border);
        --mud-palette-table-lines: var(--border);
        --amiga-header-top: #d8d8d8;
        --amiga-header-mid: #c8c8c8;
        --amiga-header-bottom: #b8b8b8;
        --amiga-highlight: rgba(255, 255, 255, 0.8);
        --amiga-shadow: rgba(0, 0, 0, 0.2);
    }

    /* MONOKROMASI — total färgblindhet. Endast luminans (mörkhet/ljushet)
       förmedlar mening. Ren gråskala-palett. Användare kompletterar med
       text/ikoner/mönster för att skilja status — färg ger ingen info. */
    :root.monochrome-layout {
        --actionlink-color: #000000;
        --bg: #ffffff;
        --app-bg: #f0f0f0;
        --card-bg: #f7f7f7;
        --text: #000000;
        --muted: #4a4a4a;
        --border: #999999;
        --label-color: #000000;
        --h-text: #000000;
        --sb-bg: #1a1a1a;
        --sb-expand: #2a2a2a;
        --sb-text: #ffffff;
        --sb-text-soft: rgba(255, 255, 255, 0.8);
        --sb-hover: color-mix(in srgb, #ffffff 14%, transparent);
        --nb-bg: #1a1a1a;
        --nb-text: #ffffff;
        --nb--belltext: #ffffff;
        --switchschool-text: #ffffff;
        --tab-bg: #e0e0e0;
        --tab-text: #1a1a1a;
        --tab-text-active: #ffffff;
        --tab-bg-hover: #c0c0c0;
        --table-header-bg-start: #dddddd;
        --table-header-bg-end: #c0c0c0;
        --table-header-border: #777;
        --table-header-text: #000000;
        --saveb-bg: #333333;
        --saveb-text: #ffffff;
        --saveb-hover-bg: #555555;
        --saveb-hover-text: #ffffff;
        --small-button-blue-color: #ffffff;
        --small-button-blue-bg: #444444;
        --button-text: #000000;
        --required-color: #000000;
        --alert-info-bg: #e8e8e8;
        --alert-info-text: #1a1a1a;
        --mud-palette-background: var(--bg);
        --mud-palette-surface: var(--card-bg);
        --mud-palette-text-primary: var(--text);
        --mud-palette-text-secondary: var(--muted);
        --mud-palette-action-default: var(--text);
        --mud-palette-divider: var(--border);
        --mud-palette-table-lines: var(--border);
        --amiga-header-top: #dddddd;
        --amiga-header-mid: #cccccc;
        --amiga-header-bottom: #b8b8b8;
        --amiga-highlight: rgba(255, 255, 255, 0.7);
        --amiga-shadow: rgba(0, 0, 0, 0.3);
    }

    /* HÖG KONTRAST — synnedsättning / synskadade. WCAG AAA-kontrast
       (21:1 svart på vitt), 4px fokusring, tjocka 2px borders, större
       typsnitt + tabellpadding. Inga subtila gradienter eller skuggor. */
    :root.high-contrast-layout {
        --actionlink-color: #0000ee;
        --bg: #ffffff;
        --app-bg: #ffffff;
        --card-bg: #ffffff;
        --text: #000000;
        --muted: #000000;
        --border: #000000;
        --label-color: #000000;
        --label-font-weight: 700;
        --h-text: #000000;
        --sb-bg: #000000;
        --sb-expand: #1a1a1a;
        --sb-text: #ffffff;
        --sb-text-soft: #ffffff;
        --sb-hover: #ffff00;
        --nb-bg: #000000;
        --nb-text: #ffffff;
        --nb--belltext: #ffff00;
        --switchschool-text: #ffffff;
        --tab-bg: #ffffff;
        --tab-text: #000000;
        --tab-text-active: #ffffff;
        --tab-bg-hover: #000000;
        --table-header-bg-start: #ffffff;
        --table-header-bg-end: #ffffff;
        --table-header-border: #000000;
        --table-header-text: #000000;
        --saveb-bg: #000000;
        --saveb-text: #ffffff;
        --saveb-hover-bg: #1a1a1a;
        --saveb-hover-text: #ffff00;
        --small-button-blue-color: #ffffff;
        --small-button-blue-bg: #000000;
        --button-text: #000000;
        --required-color: #cc0000;
        --alert-info-bg: #ffffff;
        --alert-info-text: #000000;
        --table-font-size: 1.1rem;
        --table-header-font-size: 1.15rem;
        --button-font-size: 1.2rem;
        --mud-palette-background: var(--bg);
        --mud-palette-surface: var(--card-bg);
        --mud-palette-text-primary: var(--text);
        --mud-palette-text-secondary: var(--text);
        --mud-palette-action-default: var(--text);
        --mud-palette-divider: var(--border);
        --mud-palette-table-lines: var(--border);
        --amiga-header-top: #ffffff;
        --amiga-header-mid: #ffffff;
        --amiga-header-bottom: #ffffff;
        --amiga-highlight: rgba(0, 0, 0, 0);
        --amiga-shadow: rgba(0, 0, 0, 0);
    }

    /* Hög-kontrast-tema extra-regler (2px borders, 4px fokusring,
       inaktiverade subtle effects) — flyttat till `theme-effects.css`. */

/* Legacy `display: table` + `body { display: table-cell }` borttaget
   2026-05-06 — det var en sticky-footer-hack från före flexbox-eran som
   skapade implicit table-cell-spacing och fick navbar-layoutens body att
   se "förskjuten åt vänster" ut. MainLayout.razor använder
   `<div class="d-flex flex-column min-vh-100">` flexbox-pattern som
   redan löser sticky-footer-problemet utan table-tricks. */
html {
    color: var(--text);
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    font-size: 0.65rem;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    max-width: 100vw;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}
body.modal-open {
    padding-right: 0 !important;
}
body {
    color: var(--text);
    margin: 0;
    padding: 0;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
    /* Page-zoom-applicering — multiplier från `--app-text-zoom`-variabel.
       Tabeller/knappar/labels skyddas eftersom de använder rem-baserade
       tema-variabler (oberoende av body-font-size). */
    font-size: calc(1.4em * var(--app-text-zoom));
    line-height: 1.6;
    width: 100%;
    min-height: 100%;
    background: var(--bg);
    /* Förhindrar horisontalscroll på dokument-nivå. Wide komponenter
       (t.ex. breda tabeller som råkar overflowa, eller width:100vw-element
       som inkluderar scrollbar-gutter) blir kapade visuellt men deras
       egna containers (`.expanded-main-content` / `.collapsed-main-content` /
       `.navbar-main-content` med `overflow-x: auto`) ger lokal scroll
       inom main-området istället. */
    overflow-x: hidden;
}
.card {
    background: var(--card-bg);
    color: var(--text);
    border-radius: .25rem;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 var(--amiga-highlight), inset 0 -1px 0 var(--amiga-shadow), 0 2px 4px rgba(0,0,0,0.1);
}

/* FontSizePicker-skala (FE17 Phase 1).
   Modell: tabeller skalar fritt (0.8rem→1.4rem). Labels och modaler har
   "floor" på 1rem — de följer table-storleken UPPÅT (lg/xl) men håller
   1rem-baseline när tabellen är ≤1rem (sm/md). Resonemanget: en användare
   som krymper tabeller för att få plats med fler kolumner ska inte få
   oläsbar modal-/label-text på köpet; men när tabeller skruvas upp (lg/xl)
   är det av läsbarhetsskäl och då ska modal/label följa med. */

:root.table-font-sm {
    --table-font-size: 0.8rem;
    --menu-font-size: 0.75rem;
    --menu-padding-y: 4px;
    --menu-padding-x: 10px;
    --menu-icon-size: 0.85rem;
    --menu-icon-width: 16px;
    /* Floor — labels/modal håller 1rem-baseline från :root */
}

:root.table-font-md {
    --table-font-size: 0.95rem;
    --menu-font-size: 0.875rem;
    --menu-padding-y: 6px;
    --menu-padding-x: 14px;
    --menu-icon-size: 0.95rem;
    --menu-icon-width: 18px;
    /* Floor — labels/modal håller 1rem-baseline från :root */
}

:root.table-font-lg {
    --table-font-size: 1.1rem;
    --menu-font-size: 1rem;
    --menu-padding-y: 10px;
    --menu-padding-x: 18px;
    --menu-icon-size: 1.05rem;
    --menu-icon-width: 20px;
    /* Tabell över floor — labels, info och modal följer med uppåt */
    --label-font-size: 1.1rem;
    --info-font-size: 1.1rem;
    --info-muted-font-size: 0.95rem;
    --modal-body-font-size: 1.1rem;
    --modal-title-font-size: 1.3rem;
    /* Hoppa över desktop-kompression — användaren har valt större font för
       läsbarhet/synskadade, kompression skulle bryta det syftet. */
    --table-cell-compressed-tight: var(--table-font-size);
    --table-cell-compressed-loose: var(--table-font-size);
    --table-header-compressed-tight: var(--table-header-font-size);
    --table-header-compressed-loose: var(--table-header-font-size);
    /* Form-control skalar med tabell-storlek så formulär matchar zoom-valet. */
    --form-font-size: 1.1rem;
    --form-min-height: 2.75rem;
    --form-control-size: 1.25rem;
}

:root.table-font-xl {
    --table-font-size: 1.4rem;
    --menu-font-size: 1.2rem;
    --menu-padding-y: 14px;
    --menu-padding-x: 22px;
    --menu-icon-size: 1.2rem;
    --menu-icon-width: 22px;
    /* Tabell långt över floor — labels, info och modal skalar proportionellt */
    --label-font-size: 1.25rem;
    --info-font-size: 1.25rem;
    --info-muted-font-size: 1.05rem;
    --modal-body-font-size: 1.4rem;
    --modal-title-font-size: 1.6rem;
    /* Hoppa över desktop-kompression — XL är "boomerzoom" för synskadade. */
    --table-cell-compressed-tight: var(--table-font-size);
    --table-cell-compressed-loose: var(--table-font-size);
    --table-header-compressed-tight: var(--table-header-font-size);
    --table-header-compressed-loose: var(--table-header-font-size);
    /* Form-control matchar XL för läsbarhet. */
    --form-font-size: 1.3rem;
    --form-padding-y: 0.6rem;
    --form-padding-x: 0.85rem;
    --form-min-height: 3.1rem;
    --form-control-size: 1.5rem;
}

:root.button-font-sm {
    --table-font-size: 0.8rem;
    --button-padding-y: 4px;
    --button-padding-x: 10px;
    --button-icon-size: 0.85rem;
    --button-icon-width: 16px;
}

:root.button-font-md {
    --button-font-size: 1.1rem;
    --button-padding-y: 6px;
    --button-padding-x: 14px;
    --button-icon-size: 0.95rem;
    --button-icon-width: 18px;
}

:root.button-font-lg {
    --button-font-size: 1.4rem;
    --button-font-size: 1rem;
    --button-padding-y: 10px;
    --button-padding-x: 18px;
    --button-icon-size: 1.05rem;
    --button-icon-width: 20px;
}

:root.button-font-xl {
    --button-font-size: 13px;
    --button-padding-y: 14px;
    --button-padding-x: 22px;
    --button-icon-size: 1.2rem;
    --button-icon-width: 22px;
}