/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   /Account/Login — polished two-panel auth experience.

   Design intent: a calm, premium "control-room" surface for a utility-billing
   SaaS. A deep, branded marketing aside (gradient mesh + faint meter grid +
   animated data-flow motif) sits beside a clean, focused sign-in form.

   Everything is driven by the active MudTheme CSS variables (--mud-palette-*),
   so per-org branding colours AND light/dark mode flow through with no extra
   code. The aside bakes a translucent ink veil into its background stack so the
   white aside text stays legible whether the primary colour is dark (light
   theme) or light (dark theme). RTL is handled by flexbox mirroring.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Ambient full-bleed backdrop (behind the card) ── */
.login-ambient[b-5w7qbxo2m7] {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60rem 40rem at 12% -10%,
            color-mix(in srgb, var(--mud-palette-primary) 16%, transparent), transparent 70%),
        radial-gradient(48rem 36rem at 105% 110%,
            color-mix(in srgb, var(--mud-palette-secondary) 14%, transparent), transparent 70%);
}

/* ── Shell: center the card in the available viewport ── */
.login-shell[b-5w7qbxo2m7] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 8px 0 32px;
}

/* ── The card ── */
.login-card[b-5w7qbxo2m7] {
    display: grid;
    grid-template-columns: 1.04fr 1fr;
    width: 100%;
    max-width: 960px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 24px 60px -28px rgba(15, 23, 42, 0.30);
    opacity: 0;
    transform: translateY(14px);
    animation: login-rise-b-5w7qbxo2m7 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes login-rise-b-5w7qbxo2m7 {
    to { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────  ASIDE (brand panel)  ───────────────────────── */
.login-aside[b-5w7qbxo2m7] {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 540px;
    padding: 40px;
    overflow: hidden;
    color: #f4f7ff;
    background:
        /* ink veil — guarantees text contrast in light AND dark themes */
        linear-gradient(155deg, rgba(8, 12, 26, 0.34), rgba(8, 12, 26, 0.66)),
        /* coloured accents */
        radial-gradient(38rem 30rem at 18% 16%,
            color-mix(in srgb, var(--mud-palette-secondary) 72%, transparent), transparent 60%),
        radial-gradient(34rem 28rem at 88% 92%,
            color-mix(in srgb, var(--mud-palette-tertiary) 60%, transparent), transparent 62%),
        /* base brand gradient */
        linear-gradient(140deg,
            var(--mud-palette-primary),
            color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-secondary)));
}

/* Faint blueprint grid — evokes a metering dashboard */
.login-aside__grid[b-5w7qbxo2m7] {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(120% 120% at 50% 0%, #000 35%, transparent 78%);
    -webkit-mask-image: radial-gradient(120% 120% at 50% 0%, #000 35%, transparent 78%);
}

/* Soft top-corner glow */
.login-aside__glow[b-5w7qbxo2m7] {
    position: absolute;
    top: -28%;
    inset-inline-start: -14%;
    z-index: -1;
    width: 26rem;
    height: 26rem;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--mud-palette-secondary) 55%, transparent), transparent 66%);
    filter: blur(8px);
    animation: login-float-b-5w7qbxo2m7 11s ease-in-out infinite;
}

@keyframes login-float-b-5w7qbxo2m7 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(18px, 22px); }
}

/* ── Hero visualisation: a living "meter → billing" dashboard ── */
.login-viz[b-5w7qbxo2m7] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0 24px;
}

.login-viz__panel[b-5w7qbxo2m7] {
    position: relative;
    width: 100%;
    max-width: 322px;
    padding: 20px 20px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.06));
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 22px 46px -24px rgba(8, 12, 26, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: login-bob-b-5w7qbxo2m7 7s ease-in-out infinite;
}

@keyframes login-bob-b-5w7qbxo2m7 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* Panel header — live indicator + metric label */
.login-viz__head[b-5w7qbxo2m7] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.92);
}

.login-viz__live[b-5w7qbxo2m7] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4ade80;
    animation: login-live-b-5w7qbxo2m7 1.8s ease-out infinite;
}

@keyframes login-live-b-5w7qbxo2m7 {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.login-viz__label[b-5w7qbxo2m7] { font-weight: 600; }

.login-viz__unit[b-5w7qbxo2m7] {
    margin-inline-start: auto;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.62);
}

/* Animated consumption bars */
.login-viz__bars[b-5w7qbxo2m7] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 88px;
}

.login-viz__bars i[b-5w7qbxo2m7] {
    flex: 1;
    height: var(--h);
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.42));
    transform-origin: bottom;
    animation: login-bar-b-5w7qbxo2m7 3s ease-in-out var(--d) infinite;
}

@keyframes login-bar-b-5w7qbxo2m7 {
    0%, 100% { transform: scaleY(0.55); opacity: 0.72; }
    50%      { transform: scaleY(1);    opacity: 1; }
}

/* Flowing energy sparkline — a bright pulse travels the consumption curve */
.login-viz__spark[b-5w7qbxo2m7] {
    display: block;
    width: 100%;
    height: 40px;
    margin-top: 14px;
    overflow: visible;
}

.login-viz__spark-base[b-5w7qbxo2m7] {
    stroke: rgba(255, 255, 255, 0.26);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-viz__spark-flow[b-5w7qbxo2m7] {
    stroke: #ffffff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
    stroke-dasharray: 54 340;
    stroke-dashoffset: 394;
    animation: login-flow-b-5w7qbxo2m7 3.2s linear infinite;
}

@keyframes login-flow-b-5w7qbxo2m7 {
    to { stroke-dashoffset: 0; }
}

/* Aside copy */
.login-aside__body[b-5w7qbxo2m7] { position: relative; }

.login-aside__eyebrow[b-5w7qbxo2m7] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    padding: 5px 11px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.login-aside__tagline[b-5w7qbxo2m7] {
    margin: 18px 0 0;
    font-size: clamp(1.6rem, 2.4vw, 2.05rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.018em;
    text-wrap: balance;
}

/* ─────────────────────────  FORM PANEL  ───────────────────────── */
.login-form-panel[b-5w7qbxo2m7] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 40px;
}

.login-form-panel__inner[b-5w7qbxo2m7] {
    width: 100%;
    max-width: 360px;
}

.login-head__title[b-5w7qbxo2m7] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary);
}

.login-head__subtitle[b-5w7qbxo2m7] {
    margin: 6px 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.login-form[b-5w7qbxo2m7] {
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Staggered field entrance */
.login-field[b-5w7qbxo2m7] {
    opacity: 0;
    animation: login-rise-b-5w7qbxo2m7 0.5s ease-out forwards;
}
.login-field:nth-of-type(1)[b-5w7qbxo2m7] { animation-delay: 0.12s; }
.login-field:nth-of-type(2)[b-5w7qbxo2m7] { animation-delay: 0.20s; }

/* Outlined inputs — softer radius, subtle field fill, smooth focus */
.login-field[b-5w7qbxo2m7]  .mud-input.mud-input-outlined {
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
    transition: background-color 0.18s ease;
}
.login-field[b-5w7qbxo2m7]  .mud-input.mud-input-outlined:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
}
.login-field[b-5w7qbxo2m7]  .mud-input-outlined-border {
    border-radius: 12px;
    transition: border-color 0.18s ease, border-width 0.0s;
}
.login-field[b-5w7qbxo2m7]  .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-width: 2px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}
.login-field[b-5w7qbxo2m7]  .mud-input-adornment .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

/* Remember-me / forgot-password row */
.login-row[b-5w7qbxo2m7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
}
.login-row[b-5w7qbxo2m7]  .mud-checkbox .mud-typography {
    font-size: 0.86rem;
    color: var(--mud-palette-text-secondary);
}

.login-link[b-5w7qbxo2m7] {
    font-size: 0.86rem;
    font-weight: 500;
}

/* Primary submit — gradient, bold, gentle lift (overrides the global no-shadow rule) */
.login-submit[b-5w7qbxo2m7] {
    margin-top: 8px;
    opacity: 0;
    animation: login-rise-b-5w7qbxo2m7 0.5s ease-out 0.28s forwards;
}
.login-submit[b-5w7qbxo2m7]  .mud-button-root,
.login-form[b-5w7qbxo2m7]  button.mud-button-filled {
    height: 50px;
    border-radius: 12px;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--mud-palette-primary-text);
    background: linear-gradient(135deg,
        var(--mud-palette-primary),
        color-mix(in srgb, var(--mud-palette-primary) 64%, var(--mud-palette-secondary)));
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--mud-palette-primary) 70%, transparent) !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.login-form[b-5w7qbxo2m7]  button.mud-button-filled:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--mud-palette-primary) 78%, transparent) !important;
}
.login-form[b-5w7qbxo2m7]  button.mud-button-filled:active {
    transform: translateY(0);
}

/* "Need an account?" divider */
.login-divider[b-5w7qbxo2m7] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0 16px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}
.login-divider[b-5w7qbxo2m7]::before,
.login-divider[b-5w7qbxo2m7]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--mud-palette-divider);
}

.login-secondary[b-5w7qbxo2m7] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    text-align: center;
}
.login-secondary__dot[b-5w7qbxo2m7] {
    color: var(--mud-palette-text-disabled);
    font-size: 0.7rem;
}

/* ─────────────────────────  RESPONSIVE  ───────────────────────── */
@media (max-width: 860px) {
    .login-card[b-5w7qbxo2m7] {
        grid-template-columns: 1fr;
        max-width: 440px;
    }
    .login-aside[b-5w7qbxo2m7] {
        display: none;
    }
    .login-form-panel[b-5w7qbxo2m7] {
        padding: 36px 28px;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .login-card[b-5w7qbxo2m7],
    .login-field[b-5w7qbxo2m7],
    .login-submit[b-5w7qbxo2m7],
    .login-aside__glow[b-5w7qbxo2m7],
    .login-viz__panel[b-5w7qbxo2m7],
    .login-viz__bars i[b-5w7qbxo2m7],
    .login-viz__live[b-5w7qbxo2m7],
    .login-viz__spark-flow[b-5w7qbxo2m7] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        stroke-dashoffset: 0 !important;
    }
    /* keep bars at their authored heights when motion is reduced */
    .login-viz__bars i[b-5w7qbxo2m7] { transform: scaleY(1) !important; }
}
/* /Components/AI/AiChatDrawer.razor.rz.scp.css */
/* ── SmartTextArea styling to match MudBlazor ────────────────────────── */
[b-wtz57vyc6g] .smart-textarea-wrapper {
    position: relative;
}

[b-wtz57vyc6g] .ai-smart-textarea,
[b-wtz57vyc6g] .smart-textarea-wrapper textarea {
    width: 100%;
    min-height: 44px;
    max-height: 140px;
    resize: none;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: 10px 14px;
    font-family: var(--mud-typography-body2-family), Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

[b-wtz57vyc6g] .ai-smart-textarea:focus,
[b-wtz57vyc6g] .smart-textarea-wrapper textarea:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

[b-wtz57vyc6g] .ai-smart-textarea::placeholder,
[b-wtz57vyc6g] .smart-textarea-wrapper textarea::placeholder {
    color: var(--mud-palette-text-disabled);
}

[b-wtz57vyc6g] .ai-smart-textarea:disabled,
[b-wtz57vyc6g] .smart-textarea-wrapper textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Message text wrapping ────────────────────────────────────────────── */
[b-wtz57vyc6g] .msg-bubble {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ── Copy button appears on hover ────────────────────────────────────── */
[b-wtz57vyc6g] .msg-bubble .msg-copy-btn {
    opacity: 0 !important;
    transition: opacity 0.2s;
}

[b-wtz57vyc6g] .msg-bubble:hover .msg-copy-btn {
    opacity: 0.6 !important;
}

[b-wtz57vyc6g] .msg-copy-btn:hover {
    opacity: 1 !important;
}

/* ── Markdown content within chat bubble ─────────────────────────────── */
[b-wtz57vyc6g] .ai-markdown-container {
    word-break: break-word;
    overflow-wrap: anywhere;
}

[b-wtz57vyc6g] .ai-markdown-container .mud-markdown-body {
    font-size: 0.875rem;
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: anywhere;
}

[b-wtz57vyc6g] .ai-markdown-container .mud-markdown-body h1,
[b-wtz57vyc6g] .ai-markdown-container .mud-markdown-body h2,
[b-wtz57vyc6g] .ai-markdown-container .mud-markdown-body h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

[b-wtz57vyc6g] .ai-markdown-container .mud-markdown-body h1 {
    font-size: 1.1rem;
}

[b-wtz57vyc6g] .ai-markdown-container .mud-markdown-body p {
    margin-bottom: 0.5rem;
}

[b-wtz57vyc6g] .ai-markdown-container .mud-markdown-body p:last-child {
    margin-bottom: 0;
}

[b-wtz57vyc6g] .ai-markdown-container .mud-markdown-body pre {
    font-size: 0.8rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.5rem 0;
}

[b-wtz57vyc6g] .ai-markdown-container .mud-markdown-body code:not(pre code) {
    background-color: var(--mud-palette-background-grey);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.82em;
}

[b-wtz57vyc6g] .ai-markdown-container .mud-markdown-body table {
    font-size: 0.82rem;
    width: 100%;
}

[b-wtz57vyc6g] .ai-markdown-container .mud-markdown-body ul,
[b-wtz57vyc6g] .ai-markdown-container .mud-markdown-body ol {
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

[b-wtz57vyc6g] .ai-markdown-container .mud-markdown-body li {
    margin-bottom: 0.2rem;
}

[b-wtz57vyc6g] .ai-markdown-container .mud-markdown-body blockquote {
    border-left: 3px solid var(--mud-palette-primary);
    padding-left: 12px;
    margin: 0.5rem 0;
    opacity: 0.85;
}

[b-wtz57vyc6g] .ai-markdown-container .mud-markdown-body strong {
    font-weight: 600;
}

[b-wtz57vyc6g] .ai-markdown-container .mud-markdown-body a {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

[b-wtz57vyc6g] .ai-markdown-container .mud-markdown-body a:hover {
    text-decoration: underline;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-p07y6mzw2v] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-p07y6mzw2v] {
    flex: 1;
}

.sidebar[b-p07y6mzw2v] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-p07y6mzw2v] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-p07y6mzw2v]  a, .top-row[b-p07y6mzw2v]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-p07y6mzw2v]  a:hover, .top-row[b-p07y6mzw2v]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-p07y6mzw2v]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-p07y6mzw2v] {
        justify-content: space-between;
    }

    .top-row[b-p07y6mzw2v]  a, .top-row[b-p07y6mzw2v]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-p07y6mzw2v] {
        flex-direction: row;
    }

    .sidebar[b-p07y6mzw2v] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-p07y6mzw2v] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-p07y6mzw2v]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-p07y6mzw2v], article[b-p07y6mzw2v] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-p07y6mzw2v] {
    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-p07y6mzw2v] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-rp29vs7qnp] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-rp29vs7qnp] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-rp29vs7qnp] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-rp29vs7qnp] {
    font-size: 1.1rem;
}

.bi[b-rp29vs7qnp] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-rp29vs7qnp] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-rp29vs7qnp] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-rp29vs7qnp] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-rp29vs7qnp] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-rp29vs7qnp] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-rp29vs7qnp] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-rp29vs7qnp] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-rp29vs7qnp] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-rp29vs7qnp] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-rp29vs7qnp] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-rp29vs7qnp] {
        padding-bottom: 1rem;
    }

    .nav-item[b-rp29vs7qnp]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-rp29vs7qnp]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-rp29vs7qnp]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-rp29vs7qnp] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-rp29vs7qnp] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-rp29vs7qnp] {
        display: none;
    }

    .nav-scrollable[b-rp29vs7qnp] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-mup8dvuf8y],
.components-reconnect-repeated-attempt-visible[b-mup8dvuf8y],
.components-reconnect-failed-visible[b-mup8dvuf8y],
.components-pause-visible[b-mup8dvuf8y],
.components-resume-failed-visible[b-mup8dvuf8y],
.components-rejoining-animation[b-mup8dvuf8y] {
    display: none;
}

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


#components-reconnect-modal[b-mup8dvuf8y] {
    background-color: var(--mud-palette-surface, white);
    color: var(--mud-palette-text-primary, #333);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--mud-palette-divider, rgba(0,0,0,0.12));
    border-radius: 8px;
    box-shadow: none;
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-mup8dvuf8y 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-mup8dvuf8y] {
    border: 0;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    padding: 6px 24px;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    transition: background-color 0.15s;
}

    #components-reconnect-modal button:hover[b-mup8dvuf8y] {
        background-color: var(--mud-palette-primary-darken);
    }

    #components-reconnect-modal button:active[b-mup8dvuf8y] {
        background-color: var(--mud-palette-primary);
    }

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

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

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

@keyframes components-rejoining-animation-b-mup8dvuf8y {
    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;
    }
}
/* /Components/Shared/CommandPalette.razor.rz.scp.css */
/* Search trigger in the app bar — looks like a fake search field with kbd
   hints for the Ctrl+K shortcut. Hidden by `d-md-none` on the icon-only
   mobile version (set in the .razor markup).

   Selectors qualified with `.mud-button` to outrank MudBlazor's outlined
   styles (specifically `.mud-button { text-transform: uppercase }` and
   `.mud-button-outlined { border: 1px solid currentColor }` which would
   otherwise force "SEARCH" all-caps and a 100%-opacity border).

   All colours derive from `currentColor` (= AppBar text colour) via
   color-mix, so the trigger reads correctly on both dark and light themes
   without redefining variables per mode. */

.mud-button.cmd-palette-trigger[b-mjm47qoog1] {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 0.875rem;
    padding: 4px 8px 4px 12px;
    min-width: 220px;
    justify-content: flex-start;
    background: transparent;
    border-color: color-mix(in srgb, currentColor 15%, transparent);
}

.mud-button.cmd-palette-trigger:hover[b-mjm47qoog1] {
    background: color-mix(in srgb, currentColor 8%, transparent);
    border-color: color-mix(in srgb, currentColor 28%, transparent);
}

.cmd-palette-label[b-mjm47qoog1] {
    flex: 1 1 auto;
    text-align: start;
    opacity: 0.6;
    margin-inline-end: 24px;
}

.cmd-palette-kbd[b-mjm47qoog1] {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Each <kbd> styled like a small keycap, deriving from currentColor so it
   sits correctly on whatever appbar background (light, dark, branded). */
.cmd-palette-kbd kbd[b-mjm47qoog1] {
    display: inline-block;
    padding: 1px 6px;
    min-width: 20px;
    text-align: center;
    background: color-mix(in srgb, currentColor 10%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 3px;
    font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.5;
    color: inherit;
    opacity: 0.75;
}