/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-kz04es3orp] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* The rail IS the old topbar until 900px.
   Below that width a 232px column would leave under 150px for content, so the
   narrow layout keeps the bar-plus-drawer that was already built and measured
   (see the Mobile navigation block at the foot of this file). Only at 900px
   and up does it become a left column. */
.rail[b-kz04es3orp] {
    display: flex;
    /* WRAP, or the shell scrolls sideways.
       The bar carries the brand, up to nine nav links and the account block
       on one row. Without flex-wrap that row has no break opportunity, so
       below roughly 1090px it simply overflows and the whole document gains a
       horizontal scrollbar -- reported independently by two tasks, which is
       what identified it as the shell's problem and not any one page's.
       `box-sizing: border-box` on .app-content was already correct and is NOT
       the cause; that was checked before this line was written. */
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.rail__brand[b-kz04es3orp] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--text);
    margin-right: auto;
}

.rail__mark[b-kz04es3orp] {
    font-family: var(--font-sans);
    /* 600, not 900. Only three Poppins weights ship (400/500/600), so 900 is
       synthesised by the browser -- a smeared faux-bold sitting next to real
       600 elsewhere in the bar. The lockup keeps its contrast from the weight
       GAP against .rail__product below, not from an absolute weight. */
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--brand-600);
    font-size: 1.05rem;
}

.rail__product[b-kz04es3orp] {
    /* 400 for the same reason: 350 is not a weight Poppins ships, so the
       browser picks 400 anyway -- saying 350 only hid that from the reader. */
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.rail__nav[b-kz04es3orp] {
    display: flex;
    /* The nav is itself a flex row and needs its own wrap: without it the bar
       above can wrap the nav as a single unit but the links inside it still
       cannot break, so a narrow viewport just moves the overflow rather than
       removing it. */
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
}

.rail__nav a[b-kz04es3orp] {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.4rem 0.1rem;
    border-bottom: 2px solid transparent;
}

.rail__nav a:hover[b-kz04es3orp] {
    color: var(--brand-600);
    border-bottom-color: var(--brand-300);
}

/* The bottom border was already reserved as transparent above, so revealing it
   on hover shifts nothing -- the row does not reflow, which is the reason it
   was reserved rather than added here. */
.rail__nav a:focus-visible[b-kz04es3orp] {
    outline: 2px solid var(--brand-600);
    outline-offset: 3px;
    border-radius: 4px;
}

.rail__account[b-kz04es3orp] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.rail__user[b-kz04es3orp] {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.rail__account form[b-kz04es3orp] {
    margin: 0;
}

.app-content[b-kz04es3orp] {
    flex: 1;
    padding: 2rem clamp(1.25rem, 4vw, 3rem);
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

#blazor-error-ui[b-kz04es3orp] {
    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[b-kz04es3orp] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ---- Mobile navigation -------------------------------------------------
   Below 768px the bar carried ten links that WRAPPED onto four rows and ate
   124px of an 812px screen -- measured, not guessed. They also rendered 37px
   tall, under the 44px a finger needs.

   A checkbox toggle rather than <details>: browsers hide a closed <details>'s
   content through a mechanism `display` does not reliably override, and the
   first attempt at this removed the nav from the DESKTOP bar entirely. The
   screenshot caught that; the width numbers alone did not.
   ---------------------------------------------------------------------- */
.rail__menu-checkbox[b-kz04es3orp] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.rail__menu-toggle[b-kz04es3orp] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 0.75rem;
    cursor: pointer;
    font-weight: 600;
    border-radius: 8px;
}

/* Keyboard users get a visible ring: the checkbox is off-screen, so without
   this the focused control is invisible. */
.rail__menu-checkbox:focus-visible + .rail__menu-toggle[b-kz04es3orp] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

/* Three bars, drawn rather than shipped as an asset -- one less request on
   the connection least able to afford it. */
.rail__menu-bars[b-kz04es3orp],
.rail__menu-bars[b-kz04es3orp]::before,
.rail__menu-bars[b-kz04es3orp]::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.rail__menu-bars[b-kz04es3orp] { position: relative; }

.rail__menu-bars[b-kz04es3orp]::before,
.rail__menu-bars[b-kz04es3orp]::after { content: ""; position: absolute; }

.rail__menu-bars[b-kz04es3orp]::before { top: -6px; }
.rail__menu-bars[b-kz04es3orp]::after  { top: 6px; }

/* Collapsed by default; the checkbox reveals it. */
.rail__nav[b-kz04es3orp] { display: none; }

.rail__menu-checkbox:checked ~ .rail__nav[b-kz04es3orp] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
}

/* Full-width rows, each a 44px target. */
.rail__nav a[b-kz04es3orp] {
    display: flex;
    align-items: center;
    min-height: 44px;
}

/* ---- Desktop: from the SAME width as the rail ------------------------- */
/* This used to start at 768px, which left a 768-899px band where the toggle
   was hidden and the three groups wrapped as columns across the top of the
   page -- neither the drawer nor the rail, and the ugliest of the three. The
   drawer now holds until 900px, where the rail takes over (A-660). */
@media (min-width: 900px) {
    .rail__menu-toggle[b-kz04es3orp],
    .rail__menu-checkbox[b-kz04es3orp] { display: none; }

    /* Wins over the mobile `display: none` above by being later and equally
       specific. The nav is a plain flex row again, wrapping as it always did. */
    .rail__nav[b-kz04es3orp] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: auto;
    }

    .rail__nav a[b-kz04es3orp] { min-height: 0; }
}

/* ---- The rail proper: 900px and up -------------------------------------
   Below this the layout above stands. 900 rather than 768 because a 232px
   column out of 768 leaves 536px of content -- narrower than the tablet bar
   it would be replacing, which is the wrong trade. */
@media (min-width: 900px) {
    .app-shell[b-kz04es3orp] {
        display: grid;
        /* Fixed rail, fluid content. `minmax(0, 1fr)` and NOT `1fr`: a bare
           1fr track has an automatic minimum of min-content, so one wide
           table inside it widens the whole grid and the document scrolls
           sideways again -- the exact defect A-582 exists to catch, moved
           from the flex row into the grid. */
        grid-template-columns: 232px minmax(0, 1fr);
    }

    .rail[b-kz04es3orp] {
        /* REQUIRED, and not decoration: there is no global border-box reset in
           this project -- .app-content sets its own, which is the tell. Without
           it the `height` below is the CONTENT height and the 1.25rem of
           vertical padding is added outside it, so the rail renders exactly
           40px taller than the viewport. Measured: computed height 780px,
           rendered box 820px, which pushed the account block and its Sign out
           button below the fold. A-604 bounds the rendered box for this
           reason; two earlier guesses (align-self, min-height) changed nothing
           because neither was the cause. */
        box-sizing: border-box;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
        height: 100vh;
        /* dvh where supported: on mobile Safari 100vh is the pre-toolbar
           height, which would push the account block under the chrome. The
           vh line above stays as the fallback. */
        height: 100dvh;
        /* hidden, not auto: the NAV scrolls, the rail does not. Scrolling the
           whole rail takes Sign out and the theme toggle away with it, and on
           a 600px-tall laptop the ten links alone are ~640px, so that is the
           common case rather than the edge one. */
        overflow: hidden;
        padding: 1.25rem 0.85rem;
        border-bottom: none;
        border-right: 1px solid var(--border);
    }

    .rail__brand[b-kz04es3orp] {
        margin: 0 0 1.5rem 0.6rem;
    }

    /* Vertical list, and the section is what the empty-group rule below
       tests. */
    .rail__nav[b-kz04es3orp] {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        width: auto;
        gap: 1.4rem;
        /* The nav takes the space the brand and account do not, and scrolls
           inside it. `min-height: 0` is what allows that: a flex item's
           automatic minimum is its content size, so without it the nav refuses
           to shrink, pushes the account block past the bottom of the rail, and
           `overflow` above never engages. */
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .rail__section[b-kz04es3orp] {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    /* A section whose links were all removed by AuthorizeView would otherwise
       render a heading labelling nothing -- a Mail Creator holds none of the
       five admin policies. Hiding it here rather than inventing an "is an
       admin" policy for a heading: this is presentation, and the actual
       control is each link's AuthorizeView plus each page's [Authorize].
       A-606 covers it, because a rule with no test is how this silently
       stops working. */
    .rail__section:not(:has(.rail__link))[b-kz04es3orp] { display: none; }

    .rail__group[b-kz04es3orp] {
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin: 0 0 0.35rem 0.6rem;
    }

    .rail__nav a[b-kz04es3orp] {
        min-height: 40px;
        padding: 0 0.6rem;
        border-bottom: none;
        border-radius: var(--radius-field, 10px);
        /* Reserved, not added on hover: the marker is a 3px inset shadow, so
           it cannot shift the row when it appears. */
        box-shadow: inset 3px 0 0 0 transparent;
    }

    .rail__nav a:hover[b-kz04es3orp] {
        background: var(--surface-sunken, rgba(127, 127, 127, 0.09));
        border-bottom-color: transparent;
    }

    .rail__nav a.is-active[b-kz04es3orp] {
        color: var(--brand-600);
        font-weight: 600;
        background: var(--surface-sunken, rgba(127, 127, 127, 0.09));
        box-shadow: inset 3px 0 0 0 var(--brand-600);
    }

    /* Pushed to the foot of the column. The rail is the flex parent here, and
       the account block is its last child, so `auto` takes whatever vertical
       space the nav did not. */
    /* Pinned at the foot. No `margin-top: auto` -- the nav above is `flex: 1`
       and already absorbs the free space, and an auto margin on top of that
       would fight it when the nav is scrolling. */
    .rail__account[b-kz04es3orp] {
        flex: 0 0 auto;
        padding-top: 1.25rem;
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    /* The content column already has its own max-width and centres itself;
       without this it would centre inside the grid track and drift right of
       the rail on a wide screen. */
    .app-content[b-kz04es3orp] { margin: 0; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-hc0fx6t8xe],
.components-reconnect-repeated-attempt-visible[b-hc0fx6t8xe],
.components-reconnect-failed-visible[b-hc0fx6t8xe],
.components-pause-visible[b-hc0fx6t8xe],
.components-resume-failed-visible[b-hc0fx6t8xe],
.components-rejoining-animation[b-hc0fx6t8xe] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-hc0fx6t8xe],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-hc0fx6t8xe],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-hc0fx6t8xe],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-hc0fx6t8xe],
#components-reconnect-modal.components-reconnect-retrying[b-hc0fx6t8xe],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-hc0fx6t8xe],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-hc0fx6t8xe],
#components-reconnect-modal.components-reconnect-failed[b-hc0fx6t8xe],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-hc0fx6t8xe] {
    display: block;
}


#components-reconnect-modal[b-hc0fx6t8xe] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-hc0fx6t8xe 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-hc0fx6t8xe 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-hc0fx6t8xe 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-hc0fx6t8xe]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-hc0fx6t8xe 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-hc0fx6t8xe {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-hc0fx6t8xe {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-hc0fx6t8xe {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-hc0fx6t8xe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-hc0fx6t8xe] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-hc0fx6t8xe] {
    border: 0;
    background-color: var(--brand-600);
    color: var(--text-onbrand);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-hc0fx6t8xe] {
        background-color: var(--brand-700);
    }

    #components-reconnect-modal button:active[b-hc0fx6t8xe] {
        background-color: var(--brand-600);
    }

.components-rejoining-animation[b-hc0fx6t8xe] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-hc0fx6t8xe] {
        position: absolute;
        border: 3px solid var(--brand-300);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-hc0fx6t8xe 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-hc0fx6t8xe] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-hc0fx6t8xe {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}