/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-jdpwmawkkf] {
    height: 100vh;
    font-family: var(--t3f-font-family);
    overflow: hidden;
}

[b-jdpwmawkkf] .icon {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-mask-position: center center;
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-color: var(--dxbl-btn-color);
}

[b-jdpwmawkkf] #menu-top {
    display: none;
}

[b-jdpwmawkkf] #menu-top:not(.hidden) {
    display: block;
}

[b-jdpwmawkkf] #menu-top.hidden {
    display: none;
}

@media (min-width: 769px) {
    [b-jdpwmawkkf] #menu-top {
        display: none;
    }
    
    [b-jdpwmawkkf] #menu-top:not(.hidden) {
        display: block;
    }
}

[b-jdpwmawkkf] .icon-back {
    -webkit-mask-image: url("images/back.svg");
    mask-image: url("images/back.svg");
}

[b-jdpwmawkkf] .icon-menu {
    -webkit-mask-image: url("images/menu.svg");
    mask-image: url("images/menu.svg");
}

[b-jdpwmawkkf] .content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

[b-jdpwmawkkf] .page-layout {
    height: 100%;
}

/* Ensure the grid layout items stretch to fill the row height */
[b-jdpwmawkkf] .page-layout .dxbl-grid-layout-item {
    align-self: stretch;
}

[b-jdpwmawkkf] .menu-button:hover .icon {
    background-color: var(--dxbl-btn-hover-color);
}

.nav-buttons-container[b-jdpwmawkkf] {
    display: flex;
    gap: 10px;
    padding: 0.5rem 0rem;
    flex-shrink: 0;
}

[b-jdpwmawkkf] .body-content {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.button-link[b-jdpwmawkkf] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem;
    margin: -0.5rem;
}

.button-link .menu-button[b-jdpwmawkkf] {
    background-image: url("images/chevron-double-left.svg");
    background-position: center;
    background-repeat: no-repeat;
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    min-height: 1.05rem;
    padding: 0.375rem;
    cursor: pointer;
    display: block;
    background-size: contain;
    transform: scaleX(-1);
}

    .nav-buttons-container[b-jdpwmawkkf]  .menubutton-float-end {
        margin-left: auto;
    }

    .nav-buttons-container[b-jdpwmawkkf]  .dxbl-btn-icon-only {
        --dxbl-btn-padding-x: 0.75rem;
        --dxbl-btn-padding-y: 0.25rem;
    }

@media (max-width: 768px) {
    [b-jdpwmawkkf] .layout-sidebar {
        grid-area: header / header / header / header !important;
    }
}

@media (max-width: 768px) {
    [b-jdpwmawkkf] #menu-top:not(.hidden) {
        display: block;
    }
    
    [b-jdpwmawkkf] #menu-top.hidden {
        display: none;
    }
}

/* Header Styles */
[b-jdpwmawkkf] .layout-header {
    background: transparent;
    border-bottom: 1px solid #e0e0e0;
    padding: 0;
}

.header-container[b-jdpwmawkkf] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.25rem 0.5rem;
    gap: 0.5rem;
}

.header-left[b-jdpwmawkkf] {
    display: flex;
    align-items: center;
}

.header-center[b-jdpwmawkkf] {
    display: flex;
    align-items: center;
}

.header-right[b-jdpwmawkkf] {
    display: none;
}

[b-jdpwmawkkf] .event-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    padding: 0;
}

[b-jdpwmawkkf] .event-label {
    color: #333;
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
}

[b-jdpwmawkkf] .event-combobox {
    min-width: 300px;
    max-width: 400px;
}

[b-jdpwmawkkf] .event-combobox .dxbl-combobox {
    border-radius: 4px;
}

[b-jdpwmawkkf] .selected-event-badge {
    background: #e8f4fd;
    color: #1976d2;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    margin-left: 0.5rem;
}

@media (max-width: 768px) {
    .header-left[b-jdpwmawkkf] {
        display: none;
    }
    
    [b-jdpwmawkkf] .event-combobox {
        min-width: 200px;
        max-width: 100%;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
#sidebar[b-xggru5yewc] {
    min-width: 15rem;
    max-width: 15rem;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    transition: transform 0.1s ease-out;
    height: 100%;
    max-height: 100%;
    background: linear-gradient(180deg, #333333 0%, #1A1A1A 100%);
    display: block;
}

    #sidebar.auto-expanded[b-xggru5yewc] {
        display: none;
    }

    #sidebar .menu-closeonclick-placeholder[b-xggru5yewc] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* Ensure this overlay never blocks clicks on the actual menu items */
        display: none;
        pointer-events: none;
    }

[b-xggru5yewc] .sidebar-header {
    padding: 2rem 1rem;
}

.logo[b-xggru5yewc] {
    text-align: center;
}

[b-xggru5yewc] .menu-button-container {
    align-self: center;
}

.menu-button[b-xggru5yewc] {
    padding: 0.375rem;
    width: 0.875rem;
    height: 0.875rem;
    background-image: url("images/chevron-double-left.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    transition: transform 0.2s ease;
}

[b-xggru5yewc] .menu.display-mobile {
    margin-bottom: 2rem;
}

[b-xggru5yewc] .menu {
    background-color: inherit;
}

    [b-xggru5yewc] .menu .dxbl-menu-item-list {
        gap: 0.5rem;
    }

[b-xggru5yewc] .menu-item {
    color: var(--bs-white);
    padding: 8px 4px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

[b-xggru5yewc] .menu-indent {
    padding-left: 20px !important;
}

[b-xggru5yewc] .menu-indent-2 {
    padding-left: 40px !important;
}

[b-xggru5yewc] .dxbl-treeview-node-content:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

[b-xggru5yewc] .dxbl-treeview-node-child-nodes {
    padding-left: 0;
}

[b-xggru5yewc] .icon {
    width: 1rem;
    height: 1rem;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 0.5rem;
    margin-right: 8px;
    opacity: 0.4;
}

[b-xggru5yewc] .home-icon {
    background-image: url("images/home.svg");
}

[b-xggru5yewc] .weather-icon {
    background-image: url("images/weather.svg");
}

[b-xggru5yewc] .counter-icon {
    background-image: url("images/counter.svg");
}

[b-xggru5yewc] .user-icon {
    background-image: url("images/account/user.svg");
}

[b-xggru5yewc] .logout-icon {
    background-image: url("images/account/log-out.svg");
}

[b-xggru5yewc] .settings-icon {
    background-image: url("images/account/settings.svg");
}

[b-xggru5yewc] .quote-icon {
    background-image: url("images/bootstrap-icons/chat-square-quote.svg");
}

[b-xggru5yewc] .parts-icon {
    background-image: url("images/bootstrap-icons/tools.svg");
    filter: brightness(0) invert(1);
    opacity: 0.4;
}

[b-xggru5yewc] .refresh-icon {
    background-image: url("images/bootstrap-icons/arrow-clockwise.svg");
    filter: brightness(0) invert(1);
    opacity: 0.4;
}

[b-xggru5yewc] .menu-item .spinner-border-sm {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.125em;
    border-color: currentColor;
    border-right-color: transparent;
}

[b-xggru5yewc] .menu-item .spinner-border-sm .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


[b-xggru5yewc] .footer {
    text-align: center;
    gap: 0.5rem;
    padding-bottom: 1.5rem;
}

    [b-xggru5yewc] .footer .icon {
        margin-left: 0;
    }

#sidebar.auto-expanded[b-xggru5yewc]  .layout-item {
    display: block;
}

#sidebar.auto-expanded[b-xggru5yewc]  .footer {
    display: block;
}

@media (max-width: 768px) {
    #sidebar[b-xggru5yewc] {
        min-width: inherit;
        max-width: inherit;
        display: block;
    }

        #sidebar.auto-expanded[b-xggru5yewc] {
            position: fixed;
            width: 100%;
            z-index: 3;
            display: block;
        }

            #sidebar.auto-expanded[b-xggru5yewc]  .sidebar-header {
                border-bottom: 1px solid var(--bs-white);
            }

            #sidebar.auto-expanded .menu-button[b-xggru5yewc] {
                transform: scaleX(-1);
            }

        #sidebar:not(.auto-expanded)[b-xggru5yewc]  .dxbl-gridlayout-root {
            gap: unset !important;
        }

    .logo[b-xggru5yewc] {
        text-align: inherit;
    }

    [b-xggru5yewc] .menu-button-container {
        display: block;
    }

    [b-xggru5yewc] .layout-item {
        display: none;
    }

    [b-xggru5yewc] .footer {
        display: none;
    }
}
/* /Components/Pages/Index.razor.rz.scp.css */
/* This page paints its own dark surface rather than following the active theme, and that is
   deliberate on two counts. SYS-412 asks for a 2px #444 border and a soft white glow around the
   player, and both of those only read against a known-dark backdrop - a white glow on a light
   page is invisible. And no theme in this application actually darkens the page body: T3Dark
   goes through IsT3Theme, which applies the light t3-page-bg to T3Light and T3Dark alike, while
   FluentDark reports data-is-dark="true" over a pure white body. The dark themes restyle the
   DevExpress components and stop there. So "follow the theme" would have meant "be light in all
   ten", which is the one thing this page cannot be.
   The colours below are therefore fixed, and every one of them is stated rather than mixed out
   of the theme's currentColor. Nothing here changes on a theme switch. */
.home-announcement[b-zvd6sknbf2] {
    /* Sits within the sidebar's own linear-gradient(#333, #1a1a1a), so the two surfaces agree
       across the seam instead of meeting light against dark. The backdrop below repeats it, so
       this one covers the panel while that one covers everything the panel cannot reach. */
    background-color: #1c1c1c;
    color: #e8e8e8;

    /* .body-content is a column flex container with overflow:hidden, so the page root has to
       claim the remaining height and own its own scrollbar - min-height:0 because a flex item
       defaults to min-height:auto and refuses to shrink below its content. */
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    /* 3rem horizontally, not 1.5: overflow-y:auto above computes overflow-x to auto as well, so
       this box clips its own children. At the widest sizes the player fills the panel and its
       48px halo would be sheared off flat against both edges. The padding is what it spreads
       into. */
    padding: 2rem 3rem;
}

/* The dark used to stop at this element's own box, leaving a 16px white frame above and to
   either side: .content contributes that padding horizontally and the nav-button strip sits
   above, and .body-content's overflow:hidden clips a negative margin rather than letting it
   bleed. A fixed layer is the way out - ancestor overflow does not clip fixed positioning, so
   this reaches the window edge where a margin cannot. z-index:-1 drops it behind everything
   that paints a background of its own, the sidebar's gradient included, while still covering
   the white body canvas underneath. It belongs to this component, so it is gone the moment the
   page is, and no shared layout or other screen is touched to get it. */
.home-announcement[b-zvd6sknbf2]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: #1c1c1c;
}

/* margin:auto rather than align-items:center on the parent: centring a flex item that has grown
   taller than its container clips the top of it, and the clipped part cannot be scrolled to. */
.home-announcement-panel[b-zvd6sknbf2] {
    margin: auto;
    width: 100%;
    max-width: 60rem;
    text-align: center;
}

.home-announcement-heading[b-zvd6sknbf2] {
    margin: 0;
    font-family: var(--t3-font-family-heading);
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: #f5f5f5;
}

/* Routes.razor renders <FocusOnNavigate Selector="h1" />, which focuses the first h1 on every
   navigation so a screen reader announces the new page. The browser then draws its focus ring
   around the heading, which reads as a stray border. Suppressed rather than left alone because
   the element carries tabindex="-1": no keyboard user can ever reach it, so the ring conveys
   nothing to anybody. The old home page had no h1 at all, which is why this is new. */
.home-announcement-heading:focus[b-zvd6sknbf2] {
    outline: none;
}

.home-announcement-subheading[b-zvd6sknbf2] {
    margin: 0.75rem auto 0;
    max-width: 44rem;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.5;
    color: #b8b8b8;
}

/* The glow, the crisp edge and the radius are what SYS-412's reference image shows. They are NOT
   the literal box-shadow the ticket comment carries: that snippet asks for
   `0 0 15px rgba(255,255,255,0.2)`, which was applied first, measured, and is very nearly
   invisible - a 15px blur at a fifth opacity does not lift the player off the page at all, let
   alone produce the halo in the picture. Three layers rather than one is what actually gets
   there: a hairline ring for the bright edge, a tight bloom, and a wide falloff.
   Its max-width/height pair in the same snippet is the browser's way of holding a native
   <video>'s aspect ratio; the width/aspect-ratio below is the iframe equivalent. That width also
   bounds the HEIGHT, so the player gives up width before pushing the closing line off a short
   screen - the 22rem being the heading, subheading, links and padding stacked above and below.
   The 20rem floor stops that shrinking to something unwatchable on a very short window; past
   that point the root's overflow-y takes over and the page scrolls instead. */
.home-announcement-video[b-zvd6sknbf2] {
    width: min(100%, max(20rem, calc((100dvh - 22rem) * 16 / 9)));
    margin: 1.75rem auto 0;
    aspect-ratio: 16 / 9;
    border: 2px solid #444444;
    border-radius: 6px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.30),
        0 0 20px rgba(255, 255, 255, 0.45),
        0 0 48px rgba(255, 255, 255, 0.22);
    overflow: hidden;
    background-color: #101010;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-announcement-video iframe[b-zvd6sknbf2] {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.home-announcement-video-pending[b-zvd6sknbf2] {
    margin: 0;
    font-size: 0.95rem;
    color: #9a9a9a;
}

.home-announcement-links[b-zvd6sknbf2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    margin: 1.75rem 0 0;
    font-size: 0.95rem;
    color: #b8b8b8;
}

/* The colour is not cosmetic. Nothing in the application gives an anchor a colour of its own -
   measured, they compute to rgb(66,66,66) - so left alone these would be near-black text on a
   #1c1c1c surface and effectively unreadable. The underline is the affordance: without it a link
   is distinguished from the text around it by brightness alone, which is not one. */
.home-announcement-links a[b-zvd6sknbf2] {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.home-announcement-link-separator[b-zvd6sknbf2] {
    color: #6a6a6a;
}

/* The two halves need about 744px side by side, and the content area is the viewport less the
   sidebar and this page's padding - so below roughly this width they wrap, and a separator
   between them is left dangling at the end of the first line. Hiding it turns the wrap into two
   clean sentences. Measured at the default size mode: a larger one wraps a little sooner and
   loses the separator a little late, which is why the rule hides an ornament rather than
   carrying any layout. */
@media (max-width: 68rem) {
    .home-announcement-link-separator[b-zvd6sknbf2] {
        display: none;
    }
}