@import '_content/CoopMan.Components.Clients/CoopMan.Components.Clients.8w50i8dqt3.bundle.scp.css';

/* /Components/Account/Pages/ForgotPassword.razor.rz.scp.css */
/* ForgotPassword.razor.css — styles specific to the single-page password
   reset wizard (email → OTP → new password). Shared "auth-*" field/button/
   alert classes live in wwwroot/css/auth.css. */

.auth-stepper[b-l0diz6sdt9] {
    display: flex;
    align-items: center;
    margin-bottom: 1.85rem;
}

.auth-step[b-l0diz6sdt9] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #8a8fa3;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    flex: none;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.auth-step.active[b-l0diz6sdt9],
.auth-step.done[b-l0diz6sdt9] {
    background: linear-gradient(135deg, var(--accent-from, #4f6ef7) 0%, var(--accent-to, #7c3aed) 100%);
    color: #fff;
    border-color: transparent;
}

.auth-step-line[b-l0diz6sdt9] {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 0.4rem;
    position: relative;
    overflow: hidden;
}

.auth-step-line.filled[b-l0diz6sdt9]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--accent-from, #4f6ef7) 0%, var(--accent-to, #7c3aed) 100%);
    transform-origin: left;
    animation: auth-step-fill-b-l0diz6sdt9 0.4s ease both;
}

@keyframes auth-step-fill-b-l0diz6sdt9 {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.otp-box-group[b-l0diz6sdt9] {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
}

.otp-box[b-l0diz6sdt9] {
    width: 3rem;
    height: 3.25rem;
    padding: 0;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #f2f3fb;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.otp-box:focus[b-l0diz6sdt9] {
    outline: none;
    border-color: var(--accent-from, #4f6ef7);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-from, #4f6ef7) 25%, transparent);
}

@media (max-width: 360px) {
    .otp-box[b-l0diz6sdt9] {
        width: 2.5rem;
        height: 2.75rem;
        font-size: 1.2rem;
    }
}

.auth-destination[b-l0diz6sdt9] {
    font-size: 0.85rem;
    color: #9aa1c2;
    margin: -0.75rem 0 1.25rem 0;
}

.auth-destination strong[b-l0diz6sdt9] {
    color: #dde0f0;
}

.auth-otp-actions[b-l0diz6sdt9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    font-size: 0.8rem;
}

.auth-otp-actions .divider[b-l0diz6sdt9] {
    color: #4a4f63;
}
/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* Login.razor.css — styles specific to the Login page. Shared "auth-*"
   classes (field, button, alert, header, ...) now live in wwwroot/css/auth.css
   so they can be reused by ForgotPassword.razor's reset/OTP wizard and any
   future page in this same auth shell — see that file for the shared rules.

   Plain HTML form elements (InputText/InputCheckbox), not interactive
   MudBlazor inputs: Account/Pages is [ExcludeFromInteractiveRouting], so
   there is no circuit to drive C# events like OnAdornmentClick — the form
   has to keep working via a plain HTTP POST. Interactivity here (password
   show/hide, submit-loading state) is plain JS, same pattern the rest of
   the app already uses. */

.auth-switch[b-kizpp9qgqb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #b7bcd6;
    cursor: pointer;
    user-select: none;
}

.auth-switch input[type="checkbox"][b-kizpp9qgqb] {
    appearance: none;
    -webkit-appearance: none;
    width: 2rem;
    height: 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
    flex: none;
}

.auth-switch input[type="checkbox"][b-kizpp9qgqb]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.auth-switch input[type="checkbox"]:checked[b-kizpp9qgqb] {
    background: linear-gradient(135deg, var(--accent-from, #4f6ef7) 0%, var(--accent-to, #7c3aed) 100%);
}

.auth-switch input[type="checkbox"]:checked[b-kizpp9qgqb]::before {
    transform: translateX(0.9rem);
}
/* /Components/Account/Shared/LoginLayout.razor.rz.scp.css */
/* LoginLayout.razor.css — split-screen auth shell (brand panel + form panel),
   scoped to Login, ForgotPassword, LoginWith2fa, Lockout, Register, etc. */

.auth-shell[b-1e4972u9f4] {
    /* Follows the tenant's actual MudTheme (set via MudThemeProvider above)
       when one is configured, falling back to a blue→violet default. */
    --accent-from: var(--mud-palette-primary, #4f6ef7);
    --accent-to: var(--mud-palette-primary-darken, #7c3aed);
    --navy-900: #0b1230;
    --navy-950: #070b1a;
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* ── Left brand panel ─────────────────────────────────────────────── */
.auth-side[b-1e4972u9f4] {
    position: relative;
    flex: 1 1 52%;
    min-height: 100vh;
    background: radial-gradient(circle at 15% 10%, #101a45 0%, var(--navy-900) 45%, var(--navy-950) 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 4rem 4vw;
}

.auth-side-grid[b-1e4972u9f4] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(circle at 30% 30%, #000 0%, transparent 75%);
    mask-image: radial-gradient(circle at 30% 30%, #000 0%, transparent 75%);
}

.auth-glow[b-1e4972u9f4] {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.35;
    pointer-events: none;
}

.auth-glow-a[b-1e4972u9f4] {
    width: 420px;
    height: 420px;
    top: -8%;
    left: -6%;
    background: var(--accent-from);
}

.auth-glow-b[b-1e4972u9f4] {
    width: 460px;
    height: 460px;
    bottom: -12%;
    right: -8%;
    background: var(--accent-to);
    opacity: 0.28;
}

.auth-side-content[b-1e4972u9f4] {
    position: relative;
    z-index: 1;
    max-width: 480px;
    color: #eef0fa;
}

.auth-brand-row[b-1e4972u9f4] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 3.25rem;
}

.auth-logo-badge[b-1e4972u9f4] {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-from) 0%, var(--accent-to) 100%);
    color: #fff;
    font-size: 1.05rem;
    flex: none;
    box-shadow: 0 8px 20px -6px rgba(79, 110, 247, 0.6);
}

.auth-brand-name[b-1e4972u9f4] {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
}

.auth-brand-tag[b-1e4972u9f4] {
    font-size: 0.78rem;
    color: #9aa1c2;
}

.auth-hero[b-1e4972u9f4] {
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 1rem 0;
    color: #fff;
}

.auth-hero-sub[b-1e4972u9f4] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #aab0cc;
    max-width: 34ch;
    margin-bottom: 2.5rem;
}

.auth-feature-list[b-1e4972u9f4] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.auth-feature[b-1e4972u9f4] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.85rem;
    color: #cbd0e6;
}

.auth-feature i[b-1e4972u9f4] {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #8fa0ff;
    flex: none;
    font-size: 0.8rem;
}

/* ── Right form panel ─────────────────────────────────────────────── */
.auth-form-side[b-1e4972u9f4] {
    flex: 1 1 48%;
    min-height: 100vh;
    background: var(--navy-950);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.75rem;
}

.auth-form-wrap[b-1e4972u9f4] {
    width: 100%;
    max-width: 400px;
    animation: auth-form-in-b-1e4972u9f4 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes auth-form-in-b-1e4972u9f4 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-footer[b-1e4972u9f4] {
    text-align: center;
    font-size: 0.75rem;
    color: #6d7391;
    margin-top: 1.75rem;
}

@media (max-width: 900px) {
    .auth-side[b-1e4972u9f4] {
        display: none;
    }

    .auth-form-side[b-1e4972u9f4] {
        flex: 1 1 100%;
    }
}
/* /Components/Layout/BlankLayout.razor.rz.scp.css */
.page[b-38guwukdge] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-38guwukdge] {
    flex: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

#blazor-error-ui[b-38guwukdge] {
    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[b-38guwukdge] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/TenantNavbar.razor.rz.scp.css */
/* Sized to sit inside MudAppBar's 64px bar with breathing room, and to shrink
   on narrow viewports rather than pushing the menu button off-screen. */
.navbar-brand-img[b-8louvlsdcw] {
    max-height: 38px;
    max-width: 240px;
    width: auto;
    object-fit: contain;
    display: block;
}

.navbar-brand-img--mark[b-8louvlsdcw] {
    max-height: 32px;
    max-width: 32px;
}

.navbar-brand[b-8louvlsdcw] {
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.navbar-brand:hover[b-8louvlsdcw] {
    opacity: .9;
}

@media (max-width: 599.98px) {
    .navbar-brand-img[b-8louvlsdcw] {
        max-height: 30px;
        max-width: 150px;
    }
}
/* /Components/Pages/Admin/Logging/Mails/Details.razor.rz.scp.css */
body[b-p90oonclbf] {
}
h1.header[b-p90oonclbf] {
    display: flex;
    flex-direction: row;
}

    h1.header[b-p90oonclbf]:before, h1[b-p90oonclbf]:after {
        content: "";
        flex: 1 1;
        border-bottom: 5px solid;
        margin: auto;
    }

    h1.header[b-p90oonclbf]:before {
        margin-right: 10px
    }

    h1.header[b-p90oonclbf]:after {
        margin-left: 10px
    }

ul[role=tablist][b-p90oonclbf] {
    flex-wrap: wrap;
}
/* /Components/Pages/Admin/Users/Details.razor.rz.scp.css */
body[b-mpa8rm9x8u] {
}
h1.header[b-mpa8rm9x8u] {
    display: flex;
    flex-direction: row;
}

    h1.header[b-mpa8rm9x8u]:before, h1[b-mpa8rm9x8u]:after {
        content: "";
        flex: 1 1;
        border-bottom: 5px solid;
        margin: auto;
    }

    h1.header[b-mpa8rm9x8u]:before {
        margin-right: 10px
    }

    h1.header[b-mpa8rm9x8u]:after {
        margin-left: 10px
    }

ul[role=tablist][b-mpa8rm9x8u] {
    flex-wrap: wrap;
}
/* /Components/Pages/Billing/Setup/Vendors/Details.razor.rz.scp.css */
body[b-lfys7zih5m] {
}
h1.header[b-lfys7zih5m] {
    display: flex;
    flex-direction: row;
}

    h1.header[b-lfys7zih5m]:before, h1[b-lfys7zih5m]:after {
        content: "";
        flex: 1 1;
        border-bottom: 5px solid;
        margin: auto;
    }

    h1.header[b-lfys7zih5m]:before {
        margin-right: 10px
    }

    h1.header[b-lfys7zih5m]:after {
        margin-left: 10px
    }

ul[role=tablist][b-lfys7zih5m] {
    flex-wrap: wrap;
}
/* /Components/Pages/Chat/ChatPanel.razor.rz.scp.css */
/* Scoped to ChatPanel. Every rule here targets markup this component renders
   itself, so no ::deep is needed — MessageThread carries its own stylesheet.

   Colours come from MudBlazor's CSS variables rather than literals so the panel
   follows the tenant theme and the light/dark switch MainLayout drives. */

.chat-panel[b-jwuvxuleu4] {
    /* Fills the drawer exactly. The drawer is fixed-height, so the header and
       search bar stay put and only the list scrolls. */
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.chat-panel-head[b-jwuvxuleu4] {
    display: flex;
    align-items: center;
    padding: 10px 8px 10px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.chat-panel-search[b-jwuvxuleu4] {
    padding: 10px 12px 6px;
    flex: 0 0 auto;
}

.chat-panel-scroll[b-jwuvxuleu4] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.chat-panel-empty[b-jwuvxuleu4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 180px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    padding: 24px;
}

/* ── Conversation rows ─────────────────────────────────────────── */

.chat-list-row[b-jwuvxuleu4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    /* The row is a flex child of a fixed-width drawer; min-width:0 is what lets
       the text column actually shrink so the ellipsis rules below can bite. */
    min-width: 0;
}

.chat-list-row:last-child[b-jwuvxuleu4] {
    border-bottom: none;
}

.chat-list-row:hover[b-jwuvxuleu4] {
    background-color: var(--mud-palette-action-default-hover);
}

.chat-list-text[b-jwuvxuleu4] {
    flex: 1 1 auto;
    min-width: 0;
}

.chat-list-title[b-jwuvxuleu4] {
    display: flex;
    align-items: center;
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-unread-title[b-jwuvxuleu4] {
    font-weight: 600;
}

.chat-muted-icon[b-jwuvxuleu4] {
    color: var(--mud-palette-text-secondary);
    margin-left: 4px;
}

.chat-list-preview[b-jwuvxuleu4] {
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-list-side[b-jwuvxuleu4] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
}

.chat-list-time[b-jwuvxuleu4] {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* A plain span rather than MudBadge: a badge positions itself relative to a
   child it wraps, and here the count is just the second line of the row. */
.chat-count[b-jwuvxuleu4] {
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    border-radius: 10px;
    font-size: 0.68rem;
    line-height: 1;
    padding: 3px 6px;
    min-width: 18px;
    text-align: center;
}

/* ── Presence dot ──────────────────────────────────────────────── */

.chat-avatar-wrap[b-jwuvxuleu4] {
    position: relative;
    flex: 0 0 auto;
    line-height: 0;
}

.chat-dot[b-jwuvxuleu4] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    /* Ring in the surface colour so the dot reads as separate from the avatar
       on both light and dark backgrounds. */
    border: 2px solid var(--mud-palette-surface);
}

.chat-dot-online[b-jwuvxuleu4] {
    background-color: var(--mud-palette-success);
}
/* /Components/Pages/Chat/Index.razor.rz.scp.css */
/* SUPERSEDED — safe to delete, along with Index.razor.

   These rules moved to the components that actually render the markup:
   ChatPanel.razor.css (the panel shell and conversation list) and
   MessageThread.razor.css (the thread and composer). Splitting them that way
   removed every ::deep selector, which only existed because the old page styled
   a child component's markup from the outside. */
/* /Components/Pages/Chat/MessageThread.razor.rz.scp.css */
/* Scoped to MessageThread. These rules used to live in the chat page's
   stylesheet behind ::deep; now that the thread is hosted in a side panel they
   belong to the component that actually renders them, which means no ::deep and
   no dependency on who the host is.

   Colours come from MudBlazor's CSS variables so the thread follows the tenant
   theme and the light/dark switch MainLayout drives. */

.chat-pane-head[b-5son7keipn] {
    display: flex;
    align-items: center;
    padding: 8px 8px 8px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.chat-head-text[b-5son7keipn] {
    /* Lets the title ellipsis instead of shoving the mute and close buttons out
       of a 400px header. */
    min-width: 0;
    overflow: hidden;
}

.chat-head-text .mud-typography[b-5son7keipn] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-scroll[b-5son7keipn] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 12px;
}

.chat-empty[b-5son7keipn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 160px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    padding: 24px;
}

/* ── Presence dot ──────────────────────────────────────────────── */

.chat-avatar-wrap[b-5son7keipn] {
    position: relative;
    flex: 0 0 auto;
    line-height: 0;
}

.chat-dot[b-5son7keipn] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-surface);
}

.chat-dot-online[b-5son7keipn] {
    background-color: var(--mud-palette-success);
}

/* ── Messages ──────────────────────────────────────────────────── */

.chat-daybreak[b-5son7keipn] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0;
}

.chat-daybreak span[b-5son7keipn] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background-gray);
    border-radius: 12px;
    padding: 2px 12px;
}

.chat-row[b-5son7keipn] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-bottom: 8px;
}

.chat-row-mine[b-5son7keipn] {
    justify-content: flex-end;
}

.chat-bubble[b-5son7keipn] {
    /* Wider than a full-page thread would use — at panel width a 60% cap leaves
       messages in a ribbon barely 200px across. */
    max-width: 82%;
    padding: 7px 11px;
    border-radius: 14px;
    position: relative;
}

.chat-bubble-theirs[b-5son7keipn] {
    background-color: var(--mud-palette-background-gray);
    border-bottom-left-radius: 4px;
}

.chat-bubble-mine[b-5son7keipn] {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-bottom-right-radius: 4px;
}

.chat-bubble-sender[b-5son7keipn] {
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.8;
    margin-bottom: 2px;
}

.chat-bubble-text[b-5son7keipn] {
    font-size: 0.85rem;
    line-height: 1.4;
    /* Newlines the user typed are rendered here, not by emitted <br> tags — the
       body is plain text and must never be treated as markup. overflow-wrap
       keeps a pasted URL from widening the bubble past its max-width. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-bubble-meta[b-5son7keipn] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    font-size: 0.64rem;
    opacity: 0.7;
    margin-top: 2px;
}

.chat-delete[b-5son7keipn] {
    /* Revealed on hover — a delete button on every one of your own messages is
       visual noise, and an easy misclick. */
    opacity: 0;
    transition: opacity 120ms ease-in-out;
    padding: 0;
}

.chat-bubble:hover .chat-delete[b-5son7keipn] {
    opacity: 1;
}

.chat-attachments[b-5son7keipn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* Icon-only. text-transform and max-width were there for the old text label and
   do nothing now; the tighter padding is what actually buys the space back. */
.chat-attachment[b-5son7keipn] {
    padding: 4px;
}

/* ── Composer ──────────────────────────────────────────────────── */

.chat-typing[b-5son7keipn] {
    display: flex;
    align-items: center;
    padding: 4px 12px 0;
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

.chat-pending[b-5son7keipn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px 0;
    flex: 0 0 auto;
}

.chat-composer[b-5son7keipn] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: 8px 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
    /* Anchors the visually-hidden file input below so it cannot escape to some
       ancestor and reserve space elsewhere. */
    position: relative;
}

/* The attach control.

   Sized and shaped to match the MudIconButton that sends, on the other end of
   the composer: same 40px circle, same transparent background, same hover wash.
   It is a <label> because that is what reliably opens a file picker — see the
   note in the markup — so all of MudIconButton's appearance has to be
   reproduced here rather than inherited. */
.chat-attach[b-5son7keipn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mud-palette-action-default);
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-attach:hover[b-5son7keipn] {
    background-color: var(--mud-palette-action-default-hover);
}

/* Matches the focus ring MudBlazor's icon buttons get, so keyboard users are
   not worse off for this being a label. */
.chat-attach:focus-within[b-5son7keipn] {
    background-color: var(--mud-palette-action-default-hover);
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.chat-attach-busy[b-5son7keipn] {
    pointer-events: none;
    opacity: 0.6;
}

/* The wrapper around <InputFile> — see the note in the markup for why the class
   is on a span rather than on InputFile itself.

   Deliberately NOT display:none. A display:none input cannot take focus, which
   would leave the attach control with no keyboard route to it at all and make
   the :focus-within ring above dead code. Clipping to 1px keeps the input in
   the tab order, so Tab lands on it, the label lights up, and Space opens the
   picker. Anchored by position:relative on .chat-composer. */
.chat-file-input[b-5son7keipn] {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.chat-input[b-5son7keipn] {
    flex: 1 1 auto;
    min-width: 0;
}
/* /Components/Pages/Chat/NewChatDialog.razor.rz.scp.css */
/* Scoped to NewChatDialog. The presence-dot rules are repeated here rather than
   shared with Index.razor.css because Blazor CSS isolation is per-component:
   Index's rules are rewritten to Index's own attribute and never reach markup
   this component renders, even though the class names match. */

.chat-picker[b-tgh3s6a5p2] {
    max-height: 46vh;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
}

.chat-picker-row[b-tgh3s6a5p2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.chat-picker-row:last-child[b-tgh3s6a5p2] {
    border-bottom: none;
}

.chat-picker-row:hover[b-tgh3s6a5p2] {
    background-color: var(--mud-palette-action-default-hover);
}

.chat-picker-row-on[b-tgh3s6a5p2] {
    background-color: var(--mud-palette-action-default-hover);
}

.chat-picker-text[b-tgh3s6a5p2] {
    min-width: 0;
    font-size: 0.86rem;
}

.chat-picker-sub[b-tgh3s6a5p2] {
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-avatar-wrap[b-tgh3s6a5p2] {
    position: relative;
    flex: 0 0 auto;
    line-height: 0;
}

.chat-dot[b-tgh3s6a5p2] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-surface);
}

.chat-dot-sm[b-tgh3s6a5p2] {
    width: 9px;
    height: 9px;
}

.chat-dot-online[b-tgh3s6a5p2] {
    background-color: var(--mud-palette-success);
}
/* /Components/Pages/Content/Sites/Notice/Preview.razor.rz.scp.css */
body[b-ympg0yf3ap] {
}
h1.header[b-ympg0yf3ap] {
    display: flex;
    flex-direction: row;
}

    h1.header[b-ympg0yf3ap]:before, h1[b-ympg0yf3ap]:after {
        content: "";
        flex: 1 1;
        border-bottom: 5px solid;
        margin: auto;
    }

    h1.header[b-ympg0yf3ap]:before {
        margin-right: 10px
    }

    h1.header[b-ympg0yf3ap]:after {
        margin-left: 10px
    }

ul[role=tablist][b-ympg0yf3ap] {
    flex-wrap: wrap;
}
/* /Components/Pages/Staff/Leave/Details.razor.rz.scp.css */
body[b-iixqu3vhxd] {
}
h1.header[b-iixqu3vhxd] {
    display: flex;
    flex-direction: row;
}

    h1.header[b-iixqu3vhxd]:before, h1[b-iixqu3vhxd]:after {
        content: "";
        flex: 1 1;
        border-bottom: 5px solid;
        margin: auto;
    }

    h1.header[b-iixqu3vhxd]:before {
        margin-right: 10px
    }

    h1.header[b-iixqu3vhxd]:after {
        margin-left: 10px
    }

.separator[b-iixqu3vhxd] {
    display: flex;
    padding: 30px 0;
    font-size:1.8em;
    align-items: center;
    text-align: center;
}

    .separator[b-iixqu3vhxd]::before,
    .separator[b-iixqu3vhxd]::after {
        content: '';
        flex: 1;
        border-bottom: 5px solid #000;
    }

    .separator:not(:empty)[b-iixqu3vhxd]::before {
        margin-right: .25em;
    }

    .separator:not(:empty)[b-iixqu3vhxd]::after {
        margin-left: .25em;
    }
/* /Components/Pages/Staff/Team/Appraisal/Details.razor.rz.scp.css */
body[b-zb3rildw53] {
}
h1.header[b-zb3rildw53] {
    display: flex;
    flex-direction: row;
}

    h1.header[b-zb3rildw53]:before, h1[b-zb3rildw53]:after {
        content: "";
        flex: 1 1;
        border-bottom: 5px solid;
        margin: auto;
    }

    h1.header[b-zb3rildw53]:before {
        margin-right: 10px
    }

    h1.header[b-zb3rildw53]:after {
        margin-left: 10px
    }

.separator[b-zb3rildw53] {
    display: flex;
    padding: 30px 0;
    font-size:1.8em;
    align-items: center;
    text-align: center;
}

    .separator[b-zb3rildw53]::before,
    .separator[b-zb3rildw53]::after {
        content: '';
        flex: 1;
        border-bottom: 5px solid #000;
    }

    .separator:not(:empty)[b-zb3rildw53]::before {
        margin-right: .25em;
    }

    .separator:not(:empty)[b-zb3rildw53]::after {
        margin-left: .25em;
    }
/* /Components/Pages/Support/Clients/Details.razor.rz.scp.css */
body[b-t4k7sul036] {
}
h1.header[b-t4k7sul036] {
    display: flex;
    flex-direction: row;
}

    h1.header[b-t4k7sul036]:before, h1[b-t4k7sul036]:after {
        content: "";
        flex: 1 1;
        border-bottom: 5px solid;
        margin: auto;
    }

    h1.header[b-t4k7sul036]:before {
        margin-right: 10px
    }

    h1.header[b-t4k7sul036]:after {
        margin-left: 10px
    }

ul[role=tablist][b-t4k7sul036] {
    flex-wrap: wrap;
}
/* /Components/Pages/Tickets/Details.razor.rz.scp.css */
body[b-vvp8c7e5sq] {
}
h1.header[b-vvp8c7e5sq] {
    display: flex;
    flex-direction: row;
}

    h1.header[b-vvp8c7e5sq]:before, h1[b-vvp8c7e5sq]:after {
        content: "";
        flex: 1 1;
        border-bottom: 5px solid;
        margin: auto;
    }

    h1.header[b-vvp8c7e5sq]:before {
        margin-right: 10px
    }

    h1.header[b-vvp8c7e5sq]:after {
        margin-left: 10px
    }

ul[role=tablist][b-vvp8c7e5sq] {
    flex-wrap: wrap;
}
/* /Components/Shared/Partial/DashPageHeader.razor.rz.scp.css */
/* ── Header Layout ────────────────────────────────── */
.dash-header[b-4kl10bgcz9] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1.25rem;
    padding-top: 2.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.dash-header__left[b-4kl10bgcz9] {
    display: flex;
    flex-direction: column;
}

.dash-header__right[b-4kl10bgcz9] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.dash-header__actions[b-4kl10bgcz9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Title ────────────────────────────────────────── */
.dash-header__eyebrow[b-4kl10bgcz9] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 0.25rem;
}

.dash-header__title[b-4kl10bgcz9] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.15;
}

/* ── Branch Selector ──────────────────────────────── */
.dash-branch-selector[b-4kl10bgcz9] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dash-branch-selector__label[b-4kl10bgcz9] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

.dash-branch-select-wrap[b-4kl10bgcz9] {
    width: 240px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

    .dash-branch-select-wrap:hover[b-4kl10bgcz9] {
        border-color: rgba(255,255,255,0.35);
    }

/* ── MudSelect overrides ──────────────────────────── */
.dash-branch-select[b-4kl10bgcz9] {
    width: 100% !important;
}

    .dash-branch-select .mud-input-filled[b-4kl10bgcz9] {
        background: transparent !important;
        border-radius: 10px;
    }

        .dash-branch-select .mud-input-filled:hover[b-4kl10bgcz9] {
            background: transparent !important;
        }

    .dash-branch-select .mud-input-slot[b-4kl10bgcz9] {
        color: #ffffff !important;
        font-weight: 500;
        font-size: 0.9rem;
        padding: 10px 14px !important;
    }

    .dash-branch-select .mud-select-input[b-4kl10bgcz9] {
        color: #ffffff !important;
    }

    .dash-branch-select .mud-svg-icon[b-4kl10bgcz9] {
        color: rgba(255,255,255,0.6) !important;
    }

    .dash-branch-select .mud-input-filled[b-4kl10bgcz9]::before,
    .dash-branch-select .mud-input-filled[b-4kl10bgcz9]::after {
        border: none !important;
    }

/* ── Skeleton states ──────────────────────────────── */
.dash-header--loading .dash-header__left[b-4kl10bgcz9],
.dash-header--loading .dash-header__right[b-4kl10bgcz9] {
    pointer-events: none;
}

.skel[b-4kl10bgcz9] {
    background: linear-gradient( 90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 75% );
    background-size: 600px 100%;
    animation: skel-shimmer-b-4kl10bgcz9 1.6s infinite linear;
    border-radius: 6px;
}

@keyframes skel-shimmer-b-4kl10bgcz9 {
    0% {
        background-position: -600px 0;
    }

    100% {
        background-position: 600px 0;
    }
}

.skel--eyebrow[b-4kl10bgcz9] {
    height: 10px;
    width: 140px;
    margin-bottom: 10px;
}

.skel--title[b-4kl10bgcz9] {
    height: 28px;
    width: 200px;
}

.skel--select[b-4kl10bgcz9] {
    height: 42px;
    width: 240px;
    border-radius: 10px;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 576px) {
    .dash-header[b-4kl10bgcz9] {
        flex-direction: column;
        align-items: flex-start;
    }

    .dash-branch-select-wrap[b-4kl10bgcz9] {
        width: 100%;
    }

    .dash-header__actions[b-4kl10bgcz9] {
        width: 100%;
        justify-content: flex-start;
    }
}