html, body {
    font-family: var(--ps-font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif);
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Calendar Scheduler - increase height */
.rz-scheduler {
    height: 550px !important;
}

/* ============================================ */
/* Faster spinners for better UX impression    */
/* ============================================ */

/* Radzen circular progress bar - faster spin */
.rz-progressbar-circular svg {
    animation: rz-progressbar-circular-spin 0.6s linear infinite !important;
}

/* Bootstrap spinners - faster */
.spinner-border {
    --bs-spinner-animation-speed: 0.5s !important;
    animation-duration: 0.5s !important;
}

.spinner-grow {
    --bs-spinner-animation-speed: 0.5s !important;
    animation-duration: 0.5s !important;
}

/* Generic loading spinner class - if used */
.loading-spinner svg,
.loading-indicator svg {
    animation-duration: 0.6s !important;
}

/* ============================================ */
/* Fix: RadzenPanelMenu styling issues */
/* Universal fix for ALL submenu items */
/* ============================================ */

/* ALL icons inside submenu children - dark readable color */
.rz-panel-menu-item-children .rzi,
.rz-panel-menu-item-children .material-icons,
.rz-panel-menu-item-children i {
    color: var(--theme-navmenu-text, #374151) !important;
    opacity: 1 !important;
}

/* ALL text inside submenu children - dark readable color */
.rz-panel-menu-item-children .rz-panel-menu-item-text,
.rz-panel-menu-item-children span {
    color: var(--theme-navmenu-text, #374151) !important;
}

/* ACTIVE submenu items - theme background */
.rz-panel-menu-item-children .rz-panel-menu-item.rz-state-active,
.rz-panel-menu-item-children .rz-panel-menu-item[aria-current="page"],
.rz-panel-menu-item-children .rz-panel-menu-item.rz-state-selected {
    background-color: var(--theme-navmenu-active, var(--rz-primary, #7c3aed)) !important;
    border-radius: 4px;
}

/* ACTIVE submenu - ALL child elements must be white */
.rz-panel-menu-item-children .rz-panel-menu-item.rz-state-active *,
.rz-panel-menu-item-children .rz-panel-menu-item[aria-current="page"] *,
.rz-panel-menu-item-children .rz-panel-menu-item.rz-state-selected * {
    color: #ffffff !important;
}

/* Hover state for submenu items */
.rz-panel-menu-item-children .rz-panel-menu-item:hover:not(.rz-state-active):not([aria-current="page"]):not(.rz-state-selected) {
    background-color: var(--theme-navmenu-hover, #e0e7ff) !important;
}

/* Submenu flyout/accordion surface must follow the theme navmenu background.
   Radzen paints it a fixed light surface by default → unreadable in dark themes.
   Global (not .nav-sidebar-scoped) so it also covers popup-rendered submenus. */
.rz-panel-menu-item-children {
    background-color: var(--theme-navmenu-bg, #ffffff) !important;
}

/* ------------------------------------------------------------------
   iOS/iPad icon+label button alignment.
   ROOT CAUSE (confirmed on-device + web research — known WebKit bug, repro'd in
   MUI/material-components-web/Radzen; Android/Blink fine): the Material-Icons
   WEBFONT (.rzi glyph) has font metrics WebKit lays out with different line-box
   leading than Blink, so the label drifts next to it. CSS CANNOT fix it reliably
   — line-height, vertical-align, flex-centering the glyph box all FAILED on a real
   RadzenButton on-device. THE FIX is to render the icon as an inline <svg> instead
   of the font glyph → see the <AppButton> component (.app-button* styles below) and
   Components/Reusable/AppButton.razor + AppIconData.cs. Convert RadzenButton →
   AppButton page by page; the icon font is the problem, so no CSS rule fixes it.
   Custom marketing buttons (Home .hero-btn, Login .social-btn) already use the same
   inline-<svg> + <button> + <span> recipe.
   ------------------------------------------------------------------ */

/* ==================================================================
   AppButton — drop-in RadzenButton replacement that renders the icon as
   inline <svg> (the proven iOS-safe recipe). Colors map to the active
   Radzen theme tokens so it looks identical to a RadzenButton.
   ================================================================== */
.app-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
    border: none;
    border-radius: var(--rz-button-border-radius, var(--ps-radius-md, 8px));
    /* Branded display font (Plus Jakarta Sans) with native fallbacks that look
       crisp on both platforms before the webfont loads: -apple-system on iOS,
       Roboto on Android. */
    font-family: var(--ps-font-display, "Plus Jakarta Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
    /* Smoother glyph edges on iOS (WebKit) and macOS retina */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.2s var(--ps-ease, ease), box-shadow 0.2s var(--ps-ease, ease), transform 0.2s var(--ps-ease, ease);
}

.app-button:not(:disabled):hover { transform: translateY(-1px); }
.app-button:not(:disabled):active { transform: translateY(0); }
.app-button:disabled { opacity: 0.6; cursor: not-allowed; }

/* The inline-SVG icon — sizes with the button, never drifts on iOS */
.app-button-icon { flex-shrink: 0; width: 1.25em; height: 1.25em; display: block; }

/* Safety net for the font fallback. When an icon name isn't in AppIconData,
   AppButton renders <RadzenIcon> (the Material Icons webfont). If that glyph
   ligature fails to resolve, the browser shows the LITERAL name (e.g.
   "miscellaneous_services") — long, unconstrained text that balloons to giant
   size and overflows across the button (seen on the Spotlight category chips).
   Constrain the fallback glyph so a missing icon degrades to a small clipped
   box, never a layout explosion. The real fix is still to add the SVG to
   AppIconData; this just bounds the blast radius. */
.app-button .rzi {
    flex-shrink: 0;
    font-size: 1.25em;
    line-height: 1;
    width: 1.25em;
    max-width: 1.5em;
    overflow: hidden;
}
.app-button-text { line-height: 1; }
/* Standalone inline-SVG icon (AppIcon) — sizes to the current font-size like a glyph */
.app-icon { flex-shrink: 0; width: 1em; height: 1em; display: inline-block; vertical-align: middle; }
/* fallback font glyph (icon not yet in AppIconData) keeps reasonable size */
.app-button .rzi { flex-shrink: 0; line-height: 1; }

/* Sizes — match Radzen's button heights/padding */
.app-button-xs { min-height: 1.75rem; padding: 0 0.5rem; font-size: 0.75rem; }
.app-button-sm { min-height: 2.25rem; padding: 0 0.75rem; font-size: 0.8125rem; }
.app-button-md { min-height: 2.5rem; padding: 0 1rem; font-size: 0.875rem; }
.app-button-lg { min-height: 3rem; padding: 0 1.5rem; font-size: 1rem; }

.app-button-icon-only.app-button-xs { padding: 0; width: 1.75rem; }
.app-button-icon-only.app-button-sm { padding: 0; width: 2.25rem; }
.app-button-icon-only.app-button-md { padding: 0; width: 2.5rem; }
.app-button-icon-only.app-button-lg { padding: 0; width: 3rem; }

/* Colors — each style sets a RAW theme color (--app-raw) + contrast text (--app-on).
   --app-c is the EFFECTIVE color (raw by default; Shade classes recolor it). Variants
   consume --app-c. This raw→effective split keeps Shade non-circular. */
.app-button { --app-c: var(--app-raw); }
.app-button-primary   { --app-raw: var(--rz-primary);   --app-on: var(--rz-on-primary, #fff); }
.app-button-secondary { --app-raw: var(--rz-secondary); --app-on: var(--rz-on-secondary, #fff); }
.app-button-success   { --app-raw: var(--rz-success);   --app-on: var(--rz-on-success, #fff); }
.app-button-danger    { --app-raw: var(--rz-danger);    --app-on: var(--rz-on-danger, #fff); }
.app-button-warning   { --app-raw: var(--rz-warning);   --app-on: var(--rz-on-warning, #fff); }
.app-button-info      { --app-raw: var(--rz-info);      --app-on: var(--rz-on-info, #fff); }
.app-button-light,
.app-button-base      { --app-raw: var(--rz-base-200);  --app-on: var(--rz-text-color, #1f2937); }
.app-button-dark      { --app-raw: var(--rz-base-900);  --app-on: var(--rz-text-contrast-color, #fff); }

/* Shade — recolor the effective color (mirrors Radzen Shade.Light/Lighter/Dark/Darker) */
.app-button-shade-light   { --app-c: color-mix(in srgb, var(--app-raw) 75%, white); }
.app-button-shade-lighter { --app-c: color-mix(in srgb, var(--app-raw) 55%, white); }
.app-button-shade-dark    { --app-c: color-mix(in srgb, var(--app-raw) 80%, black); }
.app-button-shade-darker  { --app-c: color-mix(in srgb, var(--app-raw) 65%, black); }

/* Variants — Filled/Flat solid; Outlined hairline; Text bare */
.app-button-filled {
    background: var(--app-c);
    color: var(--app-on);
}
.app-button-outlined {
    background: transparent;
    color: var(--app-c);
    border: 1px solid var(--app-c);
}
.app-button-text-variant {
    background: transparent;
    color: var(--app-c);
}
/* subtle wash on hover for the borderless variants (like Radzen) */
.app-button-outlined:not(:disabled):hover,
.app-button-text-variant:not(:disabled):hover {
    background: color-mix(in srgb, var(--app-c) 10%, transparent);
}

/* Light/Base + Outlined fix.
   The outlined variant paints BOTH text and border with --app-c, and for the
   Light/Base styles --app-c is --rz-base-200 (a very pale gray). On a light card
   that renders as pale-gray text + pale-gray border — the buttons look DISABLED,
   and the inline-SVG icon (currentColor) nearly vanishes. This combo is used for
   the unselected "chip" in toggle groups (e.g. Spotlight Category / Image Style,
   Hero Slide, etc.). Give them readable dark text (also fixes the icon) and a
   visible-but-soft border, while leaving genuinely disabled buttons dimmed via
   the separate opacity:0.6 rule. */
.app-button-light.app-button-outlined,
.app-button-base.app-button-outlined {
    color: var(--rz-text-color, #1f2937);
    border-color: color-mix(in srgb, var(--rz-base-200) 50%, #94a3b8);
}
.app-button-light.app-button-outlined:not(:disabled):hover,
.app-button-base.app-button-outlined:not(:disabled):hover {
    background: color-mix(in srgb, var(--rz-base-200) 60%, transparent);
}

/* Hero "Back" pill (HeroBackLink component).
   A compact glass pill meant to sit as the top row of a page hero. The fill is
   translucent WHITE so it reads on any province-themed hero color (unlike a solid
   amber, which would vanish on warm/amber themes); the hover swaps to the signature
   amber gradient, echoing the hardcoded-amber .hero-icon-badge. Specificity
   (.hero-back-pill.app-button = 0,2,0) beats the base variant rules without
   !important. Overrides the app-button-md/sm size box so it's a tight pill. */
.hero-back-pill.app-button {
    min-height: 0;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    position: relative;
    z-index: 1;
}
.hero-back-pill.app-button:not(:disabled):hover {
    color: #ffffff;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-color: rgba(251, 191, 36, 0.55);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    transform: translateY(-1px);
}
.hero-back-pill.app-button .app-button-icon {
    width: 1.05em;
    height: 1.05em;
}

