/* ===========================================================================
   Virtual Leaders Guide design tokens.
   Sourced from the "Virtual Leaders Guide" Claude Design project's styles.css
   (projectId c79dcd66-8d26-45ac-ae9e-7c09add75d91) - see ADR-0034. Warm canvas
   neutrals + earth-toned multi-hue accents. Built for high outdoor contrast:
   body text >= 12:1, all accent-on-surface >= 4.5:1, white-on-accent buttons
   >= 4.5:1 in both themes. Event brand color is a separate channel
   (--vlg-event-*) so a council/event accent never collides with UI semantics -
   reserved for future per-event branding, not used by this ticket.

   Structure: every raw color/shadow value is defined exactly once, as a
   `-light`/`-dark` suffixed token. The theme-state blocks below (system
   preference, explicit data-theme) only ever *reassign* the active
   `--vlg-*` token to point at one of those two, one line each - never repeat
   the value itself. Semantic roles (--vlg-primary, --vlg-danger, ...) are
   pure aliases onto the active tokens, so they need no per-theme block at
   all; they track whatever the active token currently resolves to. *radius*
   doesn't change between themes and is defined once, unconditionally.
   =========================================================================== */

:root {
    /* --- neutrals (warm canvas): raw light/dark pairs --- */
    --vlg-canvas-light: oklch(0.972 0.008 85);
    --vlg-canvas-dark: oklch(0.185 0.010 70);
    --vlg-canvas-sunk-light: oklch(0.945 0.010 85);
    --vlg-canvas-sunk-dark: oklch(0.150 0.010 70);
    --vlg-surface-light: oklch(1 0 0);
    --vlg-surface-dark: oklch(0.235 0.011 70);
    --vlg-surface-raised-light: oklch(0.988 0.005 85);
    --vlg-surface-raised-dark: oklch(0.275 0.012 70);
    --vlg-ink-light: oklch(0.400 0.080 162);
    --vlg-ink-dark: oklch(0.955 0.008 85);
    --vlg-ink-muted-light: oklch(0.455 0.014 60);
    --vlg-ink-muted-dark: oklch(0.775 0.010 80);
    --vlg-ink-faint-light: oklch(0.545 0.012 60);
    --vlg-ink-faint-dark: oklch(0.625 0.010 80);
    --vlg-line-light: oklch(0.855 0.012 80);
    --vlg-line-dark: oklch(0.350 0.012 75);
    --vlg-line-strong-light: oklch(0.400 0.080 162);
    --vlg-line-strong-dark: oklch(0.955 0.008 85);

    /* --- accents: shared L 0.48 / C ~0.10 in light, hue does the work --- */
    --vlg-moss-light: oklch(0.480 0.100 130); /* primary - action, unlock, brand */
    --vlg-moss-dark: oklch(0.780 0.115 130);
    --vlg-pine-light: oklch(0.400 0.080 162); /* deep support - headers, dark panels */
    --vlg-pine-dark: oklch(0.740 0.090 162);
    --vlg-campfire-light: oklch(0.545 0.130 46); /* secondary - highlights, "now" markers */
    --vlg-campfire-dark: oklch(0.775 0.130 52);
    --vlg-dusk-light: oklch(0.480 0.095 242); /* links, info, map layer */
    --vlg-dusk-dark: oklch(0.780 0.095 242);
    --vlg-clay-light: oklch(0.500 0.150 28); /* error / destructive */
    --vlg-clay-dark: oklch(0.735 0.140 30);
    --vlg-amber-light: oklch(0.520 0.115 78); /* warning / schedule change */
    --vlg-amber-dark: oklch(0.830 0.120 82);

    --vlg-moss-tint-light: oklch(0.955 0.030 130);
    --vlg-moss-tint-dark: oklch(0.300 0.050 130);
    --vlg-campfire-tint-light: oklch(0.955 0.035 46);
    --vlg-campfire-tint-dark: oklch(0.300 0.055 46);
    --vlg-dusk-tint-light: oklch(0.955 0.028 242);
    --vlg-dusk-tint-dark: oklch(0.300 0.045 242);
    --vlg-clay-tint-light: oklch(0.955 0.038 28);
    --vlg-clay-tint-dark: oklch(0.300 0.060 28);
    --vlg-amber-tint-light: oklch(0.960 0.040 78);
    --vlg-amber-tint-dark: oklch(0.305 0.055 78);

    --vlg-on-primary-light: oklch(1 0 0);
    --vlg-on-primary-dark: oklch(0.185 0.010 70);
    --vlg-event-on-accent-light: oklch(1 0 0);
    --vlg-event-on-accent-dark: oklch(0.185 0.010 70);
    --vlg-focus-light: oklch(0.560 0.140 242);
    --vlg-focus-dark: oklch(0.800 0.120 242);
    --vlg-shadow-light: 0 1px 2px oklch(0.205 0.012 60 / .10), 0 2px 8px oklch(0.205 0.012 60 / .06);
    --vlg-shadow-dark: 0 1px 2px oklch(0 0 0 / .5), 0 2px 10px oklch(0 0 0 / .35);
    --vlg-shadow-hard-light: 3px 3px 0 oklch(0.205 0.012 60 / .14);
    --vlg-shadow-hard-dark: 3px 3px 0 oklch(0 0 0 / .45);

    /* --- theme-invariant --- */
    --vlg-radius: 6px;
    --vlg-radius-lg: 10px;

    /* --- active tokens: default to light; reassigned by the theme-state blocks below --- */
    --vlg-canvas: var(--vlg-canvas-light);
    --vlg-canvas-sunk: var(--vlg-canvas-sunk-light);
    --vlg-surface: var(--vlg-surface-light);
    --vlg-surface-raised: var(--vlg-surface-raised-light);
    --vlg-ink: var(--vlg-ink-light);
    --vlg-ink-muted: var(--vlg-ink-muted-light);
    --vlg-ink-faint: var(--vlg-ink-faint-light);
    --vlg-line: var(--vlg-line-light);
    --vlg-line-strong: var(--vlg-line-strong-light);
    --vlg-moss: var(--vlg-moss-light);
    --vlg-pine: var(--vlg-pine-light);
    --vlg-campfire: var(--vlg-campfire-light);
    --vlg-dusk: var(--vlg-dusk-light);
    --vlg-clay: var(--vlg-clay-light);
    --vlg-amber: var(--vlg-amber-light);
    --vlg-moss-tint: var(--vlg-moss-tint-light);
    --vlg-campfire-tint: var(--vlg-campfire-tint-light);
    --vlg-dusk-tint: var(--vlg-dusk-tint-light);
    --vlg-clay-tint: var(--vlg-clay-tint-light);
    --vlg-amber-tint: var(--vlg-amber-tint-light);
    --vlg-on-primary: var(--vlg-on-primary-light);
    --vlg-event-on-accent: var(--vlg-event-on-accent-light);
    --vlg-focus: var(--vlg-focus-light);
    --vlg-shadow: var(--vlg-shadow-light);
    --vlg-shadow-hard: var(--vlg-shadow-hard-light);

    /* --- semantic roles: pure aliases onto the active tokens above, no theme block needed --- */
    --vlg-primary: var(--vlg-moss);
    --vlg-accent: var(--vlg-campfire);
    --vlg-link: var(--vlg-dusk);
    --vlg-link-hover: var(--vlg-campfire);
    --vlg-danger: var(--vlg-clay);
    --vlg-warning: var(--vlg-amber);
    --vlg-success: var(--vlg-moss);
    --vlg-locked: var(--vlg-ink-faint);
    --vlg-event-accent: var(--vlg-moss);
}

@media (prefers-color-scheme: dark) {
    :root {
        --vlg-canvas: var(--vlg-canvas-dark);
        --vlg-canvas-sunk: var(--vlg-canvas-sunk-dark);
        --vlg-surface: var(--vlg-surface-dark);
        --vlg-surface-raised: var(--vlg-surface-raised-dark);
        --vlg-ink: var(--vlg-ink-dark);
        --vlg-ink-muted: var(--vlg-ink-muted-dark);
        --vlg-ink-faint: var(--vlg-ink-faint-dark);
        --vlg-line: var(--vlg-line-dark);
        --vlg-line-strong: var(--vlg-line-strong-dark);
        --vlg-moss: var(--vlg-moss-dark);
        --vlg-pine: var(--vlg-pine-dark);
        --vlg-campfire: var(--vlg-campfire-dark);
        --vlg-dusk: var(--vlg-dusk-dark);
        --vlg-clay: var(--vlg-clay-dark);
        --vlg-amber: var(--vlg-amber-dark);
        --vlg-moss-tint: var(--vlg-moss-tint-dark);
        --vlg-campfire-tint: var(--vlg-campfire-tint-dark);
        --vlg-dusk-tint: var(--vlg-dusk-tint-dark);
        --vlg-clay-tint: var(--vlg-clay-tint-dark);
        --vlg-amber-tint: var(--vlg-amber-tint-dark);
        --vlg-on-primary: var(--vlg-on-primary-dark);
        --vlg-event-on-accent: var(--vlg-event-on-accent-dark);
        --vlg-focus: var(--vlg-focus-dark);
        --vlg-shadow: var(--vlg-shadow-dark);
        --vlg-shadow-hard: var(--vlg-shadow-hard-dark);
    }
}

/* An explicit data-theme always wins over the system preference. Same reassignment list as the
   media block above/below, just pointed at the other raw-token suffix - the values themselves
   live only in the :root block above. */
[data-theme="dark"] {
    --vlg-canvas: var(--vlg-canvas-dark);
    --vlg-canvas-sunk: var(--vlg-canvas-sunk-dark);
    --vlg-surface: var(--vlg-surface-dark);
    --vlg-surface-raised: var(--vlg-surface-raised-dark);
    --vlg-ink: var(--vlg-ink-dark);
    --vlg-ink-muted: var(--vlg-ink-muted-dark);
    --vlg-ink-faint: var(--vlg-ink-faint-dark);
    --vlg-line: var(--vlg-line-dark);
    --vlg-line-strong: var(--vlg-line-strong-dark);
    --vlg-moss: var(--vlg-moss-dark);
    --vlg-pine: var(--vlg-pine-dark);
    --vlg-campfire: var(--vlg-campfire-dark);
    --vlg-dusk: var(--vlg-dusk-dark);
    --vlg-clay: var(--vlg-clay-dark);
    --vlg-amber: var(--vlg-amber-dark);
    --vlg-moss-tint: var(--vlg-moss-tint-dark);
    --vlg-campfire-tint: var(--vlg-campfire-tint-dark);
    --vlg-dusk-tint: var(--vlg-dusk-tint-dark);
    --vlg-clay-tint: var(--vlg-clay-tint-dark);
    --vlg-amber-tint: var(--vlg-amber-tint-dark);
    --vlg-on-primary: var(--vlg-on-primary-dark);
    --vlg-event-on-accent: var(--vlg-event-on-accent-dark);
    --vlg-focus: var(--vlg-focus-dark);
    --vlg-shadow: var(--vlg-shadow-dark);
    --vlg-shadow-hard: var(--vlg-shadow-hard-dark);
}

[data-theme="light"] {
    --vlg-canvas: var(--vlg-canvas-light);
    --vlg-canvas-sunk: var(--vlg-canvas-sunk-light);
    --vlg-surface: var(--vlg-surface-light);
    --vlg-surface-raised: var(--vlg-surface-raised-light);
    --vlg-ink: var(--vlg-ink-light);
    --vlg-ink-muted: var(--vlg-ink-muted-light);
    --vlg-ink-faint: var(--vlg-ink-faint-light);
    --vlg-line: var(--vlg-line-light);
    --vlg-line-strong: var(--vlg-line-strong-light);
    --vlg-moss: var(--vlg-moss-light);
    --vlg-pine: var(--vlg-pine-light);
    --vlg-campfire: var(--vlg-campfire-light);
    --vlg-dusk: var(--vlg-dusk-light);
    --vlg-clay: var(--vlg-clay-light);
    --vlg-amber: var(--vlg-amber-light);
    --vlg-moss-tint: var(--vlg-moss-tint-light);
    --vlg-campfire-tint: var(--vlg-campfire-tint-light);
    --vlg-dusk-tint: var(--vlg-dusk-tint-light);
    --vlg-clay-tint: var(--vlg-clay-tint-light);
    --vlg-amber-tint: var(--vlg-amber-tint-light);
    --vlg-on-primary: var(--vlg-on-primary-light);
    --vlg-event-on-accent: var(--vlg-event-on-accent-light);
    --vlg-focus: var(--vlg-focus-light);
    --vlg-shadow: var(--vlg-shadow-light);
    --vlg-shadow-hard: var(--vlg-shadow-hard-light);
}

/* ===========================================================================
   Theme toggle (SiteHeader.razor's #vlg-theme-toggle button, wwwroot/js/theme-toggle.js).
   The icon shown reflects the theme currently ACTIVE (click it to switch away from that theme) - mirrors
   the exact same 4-state cascade as the --vlg-* tokens above: default light, system-dark-with-no-override,
   explicit dark, explicit light.
   =========================================================================== */

.vlg-icon-moon {
    display: block;
}

.vlg-icon-sun {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .vlg-icon-moon {
        display: none;
    }

    :root:not([data-theme="light"]):not([data-theme="dark"]) .vlg-icon-sun {
        display: block;
    }
}

[data-theme="dark"] .vlg-icon-moon {
    display: none;
}

[data-theme="dark"] .vlg-icon-sun {
    display: block;
}

[data-theme="light"] .vlg-icon-moon {
    display: block;
}

[data-theme="light"] .vlg-icon-sun {
    display: none;
}

/* ===========================================================================
   Alias Radzen's `material` theme tokens onto --vlg-*, rather than hardcoding
   colors component-by-component (ADR-0034). -dark/-light/-lighter state
   variants (hover, pressed, tints) are independent hex values in Radzen's own
   stylesheet, not derived from the base token, so they're re-derived from the
   single --vlg-* hue via color-mix() to keep one source of truth per hue.
   =========================================================================== */

:root {
    --rz-base-background-color: var(--vlg-surface);
    --rz-body-background-color: var(--vlg-canvas);
    --rz-text-color: var(--vlg-ink);
    --rz-text-secondary-color: var(--vlg-ink-muted);
    --rz-text-title-color: var(--vlg-ink);
    --rz-text-contrast-color: var(--vlg-on-primary);

    --rz-primary: var(--vlg-moss);
    --rz-primary-dark: color-mix(in oklch, var(--vlg-moss), black 15%);
    --rz-primary-darker: color-mix(in oklch, var(--vlg-moss), black 30%);
    --rz-primary-light: color-mix(in oklch, var(--vlg-moss), white 25%);
    --rz-primary-lighter: var(--vlg-moss-tint);
    --rz-on-primary: var(--vlg-on-primary);

    --rz-danger: var(--vlg-clay);
    --rz-danger-dark: color-mix(in oklch, var(--vlg-clay), black 15%);
    --rz-danger-darker: color-mix(in oklch, var(--vlg-clay), black 30%);
    --rz-danger-light: color-mix(in oklch, var(--vlg-clay), white 25%);
    --rz-danger-lighter: var(--vlg-clay-tint);

    --rz-warning: var(--vlg-amber);
    --rz-warning-dark: color-mix(in oklch, var(--vlg-amber), black 15%);
    --rz-warning-darker: color-mix(in oklch, var(--vlg-amber), black 30%);
    --rz-warning-light: color-mix(in oklch, var(--vlg-amber), white 25%);
    --rz-warning-lighter: var(--vlg-amber-tint);

    --rz-success: var(--vlg-moss);
    --rz-success-dark: color-mix(in oklch, var(--vlg-moss), black 15%);
    --rz-success-darker: color-mix(in oklch, var(--vlg-moss), black 30%);
    --rz-success-light: color-mix(in oklch, var(--vlg-moss), white 25%);
    --rz-success-lighter: var(--vlg-moss-tint);

    --rz-link-color: var(--vlg-link);
    --rz-link-hover-color: var(--vlg-link-hover);

    --rz-border-radius: var(--vlg-radius);
    --rz-card-border-radius: var(--vlg-radius-lg);
    --rz-card-shadow: var(--vlg-shadow);
    --rz-card-border: 1px solid var(--vlg-line);

    --rz-outline-color: var(--vlg-focus);
}

/* ===========================================================================
   App-level rules.
   =========================================================================== */

html, body {
    font-family: var(--rz-text-font-family);
    font-size: var(--rz-body-font-size);
    line-height: var(--rz-body-line-height);
    color: var(--vlg-ink);
    background-color: var(--vlg-canvas);
}

h1:focus {
    outline: none;
}

.vlg-field {
    margin-block-end: 1rem;
}

    .vlg-field > label {
        display: block;
        margin-block-end: 0.25rem;
    }

    .vlg-field > input {
        width: 100%;
    }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--vlg-success);
}

.invalid {
    outline: 1px solid var(--vlg-danger);
}

.validation-message {
    color: var(--vlg-danger);
}

/* ===========================================================================
   Dashboard / Event editor (P2-9, #18). Layout/typography/status roles this
   block used to hand-roll (page headers, button rows, breadcrumbs, badges,
   notes) are Radzen components now (RadzenStack, RadzenBreadCrumb, RadzenBadge,
   RadzenText, RadzenAlert) - see ADR-0038. What's left here is display-only
   affixing (the slug field's "/e/" prefix) and a label/value pairing Radzen
   has no component for.
   =========================================================================== */

.vlg-slug-field {
    display: flex;
    align-items: stretch;
}

    .vlg-slug-field .vlg-slug-prefix {
        display: flex;
        align-items: center;
        padding-inline: 0.5rem;
        border: 1px solid var(--vlg-line);
        border-inline-end: none;
        border-start-start-radius: var(--vlg-radius);
        border-end-start-radius: var(--vlg-radius);
        background: var(--vlg-canvas-sunk);
        color: var(--vlg-ink-faint);
        font-size: 0.75rem;
    }

    .vlg-slug-field input {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
    }

.vlg-readonly-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-block: 0.5rem;
    border-block-end: 1px dashed var(--vlg-line);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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