/* ============================================================
   CASTLE RUSH – app.css
   Theme: Diablo Dark-Red  |  Font: Press Start 2P
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
    /* --- Backgrounds --- */
    --bg-void: #080608; /* Tiefster Hintergrund, fast schwarz */
    --bg-deep: #110a0a; /* Body-Hintergrund */
    --bg-panel: #1a0e0e; /* Panels, NavMenu, Cards */
    --bg-surface: #22120f; /* Dialoge, leicht heller */
    --bg-elevated: #2a1610; /* Hover-Flächen */
    /* --- Akzentfarben --- */
    --accent-blood: #8b1a1a; /* Primär-Akzent Blutrot */
    --accent-crimson: #c0392b; /* Helleres Rot für Highlights */
    --accent-ember: #e55039; /* Glut / aktive Elemente */
    --accent-gold: #c8960c; /* Gold für Borders & Icons */
    --accent-gold-bright: #f7b733; /* Gold für Glow-Effekte */
    --accent-fire: #ff6b35; /* Orange-Feuer für spezielle Highlights */
    /* --- Text --- */
    --text-primary: #e8d5b0; /* Pergament-Weiß */
    --text-secondary: #9e8c6e; /* Gedimmtes Pergament */
    --text-muted: #5c4f3a; /* Sehr gedimmt */
    --text-bright: #fff3d4; /* Für Titel */
    --text-disabled: #4a3a2a;
    /* --- Parchment (Dialoge) --- */
    --parchment-bg: #2e1f0f;
    --parchment-surface: #3d2a15;
    --parchment-border: #6b4c1e;
    --parchment-gold: #c8960c;
    --parchment-text: #e8d5b0;
    /* --- UI --- */
    --border-radius: 2px; /* Pixel-Art: eckig */
    --border-width: 2px;
    --border-style: solid;
    /* --- Font --- */
    --font-pixel: 'Press Start 2P', 'Courier New', monospace;
    --font-size-xs: 0.5rem;
    --font-size-sm: 0.6rem;
    --font-size-base: 0.7rem;
    --font-size-md: 0.75rem;
    /* --- Fluent UI Token Overrides --- */
    --neutral-fill-rest: var(--bg-panel);
    --neutral-fill-hover: var(--bg-elevated);
    --neutral-fill-active: var(--bg-surface);
    --neutral-stroke-rest: var(--accent-gold);
    --neutral-stroke-hover: var(--accent-gold-bright);
    --neutral-stroke-active: var(--accent-ember);
    --neutral-foreground-rest: var(--text-primary);
    --neutral-layer-1: var(--bg-panel);
    --neutral-layer-2: var(--bg-deep);
    --neutral-layer-3: var(--bg-deep);
    --neutral-layer-4: var(--bg-void);
    --neutral-fill-input-rest: var(--bg-deep);
    --neutral-fill-input-hover: var(--bg-deep);
    --neutral-fill-input-focus: var(--bg-deep);
}

/* ============================================================
   2. GLOBAL BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-deep);
    background-image: radial-gradient(ellipse at top left, rgba(139, 26, 26, 0.08) 0%, transparent 50%), radial-gradient(ellipse at bottom right, rgba(139, 26, 26, 0.05) 0%, transparent 50%);
    color: var(--text-primary);
    font-family: var(--font-pixel);
    font-size: var(--font-size-base);
    line-height: 1.8;
    margin: 0;
}

p, span, div, label, small {
    font-family: var(--font-pixel);
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

a {
    color: var(--accent-gold-bright);
    text-decoration: none;
}

    a:hover {
        color: var(--accent-ember);
        text-shadow: 0 0 6px var(--accent-ember);
    }

code {
    color: var(--accent-ember);
    font-family: var(--font-pixel);
}

/* ============================================================
   3. FLUENT HEADER  →  dunkel, kein helles Blau
   ============================================================ */
fluent-header,
.fluent-header,
header {
    background-color: var(--bg-void) !important;
    background: var(--bg-void) !important;
    border-bottom: 2px solid var(--accent-blood) !important;
    box-shadow: 0 2px 12px rgba(139, 26, 26, 0.5) !important;
    color: var(--text-bright) !important;
    font-family: var(--font-pixel) !important;
    font-size: var(--font-size-md) !important;
    letter-spacing: 0.08em;
}

    fluent-header *,
    header * {
        color: var(--text-bright) !important;
        font-family: var(--font-pixel) !important;
    }

/* ============================================================
   4. LAYOUT
   ============================================================ */
.main {
    min-height: calc(100dvh - 86px);
    color: var(--text-primary);
    align-items: stretch !important;
}

.body-content {
    align-self: stretch;
    height: calc(100dvh - 86px) !important;
    display: flex;
    background-color: var(--bg-deep);
}

.content {
    padding: 0.75rem 1.5rem;
    align-self: stretch !important;
    width: 100%;
}

.manage {
    width: 100dvw;
}

/* ============================================================
   5. NAV MENU  (Klassen aus dem gerenderten HTML)
   ============================================================ */
.navmenu {
    background-color: var(--bg-panel);
    border-right: 2px solid var(--accent-blood);
    box-shadow: 2px 0 16px rgba(139, 26, 26, 0.35);
}

/* Haupt-Container */
.fluent-nav-menu {
    background-color: var(--bg-panel) !important;
    height: 100%;
}

/* Alle Kinder auf dunkel setzen */
.fluent-nav-item,
.fluent-nav-item a,
.fluent-nav-item span,
.fluent-nav-item .positioning-region,
.fluent-nav-item .content-region,
.fluent-nav-item .fluent-nav-link {
    background-color: var(--bg-panel) !important;
    background: var(--bg-panel) !important;
}

/* Jedes Nav-Item */
.fluent-nav-item {
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
    border-top: 1px solid rgba(139, 26, 26, 0.2);
}

    /* Expander (Hamburger) */
    .fluent-nav-item.expander {
        border-bottom: 2px solid var(--accent-blood);
        border-top: none;
        margin-bottom: 4px;
    }

        .fluent-nav-item.expander,
        .fluent-nav-item.expander .positioning-region,
        .fluent-nav-item.expander .content-region {
            background-color: var(--bg-panel) !important;
        }

            .fluent-nav-item.expander:hover {
                background-color: var(--bg-elevated) !important;
                box-shadow: 0 0 10px rgba(192, 57, 43, 0.3);
            }

            .fluent-nav-item.expander svg {
                fill: var(--accent-gold) !important;
            }

    /* Hover-State */
    .fluent-nav-item:hover,
    .fluent-nav-item:hover a,
    .fluent-nav-item:hover .positioning-region,
    .fluent-nav-item:hover .content-region,
    .fluent-nav-item:hover .fluent-nav-link {
        background-color: var(--bg-elevated) !important;
        background: var(--bg-elevated) !important;
    }

    .fluent-nav-item:hover {
        border-left-color: var(--accent-crimson);
        box-shadow: inset 3px 0 8px rgba(192, 57, 43, 0.2);
    }

        .fluent-nav-item:hover .fluent-nav-text,
        .fluent-nav-item:hover .fluent-nav-link {
            color: var(--accent-gold-bright) !important;
            text-shadow: 0 0 8px rgba(247, 183, 51, 0.5);
        }

    /* Aktiver Link */
    .fluent-nav-link.active,
    .fluent-nav-item:has(a[aria-current]) {
        border-left-color: var(--accent-ember) !important;
        background-color: rgba(139, 26, 26, 0.2) !important;
    }

/* Nav-Link Text */
.fluent-nav-link {
    color: var(--text-secondary) !important;
    text-decoration: none;
    display: flex;
    width: 100%;
    font-family: var(--font-pixel) !important;
    font-size: var(--font-size-sm) !important;
    letter-spacing: 0.04em;
}

.fluent-nav-text {
    color: var(--text-secondary);
    font-family: var(--font-pixel) !important;
    font-size: var(--font-size-sm) !important;
    letter-spacing: 0.04em;
    transition: color 0.15s ease;
}

/* Icons */
.fluent-nav-icon {
    fill: var(--accent-gold) !important;
    margin-right: 10px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 3px rgba(200, 150, 12, 0.4));
}

/* Layout-Regionen */
.positioning-region {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    width: 100%;
}

.content-region {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* Focus-Outline entfernen */
.fluent-nav-item *:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ============================================================
   6. FLUENT SWITCH
   ============================================================ */
fluent-switch {
    background: transparent !important;
    --neutral-foreground-rest: var(--text-secondary) !important;
    font-family: var(--font-pixel) !important;
    font-size: var(--font-size-xs) !important;
}

/* ============================================================
   7. BUTTONS  →  dunkel + Gold-Rand + Glow
   ============================================================ */
fluent-button,
fluent-button::part(control) {
    font-family: var(--font-pixel) !important;
    font-size: var(--font-size-sm) !important;
    letter-spacing: 0.06em;
    border-radius: var(--border-radius) !important;
}

fluent-button {
    --neutral-fill-rest: var(--bg-panel);
    --neutral-fill-hover: var(--bg-elevated);
    --neutral-fill-active: var(--bg-surface);
    background-color: var(--bg-panel);
    border: 2px solid var(--accent-gold) !important;
    color: var(--text-primary);
    transition: all 0.15s ease-in-out;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.4);
    text-transform: uppercase;
}

    fluent-button:hover {
        background-color: var(--bg-elevated);
        border-color: var(--accent-gold-bright) !important;
        box-shadow: 0 0 8px var(--accent-gold), 0 0 20px rgba(247, 183, 51, 0.3), inset 0 -2px 0 rgba(0,0,0,0.4);
        transform: translateY(-1px);
        color: var(--text-bright);
    }

    fluent-button:active {
        transform: translateY(1px);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    }

    /* Accent-Buttons (z.B. "Equip and use") */
    fluent-button[appearance="accent"] {
        background-color: var(--accent-blood) !important;
        border-color: var(--accent-crimson) !important;
        color: var(--text-bright) !important;
        box-shadow: inset 0 -2px 0 rgba(0,0,0,0.4), 0 0 6px rgba(139, 26, 26, 0.5);
    }

        fluent-button[appearance="accent"]:hover {
            background-color: var(--accent-crimson) !important;
            border-color: var(--accent-ember) !important;
            box-shadow: 0 0 10px var(--accent-crimson), 0 0 24px rgba(192, 57, 43, 0.4), inset 0 -2px 0 rgba(0,0,0,0.4);
            color: #fff !important;
        }

    /* Neutral-Buttons (z.B. "Cancel") */
    fluent-button[appearance="neutral"] {
        background-color: transparent !important;
        border-color: var(--text-muted) !important;
        color: var(--text-secondary) !important;
        box-shadow: none;
    }

        fluent-button[appearance="neutral"]:hover {
            border-color: var(--accent-gold) !important;
            background-color: rgba(200, 150, 12, 0.1) !important;
            color: var(--accent-gold-bright) !important;
            box-shadow: 0 0 8px rgba(247, 183, 51, 0.2);
        }

    /* Lightweight */
    fluent-button[appearance="lightweight"] {
        border: none !important;
        background: transparent !important;
        color: var(--accent-gold-bright) !important;
        box-shadow: none;
        transform: none;
    }

        fluent-button[appearance="lightweight"]:hover {
            color: var(--accent-ember) !important;
            text-shadow: 0 0 6px var(--accent-ember);
            transform: none;
            box-shadow: none;
        }

    /* Disabled */
    fluent-button[disabled],
    fluent-button[disabled]:hover {
        background-color: var(--bg-panel) !important;
        border-color: var(--text-disabled) !important;
        color: var(--text-disabled) !important;
        box-shadow: none !important;
        transform: none !important;
        cursor: not-allowed;
        opacity: 0.5;
    }

/* ============================================================
   8. DIALOGE  →  Pergament / Scroll Look
   ============================================================ */

/* Backdrop */
fluent-dialog::part(overlay) {
    background-color: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(3px);
}

/* Dialog-Rahmen */
fluent-dialog::part(dialog) {
    background: var(--parchment-bg);
    background-image: radial-gradient(ellipse at top, rgba(200, 150, 12, 0.06) 0%, transparent 60%), radial-gradient(ellipse at bottom, rgba(100, 50, 10, 0.12) 0%, transparent 60%);
    border: 2px solid var(--parchment-border);
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(200, 150, 12, 0.15), 0 16px 48px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(200, 150, 12, 0.1);
    color: var(--parchment-text);
}

fluent-dialog::part(control) {
    background: var(--parchment-bg);
    color: var(--parchment-text);
}

/* Header */
fluent-dialog .fluent-dialog-header,
.fluent-dialog-header {
    background: linear-gradient(180deg, var(--parchment-surface) 0%, var(--parchment-bg) 100%);
    border-bottom: 2px solid var(--parchment-border);
    color: var(--accent-gold-bright) !important;
    font-family: var(--font-pixel) !important;
    font-size: var(--font-size-md) !important;
    letter-spacing: 0.06em;
    padding: 12px 16px;
    text-shadow: 0 0 12px rgba(247, 183, 51, 0.4);
}

    fluent-dialog .fluent-dialog-header *,
    .fluent-dialog-header * {
        color: var(--accent-gold-bright) !important;
        font-family: var(--font-pixel) !important;
    }

/* Body */
fluent-dialog .fluent-dialog-body,
.fluent-dialog-body {
    background: var(--parchment-bg);
    color: var(--parchment-text) !important;
    font-family: var(--font-pixel) !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.9;
    padding: 16px;
}

    fluent-dialog .fluent-dialog-body p,
    fluent-dialog .fluent-dialog-body span,
    fluent-dialog .fluent-dialog-body div {
        color: var(--parchment-text);
        font-family: var(--font-pixel) !important;
        font-size: var(--font-size-base) !important;
    }

/* Footer */
fluent-dialog .fluent-dialog-footer,
.fluent-dialog-footer {
    background: linear-gradient(0deg, var(--parchment-surface) 0%, var(--parchment-bg) 100%);
    border-top: 2px solid var(--parchment-border);
    padding: 12px 16px;
}

/* Dismiss (X) Button im Dialog */
fluent-dialog fluent-button[slot="dismiss"] {
    border-color: var(--parchment-border) !important;
    color: var(--text-secondary) !important;
}

/* ============================================================
   9. CARDS & PANELS
   ============================================================ */
fluent-card {
    background-color: var(--bg-panel);
    border: 2px solid rgba(139, 26, 26, 0.5);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    fluent-card:hover {
        border-color: var(--accent-blood);
        box-shadow: 0 0 16px rgba(139, 26, 26, 0.3), 0 4px 12px rgba(0,0,0,0.5);
    }

/* ============================================================
   10. TEXT FELDER
   ============================================================ */
fluent-text-field,
fluent-text-area {
    --neutral-fill-input-rest: var(--bg-deep);
    --neutral-fill-input-hover: var(--bg-deep);
    --neutral-fill-input-focus: var(--bg-deep);
    --neutral-foreground-rest: var(--text-primary);
    --neutral-stroke-rest: var(--accent-gold);
    --neutral-stroke-hover: var(--accent-gold-bright);
    --neutral-stroke-focus: var(--accent-ember);
    border-radius: var(--border-radius);
    font-family: var(--font-pixel) !important;
    font-size: var(--font-size-base) !important;
}

    fluent-text-field::part(control),
    fluent-text-area::part(control) {
        font-family: var(--font-pixel) !important;
        font-size: var(--font-size-base) !important;
        background-color: var(--bg-deep) !important;
        color: var(--text-primary) !important;
    }

/* ============================================================
   11. ACCORDION
   ============================================================ */
fluent-accordion-item {
    --neutral-stroke-divider-rest: rgba(139, 26, 26, 0.4);
    margin-bottom: 5px;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    background-color: var(--bg-panel);
    transition: all 0.2s ease;
}

    fluent-accordion-item:hover {
        border-color: var(--accent-blood);
        box-shadow: 0 0 10px rgba(139, 26, 26, 0.3);
    }

    fluent-accordion-item::part(heading) {
        color: var(--text-primary);
        font-family: var(--font-pixel) !important;
        padding: 10px;
    }

    fluent-accordion-item::part(region) {
        background-color: var(--bg-deep);
        padding: 15px;
        color: var(--text-primary);
    }

/* ============================================================
   12. TYPOGRAPHY
   ============================================================ */
fluent-label,
fluent-h1, fluent-h2, fluent-h3, fluent-h4, fluent-h5, fluent-h6,
.fluent-typography-body,
.fluent-typography-body-strong,
.fluent-typography-caption {
    color: var(--text-primary) !important;
    font-family: var(--font-pixel) !important;
}

    fluent-label.fluent-typography-pane-header {
        color: var(--accent-gold-bright) !important;
        font-family: var(--font-pixel) !important;
        text-shadow: 0 0 10px rgba(247, 183, 51, 0.4);
    }

/* ============================================================
   13. GAME-SPEZIFISCHE KLASSEN
   ============================================================ */

/* Spielfeld */
.game-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.game-area {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 100%;
    border: 2px solid var(--accent-blood);
    box-shadow: 0 0 20px rgba(139, 26, 26, 0.4);
}

/* Spinner */
.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 1000;
}

/* Gamepad Grid */
.gamepad-grid {
    display: grid;
    grid-template-columns: 45px 45px 45px;
    grid-template-rows: 45px 45px 45px;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

    .gamepad-grid > * {
        width: 45px;
        height: 45px;
    }

/* Card mit Icon-Positionen */
.card-with-icon {
    position: relative;
}

.top-right-icon {
    position: absolute;
    top: 8px;
    right: 8px;
}

.top-left-icon {
    position: absolute;
    top: 8px;
    left: 8px;
}

/* Pixel-Art Bilder */
.pixel {
    image-rendering: pixelated;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    border: 2px solid transparent;
}

.pixel-perfect {
    image-rendering: pixelated;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    border: 2px solid transparent;
}

    .pixel-perfect:hover {
        border-color: var(--accent-gold);
        box-shadow: 0 0 10px var(--accent-gold);
    }

    .pixel-perfect:active {
        transform: scale(0.9);
    }

/* Item-Float-Image (in Dialogen) */
.item-float-image {
    float: right;
    margin-left: 12px;
    margin-bottom: 8px;
    image-rendering: pixelated;
    border: 2px solid var(--parchment-border);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .item-float-image:hover {
        border-color: var(--accent-gold);
        box-shadow: 0 0 12px rgba(200, 150, 12, 0.5);
    }

/* Beschreibung-Container */
.description-with-image {
    overflow: hidden;
    color: var(--parchment-text) !important;
    font-family: var(--font-pixel) !important;
    font-size: var(--font-size-base) !important;
    line-height: 2;
}

/* Preis-Anzeige */
.price-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    color: var(--accent-gold-bright);
    font-family: var(--font-pixel) !important;
    font-size: var(--font-size-sm) !important;
}

/* Health Bar */
.health-bar {
    width: 140px;
    height: 18px;
    background-color: #2a0000;
    border: 2px solid var(--accent-blood);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 6px rgba(139, 26, 26, 0.5);
}

.health-bar-fill {
    background: linear-gradient(90deg, #8b0000, #c0392b, #e74c3c);
    height: 100%;
    transition: width 0.3s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.health-bar-text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: white;
    font-family: var(--font-pixel) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* ============================================================
   14. ANIMATIONEN
   ============================================================ */
.fade-out-star {
    animation: fadeOut 2s forwards;
    animation-delay: 5s;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* ============================================================
   15. FOOTER
   ============================================================ */
footer {
    background: var(--bg-void);
    color: var(--text-secondary);
    border-top: 1px solid rgba(139, 26, 26, 0.3);
    padding: 10px;
    font-family: var(--font-pixel) !important;
    font-size: var(--font-size-xs) !important;
}

    footer a {
        color: var(--text-secondary);
        text-decoration: none;
    }

        footer a:hover {
            color: var(--accent-gold-bright);
            text-shadow: 0 0 6px var(--accent-gold);
        }

/* ============================================================
   16. BLAZOR ERROR / LOADING
   ============================================================ */
#blazor-error-ui {
    background: #2a0505;
    border-top: 2px solid var(--accent-crimson);
    color: var(--text-primary);
    bottom: 0;
    box-shadow: 0 -2px 12px rgba(192, 57, 43, 0.4);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: var(--font-pixel) !important;
    font-size: var(--font-size-sm) !important;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #2a0505;
    border: 2px solid var(--accent-crimson);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--text-primary);
    font-family: var(--font-pixel) !important;
}

    .blazor-error-boundary::before {
        content: "An error has occurred. ";
    }

/* Loading Progress */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--bg-panel);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--accent-blood);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
            filter: drop-shadow(0 0 4px var(--accent-crimson));
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    font-family: var(--font-pixel) !important;
    font-size: var(--font-size-xs) !important;
    color: var(--text-primary);
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* ============================================================
   17. MISC / UTILITIES
   ============================================================ */
.alert {
    border: 1px solid var(--accent-blood);
    background: rgba(139, 26, 26, 0.15);
    padding: 8px 12px;
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-family: var(--font-pixel) !important;
    font-size: var(--font-size-sm) !important;
}

.navmenu-icon {
    display: none;
}

/* ============================================================
   18. RESPONSIVE (Mobile)
   ============================================================ */
@media (max-width: 600px) {
    .header-gutters {
        margin: 0.5rem 3rem 0.5rem 1.5rem !important;
    }

    [dir="rtl"] .header-gutters {
        margin: 0.5rem 1.5rem 0.5rem 3rem !important;
    }

    .main {
        flex-direction: column !important;
        row-gap: 0 !important;
    }

    nav.sitenav {
        width: 100%;
        height: 100%;
    }

    #main-menu {
        width: 100% !important;
    }

        #main-menu > div:first-child:is(.expander) {
            display: none;
        }

    .navmenu {
        width: 100%;
    }

    #navmenu-toggle {
        appearance: none;
    }

        #navmenu-toggle ~ nav {
            display: none;
        }

        #navmenu-toggle:checked ~ nav {
            display: block;
        }

    .navmenu-icon {
        cursor: pointer;
        z-index: 10;
        display: block;
        position: absolute;
        top: 15px;
        left: unset;
        right: 20px;
        width: 20px;
        height: 20px;
        border: none;
    }

    [dir="rtl"] .navmenu-icon {
        left: 20px;
        right: unset;
    }

    .fluent-nav-text {
        font-size: var(--font-size-xs) !important;
    }
}