/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-shell[b-2oaava5hmi] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.auth-card[b-2oaava5hmi] {
    width: 100%;
    max-width: 420px;
    padding: 2.5rem 2.25rem;
}

.auth-brand[b-2oaava5hmi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.brand-mark[b-2oaava5hmi] {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-tertiary));
    color: #FAF5EF;
    box-shadow: var(--shadow-glow-primary);
}

.brand-text[b-2oaava5hmi] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-name[b-2oaava5hmi] {
    font-weight: 800;
    font-size: 1.1rem;
}

.brand-sub[b-2oaava5hmi] {
    font-size: 0.75rem;
    color: var(--color-text-faint);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.auth-card[b-2oaava5hmi]  h1 {
    font-size: 1.4rem;
    margin-bottom: 0.3rem;
}

.auth-card[b-2oaava5hmi]  h2 {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.auth-card[b-2oaava5hmi]  hr {
    display: none;
}

.auth-card[b-2oaava5hmi]  .form-floating {
    margin-bottom: 1rem;
    position: relative;
}

.auth-card[b-2oaava5hmi]  .form-control {
    width: 100%;
    font-family: inherit;
    font-size: 0.92rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    color: var(--color-text);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.auth-card[b-2oaava5hmi]  .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.auth-card[b-2oaava5hmi]  .form-control::placeholder {
    color: transparent;
}

.auth-card[b-2oaava5hmi]  .form-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.35rem;
    display: block;
}

.auth-card[b-2oaava5hmi]  .btn-primary {
    width: 100%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
    color: #FAF5EF;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.8rem 1.3rem;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    box-shadow: var(--shadow-glow-primary);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    margin-top: 0.5rem;
}

.auth-card[b-2oaava5hmi]  .btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.auth-card[b-2oaava5hmi]  .text-danger {
    color: #E8A5A9;
    font-size: 0.8rem;
}

.auth-card[b-2oaava5hmi]  a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.85rem;
}

.auth-card[b-2oaava5hmi]  a:hover {
    text-decoration: underline;
}

.auth-card[b-2oaava5hmi]  p {
    margin-top: 0.6rem;
}

.auth-card[b-2oaava5hmi]  .checkbox {
    margin-bottom: 1rem;
}

.auth-card[b-2oaava5hmi]  .checkbox .form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-2u1uy25cxf] {
    display: flex;
    min-height: 100vh;
}

.main-area[b-2u1uy25cxf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar[b-2u1uy25cxf] {
    margin: 1.25rem 1.5rem 0;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-md);
}

.topbar-eyebrow[b-2u1uy25cxf] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-faint);
}

.topbar-actions[b-2u1uy25cxf] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.topbar-user[b-2u1uy25cxf] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.avatar[b-2u1uy25cxf] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-primary), var(--color-tertiary));
    color: #FAF5EF;
    box-shadow: 0 4px 14px rgba(217, 119, 87, 0.35);
}

.user-meta[b-2u1uy25cxf] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.user-name[b-2u1uy25cxf] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

.user-role[b-2u1uy25cxf] {
    font-size: 0.72rem;
    color: var(--color-text-faint);
}

.content[b-2u1uy25cxf] {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
}

#blazor-error-ui[b-2u1uy25cxf] {
    background: #7a2020;
    color: white;
    display: none;
    left: 0;
    bottom: 0;
    position: fixed;
    width: 100%;
    z-index: 1000;
    padding: 0.9rem 1.25rem;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4);
}

#blazor-error-ui .dismiss[b-2u1uy25cxf] {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.75rem;
}

@media (max-width: 900px) {
    .app-shell[b-2u1uy25cxf] {
        flex-direction: column;
    }

    .topbar[b-2u1uy25cxf] {
        margin: 1rem 1rem 0;
    }

    .content[b-2u1uy25cxf] {
        padding: 1rem;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.sidebar[b-mhl70kxpeu] {
    width: 250px;
    flex-shrink: 0;
    margin: 1.25rem 0 1.25rem 1.5rem;
    padding: 1.5rem 1.1rem;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    position: sticky;
    top: 1.25rem;
    height: calc(100vh - 2.5rem);
}

.brand[b-mhl70kxpeu] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0 0.5rem;
    margin-bottom: 2rem;
}

.brand-mark[b-mhl70kxpeu] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-tertiary));
    color: #FAF5EF;
    box-shadow: var(--shadow-glow-primary);
}

.brand-text[b-mhl70kxpeu] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-name[b-mhl70kxpeu] {
    font-weight: 800;
    font-size: 1rem;
}

.brand-sub[b-mhl70kxpeu] {
    font-size: 0.72rem;
    color: var(--color-text-faint);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.nav-links[b-mhl70kxpeu] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    /* Without min-height:0, a flex child can't shrink below its content size, so once there
       are more nav items than the sidebar's fixed height allows, they'd spill out past the
       card's rounded border instead of scrolling within it. */
    min-height: 0;
    overflow-y: auto;
    /* Setting only overflow-y forces the browser to compute overflow-x as "auto" too (a CSS
       Overflow spec quirk — you can't scroll one axis and leave the other truly "visible"), so
       a horizontal scrollbar was appearing whenever any row (e.g. the indented Reports
       sub-items) was even a pixel wider than the sidebar. Pin it shut explicitly. */
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}

.nav-links[b-mhl70kxpeu]::-webkit-scrollbar {
    width: 6px;
}

.nav-links[b-mhl70kxpeu]::-webkit-scrollbar:horizontal {
    display: none;
}

.nav-links[b-mhl70kxpeu]::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 999px;
}

/* `.nav-link` appears both on <NavLink>'s rendered <a> (a framework component — Blazor's
   CSS-isolation scope attribute never lands on elements it renders internally) and on the
   plain <button> below (authored directly in this file, so it DOES carry the scope
   attribute). `::deep` from the `.sidebar` ancestor — which wraps both the nav and the
   footer, and is itself genuinely scoped — matches both cases; a non-deep `.nav-link`
   selector here would silently miss the <NavLink> case entirely. */
.sidebar[b-mhl70kxpeu]  .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    position: relative;
}

.sidebar[b-mhl70kxpeu]  .nav-link:hover {
    background: var(--color-surface);
    color: var(--color-text);
    transform: translateX(2px);
}

.sidebar[b-mhl70kxpeu]  .nav-link.active {
    background: linear-gradient(135deg, rgba(217, 119, 87, 0.22), rgba(139, 74, 47, 0.12));
    color: #F3C4AE;
    box-shadow: inset 0 0 0 1px rgba(217, 119, 87, 0.3);
}

/* #F3C4AE is a pale pastel tuned for the dark sidebar's dark background — on the light
   theme's cream/peach sidebar it's nearly invisible against the same active-item highlight,
   same class of issue as the badge/alert colors fixed for light mode in app.css. */
:root[data-theme="light"] .sidebar[b-mhl70kxpeu]  .nav-link.active {
    color: var(--color-primary-strong);
}

.sidebar[b-mhl70kxpeu]  .icon {
    flex-shrink: 0;
}

.sidebar[b-mhl70kxpeu]  .nav-link-button {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.sidebar[b-mhl70kxpeu]  .nav-link-button:hover {
    background: rgba(193, 102, 107, 0.14);
    color: #E8A5A9;
}

.sidebar[b-mhl70kxpeu]  .nav-group-toggle {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.sidebar[b-mhl70kxpeu]  .nav-group-chevron {
    margin-left: auto;
    display: inline-flex;
    transition: transform 0.2s ease;
}

.sidebar[b-mhl70kxpeu]  .nav-group-chevron-expanded {
    transform: rotate(180deg);
}

.sidebar[b-mhl70kxpeu]  .nav-group-items {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0.2rem 0 0.2rem 1.1rem;
    padding-left: 0.65rem;
    border-left: 1px solid var(--color-border);
}

.sidebar[b-mhl70kxpeu]  .nav-sublink {
    padding: 0.55rem 0.7rem;
    font-size: 0.84rem;
}

.sidebar-footer[b-mhl70kxpeu] {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

@media (max-width: 900px) {
    .sidebar[b-mhl70kxpeu] {
        width: auto;
        margin: 1rem 1rem 0;
        height: auto;
        position: static;
    }

    .nav-links[b-mhl70kxpeu] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sidebar-footer[b-mhl70kxpeu] {
        margin-top: 0.75rem;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-duxfu1pray],
.components-reconnect-repeated-attempt-visible[b-duxfu1pray],
.components-reconnect-failed-visible[b-duxfu1pray],
.components-pause-visible[b-duxfu1pray],
.components-resume-failed-visible[b-duxfu1pray],
.components-rejoining-animation[b-duxfu1pray] {
    display: none;
}

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

#components-reconnect-modal[b-duxfu1pray] {
    width: 21rem;
    max-width: calc(100vw - 3rem);
    margin: 20vh auto;
    padding: 2.25rem 2rem 2rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, rgba(42, 33, 28, 0.92) 0%, rgba(20, 15, 13, 0.96) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-card-hover);
    color: var(--color-text);
    font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-duxfu1pray 0.5s both;

    &[open] {
        animation: components-reconnect-modal-slideUp-b-duxfu1pray 1.2s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-duxfu1pray 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }
}

#components-reconnect-modal[b-duxfu1pray]::backdrop {
    background-color: rgba(10, 8, 6, 0.6);
    backdrop-filter: blur(4px);
    animation: components-reconnect-modal-fadeInOpacity-b-duxfu1pray 0.4s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-duxfu1pray {
    0% {
        transform: translateY(24px) scale(0.96);
    }

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

#components-reconnect-modal p[b-duxfu1pray] {
    margin: 0;
    text-align: center;
    color: var(--color-text-muted);
}

.components-reconnect-title[b-duxfu1pray] {
    font-family: "Manrope", inherit;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--color-text) !important;
}

.components-reconnect-subtitle[b-duxfu1pray] {
    font-size: 0.85rem;
}

#components-reconnect-modal #components-seconds-to-next-attempt[b-duxfu1pray] {
    color: var(--color-primary);
    font-weight: 700;
}

/* display is deliberately left to the show/hide rules above (block or none) —
   this only styles the circle once an ancestor state class makes it visible. */
.components-reconnect-icon[b-duxfu1pray] {
    width: 56px;
    height: 56px;
    line-height: 56px;
    margin: 0 auto 0.25rem;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    text-align: center;
}

.components-reconnect-icon[b-duxfu1pray]  .icon {
    vertical-align: middle;
}

#components-reconnect-modal.components-reconnect-failed .components-reconnect-icon[b-duxfu1pray] {
    background: rgba(193, 102, 107, 0.16);
    color: #E8A5A9;
}

#components-reconnect-modal button[b-duxfu1pray] {
    margin-top: 0.4rem;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
    color: #FAF5EF;
    padding: 0.6rem 1.6rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-glow-primary);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

    #components-reconnect-modal button:hover[b-duxfu1pray] {
        filter: brightness(1.08);
        transform: translateY(-1px);
        box-shadow: 0 8px 26px rgba(217, 119, 87, 0.55);
    }

    #components-reconnect-modal button:active[b-duxfu1pray] {
        transform: scale(0.97);
    }

/* The framework only ever *adds* "retrying"/"paused"/etc on top of "show"
   rather than swapping it out, so without this the first-attempt line and
   the repeated-attempt line would render stacked on top of each other once
   a retry starts. Once retrying, the repeated-attempt line takes over. */
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-first-attempt-visible[b-duxfu1pray] {
    display: none;
}

.components-rejoining-animation[b-duxfu1pray] {
    position: relative;
    width: 64px;
    height: 64px;
    margin-bottom: 0.25rem;
}

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 64px;
        height: 64px;
        opacity: 0;
    }
}
/* /Components/Shared/ThemeToggle.razor.rz.scp.css */
.theme-toggle[b-35usa04wdu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.theme-toggle:hover[b-35usa04wdu] {
    background: var(--color-surface-strong);
    border-color: var(--color-border-strong);
    color: var(--color-primary);
    transform: rotate(15deg);
}