#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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;
}

:root {
    /* PaMILA brand palette - single source of truth for the site's colours.
       Loaded on every page (see PaMILABlazorModule.cs), so these variables are
       safe to reference from any other stylesheet or inline style in the app.

       The three base colours are sampled from the 2026 logo SVG, so the UI
       chrome matches the artwork exactly:
         primary   #121241 - navy wordmark
         secondary #430548 - purple block (bottom left of the logo)
         accent    #005489 - blue block (top left of the logo)
       Everything below is derived from those three.

       Note the logo artwork also uses #171143 for the strapline, a fractionally
       different navy; --pm-brand-primary follows the main wordmark. */
    --pm-brand-primary: #121241;
    --pm-brand-secondary: #430548;
    --pm-brand-accent: #005489;

    /* Derived interaction states.
       -hover is a lighter step for use on light surfaces (buttons on white).
       -soft is a translucent purple for use on the dark sidebar, where a
       lighter step would make hover louder than the solid selected row. */
    --pm-brand-secondary-hover: #5c0a63;
    --pm-brand-secondary-soft: rgba(67, 5, 72, 0.55);
    --pm-brand-accent-hover: #026aab;

    /* Full wordmark for the expanded sidebar; square PM mark for the collapsed
       72px rail, which LeptonX swaps to via --lpx-logo-icon. The mark is the
       same artwork as the favicon. */
    --lpx-logo: url('/assets/img/pm-logo-2026-white.svg') !important;
    --lpx-logo-icon: url('/assets/img/pm-logo-2026-mark.png') !important;
    /* LeptonX Theme Color Overrides */
    /* Background Colors */
    --lpx-color-bg-primary: #ffffff; /* Main background */
    --lpx-color-bg-secondary: #f8f9fa; /* Secondary background */
    --lpx-color-bg-tertiary: #e9ecef; /* Tertiary background */
    /* Sidebar Colors */
    --lpx-sidebar-bg: var(--pm-brand-primary) !important; /* Sidebar background */
    --lpx-sidebar-color: #ffffff !important; /* Sidebar text color */
    --lpx-sidebar-link-color: #ffffff !important; /* Sidebar link color */
    --lpx-sidebar-link-hover-bg: var(--pm-brand-secondary-hover) !important; /* Sidebar link hover background */
    --lpx-sidebar-link-active-bg: #28363c !important; /* Sidebar active link background */
    /* Navigation Colors */
    --lpx-navbar-bg: var(--pm-brand-primary) !important; /* Top navbar background */
    --lpx-navbar-color: var(--pm-brand-primary) !important; /* Top navbar text color */
    --lpx-navbar-text-color: #ffffff !important;
    --lpx-navbar-active-text-color: #ffffff !important;
    --lpx-navbar-brand-color: #212529; /* Brand/logo color */
    /* Content Area */
    --lpx-content-bg: #ffffff !important; /* Main content background */
    --lpx-content-color: #212529 !important; /* Main content text color */
    --lpx-navbar-active-text-color: #ffffff !important;
    --lpx-navbar-active-text-color-rgb: var(--pm-brand-secondary) !important;
    --lpx-navbar-active-bg-color: var(--pm-brand-secondary) !important;
    /* Footer */
    --lpx-footer-bg: #f8f9fa; /* Footer background */
    --lpx-footer-color: #6c757d; /* Footer text color */

    /* Radzen palette. Radzen ships --rz-primary: #ff6d41 (orange), which is what
       the unstyled Add/Save buttons were picking up. Repointing the variable
       here recolours every Radzen "primary" control at once, so individual
       buttons never need an inline background. The dark/darker steps are
       derived from the secondary for pressed and focus states. */
    --rz-primary: var(--pm-brand-secondary) !important;
    --rz-primary-light: var(--pm-brand-secondary-hover) !important;
    --rz-primary-lighter: rgba(67, 5, 72, 0.16) !important;
    --rz-primary-dark: #310435 !important;
    --rz-primary-darker: #230326 !important;
    --rz-on-primary: #ffffff !important;
}

    :root .abp-account-layout .lpx-brand-logo {
        --lpx-logo: url('/assets/img/pm-logo-2026-white.svg');
    }

    :root .lpx-theme-light .lpx-login-bg {
        background-color: var(--pm-brand-primary) !important;
        background-image: none !important;
    }

/* ---------------------------------------------------------------------------
   Sidebar header layout.

   The 2026 logo is a stacked wordmark (roughly 2:1), far taller relative to its
   width than the logo it replaced. Stock LeptonX sizes it into a 32px-tall
   strip and then positions the .lpx-brand-name block absolutely at left:62px
   with an opaque background, so the right-hand end of the logo was being
   painted over. The app name also carried a 2rem left padding, which pushed the
   visible text well clear of the block that was doing the occluding.

   Fix: give the logo its own box sized to the space available, start the app
   name immediately after it, and drop the opaque background so the two can
   never clip each other again. Sidebar is 280px wide with 20px padding.
   --------------------------------------------------------------------------- */
.lpx-sidebar .lpx-brand-logo {
    width: 100px;
    height: 50px;
    background-size: contain;
    background-position: left center;
}

.lpx-sidebar .lpx-brand-name {
    left: 132px;
    top: 20px;
    width: 128px;
    height: 50px;
    line-height: 50px;
    padding-left: 0 !important;
    background: transparent;
}

/* The logo header is position:fixed, so .lpx-nav reserves space for it with
   padding-top:72px (20px padding + 32px stock logo + 20px padding). The taller
   logo makes that header 90px, so the reserved space has to grow to match or
   the first menu item sits underneath it. */
.lpx-sidebar .lpx-nav {
    padding-top: 90px;
}

/* Collapsed (72px) rail: only ~32px of usable width. LeptonX swaps the image to
   --lpx-logo-icon (the square PM mark) here, so this just sizes the box; the
   192px source scales down cleanly and stays sharp on HiDPI screens.

   These must be scoped exactly as the stock collapse rules are - under
   .hover-trigger, or within 768-1199px - otherwise they match any un-hovered
   sidebar at any width, which shrinks the logo until the user hovers it. */
.hover-trigger .lpx-sidebar-container:not(:hover) .lpx-brand-logo {
    width: 32px;
    height: 32px;
}

.hover-trigger .lpx-sidebar-container:not(:hover) .lpx-nav {
    padding-top: 72px;
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .lpx-sidebar-container:not(:hover) .lpx-brand-logo {
        width: 32px;
        height: 32px;
    }

    .lpx-sidebar-container:not(:hover) .lpx-nav {
        padding-top: 72px;
    }
}

/* ---------------------------------------------------------------------------
   Sidebar highlight states.

   Stock LeptonX tints the menu icon with --lpx-brand (#f72585 hot pink) on both
   hover and selected, and gives inner menu items the same background for both
   states. Icons go white instead, and the secondary purple carries the
   highlight as the row background: translucent on hover, solid when selected,
   so the current page stays identifiable while the mouse moves over the menu.
   --------------------------------------------------------------------------- */
.lpx-nav-menu .lpx-menu-item-link:hover .lpx-menu-item-icon,
.lpx-nav-menu .lpx-menu-item-link:hover .dd-icon,
.lpx-nav-menu .lpx-menu-item-link.selected .lpx-menu-item-icon,
.lpx-nav-menu .lpx-menu-item-link.selected .dd-icon,
.lpx-nav-menu .lpx-menu-item-link.expanded .lpx-menu-item-icon,
.lpx-nav-menu .lpx-menu-item-link.expanded .dd-icon {
    color: #ffffff;
    opacity: 1;
}

.lpx-nav-menu .lpx-menu-item-link:hover,
.lpx-nav-menu .lpx-inner-menu-item .lpx-menu-item-link:hover {
    background-color: var(--pm-brand-secondary-soft);
}

.lpx-nav-menu .lpx-menu-item-link.selected,
.lpx-nav-menu .lpx-menu-item-link.expanded,
.lpx-nav-menu .lpx-inner-menu-item .lpx-menu-item-link.selected {
    background-color: var(--pm-brand-secondary);
}

/* Dark theme overrides (if using dark mode) */
[data-theme="dark"] {
    --lpx-color-bg-primary: #1a1a1a;
    --lpx-color-bg-secondary: #2d2d2d;
    --lpx-sidebar-bg: var(--pm-brand-primary); /* Keep brand sidebar colour in dark mode */
    --lpx-navbar-bg: #2d2d2d;
    --lpx-content-bg: #1a1a1a;
}

/* Hide specific menu item by text content or CSS selector */
.lpx-nav .lpx-menu-filter {
    display: none !important;
}

/* Hide specific menu item by text content or CSS selector */
.lpx-nav .lpx-menu-filter {
    display: none !important;
}

.lpx-settings {
    display: none !important;
}