@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css';

/* /Components/Account/Pages/Login.razor.rz.scp.css */
.account-login[b-9tq82axxxt] {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.account-login-header h1[b-9tq82axxxt] {
    margin: 0;
    color: #15191d;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
}

[b-9tq82axxxt] .account-login-form {
    display: grid;
    gap: 0.9rem;
}

[b-9tq82axxxt] .account-login-form .form-floating {
    margin-bottom: 0 !important;
}

[b-9tq82axxxt] .account-login-form .form-control {
    min-height: 3.25rem;
    border-color: #d5dde3;
    border-radius: 0.5rem;
    font-size: 1rem;
}

[b-9tq82axxxt] .account-login-form .form-control:focus {
    border-color: #2563eb;
}

[b-9tq82axxxt] .account-login-form .btn-primary {
    min-height: 3.25rem;
    border-color: #1b5f9f;
    border-radius: 0.5rem;
    background: #1b5f9f;
    font-size: 1.05rem;
    font-weight: 800;
}

[b-9tq82axxxt] .account-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.75rem;
    margin: 0;
    padding-left: 0;
    color: #3d454d;
}

[b-9tq82axxxt] .account-remember .form-check-input {
    float: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
}

[b-9tq82axxxt] .account-login-links {
    display: grid;
    gap: 0.55rem;
}

[b-9tq82axxxt] .account-login-links a {
    color: #006bb7;
    font-size: 0.96rem;
    font-weight: 650;
    line-height: 1.3;
    text-decoration: none;
}

[b-9tq82axxxt] .account-login-links a:hover,
[b-9tq82axxxt] .account-login-links a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .account-login[b-9tq82axxxt] {
        gap: 1.1rem;
    }

    .account-login-header h1[b-9tq82axxxt] {
        font-size: 2.1rem;
    }
}

@media (max-width: 768px) {
    .account-login[b-9tq82axxxt] {
        margin-top: clamp(3.25rem, 13dvh, 6rem);
    }

    .account-login-header h1[b-9tq82axxxt] {
        font-size: clamp(2rem, 10vw, 2.75rem);
    }

    [b-9tq82axxxt] .account-login-form {
        gap: 1rem;
    }

    [b-9tq82axxxt] .account-login-form .form-control {
        min-height: 3.5rem;
    }

    [b-9tq82axxxt] .account-login-form .btn-primary {
        min-height: 3.65rem;
    }

    [b-9tq82axxxt] .account-login-links {
        gap: 0.75rem;
        margin-top: 0.15rem;
    }
}
/* /Components/Account/Shared/AccountLayout.razor.rz.scp.css */
.account-shell[b-mdkxbehjqf] {
    display: grid;
    min-height: 100dvh;
    place-items: center;
    padding: 1.5rem;
    background: #eef3f6;
}

.account-main[b-mdkxbehjqf] {
    width: min(100%, 30rem);
}

.account-surface[b-mdkxbehjqf] {
    display: grid;
    align-content: start;
    gap: 1.5rem;
    padding: 1.5rem;
    border: 1px solid #d9e1e7;
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: 0 1rem 2.5rem rgba(20, 31, 43, 0.12);
}

.account-brand[b-mdkxbehjqf] {
    color: #4f46e5;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

@media (max-width: 768px) {
    .account-shell[b-mdkxbehjqf] {
        align-items: start;
        padding: 0;
        background: #ffffff;
    }

    .account-main[b-mdkxbehjqf] {
        min-height: 100dvh;
    }

    .account-surface[b-mdkxbehjqf] {
        min-height: 100dvh;
        gap: 0;
        padding: clamp(1.25rem, 5vw, 2rem);
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .account-brand[b-mdkxbehjqf] {
        font-size: 1.75rem;
    }
}
/* /Components/Accounts/AccountExplanationPanel.razor.rz.scp.css */
/* Sentence case. MudBlazor puts the uppercase transform on .mud-button, not the root. */
.account-explanation-actions[b-tv6n2ee1o6]  .mud-button {
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 600;
}

@media (any-pointer: coarse) {
    .account-explanation-actions[b-tv6n2ee1o6]  .mud-button-root {
        min-height: 44px;
    }
}
/* /Components/Changelog/ProductChangelogEntryCard.razor.rz.scp.css */
.product-changelog-details > summary[b-6icbtc98n7] {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    cursor: pointer;
    color: var(--mud-palette-primary);
    font-weight: 500;
}

/* Cap line length: body lines ran ~1320px wide on desktop. */
.product-changelog-body[b-6icbtc98n7] {
    max-width: 900px;
    margin-top: 8px;
}

/* Body headings stay below the card title (h6) instead of a 40px markdown H1. */
.product-changelog-body[b-6icbtc98n7]  h1,
.product-changelog-body[b-6icbtc98n7]  h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 12px 0 6px;
}

.product-changelog-body[b-6icbtc98n7]  h3,
.product-changelog-body[b-6icbtc98n7]  h4,
.product-changelog-body[b-6icbtc98n7]  h5,
.product-changelog-body[b-6icbtc98n7]  h6 {
    font-size: 1rem;
    font-weight: 600;
    margin: 10px 0 4px;
}
/* /Components/Changelog/ProductChangelogTimeline.razor.rz.scp.css */
.product-changelog-days[b-ba6lymdmpn] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.product-changelog-date[b-ba6lymdmpn] {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Chat/ChatComposerImageStrip.razor.rz.scp.css */
.pb-chat-image-strip[b-1usyukhjhd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 0;
}

.pb-chat-image-chip[b-1usyukhjhd] {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

.pb-chat-image-chip img[b-1usyukhjhd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pb-chat-image-chip[b-1usyukhjhd]  .pb-chat-image-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 2px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
}

.pb-chat-image-chip[b-1usyukhjhd]  .pb-chat-image-remove:hover {
    background: rgba(0, 0, 0, 0.75);
}

.pb-chat-image-error[b-1usyukhjhd] {
    align-self: center;
}
/* /Components/Chat/ChatDrawer.razor.rz.scp.css */
.pb-chat-drawer[b-5rosycso2i] {
    position: fixed;
    top: 0;
    right: -380px;
    width: 360px;
    height: 100vh;
    background: var(--pb-chat-surface);
    border-left: 1px solid var(--pb-chat-border);
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.15);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    /* Hidden (not just parked off-screen) while closed: a fixed element beyond the right edge
       still widens the document scroll width, which made every page scroll sideways on phones. */
    visibility: hidden;
    transition: right 0.25s ease, visibility 0s linear 0.25s;
    /* Use MudBlazor palette variables with enhanced fallbacks */
    --pb-chat-surface: var(--mud-palette-background, var(--mud-palette-surface, #ffffff));
    --pb-chat-surface-subtle: var(--mud-palette-surface, #f8fafc);
    --pb-chat-surface-hover: rgba(var(--mud-palette-primary-rgb, 99, 102, 241), 0.08);
    --pb-chat-border: var(--mud-palette-lines-default, #e2e8f0);
    --pb-chat-text: var(--mud-palette-text-primary, #1e293b);
    --pb-chat-text-muted: var(--mud-palette-text-secondary, #64748b);
    --pb-chat-text-faint: var(--mud-palette-text-disabled, #94a3b8);
    --pb-chat-avatar-bg: var(--mud-palette-background-gray, #e0e7ff);
    --pb-chat-primary: var(--mud-palette-primary, #4f46e5);
    --pb-chat-primary-soft: rgba(var(--mud-palette-primary-rgb, 79, 70, 229), 0.12);
    --pb-chat-primary-strong: rgba(var(--mud-palette-primary-rgb, 79, 70, 229), 0.2);
    --pb-chat-primary-contrast: var(--mud-palette-primary-text, #ffffff);
    --pb-chat-secondary: var(--mud-palette-secondary, #7c3aed);
    --pb-chat-success: var(--mud-palette-success, #22c55e);
    --pb-chat-warning: var(--mud-palette-warning, #f59e0b);
    --pb-chat-warning-soft: rgba(var(--mud-palette-warning-rgb, 245, 158, 11), 0.15);
    --pb-chat-error: var(--mud-palette-error, #ef4444);
    --pb-chat-error-soft: rgba(var(--mud-palette-error-rgb, 239, 68, 68), 0.12);
    --pb-chat-info: var(--mud-palette-info, #0ea5e9);
    --pb-chat-info-soft: rgba(var(--mud-palette-info-rgb, 14, 165, 233), 0.12);
    --pb-chat-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    --pb-chat-shadow-strong: 0 8px 20px rgba(15, 23, 42, 0.12);
    --pb-chat-shadow-popover: 0 12px 32px rgba(15, 23, 42, 0.15);
}

.pb-chat-drawer.is-open[b-5rosycso2i] {
    right: 0;
    visibility: visible;
    transition: right 0.25s ease, visibility 0s;
}

.pb-chat-drawer-body[b-5rosycso2i] {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.pb-chat-drawer-body[b-5rosycso2i]  .pb-chat-drawer-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.pb-chat-drawer-chat[b-5rosycso2i] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
}

.pb-chat-drawer-body[b-5rosycso2i]  .pb-chat-drawer-tabs {
    height: 100%;
    flex: 1;
    min-height: 0;
}

.pb-chat-drawer-body[b-5rosycso2i]  .pb-chat-drawer-tabs .mud-tab {
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
    font-size: 0.875rem;
}

.pb-chat-backdrop[b-5rosycso2i] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 1100;
}

@media (max-width: 600px) {
    .pb-chat-drawer[b-5rosycso2i] {
        width: 100vw;
        right: -100vw;
    }
}

/* Discord-inspired dark mode - richer, deeper colors */
:global(.mud-theme-dark) .pb-chat-drawer[b-5rosycso2i] {
    --pb-chat-surface: #2f3136;
    --pb-chat-surface-subtle: #36393f;
    --pb-chat-surface-hover: rgba(79, 84, 92, 0.4);
    --pb-chat-border: #202225;
    --pb-chat-text: #dcddde;
    --pb-chat-text-muted: #b9bbbe;
    --pb-chat-text-faint: #72767d;
    --pb-chat-avatar-bg: #40444b;
    --pb-chat-primary-soft: rgba(88, 101, 242, 0.2);
    --pb-chat-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    --pb-chat-shadow-strong: 0 16px 32px rgba(0, 0, 0, 0.5);
}

/* Thread panel */
.pb-chat-drawer-thread-panel[b-5rosycso2i] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--pb-chat-surface);
    display: flex;
    flex-direction: column;
    z-index: 10;
    animation: pb-thread-slide-in-b-5rosycso2i 0.2s ease-out;
}

@keyframes pb-thread-slide-in-b-5rosycso2i {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.pb-chat-drawer-thread-header[b-5rosycso2i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--pb-chat-border);
    background: var(--pb-chat-surface-subtle);
}

.pb-chat-drawer-thread-title[b-5rosycso2i] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--pb-chat-text);
}

.pb-chat-drawer-thread-title[b-5rosycso2i]  .mud-icon-root {
    color: var(--pb-chat-primary);
}

.pb-chat-drawer-thread-root[b-5rosycso2i] {
    padding: 12px;
    border-bottom: 1px solid var(--pb-chat-border);
    background: var(--pb-chat-surface-subtle);
}

.pb-chat-drawer-thread-root .pb-chat-drawer-message-meta[b-5rosycso2i] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.pb-chat-drawer-thread-root .pb-chat-drawer-message-avatar[b-5rosycso2i] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-primary);
    border: 1px solid var(--pb-chat-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
}

.pb-chat-drawer-thread-root .pb-chat-drawer-message-sender[b-5rosycso2i] {
    font-weight: 600;
    color: var(--pb-chat-text);
}

.pb-chat-drawer-thread-root .pb-chat-drawer-message-sender-button[b-5rosycso2i],
.pb-chat-drawer-thread-reply .pb-chat-drawer-message-sender-button[b-5rosycso2i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.pb-chat-drawer-thread-root .pb-chat-drawer-message-sender-button:hover .pb-chat-drawer-message-sender[b-5rosycso2i],
.pb-chat-drawer-thread-root .pb-chat-drawer-message-sender-button:focus-visible .pb-chat-drawer-message-sender[b-5rosycso2i],
.pb-chat-drawer-thread-reply .pb-chat-drawer-message-sender-button:hover .pb-chat-drawer-message-sender[b-5rosycso2i],
.pb-chat-drawer-thread-reply .pb-chat-drawer-message-sender-button:focus-visible .pb-chat-drawer-message-sender[b-5rosycso2i] {
    color: var(--pb-chat-primary);
    text-decoration: underline;
}

.pb-chat-drawer-thread-root .pb-chat-drawer-message-sender-button:focus-visible[b-5rosycso2i],
.pb-chat-drawer-thread-reply .pb-chat-drawer-message-sender-button:focus-visible[b-5rosycso2i] {
    outline: 2px solid var(--pb-chat-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.pb-chat-drawer-thread-root .pb-chat-drawer-message-time[b-5rosycso2i] {
    font-size: 0.72rem;
    color: var(--pb-chat-text-faint);
    margin-left: auto;
}

.pb-chat-drawer-thread-root .pb-chat-drawer-message-body[b-5rosycso2i] {
    color: var(--pb-chat-text);
    font-size: 0.875rem;
    line-height: 1.5;
}

.pb-chat-drawer-thread-root .pb-chat-drawer-message-body.is-mention[b-5rosycso2i] {
    background: var(--pb-chat-warning-soft);
    border-radius: 6px;
    padding: 4px 6px;
}

.pb-chat-drawer-thread-root .pb-chat-drawer-message-body[b-5rosycso2i]  .pb-chat-mention {
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-primary);
    border-radius: 4px;
    padding: 0 4px;
    font-weight: 600;
}

.pb-chat-drawer-thread-root .pb-chat-drawer-message-body[b-5rosycso2i]  button.pb-chat-mention,
.pb-chat-drawer-thread-reply .pb-chat-drawer-message-body[b-5rosycso2i]  button.pb-chat-mention {
    border: 0;
    font: inherit;
    cursor: pointer;
}

.pb-chat-drawer-thread-root .pb-chat-drawer-message-body[b-5rosycso2i]  button.pb-chat-mention:hover,
.pb-chat-drawer-thread-root .pb-chat-drawer-message-body[b-5rosycso2i]  button.pb-chat-mention:focus-visible,
.pb-chat-drawer-thread-reply .pb-chat-drawer-message-body[b-5rosycso2i]  button.pb-chat-mention:hover,
.pb-chat-drawer-thread-reply .pb-chat-drawer-message-body[b-5rosycso2i]  button.pb-chat-mention:focus-visible {
    text-decoration: underline;
}

.pb-chat-drawer-thread-divider[b-5rosycso2i] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--pb-chat-border);
}

.pb-chat-drawer-thread-reply-count[b-5rosycso2i] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pb-chat-text-muted);
}

.pb-chat-drawer-thread-replies[b-5rosycso2i] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pb-chat-drawer-thread-reply[b-5rosycso2i] {
    padding: 8px 10px;
    border: 1px solid var(--pb-chat-border);
    border-radius: 10px;
    background: var(--pb-chat-surface-subtle);
}

.pb-chat-drawer-thread-reply.is-grouped[b-5rosycso2i] {
    margin-top: -4px;
}

.pb-chat-drawer-thread-reply .pb-chat-drawer-message-header[b-5rosycso2i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.pb-chat-drawer-thread-reply .pb-chat-drawer-message-meta[b-5rosycso2i] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pb-chat-drawer-thread-reply .pb-chat-drawer-message-avatar[b-5rosycso2i] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-primary);
    border: 1px solid var(--pb-chat-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
}

.pb-chat-drawer-thread-reply .pb-chat-drawer-message-sender[b-5rosycso2i] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pb-chat-text);
}

.pb-chat-drawer-thread-reply .pb-chat-drawer-message-time[b-5rosycso2i] {
    font-size: 0.7rem;
    color: var(--pb-chat-text-faint);
}

.pb-chat-drawer-thread-reply .pb-chat-drawer-message-body[b-5rosycso2i] {
    color: var(--pb-chat-text);
    font-size: 0.85rem;
    line-height: 1.45;
}

.pb-chat-drawer-thread-reply .pb-chat-drawer-message-body.is-mention[b-5rosycso2i] {
    background: var(--pb-chat-warning-soft);
    border-radius: 6px;
    padding: 4px 6px;
}

.pb-chat-drawer-thread-reply .pb-chat-drawer-message-body[b-5rosycso2i]  .pb-chat-mention {
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-primary);
    border-radius: 4px;
    padding: 0 4px;
    font-weight: 600;
}

.pb-chat-drawer-thread-reply .pb-chat-drawer-message-edited[b-5rosycso2i] {
    margin-top: 4px;
    font-size: 0.68rem;
    color: var(--pb-chat-text-faint);
}

.pb-chat-drawer-thread-read-status[b-5rosycso2i] {
    display: flex;
    align-items: center;
    gap: 3px;
    width: fit-content;
    margin-top: 5px;
    margin-left: auto;
    font-size: 0.68rem;
    line-height: 1;
    color: var(--pb-chat-text-faint);
}

.pb-chat-drawer-thread-read-status.is-read[b-5rosycso2i] {
    color: var(--pb-chat-primary);
}

.pb-chat-drawer-thread-read-status[b-5rosycso2i]  .pb-chat-drawer-thread-read-status-icon {
    font-size: 0.85rem;
}

.pb-chat-drawer-thread-composer[b-5rosycso2i] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--pb-chat-border);
    background: var(--pb-chat-surface);
}

.pb-chat-drawer-thread-input-wrapper[b-5rosycso2i] {
    flex: 1;
    position: relative;
}

.pb-chat-drawer-thread-composer[b-5rosycso2i]  .pb-chat-drawer-thread-input {
    width: 100%;
}

.pb-chat-drawer-thread-composer[b-5rosycso2i]  .pb-chat-drawer-thread-input .mud-input-outlined-border {
    border-radius: 8px;
}

.pb-chat-drawer-thread-composer[b-5rosycso2i]  .mud-icon-button {
    color: var(--pb-chat-primary);
}

.pb-chat-drawer-thread-composer[b-5rosycso2i]  .mud-icon-button:disabled {
    color: var(--pb-chat-text-faint);
}

@media (prefers-reduced-motion: reduce) {
    .pb-chat-drawer-thread-panel[b-5rosycso2i] {
        animation: none;
    }
}
/* /Components/Chat/ChatDrawerAlertsTab.razor.rz.scp.css */
.pb-chat-drawer-empty[b-jggpc7stbb] {
    border: 1px dashed var(--pb-chat-border);
    border-radius: 16px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--pb-chat-text-muted);
    background: var(--pb-chat-surface-subtle);
    text-align: center;
}

.pb-chat-drawer-empty-icon[b-jggpc7stbb] {
    font-size: 2rem;
    color: var(--pb-chat-text-faint);
}

.pb-chat-alert-item[b-jggpc7stbb] {
    border: 1px solid var(--pb-chat-border);
    border-radius: 10px;
    padding: 10px;
    background: var(--pb-chat-surface-subtle);
    text-align: left;
    color: var(--pb-chat-text);
}

.pb-chat-alert-header[b-jggpc7stbb] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--pb-chat-text-muted);
}

.pb-chat-alert-pill[b-jggpc7stbb] {
    background: var(--pb-chat-info-soft);
    color: var(--pb-chat-info);
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 999px;
}

.pb-chat-alert-channel[b-jggpc7stbb] {
    font-weight: 600;
    margin-top: 6px;
}

.pb-chat-alert-preview[b-jggpc7stbb] {
    font-size: 0.85rem;
    margin-top: 6px;
}
/* /Components/Chat/ChatDrawerChannelsTab.razor.rz.scp.css */
.pb-chat-channel-toolbar[b-4al1zdqw04] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pb-chat-channel-toolbar[b-4al1zdqw04]  .mud-input-control {
    flex: 1;
}

.pb-chat-direct-message[b-4al1zdqw04] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

[b-4al1zdqw04] .pb-chat-direct-message-popover {
    width: 320px;
    max-width: calc(100vw - 32px);
}

[b-4al1zdqw04] .pb-chat-direct-message-card {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pb-chat-channel-filters[b-4al1zdqw04] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pb-chat-channel-filters[b-4al1zdqw04]  .pb-chat-filter-button {
    font-size: 0.75rem;
    padding: 6px 14px;
    min-height: auto;
    border-radius: 6px;
    border: 1px solid var(--pb-chat-border);
    background: transparent;
    color: var(--pb-chat-text-muted);
    font-weight: 500;
    text-transform: none;
    transition: all 0.1s ease;
    box-shadow: none;
}

.pb-chat-channel-filters[b-4al1zdqw04]  .pb-chat-filter-button:hover {
    background: var(--pb-chat-surface-hover);
    color: var(--pb-chat-text);
    border-color: var(--pb-chat-border);
}

/* More distinct active state - filled background */
.pb-chat-channel-filters[b-4al1zdqw04]  .pb-chat-filter-button.is-active {
    background: var(--pb-chat-primary);
    border-color: var(--pb-chat-primary);
    color: var(--pb-chat-primary-contrast, #fff);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--mud-palette-primary-rgb, 30, 64, 175), 0.3);
}

.pb-chat-channel-filters[b-4al1zdqw04]  .pb-chat-filter-button.is-active:hover {
    background: var(--pb-chat-primary);
    border-color: var(--pb-chat-primary);
}

.pb-chat-filter-count[b-4al1zdqw04] {
    margin-left: 6px;
    background: var(--pb-chat-surface-hover);
    color: var(--pb-chat-text);
    border-radius: 999px;
    font-size: 0.65rem;
    padding: 2px 6px;
    font-weight: 600;
}

/* Count badge in active state */
.pb-chat-channel-filters[b-4al1zdqw04]  .pb-chat-filter-button.is-active .pb-chat-filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: var(--pb-chat-primary-contrast, #fff);
}

.pb-chat-channel-list[b-4al1zdqw04] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pb-chat-channel-section-title[b-4al1zdqw04] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--pb-chat-text-muted);
    margin: 12px 0 6px 0;
    padding: 4px 8px;
    background: var(--pb-chat-surface-subtle);
    border-radius: 4px;
}

.pb-chat-channel-toggle[b-4al1zdqw04] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pb-chat-text-muted);
    font-size: 0.75rem;
    border: none;
    background: transparent;
    padding: 2px 0;
    cursor: pointer;
}

.pb-chat-channel-toggle:hover[b-4al1zdqw04] {
    color: var(--pb-chat-text);
}

.pb-chat-channel-toggle:focus-visible[b-4al1zdqw04] {
    outline: 2px solid var(--pb-chat-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.pb-chat-channel-item[b-4al1zdqw04] {
    border: none;
    border-radius: 6px;
    padding: 8px 10px 8px 12px;
    margin-left: 4px;
    background: transparent;
    text-align: left;
    color: var(--pb-chat-text-muted);
    transition: background 0.1s ease, color 0.1s ease;
    position: relative;
    cursor: pointer;
}

.pb-chat-channel-item:hover[b-4al1zdqw04] {
    background: var(--pb-chat-surface-hover);
    color: var(--pb-chat-text);
}

.pb-chat-channel-item:active[b-4al1zdqw04] {
    background: var(--pb-chat-surface-hover);
}

.pb-chat-channel-item:focus-visible[b-4al1zdqw04] {
    outline: 2px solid var(--pb-chat-primary);
    outline-offset: 2px;
}

.pb-chat-channel-item.is-hidden[b-4al1zdqw04] {
    opacity: 0.5;
}

/* Discord-style unread indicator pill on left */
.pb-chat-channel-item[b-4al1zdqw04]::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0;
    background: var(--pb-chat-text);
    border-radius: 0 4px 4px 0;
    transition: height 0.15s ease;
}

.pb-chat-channel-item:hover[b-4al1zdqw04]::before {
    height: 8px;
}

/* Unread state styling */
.pb-chat-channel-item.has-unread[b-4al1zdqw04] {
    color: var(--pb-chat-text);
}

.pb-chat-channel-item.has-unread[b-4al1zdqw04]::before {
    height: 8px;
    background: var(--pb-chat-text);
}

.pb-chat-channel-item.has-unread .pb-chat-channel-name[b-4al1zdqw04] {
    font-weight: 700;
    color: var(--pb-chat-text);
}

.pb-chat-channel-item.has-unread .pb-chat-channel-preview[b-4al1zdqw04] {
    color: var(--pb-chat-text);
}

/* Pinned channel highlight */
.pb-chat-channel-item.is-pinned[b-4al1zdqw04] {
    background: var(--pb-chat-surface-subtle);
}

.pb-chat-channel-item.is-pinned[b-4al1zdqw04]::before {
    height: 20px;
    background: var(--pb-chat-warning);
}

.pb-chat-channel-title[b-4al1zdqw04] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    gap: 8px;
    min-width: 0;
    color: var(--pb-chat-text);
}

.pb-chat-channel-title-left[b-4al1zdqw04] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.pb-chat-channel-title-right[b-4al1zdqw04] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.pb-chat-channel-title[b-4al1zdqw04]  .pb-chat-channel-type-icon {
    color: var(--pb-chat-text-muted);
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.pb-chat-channel-title[b-4al1zdqw04]  .pb-chat-channel-lock-icon {
    color: var(--pb-chat-text-faint);
    flex-shrink: 0;
}

.pb-chat-channel-name[b-4al1zdqw04] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pb-chat-text);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pb-chat-channel-name[b-4al1zdqw04]  .pb-chat-channel-dm-indicator {
    font-size: 0.75rem;
    color: var(--pb-chat-text-faint);
    flex-shrink: 0;
}

.pb-chat-channel-actions[b-4al1zdqw04] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.pb-chat-channel-item:hover .pb-chat-channel-actions[b-4al1zdqw04],
.pb-chat-channel-item:focus-within .pb-chat-channel-actions[b-4al1zdqw04] {
    opacity: 1;
    pointer-events: auto;
}

/* Touch devices: show actions by default since hover is not available */
@media (hover: none) {
    .pb-chat-channel-actions[b-4al1zdqw04] {
        opacity: 0.7;
        pointer-events: auto;
    }

    .pb-chat-channel-item:active .pb-chat-channel-actions[b-4al1zdqw04] {
        opacity: 1;
    }
}

button.pb-chat-channel-action[b-4al1zdqw04],
span.pb-chat-channel-action[b-4al1zdqw04] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 6px;
    color: var(--pb-chat-text-muted);
    border: none;
    background: transparent;
    cursor: pointer;
}

.pb-chat-channel-action:hover[b-4al1zdqw04] {
    background: var(--pb-chat-surface-hover);
    color: var(--pb-chat-text);
}

.pb-chat-channel-action:focus-visible[b-4al1zdqw04] {
    outline: 2px solid var(--pb-chat-primary);
    outline-offset: 1px;
}

.pb-chat-channel-action.is-locked[b-4al1zdqw04] {
    color: var(--pb-chat-primary);
    background: var(--pb-chat-primary-soft);
}

.pb-chat-channel-preview-row[b-4al1zdqw04] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.pb-chat-channel-preview[b-4al1zdqw04] {
    font-size: 0.8rem;
    color: var(--pb-chat-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.pb-chat-channel-meta[b-4al1zdqw04] {
    font-size: 0.65rem;
    color: var(--pb-chat-text-faint);
    flex-shrink: 0;
    white-space: nowrap;
}

.pb-chat-channel-badges[b-4al1zdqw04] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pb-chat-unread-badge[b-4al1zdqw04] {
    background: var(--pb-chat-error);
    color: var(--mud-palette-error-contrast, #fff);
    border-radius: 999px;
    font-size: 0.7rem;
    padding: 2px 8px;
}

.pb-chat-unread-badge.is-bump[b-4al1zdqw04] {
    animation: pb-unread-bump-b-4al1zdqw04 0.35s ease;
}

.pb-chat-mention-badge[b-4al1zdqw04] {
    background: var(--pb-chat-warning);
    color: var(--mud-palette-warning-contrast, #fff);
    border-radius: 999px;
    font-size: 0.7rem;
    padding: 2px 8px;
}

@keyframes pb-unread-bump-b-4al1zdqw04 {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

:global(.mud-theme-dark) .pb-chat-channel-item:focus-visible[b-4al1zdqw04] {
    outline-color: var(--pb-chat-info);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.25);
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pb-chat-unread-badge.is-bump[b-4al1zdqw04] {
        animation: none;
    }

    .pb-chat-channel-item[b-4al1zdqw04] {
        transition: none;
    }

    .pb-chat-channel-actions[b-4al1zdqw04] {
        transition: none;
    }

    .pb-chat-channel-action[b-4al1zdqw04] {
        transition: none;
    }

    .pb-chat-filter-button[b-4al1zdqw04] {
        transition: none;
    }
}
/* /Components/Chat/ChatDrawerComposer.razor.rz.scp.css */
.pb-chat-drawer-related-input[b-3tt8wnaeko] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pb-chat-drawer-related-input[b-3tt8wnaeko]  .pb-chat-related-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--pb-chat-text-muted);
    margin-right: 4px;
}

.pb-chat-drawer-composer[b-3tt8wnaeko] {
    border-top: 1px solid var(--pb-chat-border);
    padding-top: 10px;
    display: grid;
    gap: 10px;
}

.pb-chat-drawer-related-preview[b-3tt8wnaeko] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px dashed var(--pb-chat-border);
    background: var(--pb-chat-surface-subtle);
}

.pb-chat-related-preview-label[b-3tt8wnaeko] {
    color: var(--pb-chat-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.65rem;
}

.pb-chat-related-preview-chips[b-3tt8wnaeko] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pb-chat-drawer-composer-actions[b-3tt8wnaeko] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pb-chat-drawer-mention-input[b-3tt8wnaeko] {
    position: relative;
}

[b-3tt8wnaeko] .pb-chat-drawer-mention-popover {
    width: 260px;
    max-height: 220px;
    overflow-y: auto;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid var(--pb-chat-border);
    background: var(--pb-chat-surface);
    box-shadow: var(--pb-chat-shadow-strong);
    display: grid;
    gap: 6px;
}

[b-3tt8wnaeko] .pb-chat-drawer-mention-item {
    border-radius: 8px;
    cursor: pointer;
    padding: 6px 8px;
}

[b-3tt8wnaeko] .pb-chat-drawer-mention-item.is-selected {
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-primary);
}

.pb-chat-drawer-mention-row[b-3tt8wnaeko] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pb-chat-drawer-mention-avatar[b-3tt8wnaeko] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-primary);
    border: 1px solid var(--pb-chat-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}

[b-3tt8wnaeko] .pb-chat-drawer-mention-item.is-selected .pb-chat-drawer-mention-avatar {
    background: var(--pb-chat-primary);
    color: var(--pb-chat-primary-contrast, #fff);
    border-color: var(--pb-chat-primary);
}

.pb-chat-drawer-mention-info[b-3tt8wnaeko] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.pb-chat-drawer-mention-name[b-3tt8wnaeko] {
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-chat-drawer-mention-role[b-3tt8wnaeko] {
    font-size: 0.7rem;
    color: var(--pb-chat-text-muted);
}

[b-3tt8wnaeko] .pb-chat-related-popover {
    z-index: 1405 !important;
}

[b-3tt8wnaeko] .pb-chat-related-popover .mud-paper {
    border: 1px solid var(--pb-chat-border);
    box-shadow: var(--pb-chat-shadow-popover);
}

/* "Replying to" bar shown above the input while an inline reply is being composed. */
.pb-chat-drawer-composer-reply[b-3tt8wnaeko] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: 6px;
    padding: 6px 8px 6px 10px;
    border-left: 3px solid var(--pb-chat-primary);
    border-radius: 6px;
    background: var(--pb-chat-surface-subtle);
    font-size: 0.8rem;
    color: var(--pb-chat-text-muted);
}

.pb-chat-drawer-composer-reply-icon[b-3tt8wnaeko] {
    color: var(--pb-chat-primary);
    flex: 0 0 auto;
}

.pb-chat-drawer-composer-reply-label[b-3tt8wnaeko] {
    flex: 0 0 auto;
    white-space: nowrap;
}

.pb-chat-drawer-composer-reply-label strong[b-3tt8wnaeko] {
    color: var(--pb-chat-text);
    font-weight: 600;
}

.pb-chat-drawer-composer-reply-preview[b-3tt8wnaeko] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pb-chat-text-faint);
}

.pb-chat-drawer-composer-reply[b-3tt8wnaeko]  .pb-chat-drawer-composer-reply-cancel {
    flex: 0 0 auto;
    margin-left: auto;
}
/* /Components/Chat/ChatDrawerHeader.razor.rz.scp.css */
.pb-chat-drawer-header[b-vku72ylwnp] {
    padding: 16px;
    border-bottom: 1px solid var(--pb-chat-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pb-chat-drawer-header-text[b-vku72ylwnp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pb-chat-drawer-header-actions[b-vku72ylwnp] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pb-chat-channel-title-line[b-vku72ylwnp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pb-chat-channel-title-button[b-vku72ylwnp] {
    border: 0;
    background: transparent;
    color: var(--pb-chat-text);
    padding: 0;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.pb-chat-channel-title-button:hover[b-vku72ylwnp],
.pb-chat-channel-title-button:focus-visible[b-vku72ylwnp] {
    color: var(--pb-chat-primary);
    text-decoration: underline;
}

.pb-chat-channel-title-button:focus-visible[b-vku72ylwnp] {
    outline: 2px solid var(--pb-chat-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.pb-chat-channel-header[b-vku72ylwnp] {
    display: grid;
    gap: 4px;
}

.pb-chat-channel-header[b-vku72ylwnp]  .pb-chat-channel-lock-icon {
    color: var(--pb-chat-text-faint);
    flex-shrink: 0;
}

.pb-chat-channel-topic-row[b-vku72ylwnp] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pb-chat-channel-topic-text[b-vku72ylwnp] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.pb-chat-channel-topic-edit[b-vku72ylwnp] {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.pb-chat-channel-topic-row:hover .pb-chat-channel-topic-edit[b-vku72ylwnp] {
    opacity: 1;
}

[b-vku72ylwnp] .pb-chat-channel-topic-edit {
    padding: 2px;
    width: 20px;
    height: 20px;
}

[b-vku72ylwnp] .pb-chat-channel-topic-edit .mud-icon-root {
    font-size: 14px;
}

.pb-chat-channel-add-topic[b-vku72ylwnp] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px dashed var(--pb-chat-border);
    border-radius: 4px;
    background: transparent;
    color: var(--pb-chat-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pb-chat-channel-add-topic:hover[b-vku72ylwnp] {
    background: var(--pb-chat-surface-hover);
    border-color: var(--pb-chat-text-muted);
    color: var(--pb-chat-text);
}

.pb-chat-channel-add-topic[b-vku72ylwnp]  .mud-icon-root {
    font-size: 14px;
}
/* /Components/Chat/ChatDrawerMessagesPane.razor.rz.scp.css */
.pb-chat-drawer-message-pane[b-oxdia6s4u6] {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* New Messages Banner */
.pb-chat-drawer-new-messages-banner[b-oxdia6s4u6] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: var(--pb-chat-info);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0 0 6px 6px;
    margin: 0 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: pb-drawer-banner-slide-down-b-oxdia6s4u6 0.2s ease-out;
}

@keyframes pb-drawer-banner-slide-down-b-oxdia6s4u6 {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pb-chat-drawer-new-messages-text[b-oxdia6s4u6] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pb-chat-drawer-new-messages-actions[b-oxdia6s4u6] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pb-chat-drawer-new-messages-jump[b-oxdia6s4u6],
.pb-chat-drawer-new-messages-mark[b-oxdia6s4u6] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 4px;
    padding: 3px 8px;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pb-chat-drawer-new-messages-jump:hover[b-oxdia6s4u6],
.pb-chat-drawer-new-messages-mark:hover[b-oxdia6s4u6] {
    background: rgba(255, 255, 255, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .pb-chat-drawer-new-messages-banner[b-oxdia6s4u6] {
        animation: none;
    }
}

.pb-chat-drawer-messages[b-oxdia6s4u6] {
    /* The sticky day separator cancels this padding; see .pb-chat-drawer-day-separator. */
    --pb-chat-drawer-messages-padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    max-height: 100%;
    padding: var(--pb-chat-drawer-messages-padding-top) 4px 8px;
}

.pb-chat-drawer-empty[b-oxdia6s4u6] {
    border: 1px dashed var(--pb-chat-border);
    border-radius: 16px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--pb-chat-text-muted);
    background: var(--pb-chat-surface-subtle);
    text-align: center;
}

.pb-chat-drawer-empty-icon[b-oxdia6s4u6] {
    font-size: 2rem;
    color: var(--pb-chat-text-faint);
}

.pb-chat-drawer-scroll-fab[b-oxdia6s4u6] {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
}

/* Sticky offsets are measured inside the scroller's padding. A negative top equal to that
   padding pins the separator flush with the edge, so scrolled messages cannot show above it. */
.pb-chat-drawer-day-separator[b-oxdia6s4u6] {
    position: sticky;
    top: calc(-1 * var(--pb-chat-drawer-messages-padding-top));
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    background: var(--pb-chat-surface);
}

.pb-chat-drawer-day-line[b-oxdia6s4u6] {
    flex: 1;
    height: 1px;
    background: var(--pb-chat-border);
    border-radius: 999px;
}

.pb-chat-drawer-day-label[b-oxdia6s4u6] {
    font-size: 0.72rem;
    color: var(--pb-chat-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* New messages banner - Discord-style */
.pb-chat-new-messages-banner[b-oxdia6s4u6] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: var(--pb-chat-info);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0 0 8px 8px;
    margin: -8px -4px 8px -4px;
    animation: pb-banner-slide-down-b-oxdia6s4u6 0.2s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pb-chat-new-messages-banner button[b-oxdia6s4u6] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.1s ease;
}

.pb-chat-new-messages-banner button:hover[b-oxdia6s4u6] {
    background: rgba(255, 255, 255, 0.3);
}

@keyframes pb-banner-slide-down-b-oxdia6s4u6 {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Unread marker - enhanced visibility with glow effect */
.pb-chat-drawer-unread-marker[b-oxdia6s4u6] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pb-chat-error);
    font-size: 0.72rem;
    margin: 16px 0;
    padding: 0 4px;
    animation: pb-drawer-unread-marker-enter-b-oxdia6s4u6 0.3s ease-out;
}

@keyframes pb-drawer-unread-marker-enter-b-oxdia6s4u6 {
    from {
        opacity: 0;
        transform: scaleX(0.8);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

.pb-chat-drawer-unread-line[b-oxdia6s4u6] {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--pb-chat-error) 10%, var(--pb-chat-error) 90%, transparent 100%);
    border-radius: 999px;
    position: relative;
}

.pb-chat-drawer-unread-line[b-oxdia6s4u6]::after {
    content: '';
    position: absolute;
    inset: -2px 0;
    background: linear-gradient(90deg, transparent 0%, var(--pb-chat-error) 10%, var(--pb-chat-error) 90%, transparent 100%);
    border-radius: 999px;
    opacity: 0.3;
    filter: blur(4px);
}

.pb-chat-drawer-unread-label[b-oxdia6s4u6] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    background: var(--pb-chat-error);
    color: white;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.65rem;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
    animation: pb-drawer-unread-badge-pulse-b-oxdia6s4u6 2s ease-in-out infinite;
}

@keyframes pb-drawer-unread-badge-pulse-b-oxdia6s4u6 {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
    }
    50% {
        box-shadow: 0 2px 14px rgba(239, 68, 68, 0.5);
    }
}

.pb-chat-drawer-unread-actions[b-oxdia6s4u6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pb-chat-drawer-unread-actions button[b-oxdia6s4u6] {
    background: transparent;
    border: 1px solid var(--pb-chat-error);
    color: var(--pb-chat-error);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pb-chat-drawer-unread-actions button:hover[b-oxdia6s4u6] {
    background: var(--pb-chat-error);
    color: white;
}

@media (prefers-reduced-motion: reduce) {
    .pb-chat-drawer-unread-marker[b-oxdia6s4u6] {
        animation: none;
    }
    .pb-chat-drawer-unread-label[b-oxdia6s4u6] {
        animation: none;
    }
}

.pb-chat-drawer-message-anchor[b-oxdia6s4u6] {
    height: 1px;
}

.pb-chat-drawer-message[b-oxdia6s4u6] {
    border: none;
    border-left: 2px solid transparent;
    border-radius: 4px;
    padding: 6px 12px 6px 10px;
    margin: 0 4px;
    background: transparent;
    position: relative;
    animation: pb-drawer-message-fade-in-b-oxdia6s4u6 0.15s ease-out;
    transition: background 0.1s ease, border-color 0.1s ease;
}

.pb-chat-drawer-message:hover[b-oxdia6s4u6] {
    background: var(--pb-chat-surface-hover);
    border-left-color: var(--pb-chat-primary);
}

@keyframes pb-drawer-message-fade-in-b-oxdia6s4u6 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Grouped messages - tighter spacing, no duplicate headers */
.pb-chat-drawer-message.is-grouped[b-oxdia6s4u6] {
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 0;
}

.pb-chat-drawer-message.is-grouped .pb-chat-drawer-message-header[b-oxdia6s4u6] {
    display: none;
}

/* Show timestamp on hover for grouped messages */
.pb-chat-drawer-message.is-grouped:hover .pb-chat-drawer-message-header[b-oxdia6s4u6] {
    display: flex;
    justify-content: flex-end;
}

/* First message in a group gets more padding */
.pb-chat-drawer-message:not(.is-grouped)[b-oxdia6s4u6] {
    padding-top: 10px;
    margin-top: 8px;
}

.pb-chat-drawer-message.is-me[b-oxdia6s4u6] {
    background: var(--pb-chat-info-soft);
    border-left-color: var(--pb-chat-info);
}

.pb-chat-drawer-message.is-me:hover[b-oxdia6s4u6] {
    background: var(--pb-chat-info-soft);
    border-left-color: var(--pb-chat-info);
}

/* Pinned messages keep a permanent amber tint, border, and badge, whether or not the message
   shows its header. The badge sits above the body so grouped messages show it too. */
.pb-chat-drawer-message.is-pinned[b-oxdia6s4u6],
.pb-chat-drawer-message.is-pinned:hover[b-oxdia6s4u6],
.pb-chat-drawer-message.is-me.is-pinned[b-oxdia6s4u6],
.pb-chat-drawer-message.is-me.is-pinned:hover[b-oxdia6s4u6] {
    background: var(--pb-chat-warning-soft);
    border-left-color: var(--pb-chat-warning);
}

.pb-chat-drawer-message-pinned-badge[b-oxdia6s4u6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pb-chat-warning);
}

.pb-chat-drawer-message-pinned-badge[b-oxdia6s4u6]  .mud-icon-root {
    font-size: 0.9rem;
}

/* Inline reply reference: who and what this message answers. Clicking jumps to the original. */
.pb-chat-drawer-message-reply-ref[b-oxdia6s4u6] {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    margin-top: 4px;
    padding: 2px 8px 2px 6px;
    border: none;
    border-left: 2px solid var(--pb-chat-border);
    border-radius: 4px;
    background: transparent;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--pb-chat-text-muted);
    text-align: left;
    cursor: pointer;
}

.pb-chat-drawer-message-reply-ref:hover[b-oxdia6s4u6] {
    background: var(--pb-chat-surface-hover);
    border-left-color: var(--pb-chat-primary);
}

.pb-chat-drawer-message-reply-ref:focus-visible[b-oxdia6s4u6] {
    outline: 2px solid var(--pb-chat-primary);
    outline-offset: 1px;
}

.pb-chat-drawer-message-reply-ref[b-oxdia6s4u6]  .pb-chat-drawer-message-reply-ref-icon {
    flex: 0 0 auto;
    font-size: 0.95rem;
    color: var(--pb-chat-text-faint);
    transform: scaleX(-1);
}

.pb-chat-drawer-message-reply-ref-author[b-oxdia6s4u6] {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--pb-chat-text);
}

.pb-chat-drawer-message-reply-ref-text[b-oxdia6s4u6] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-chat-drawer-message-reply-ref.is-deleted .pb-chat-drawer-message-reply-ref-text[b-oxdia6s4u6] {
    font-style: italic;
}

/* Brief highlight on the message a reply reference jumped to. */
.pb-chat-drawer-message.is-jump-target[b-oxdia6s4u6] {
    animation: pb-jump-target-flash-b-oxdia6s4u6 1.6s ease-out;
}

@keyframes pb-jump-target-flash-b-oxdia6s4u6 {
    0%,
    40% {
        background: var(--pb-chat-primary-soft);
        border-left-color: var(--pb-chat-primary);
    }
    100% {
        background: transparent;
    }
}

:global(.pb-chat-drawer.is-compact) .pb-chat-drawer-messages[b-oxdia6s4u6] {
    gap: 1px;
}

:global(.pb-chat-drawer.is-compact) .pb-chat-drawer-message[b-oxdia6s4u6] {
    padding: 3px 10px 3px 8px;
}

:global(.pb-chat-drawer.is-compact) .pb-chat-drawer-message:not(.is-grouped)[b-oxdia6s4u6] {
    padding-top: 6px;
    margin-top: 4px;
}

:global(.pb-chat-drawer.is-compact) .pb-chat-drawer-message-header[b-oxdia6s4u6] {
    margin-bottom: 2px;
}

:global(.pb-chat-drawer.is-compact) .pb-chat-drawer-message-avatar[b-oxdia6s4u6] {
    width: 20px;
    height: 20px;
    font-size: 0.55rem;
}

:global(.pb-chat-drawer.is-compact) .pb-chat-drawer-message-actions[b-oxdia6s4u6] {
    top: 6px;
    right: 4px;
}

.pb-chat-drawer-message-header[b-oxdia6s4u6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--pb-chat-text-muted);
    margin-bottom: 6px;
}

.pb-chat-drawer-message-meta[b-oxdia6s4u6] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Avatar wrapper for presence indicator */
.pb-chat-avatar-wrapper[b-oxdia6s4u6] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.pb-chat-drawer-message-avatar[b-oxdia6s4u6] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pb-chat-avatar-bg, var(--pb-chat-primary-soft));
    color: var(--pb-chat-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Avatar presence indicator dot */
.pb-chat-avatar-presence[b-oxdia6s4u6] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--pb-chat-surface, #fff);
    background: var(--pb-chat-text-faint);
}

.pb-chat-avatar-presence.is-online[b-oxdia6s4u6] {
    background: var(--pb-chat-success);
}

.pb-chat-avatar-presence.is-away[b-oxdia6s4u6] {
    background: var(--pb-chat-warning);
}

.pb-chat-avatar-presence.is-busy[b-oxdia6s4u6] {
    background: var(--pb-chat-error);
}

.pb-chat-avatar-presence.is-offline[b-oxdia6s4u6] {
    background: var(--pb-chat-text-faint);
}

/* Discord-style floating action bar */
.pb-chat-drawer-message-actions[b-oxdia6s4u6] {
    position: absolute;
    top: -12px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    border-radius: 6px;
    background: var(--pb-chat-surface);
    border: 1px solid var(--pb-chat-border);
    box-shadow: var(--pb-chat-shadow-strong);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease, top 0.1s ease;
}

/* Wrapper for disabled buttons to maintain tooltip pointer events */
.pb-chat-drawer-action-wrapper[b-oxdia6s4u6] {
    display: inline-flex;
    cursor: not-allowed;
}

/* Lightweight hover tooltip for per-message controls. MudTooltip registers a popover with the
   provider and five server-side pointer handlers per instance; with 14 per message that meant
   hundreds of idle popovers and a circuit round-trip on every hover across the action bar. */
.pb-chat-tip[b-oxdia6s4u6] {
    position: relative;
    display: inline-flex;
}

.pb-chat-tip[b-oxdia6s4u6]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%) translateY(2px);
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--pb-chat-text);
    color: var(--pb-chat-surface);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.1s ease 0.3s, transform 0.1s ease 0.3s;
}

.pb-chat-tip:hover[b-oxdia6s4u6]::after,
.pb-chat-tip:focus-within[b-oxdia6s4u6]::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (hover: none) {
    .pb-chat-tip[b-oxdia6s4u6]::after {
        display: none;
    }
}

/* Quick reaction buttons */
.pb-chat-drawer-quick-reactions[b-oxdia6s4u6] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-right: 4px;
    border-right: 1px solid var(--pb-chat-border);
    margin-right: 4px;
}

.pb-chat-drawer-quick-reaction[b-oxdia6s4u6] {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s ease, transform 0.1s ease;
}

.pb-chat-drawer-quick-reaction:hover[b-oxdia6s4u6] {
    background: var(--pb-chat-surface-hover);
    transform: scale(1.15);
}

.pb-chat-drawer-quick-reaction.is-active[b-oxdia6s4u6] {
    background: var(--pb-chat-primary-soft);
}

.pb-chat-drawer-quick-reaction:focus-visible[b-oxdia6s4u6] {
    outline: 2px solid var(--pb-chat-primary);
    outline-offset: 1px;
}

.pb-chat-drawer-more-reactions-menu[b-oxdia6s4u6]  .mud-icon-button {
    width: 22px;
    height: 22px;
    padding: 2px;
}

/* Emoji picker wrapper and popover */
.pb-chat-drawer-emoji-picker-wrapper[b-oxdia6s4u6] {
    position: relative;
    display: inline-flex;
}

.pb-chat-drawer-emoji-picker-trigger[b-oxdia6s4u6] {
    width: 22px;
    height: 22px;
}

[b-oxdia6s4u6] .pb-chat-drawer-emoji-popover {
    z-index: 1400;
}

.pb-chat-drawer-emoji-picker-backdrop[b-oxdia6s4u6] {
    position: fixed;
    inset: 0;
    z-index: 1399;
}

.pb-chat-drawer-message:hover .pb-chat-drawer-message-actions[b-oxdia6s4u6],
.pb-chat-drawer-message:has(:focus-visible) .pb-chat-drawer-message-actions[b-oxdia6s4u6] {
    opacity: 1;
    pointer-events: auto;
    top: -16px;
}

:global(.pb-chat-drawer.is-compact) .pb-chat-drawer-message:hover .pb-chat-drawer-message-actions[b-oxdia6s4u6],
:global(.pb-chat-drawer.is-compact) .pb-chat-drawer-message:has(:focus-visible) .pb-chat-drawer-message-actions[b-oxdia6s4u6] {
    top: 2px;
}

/* Hide actions when hovering over related entity chips, unless message is entity-only */
.pb-chat-drawer-message:not(.is-entity-only):has(.pb-chat-drawer-related:hover) .pb-chat-drawer-message-actions[b-oxdia6s4u6] {
    opacity: 0;
    pointer-events: none;
}

/* For entity-only messages, always show actions on message hover */
.pb-chat-drawer-message.is-entity-only:hover .pb-chat-drawer-message-actions[b-oxdia6s4u6] {
    opacity: 1;
    pointer-events: auto;
}

.pb-chat-drawer-message-body[b-oxdia6s4u6] {
    color: var(--pb-chat-text);
}

.pb-chat-drawer-message-sender-button[b-oxdia6s4u6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.pb-chat-drawer-message-sender-button:hover .pb-chat-drawer-message-sender[b-oxdia6s4u6],
.pb-chat-drawer-message-sender-button:focus-visible .pb-chat-drawer-message-sender[b-oxdia6s4u6] {
    color: var(--pb-chat-primary);
    text-decoration: underline;
}

.pb-chat-drawer-message-sender-button:focus-visible[b-oxdia6s4u6] {
    outline: 2px solid var(--pb-chat-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.pb-chat-drawer-message-body[b-oxdia6s4u6]  .pb-chat-mention {
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-primary);
    border-radius: 4px;
    padding: 0 4px;
    font-weight: 600;
}

.pb-chat-drawer-message-body[b-oxdia6s4u6]  button.pb-chat-mention {
    border: 0;
    font: inherit;
    cursor: pointer;
}

.pb-chat-drawer-message-body[b-oxdia6s4u6]  button.pb-chat-mention:hover,
.pb-chat-drawer-message-body[b-oxdia6s4u6]  button.pb-chat-mention:focus-visible {
    text-decoration: underline;
}

.pb-chat-drawer-message-body.is-mention[b-oxdia6s4u6] {
    background: var(--pb-chat-warning-soft);
    border-radius: 8px;
    padding: 4px 6px;
}

/* Markdown Styling */
.pb-chat-drawer-message-body strong[b-oxdia6s4u6],
.pb-chat-drawer-message-body b[b-oxdia6s4u6] {
    font-weight: 700;
}

.pb-chat-drawer-message-body em[b-oxdia6s4u6],
.pb-chat-drawer-message-body i[b-oxdia6s4u6] {
    font-style: italic;
}

.pb-chat-drawer-message-body del[b-oxdia6s4u6],
.pb-chat-drawer-message-body s[b-oxdia6s4u6] {
    text-decoration: line-through;
    opacity: 0.75;
}

.pb-chat-drawer-message-body code[b-oxdia6s4u6] {
    background: var(--pb-chat-surface-subtle);
    border: 1px solid var(--pb-chat-border);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85em;
    color: var(--pb-chat-text);
}

.pb-chat-drawer-message-body pre[b-oxdia6s4u6] {
    background: var(--pb-chat-surface-subtle);
    border: 1px solid var(--pb-chat-border);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 6px 0;
    overflow-x: auto;
}

.pb-chat-drawer-message-body pre code[b-oxdia6s4u6] {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.8rem;
}

.pb-chat-drawer-message-body a[b-oxdia6s4u6] {
    color: var(--pb-chat-primary);
    text-decoration: none;
}

.pb-chat-drawer-message-body a:hover[b-oxdia6s4u6] {
    text-decoration: underline;
}

.pb-chat-drawer-message-body blockquote[b-oxdia6s4u6] {
    border-left: 3px solid var(--pb-chat-primary);
    margin: 6px 0;
    padding: 4px 0 4px 10px;
    color: var(--pb-chat-text-muted);
    font-style: italic;
}

.pb-chat-drawer-message-body ul[b-oxdia6s4u6],
.pb-chat-drawer-message-body ol[b-oxdia6s4u6] {
    margin: 4px 0;
    padding-left: 20px;
}

.pb-chat-drawer-message-body li[b-oxdia6s4u6] {
    margin: 2px 0;
}

.pb-chat-drawer-related[b-oxdia6s4u6] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.pb-chat-related-chip[b-oxdia6s4u6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--pb-chat-border);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.7rem;
    background: var(--pb-chat-surface);
    color: var(--pb-chat-text);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pb-chat-related-chip[b-oxdia6s4u6]  .pb-chat-related-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--pb-chat-text-muted);
    margin-right: 4px;
}

.pb-chat-related-chip:hover[b-oxdia6s4u6],
.pb-chat-related-chip:focus-visible[b-oxdia6s4u6] {
    background: var(--pb-chat-surface-subtle);
    border-color: var(--pb-chat-border);
}

.pb-chat-related-chip:focus-visible[b-oxdia6s4u6] {
    outline: 2px solid var(--pb-chat-primary);
    outline-offset: 2px;
}

.pb-chat-drawer-reactions[b-oxdia6s4u6] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.pb-chat-drawer-reaction-chip[b-oxdia6s4u6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    border: 1px solid var(--pb-chat-border);
    background: var(--pb-chat-surface);
    padding: 2px 8px;
    font-size: 0.75rem;
    color: var(--pb-chat-text);
    cursor: pointer;
}

.pb-chat-drawer-reaction-chip.is-mine[b-oxdia6s4u6] {
    border-color: var(--pb-chat-primary);
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-primary);
}

.pb-chat-drawer-reaction-emoji[b-oxdia6s4u6] {
    font-size: 0.9rem;
}

.pb-chat-drawer-reaction-count[b-oxdia6s4u6] {
    font-weight: 600;
}

.pb-chat-drawer-message-edited[b-oxdia6s4u6] {
    margin-top: 6px;
    font-size: 0.7rem;
    color: var(--pb-chat-text-faint);
    background: none;
    border: none;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pb-chat-drawer-message-edited:hover[b-oxdia6s4u6] {
    background: var(--pb-chat-surface-hover);
    color: var(--pb-chat-text-muted);
}

.pb-chat-drawer-message-read-status[b-oxdia6s4u6] {
    display: flex;
    align-items: center;
    gap: 3px;
    width: fit-content;
    margin-top: 4px;
    margin-left: auto;
    font-size: 0.68rem;
    line-height: 1;
    color: var(--pb-chat-text-faint);
}

.pb-chat-drawer-message-read-status.is-read[b-oxdia6s4u6] {
    color: var(--pb-chat-primary);
}

.pb-chat-drawer-message-read-status[b-oxdia6s4u6]  .pb-chat-drawer-message-read-status-icon {
    font-size: 0.85rem;
}

/* Enhanced typing indicator with avatars */
.pb-chat-drawer-typing[b-oxdia6s4u6] {
    font-size: 0.75rem;
    color: var(--pb-chat-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--pb-chat-surface-subtle);
    border-radius: 8px;
    margin-top: 8px;
}

.pb-chat-drawer-typing-avatars[b-oxdia6s4u6] {
    display: flex;
    align-items: center;
}

.pb-chat-drawer-typing-avatar[b-oxdia6s4u6] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pb-chat-avatar-bg, var(--pb-chat-primary-soft));
    color: var(--pb-chat-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 700;
    margin-left: -6px;
    border: 2px solid var(--pb-chat-surface-subtle);
}

.pb-chat-drawer-typing-avatar:first-child[b-oxdia6s4u6] {
    margin-left: 0;
}

.pb-chat-drawer-typing-avatar.is-more[b-oxdia6s4u6] {
    background: var(--pb-chat-surface-hover);
    color: var(--pb-chat-text-muted);
    font-size: 0.45rem;
}

.pb-chat-drawer-typing-text[b-oxdia6s4u6] {
    flex: 1;
}

.pb-chat-drawer-typing-dots[b-oxdia6s4u6] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.pb-chat-drawer-typing-dots span[b-oxdia6s4u6] {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--pb-chat-text-muted);
    display: inline-block;
    animation: pb-typing-bounce-b-oxdia6s4u6 1.2s infinite ease-in-out;
}

.pb-chat-drawer-typing-dots span:nth-child(2)[b-oxdia6s4u6] {
    animation-delay: 0.15s;
}

.pb-chat-drawer-typing-dots span:nth-child(3)[b-oxdia6s4u6] {
    animation-delay: 0.3s;
}

@keyframes pb-typing-bounce-b-oxdia6s4u6 {
    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.6;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Touch devices: there is no hover, so the floating action bar stays hidden. Showing it on
   every message overlapped neighbouring messages (each bar is absolutely positioned above its
   message and wider than short messages). Message actions are reached through the context menu,
   which site.js opens on long-press (visionChatLongPress); keyboard focus still reveals the bar.
   Text selection is off so the hold does not also start the native selection callout. */
@media (hover: none) {
    .pb-chat-drawer-message[b-oxdia6s4u6] {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        touch-action: pan-y;
        transition: transform 0.15s ease, background 0.1s ease, border-color 0.1s ease;
    }

    /* Swipe-to-reply feedback driven by visionChatSwipeReply in site.js. */
    .pb-chat-drawer-message.is-swiping[b-oxdia6s4u6] {
        transition: none;
    }

    .pb-chat-drawer-message.is-swipe-armed[b-oxdia6s4u6] {
        background: var(--pb-chat-primary-soft);
        border-left-color: var(--pb-chat-primary);
    }

    .pb-chat-drawer-message-actions[b-oxdia6s4u6] {
        opacity: 0;
        pointer-events: none;
    }

    .pb-chat-drawer-message:has(:focus-visible) .pb-chat-drawer-message-actions[b-oxdia6s4u6] {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Thread summary button */
.pb-chat-drawer-thread-summary[b-oxdia6s4u6] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px solid var(--pb-chat-border);
    border-radius: 8px;
    background: var(--pb-chat-surface);
    color: var(--pb-chat-primary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.pb-chat-drawer-thread-summary:hover[b-oxdia6s4u6] {
    background: var(--pb-chat-surface-hover);
    border-color: var(--pb-chat-primary);
}

.pb-chat-drawer-thread-summary[b-oxdia6s4u6]  .pb-chat-drawer-thread-icon {
    color: var(--pb-chat-primary);
}

.pb-chat-drawer-thread-count[b-oxdia6s4u6] {
    font-weight: 600;
}

.pb-chat-drawer-thread-last[b-oxdia6s4u6] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    color: var(--pb-chat-text-muted);
}

.pb-chat-drawer-thread-last-name[b-oxdia6s4u6] {
    font-weight: 500;
}

.pb-chat-drawer-thread-last-time[b-oxdia6s4u6] {
    color: var(--pb-chat-text-faint);
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pb-chat-drawer-message[b-oxdia6s4u6] {
        animation: none;
    }

    .pb-chat-drawer-message.is-jump-target[b-oxdia6s4u6] {
        animation: none;
    }

    .pb-chat-drawer-typing-dots span[b-oxdia6s4u6] {
        animation: none;
        opacity: 1;
        transform: scale(1);
    }

    .pb-chat-drawer-message-actions[b-oxdia6s4u6] {
        transition: none;
    }

    .pb-chat-related-chip[b-oxdia6s4u6] {
        transition: none;
    }

    .pb-chat-drawer-reaction-chip[b-oxdia6s4u6] {
        transition: none;
    }

    .pb-chat-drawer-thread-summary[b-oxdia6s4u6] {
        transition: none;
    }
}
/* /Components/Chat/ChatEditHistoryDialog.razor.rz.scp.css */
.pb-edit-history-dialog[b-a9a1fs11n9] {
    min-width: 320px;
    max-width: 500px;
}

.pb-edit-history-item[b-a9a1fs11n9] {
    padding: 12px;
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
    margin-bottom: 8px;
}

.pb-edit-history-item.is-current[b-a9a1fs11n9] {
    background: var(--mud-palette-primary-lighten);
    border: 1px solid var(--mud-palette-primary);
}

.pb-edit-history-header[b-a9a1fs11n9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.pb-edit-history-label[b-a9a1fs11n9] {
    font-weight: 600;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-lighten);
    padding: 2px 8px;
    border-radius: 4px;
}

.pb-edit-history-sender[b-a9a1fs11n9] {
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.pb-edit-history-time[b-a9a1fs11n9] {
    font-weight: 500;
}

.pb-edit-history-editor[b-a9a1fs11n9] {
    font-style: italic;
}

.pb-edit-history-content[b-a9a1fs11n9] {
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.pb-edit-history-empty[b-a9a1fs11n9] {
    color: var(--mud-palette-text-disabled);
}

.pb-edit-history-section-title[b-a9a1fs11n9] {
    color: var(--mud-palette-text-secondary);
    margin-bottom: 12px;
}

/* Dark mode adjustments */
:global(.mud-theme-dark) .pb-edit-history-item[b-a9a1fs11n9] {
    background: rgba(255, 255, 255, 0.05);
}

:global(.mud-theme-dark) .pb-edit-history-item.is-current[b-a9a1fs11n9] {
    background: rgba(var(--mud-palette-primary-rgb), 0.15);
}

:global(.mud-theme-dark) .pb-edit-history-label[b-a9a1fs11n9] {
    background: rgba(var(--mud-palette-primary-rgb), 0.2);
}
/* /Components/Chat/ChatEmojiPicker.razor.rz.scp.css */
.pb-emoji-picker[b-o4gzrzr0h9] {
    width: 320px;
    max-width: 100%;
    background: var(--pb-chat-surface, var(--mud-palette-surface, #fff));
    border: 1px solid var(--pb-chat-border, var(--mud-palette-lines-default, #e0e0e0));
    border-radius: 12px;
    box-shadow: var(--pb-chat-shadow-popover, 0 12px 32px rgba(0, 0, 0, 0.15));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pb-emoji-picker-search[b-o4gzrzr0h9] {
    padding: 10px 12px 6px 12px;
    border-bottom: 1px solid var(--pb-chat-border, var(--mud-palette-lines-default, #e0e0e0));
}

.pb-emoji-picker-search[b-o4gzrzr0h9]  .mud-input-outlined {
    font-size: 0.85rem;
}

.pb-emoji-picker-search[b-o4gzrzr0h9]  .pb-emoji-search-field {
    margin: 0;
}

.pb-emoji-picker-categories[b-o4gzrzr0h9] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--pb-chat-border, var(--mud-palette-lines-default, #e0e0e0));
    overflow-x: auto;
    scrollbar-width: none;
}

.pb-emoji-picker-categories[b-o4gzrzr0h9]::-webkit-scrollbar {
    display: none;
}

.pb-emoji-category-btn[b-o4gzrzr0h9] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}

.pb-emoji-category-btn:hover[b-o4gzrzr0h9] {
    background: var(--pb-chat-surface-hover, rgba(0, 0, 0, 0.06));
    transform: scale(1.1);
}

.pb-emoji-category-btn.is-active[b-o4gzrzr0h9] {
    background: var(--pb-chat-primary-soft, rgba(99, 102, 241, 0.15));
}

.pb-emoji-picker-grid[b-o4gzrzr0h9] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px;
    max-height: 220px;
    overflow-y: auto;
    align-content: flex-start;
}

.pb-emoji-category-label[b-o4gzrzr0h9] {
    width: 100%;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pb-chat-text-muted, var(--mud-palette-text-secondary, #666));
    padding: 4px 4px 8px 4px;
}

.pb-emoji-btn[b-o4gzrzr0h9] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-size: 1.4rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s ease, transform 0.1s ease;
}

.pb-emoji-btn:hover[b-o4gzrzr0h9] {
    background: var(--pb-chat-surface-hover, rgba(0, 0, 0, 0.08));
    transform: scale(1.2);
}

.pb-emoji-btn:active[b-o4gzrzr0h9] {
    transform: scale(1.3);
}

.pb-emoji-picker-footer[b-o4gzrzr0h9] {
    padding: 6px 12px;
    border-top: 1px solid var(--pb-chat-border, var(--mud-palette-lines-default, #e0e0e0));
    text-align: center;
}

.pb-emoji-picker-hint[b-o4gzrzr0h9] {
    font-size: 0.7rem;
    color: var(--pb-chat-text-faint, var(--mud-palette-text-disabled, #999));
}

/* Responsive for smaller screens */
@media (max-width: 400px) {
    .pb-emoji-picker[b-o4gzrzr0h9] {
        width: 280px;
    }

    .pb-emoji-btn[b-o4gzrzr0h9] {
        width: 32px;
        height: 32px;
        font-size: 1.2rem;
    }
}
/* /Components/Chat/ChatMessageAttachments.razor.rz.scp.css */
.pb-chat-attachments[b-2zugbnubd4] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.pb-chat-attachment-image[b-2zugbnubd4] {
    display: block;
    max-width: 320px;
    max-height: 240px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    line-height: 0;
}

.pb-chat-attachment-image img[b-2zugbnubd4] {
    max-width: 320px;
    max-height: 240px;
    object-fit: contain;
    display: block;
}

.pb-chat-attachment-file[b-2zugbnubd4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    text-decoration: none;
}
/* /Components/Chat/ChatRelatedEntityPicker.razor.rz.scp.css */
.pb-chat-entity-picker[b-txqlhfso7k] {
    container-type: inline-size;
    display: grid;
    gap: 12px;
    min-width: 0;
}

.pb-chat-entity-picker-header[b-txqlhfso7k],
.pb-chat-entity-picker-selection[b-txqlhfso7k],
.pb-chat-entity-picker-actions[b-txqlhfso7k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pb-chat-entity-picker-fields[b-txqlhfso7k] {
    display: grid;
    grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.pb-chat-entity-picker-fields[b-txqlhfso7k]  .mud-input-control {
    min-width: 0;
    margin-top: 0;
}

.pb-chat-entity-picker-selection[b-txqlhfso7k] {
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 8px;
    background: var(--mud-palette-primary-hover);
}

.pb-chat-entity-picker-selection-details[b-txqlhfso7k],
.pb-chat-entity-result[b-txqlhfso7k] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pb-chat-entity-result[b-txqlhfso7k] {
    display: grid;
    gap: 3px;
    padding: 3px 0;
}

.pb-chat-entity-result-title[b-txqlhfso7k] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
}

.pb-chat-entity-result-subtitle[b-txqlhfso7k],
.pb-chat-entity-result-meta[b-txqlhfso7k] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.pb-chat-entity-picker-actions[b-txqlhfso7k] {
    justify-content: flex-end;
}

.pb-chat-entity-picker-quick-picks[b-txqlhfso7k] {
    display: grid;
    gap: 4px;
}

.pb-chat-entity-picker-quick-buttons[b-txqlhfso7k] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pb-chat-entity-picker-quick-buttons[b-txqlhfso7k]  .mud-button {
    text-transform: none;
    max-width: 100%;
    overflow-wrap: anywhere;
}

@container (max-width: 440px) {
    .pb-chat-entity-picker-fields[b-txqlhfso7k] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Common/CollapsibleFormSection.razor.rz.scp.css */
.collapsible-form-section .collapsible-header[b-zyv4eapw59] {
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.collapsible-form-section .collapsible-header:hover[b-zyv4eapw59] {
    background-color: var(--mud-palette-action-default-hover);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.collapsible-form-section .collapsible-header:focus-visible[b-zyv4eapw59] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* Chevron rotation animation */
[b-zyv4eapw59] .collapsible-chevron {
    transition: transform 0.25s ease;
    color: var(--mud-palette-text-secondary);
}

[b-zyv4eapw59] .collapsible-chevron-expanded {
    transform: rotate(180deg);
}

/* Fade-in for content when expanding */
[b-zyv4eapw59] .mud-collapse-container .form-section-content {
    animation: sectionFadeIn-b-zyv4eapw59 0.25s ease-out;
}

@keyframes sectionFadeIn-b-zyv4eapw59 {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Common/CollapsibleSection.razor.rz.scp.css */
/* Quiet accordion header — replaces the loud full-width filled button so a stack of these reads as
   a scannable list of sections rather than five competing CTAs. */
.order-section[b-qedi5ss0kl] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.order-section-header[b-qedi5ss0kl] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.6875rem 1rem;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--mud-palette-text-primary);
    transition: background-color 0.15s ease;
}

.order-section-header:hover[b-qedi5ss0kl] {
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
}

.order-section-header:focus-visible[b-qedi5ss0kl] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* Title takes the slack so the count + chevron pin to the right edge. */
.order-section-title[b-qedi5ss0kl] {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Count as a subtle pill instead of "(93)" tacked onto the label. */
.order-section-count[b-qedi5ss0kl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.375rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.order-section-body[b-qedi5ss0kl] {
    padding: 0.25rem 1rem 1rem;
}
/* /Components/Common/EmptyState.razor.rz.scp.css */
/* EmptyState - Animated icon + subtle gradient background */

.empty-state[b-g8wka65u70] {
    border-radius: 12px;
    background: radial-gradient(
        ellipse at center 70%,
        color-mix(in srgb, var(--mud-palette-primary) 4%, transparent),
        transparent 70%
    );
    animation: emptyFadeIn-b-g8wka65u70 0.4s ease-out;
}

@keyframes emptyFadeIn-b-g8wka65u70 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Floating icon animation */
[b-g8wka65u70] .empty-state .mud-icon-root.mb-4 {
    animation: emptyFloat-b-g8wka65u70 3s ease-in-out 3;
}

@keyframes emptyFloat-b-g8wka65u70 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}
/* /Components/Common/FilterBadge.razor.rz.scp.css */
.filter-badge-container[b-19ufpe0y89] {
    background: var(--mud-palette-action-default-hover);
    transition: background-color 0.2s ease;
}

.filter-badge-container:hover[b-19ufpe0y89] {
    background: var(--mud-palette-action-default);
}

.filter-badge-label[b-19ufpe0y89] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* /Components/Common/FilterPanel.razor.rz.scp.css */
.filter-panel[b-ay8vv0srxg] {
    border-radius: 8px;
    transition: box-shadow 0.2s ease;
}

.filter-panel-primary[b-ay8vv0srxg] {
    flex: 1;
    min-width: 0;
}

.filter-search[b-ay8vv0srxg] {
    flex-shrink: 0;
}

/* Search focus ring */
[b-ay8vv0srxg] .filter-search .mud-input-outlined:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    border-radius: 4px;
    transition: box-shadow 0.2s ease;
}

.filter-count-chip[b-ay8vv0srxg] {
    font-weight: 500;
    animation: chipPop-b-ay8vv0srxg 0.25s ease-out;
    max-width: 320px;
}

/* The chip's clear button was an 18px target; give fingers room. */
@media (any-pointer: coarse) {
    [b-ay8vv0srxg] .filter-count-chip .mud-chip-close-button {
        min-width: 32px;
        min-height: 32px;
    }
}

@keyframes chipPop-b-ay8vv0srxg {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    60% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.filter-advanced-toggle[b-ay8vv0srxg] {
    text-transform: none;
    font-weight: 400;
    transition: color 0.15s ease;
}

.filter-advanced-toggle:hover[b-ay8vv0srxg] {
    color: var(--mud-palette-primary);
}

.filter-panel-secondary[b-ay8vv0srxg] {
    min-width: 0;
    row-gap: 8px;
}

.filter-panel-chips[b-ay8vv0srxg] {
    min-width: 0;
    animation: filterSlideDown-b-ay8vv0srxg 0.25s ease-out;
}

.filter-panel-advanced[b-ay8vv0srxg] {
    border-top: 1px solid var(--mud-palette-divider);
    animation: filterSlideDown-b-ay8vv0srxg 0.25s ease-out;
}

@keyframes filterSlideDown-b-ay8vv0srxg {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    .filter-panel-primary[b-ay8vv0srxg] {
        width: 100%;
    }

    .filter-search[b-ay8vv0srxg] {
        width: 100%;
        max-width: none !important;
    }
}
/* /Components/Common/FormSection.razor.rz.scp.css */
.form-section[b-eonw1o15a9] {
    border-radius: 8px;
    overflow: hidden;
}

.form-section-header[b-eonw1o15a9] {
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.form-section-title[b-eonw1o15a9] {
    font-weight: 600;
}

.form-section-header-actions[b-eonw1o15a9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section-content[b-eonw1o15a9] {
    background: var(--mud-palette-surface);
}
/* /Components/Common/QuickEditPanel.razor.rz.scp.css */
.quick-edit-drawer[b-g1qt825hvs] {
    z-index: 1300;
}

.quick-edit-header[b-g1qt825hvs] {
    border-bottom: 1px solid var(--mud-palette-divider);
    min-height: 64px;
}

.quick-edit-content[b-g1qt825hvs] {
    flex: 1;
    overflow-y: auto;
}

.quick-edit-actions[b-g1qt825hvs] {
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

[b-g1qt825hvs] .quick-edit-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
}
/* /Components/Common/SectionNav.razor.rz.scp.css */
/* Horizontal, labeled section navigator. Stickiness is provided by the parent .order-sticky-stack
   in the host page (nav + optional summary pin together), so this element stays in normal flow. */
.order-section-tabs[b-1znu7czg3o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px;
    margin: 0 0 12px 0;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
}

.section-tab[b-1znu7czg3o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Kept tight so the tabs and the financial summary more often fit on one sticky row. */
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.section-tab:hover[b-1znu7czg3o] {
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.section-tab:focus-visible[b-1znu7czg3o] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.section-tab.active[b-1znu7czg3o] {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.section-tab-top[b-1znu7czg3o] {
    margin-inline-start: auto;
}

/* On narrow viewports the wrapped nav grows to 3-4 rows and (with the financial panel) the sticky
   stack swallowed ~a third of the screen. Switch to a single scrollable row instead — the
   overflow-x:auto above finally has effect once wrapping is off. */
@media (max-width: 700px) {
    .order-section-tabs[b-1znu7czg3o] {
        flex-wrap: nowrap;
    }

    .section-tab[b-1znu7czg3o] {
        flex: none;
    }

    .section-tab-top[b-1znu7czg3o] {
        margin-inline-start: 0;
    }
}
/* /Components/Common/SpecFilesSection.razor.rz.scp.css */
.pb-spec-files__list[b-ld37pcc1qp] {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.pb-spec-files__item[b-ld37pcc1qp] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
}

/* Long file names wrap instead of pushing the remove button out of the card. */
.pb-spec-files__item[b-ld37pcc1qp]  .pb-spec-files__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (any-pointer: coarse) {
    .pb-spec-files__item[b-ld37pcc1qp]  .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}
/* /Components/Common/StatusChip.razor.rz.scp.css */
.status-chip-label[b-4yyjf6zu09] {
    display: inline-block;
}

.status-chip-label--multiline[b-4yyjf6zu09] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.08;
    gap: 0.02rem;
    padding-top: 0.02rem;
    padding-bottom: 0.02rem;
}

.status-chip-label-line[b-4yyjf6zu09] {
    display: block;
}
/* /Components/FloatingTimer.razor.rz.scp.css */
.floating-timer-container[b-aan4v36scp] {
    position: fixed;
    bottom: calc(var(--floating-timer-bottom, 20px) + var(--my-bar-height, 0px));
    right: 20px;
    z-index: 1400;
    animation: slideInUp-b-aan4v36scp 0.3s ease-out;
}

.floating-timer-hidden-toggle[b-aan4v36scp] {
    position: fixed;
    bottom: calc(var(--floating-timer-bottom, 20px) + var(--my-bar-height, 0px));
    right: 20px;
    z-index: 1400;
}

.floating-timer[b-aan4v36scp] {
    padding: 12px 16px;
    background: var(--mud-palette-surface);
    min-width: 280px;
    max-width: 350px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.floating-timer .text-truncate[b-aan4v36scp] {
    max-width: 200px;
}

@keyframes slideInUp-b-aan4v36scp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .floating-timer-container[b-aan4v36scp] {
        bottom: max(70px, calc(var(--floating-timer-bottom, 20px) + var(--my-bar-height, 0px))); /* Above mobile navigation */
        right: 10px;
        left: 10px;
    }

    .floating-timer-hidden-toggle[b-aan4v36scp] {
        bottom: max(70px, calc(var(--floating-timer-bottom, 20px) + var(--my-bar-height, 0px))); /* Above mobile navigation */
        right: 10px;
    }
    
    .floating-timer[b-aan4v36scp] {
        width: 100%;
        max-width: none;
    }
}
/* /Components/Home/HomeActivityDigest.razor.rz.scp.css */
/* Activity Digest - Timeline Visual + Card Accents */

/* Section cards with left accent border */
.activity-digest-card[b-69d9d1jkj6] {
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.activity-digest-card:hover[b-69d9d1jkj6] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.activity-digest-orders[b-69d9d1jkj6] {
    border-left-color: var(--mud-palette-primary);
}

.activity-digest-accounts[b-69d9d1jkj6] {
    border-left-color: var(--mud-palette-success);
}

.activity-digest-default[b-69d9d1jkj6] {
    border-left-color: var(--mud-palette-info);
}

/* Section header hover */
.activity-digest-header[b-69d9d1jkj6] {
    border-radius: 4px;
    padding: 4px;
    margin: -4px;
    transition: background-color 0.15s ease;
}

.activity-digest-header:hover[b-69d9d1jkj6] {
    background-color: var(--mud-palette-action-default-hover);
}

/* Chevron rotation */
[b-69d9d1jkj6] .activity-digest-chevron {
    transition: transform 0.25s ease;
    color: var(--mud-palette-text-secondary);
}

[b-69d9d1jkj6] .activity-digest-chevron-expanded {
    transform: rotate(180deg);
}

/* Timeline layout */
.activity-digest-timeline[b-69d9d1jkj6] {
    position: relative;
    padding-left: 20px;
}

.activity-digest-timeline[b-69d9d1jkj6]::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--mud-palette-lines-default);
    border-radius: 1px;
}

.activity-digest-timeline-item[b-69d9d1jkj6] {
    position: relative;
    padding: 8px 0 8px 12px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.activity-digest-timeline-item:hover[b-69d9d1jkj6] {
    background-color: var(--mud-palette-action-default-hover);
}

/* Timeline dot */
.activity-digest-timeline-dot[b-69d9d1jkj6] {
    position: absolute;
    left: -19px;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-text-secondary);
    border: 2px solid var(--mud-palette-surface);
    z-index: 1;
}

.activity-dot-orders[b-69d9d1jkj6] {
    background: var(--mud-palette-primary);
}

.activity-dot-accounts[b-69d9d1jkj6] {
    background: var(--mud-palette-success);
}

.activity-dot-default[b-69d9d1jkj6] {
    background: var(--mud-palette-info);
}

.activity-digest-timeline-content[b-69d9d1jkj6] {
    min-width: 0;
}

/* Fade-in for expanded content */
[b-69d9d1jkj6] .mud-collapse-container .activity-digest-timeline {
    animation: digestFadeIn-b-69d9d1jkj6 0.3s ease-out;
}

@keyframes digestFadeIn-b-69d9d1jkj6 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark mode adjustments */
:global(.mud-theme-dark) .activity-digest-card:hover[b-69d9d1jkj6] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* /Components/Home/HomeNonCompliantPanel.razor.rz.scp.css */
/* Non-Compliant Orders Card Styling */
.non-compliant-card[b-c8pelzatog] {
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.non-compliant-card:hover[b-c8pelzatog] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.non-compliant-indicator[b-c8pelzatog] {
    width: 6px;
    min-height: 100%;
    animation: pulse-bar-b-c8pelzatog 2s ease-in-out infinite;
}

.non-compliant-indicator-error[b-c8pelzatog] {
    background: linear-gradient(180deg, var(--mud-palette-error) 0%, var(--mud-palette-error-darken) 100%);
}

.non-compliant-indicator-warning[b-c8pelzatog] {
    background: linear-gradient(180deg, var(--mud-palette-warning) 0%, var(--mud-palette-warning-darken) 100%);
}

.non-compliant-indicator-info[b-c8pelzatog] {
    background: linear-gradient(180deg, var(--mud-palette-info) 0%, var(--mud-palette-info-darken) 100%);
}

@keyframes pulse-bar-b-c8pelzatog {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

@keyframes pulse-b-c8pelzatog {
    0% { opacity: 1; }
    50% { opacity: 0.9; }
    100% { opacity: 1; }
}
/* /Components/Home/HomeOrderRecommendationsPanel.razor.rz.scp.css */
.recommendation-card[b-1get9vgc4f] {
    border-radius: 12px;
}

.recommendation-scroll[b-1get9vgc4f] {
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 4px;
}

.priority-group[b-1get9vgc4f] {
    margin-bottom: 16px;
}

.priority-group--high[b-1get9vgc4f] {
    border-left: 3px solid var(--mud-palette-success);
    padding-left: 12px;
}

.priority-group--medium[b-1get9vgc4f] {
    border-left: 3px solid var(--mud-palette-primary);
    padding-left: 12px;
}

.priority-group--low[b-1get9vgc4f] {
    border-left: 2px solid var(--mud-palette-text-secondary);
    padding-left: 12px;
}

[b-1get9vgc4f] .recommendation-panels {
    margin-top: 8px;
}

[b-1get9vgc4f] .recommendation-order-panel {
    margin-bottom: 4px;
    border-radius: 8px;
}

[b-1get9vgc4f] .recommendation-order-panel .mud-expand-panel-header {
    padding: 8px 12px;
}

[b-1get9vgc4f] .recommendation-order-panel .mud-expand-panel-content {
    padding: 8px 12px 12px;
}

.detail-action-row[b-1get9vgc4f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    gap: 8px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.detail-action-row:last-child[b-1get9vgc4f] {
    border-bottom: none;
}
/* /Components/Home/HomeOrderSelectorDialog.razor.rz.scp.css */
.order-selector-backdrop[b-hbtofyunx3] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    z-index: 1300;
}

/* The dialog is a MudPaper, i.e. a child component's root: scoped CSS only tags this
   component's own elements, so reach it through the backdrop with ::deep. min-width 0 lets the
   flex item shrink below its content (the tab strip and cards used to force ~550px, which
   clipped the overlay on phones). */
.order-selector-backdrop[b-hbtofyunx3]  .order-selector-dialog {
    width: min(1100px, 100%);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Phones: edge-to-edge sheet instead of a floating card. */
@media (max-width: 599.98px) {
    .order-selector-backdrop[b-hbtofyunx3] {
        padding: 0;
        align-items: stretch;
    }

    .order-selector-backdrop[b-hbtofyunx3]  .order-selector-dialog {
        width: 100%;
        max-height: 100dvh;
        border-radius: 0;
    }
}
/* /Components/Home/HomeQuickStartPanel.razor.rz.scp.css */
/* Quick Actions Styling */
[b-ccujiiqng2] .quick-start-button {
    justify-content: flex-start;
    text-align: left;
    min-height: 5.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

[b-ccujiiqng2] .quick-start-button .mud-button-label {
    width: 100%;
    justify-content: flex-start;
}

[b-ccujiiqng2] .quick-start-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    width: 100%;
}

[b-ccujiiqng2] .quick-start-location {
    white-space: normal;
    line-height: 1.3;
    font-weight: 600;
}

[b-ccujiiqng2] .quick-start-detail {
    white-space: normal;
    opacity: 0.85;
}
/* /Components/Home/HomeSummaryStrip.razor.rz.scp.css */
/* At-a-glance KPI tiles. Same urgency visual language as the work-queue list. */

.pb-summary-strip[b-v1txc1ue3q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.pb-summary-tile[b-v1txc1ue3q] {
    padding: 12px 14px;
    border-radius: 8px;
    border-left: 4px solid transparent;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: var(--mud-palette-surface);
}

.pb-summary-tile:hover[b-v1txc1ue3q] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pb-summary-tile:focus-visible[b-v1txc1ue3q] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.pb-summary-tile-label[b-v1txc1ue3q] {
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pb-summary-tile-skeleton[b-v1txc1ue3q] {
    border-radius: 8px;
}

/* Critical — Non-compliant, Overdue, Conflicts, Overbooked */
.pb-summary-tile.work-queue-critical[b-v1txc1ue3q] {
    border-left-color: var(--mud-palette-error);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-error) 6%, transparent) 0%, transparent 60%);
}

/* Today — Today's Schedule */
.pb-summary-tile.work-queue-today[b-v1txc1ue3q] {
    border-left-color: var(--mud-palette-primary);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-primary) 6%, transparent) 0%, transparent 60%);
}

/* Action Needed — Dispatch Required, Parts Required, Active Without Schedule */
.pb-summary-tile.work-queue-action[b-v1txc1ue3q] {
    border-left-color: var(--mud-palette-warning);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-warning) 6%, transparent) 0%, transparent 60%);
}

:global(.mud-theme-dark) .pb-summary-tile.work-queue-critical[b-v1txc1ue3q] {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-error) 12%, transparent) 0%, transparent 60%);
}

:global(.mud-theme-dark) .pb-summary-tile.work-queue-today[b-v1txc1ue3q] {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) 0%, transparent 60%);
}

:global(.mud-theme-dark) .pb-summary-tile.work-queue-action[b-v1txc1ue3q] {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-warning) 12%, transparent) 0%, transparent 60%);
}

:global(.mud-theme-dark) .pb-summary-tile:hover[b-v1txc1ue3q] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* /Components/Home/HomeWelcomeSection.razor.rz.scp.css */
/* Welcome Card Styling */
.welcome-card[b-piu7013h1g] {
    border-radius: 12px;
    overflow: hidden;
}

.welcome-header[b-piu7013h1g] {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
    padding: 20px 24px;
    color: white;
}

.welcome-title[b-piu7013h1g] {
    color: white;
    font-weight: 600;
    margin-bottom: 4px;
}

.welcome-subtitle[b-piu7013h1g] {
    color: rgba(255, 255, 255, 0.85);
}

[b-piu7013h1g] .welcome-header-btn {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    backdrop-filter: blur(4px);
}

[b-piu7013h1g] .welcome-header-btn:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.welcome-stats[b-piu7013h1g] {
    display: flex;
    gap: 24px;
    padding: 16px 24px;
    background-color: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-wrap: wrap;
}

.welcome-stat[b-piu7013h1g] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.welcome-stat-icon[b-piu7013h1g] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.welcome-stat-icon-primary[b-piu7013h1g] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

.welcome-stat-icon-success[b-piu7013h1g] {
    background-color: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-success);
}

.welcome-stat-icon-error[b-piu7013h1g] {
    background-color: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    color: var(--mud-palette-error);
}

.welcome-stat-value[b-piu7013h1g] {
    font-weight: 600;
    line-height: 1.2;
}

.welcome-actions[b-piu7013h1g] {
    padding: 16px 24px;
}

.welcome-timer-section[b-piu7013h1g] {
    display: flex;
    align-items: center;
}

[b-piu7013h1g] .start-day-btn {
    padding-left: 24px;
    padding-right: 24px;
    font-weight: 600;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
    transition: all 0.2s ease;
}

[b-piu7013h1g] .start-day-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
}

/* Truck Card Styling */
.truck-card[b-piu7013h1g] {
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
}

.truck-link[b-piu7013h1g] {
    color: inherit;
    text-decoration: none;
}

.truck-link:hover[b-piu7013h1g] {
    text-decoration: underline;
}

.truck-header[b-piu7013h1g] {
    background-color: var(--mud-palette-background-grey);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Dark mode adjustments */
:global(.mud-theme-dark) .welcome-header[b-piu7013h1g] {
    background: linear-gradient(135deg, var(--mud-palette-primary-darken) 0%, var(--mud-palette-primary-darker) 100%);
}

:global(.mud-theme-dark) .welcome-stats[b-piu7013h1g] {
    background-color: var(--mud-palette-surface);
}

:global(.mud-theme-dark) .truck-header[b-piu7013h1g] {
    background-color: var(--mud-palette-surface);
}

:global(.mud-theme-dark) .welcome-stat-icon-primary[b-piu7013h1g] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

:global(.mud-theme-dark) .welcome-stat-icon-success[b-piu7013h1g] {
    background-color: color-mix(in srgb, var(--mud-palette-success) 20%, transparent);
}

:global(.mud-theme-dark) .welcome-stat-icon-error[b-piu7013h1g] {
    background-color: color-mix(in srgb, var(--mud-palette-error) 20%, transparent);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .welcome-header[b-piu7013h1g] {
        padding: 16px;
    }

    .welcome-stats[b-piu7013h1g] {
        padding: 12px 16px;
        gap: 16px;
    }

    .welcome-stat[b-piu7013h1g] {
        min-width: calc(50% - 8px);
    }

    .welcome-actions[b-piu7013h1g] {
        padding: 12px 16px;
    }

    [b-piu7013h1g] .start-day-btn {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Home/HomeWorkQueue.razor.rz.scp.css */
/* Work Queue Section Visual Hierarchy */

/* Empty state styling */
.empty-state-card[b-go2vxjj2mu] {
    border-radius: 12px;
}

/* Whole header row is the collapse/expand target (not just the chevron) */
.work-queue-header[b-go2vxjj2mu] {
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.work-queue-header:hover[b-go2vxjj2mu] {
    background-color: var(--mud-palette-action-default-hover);
}

.work-queue-header:focus-visible[b-go2vxjj2mu] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.work-queue-section[b-go2vxjj2mu] {
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-left: 4px solid transparent;
    background-color: var(--mud-palette-surface);
}

.work-queue-section:hover[b-go2vxjj2mu] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Critical - Non-compliant, Overdue, Conflicts, Overbooked */
.work-queue-critical[b-go2vxjj2mu] {
    border-left-color: var(--mud-palette-error);
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-error) 6%, transparent) 0%, transparent 30%);
}

.work-queue-critical:hover[b-go2vxjj2mu] {
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-error) 10%, transparent) 0%, transparent 40%);
}

/* Today - Today's Schedule */
.work-queue-today[b-go2vxjj2mu] {
    border-left-color: var(--mud-palette-primary);
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-primary) 6%, transparent) 0%, transparent 30%);
}

.work-queue-today:hover[b-go2vxjj2mu] {
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) 0%, transparent 40%);
}

/* Action Needed - Dispatch Required, Parts Required, Active Without Schedule */
.work-queue-action[b-go2vxjj2mu] {
    border-left-color: var(--mud-palette-warning);
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-warning) 6%, transparent) 0%, transparent 30%);
}

.work-queue-action:hover[b-go2vxjj2mu] {
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-warning) 10%, transparent) 0%, transparent 40%);
}

/* Hover glow effect — CSS-only, centered radial gradient on hover */
.work-queue-glow[b-go2vxjj2mu] {
    position: relative;
    overflow: hidden;
}

.work-queue-glow[b-go2vxjj2mu]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--mud-palette-primary) 7%, transparent),
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: -1;
}

.work-queue-glow:hover[b-go2vxjj2mu]::before {
    opacity: 1;
}

.work-queue-critical.work-queue-glow[b-go2vxjj2mu]::before {
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--mud-palette-error) 8%, transparent),
        transparent 70%
    );
}

.work-queue-action.work-queue-glow[b-go2vxjj2mu]::before {
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--mud-palette-warning) 8%, transparent),
        transparent 70%
    );
}

/* List item hover effect */
[b-go2vxjj2mu] .pb-quickview-list-item {
    padding: 8px 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

[b-go2vxjj2mu] .pb-quickview-list-item:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Dark mode adjustments - using MudBlazor theme class */
:global(.mud-theme-dark) .work-queue-critical[b-go2vxjj2mu] {
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-error) 12%, transparent) 0%, transparent 30%);
}

:global(.mud-theme-dark) .work-queue-critical:hover[b-go2vxjj2mu] {
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-error) 18%, transparent) 0%, transparent 40%);
}

:global(.mud-theme-dark) .work-queue-today[b-go2vxjj2mu] {
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) 0%, transparent 30%);
}

:global(.mud-theme-dark) .work-queue-today:hover[b-go2vxjj2mu] {
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-primary) 18%, transparent) 0%, transparent 40%);
}

:global(.mud-theme-dark) .work-queue-action[b-go2vxjj2mu] {
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-warning) 12%, transparent) 0%, transparent 30%);
}

:global(.mud-theme-dark) .work-queue-action:hover[b-go2vxjj2mu] {
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-warning) 18%, transparent) 0%, transparent 40%);
}

:global(.mud-theme-dark) .work-queue-section:hover[b-go2vxjj2mu] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* /Components/Home/Kpi/KpiCard.razor.rz.scp.css */
.pb-kpi-expand-overlay[b-v99c929zzd] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.pb-kpi-card-expanded[b-v99c929zzd] {
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}
/* /Components/Home/Kpi/KpiLeaderboardPanel.razor.rz.scp.css */
.pb-kpi-rankings-toolbar[b-cpuazanloe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.pb-kpi-rankings-title[b-cpuazanloe] {
    margin-right: 0.25rem;
}

[b-cpuazanloe] .pb-kpi-rankings-select {
    min-width: 220px;
    max-width: 260px;
}

@media (max-width: 1280px) {
    [b-cpuazanloe] .pb-kpi-rankings-select {
        min-width: 200px;
        max-width: 240px;
    }
}

.pb-kpi-excluded-list[b-cpuazanloe] {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    padding-top: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
}

@media (max-width: 600px) {
    .pb-kpi-rankings-toolbar[b-cpuazanloe] {
        align-items: stretch;
    }

    [b-cpuazanloe] .pb-kpi-rankings-select {
        min-width: 100%;
        max-width: 100%;
    }
}
/* /Components/Home/Kpi/KpiTcoChart.razor.rz.scp.css */
.pb-kpi-expand-overlay[b-k2w8ad8twh] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.pb-kpi-card-expanded[b-k2w8ad8twh] {
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-ya0dgec7mo] {
    position: relative;
    display: flex;
    flex-direction: column;
}

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

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

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

.top-row[b-ya0dgec7mo], .top-row .btn-link[b-ya0dgec7mo] {
    white-space: nowrap;
    margin-left: 1.5rem;
}

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

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-ya0dgec7mo] {
        display: none;
    }

    .top-row.auth[b-ya0dgec7mo] {
        justify-content: space-between;
    }

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

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

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

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

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

/* Floating Timer Widget Styles */
.floating-timer-container[b-ya0dgec7mo] {
    position: fixed;
    bottom: calc(var(--floating-timer-bottom, 20px) + var(--my-bar-height, 0px));
    right: 20px;
    z-index: 1400;
    animation: slideInUp-b-ya0dgec7mo 0.3s ease-out;
}

.floating-timer-hidden-toggle[b-ya0dgec7mo] {
    position: fixed;
    bottom: calc(var(--floating-timer-bottom, 20px) + var(--my-bar-height, 0px));
    right: 20px;
    z-index: 1400;
}

.floating-timer[b-ya0dgec7mo] {
    padding: 12px 16px;
    background: var(--mud-palette-surface);
    min-width: 280px;
    max-width: 350px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.floating-timer .text-truncate[b-ya0dgec7mo] {
    max-width: 200px;
}

@keyframes slideInUp-b-ya0dgec7mo {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .floating-timer-container[b-ya0dgec7mo] {
        bottom: max(70px, calc(var(--floating-timer-bottom, 20px) + var(--my-bar-height, 0px))); /* Above mobile navigation */
        right: 10px;
        left: 10px;
    }

    .floating-timer-hidden-toggle[b-ya0dgec7mo] {
        bottom: max(70px, calc(var(--floating-timer-bottom, 20px) + var(--my-bar-height, 0px))); /* Above mobile navigation */
        right: 10px;
    }
    
    .floating-timer[b-ya0dgec7mo] {
        width: 100%;
        max-width: none;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-eujh33eopr] {
    background-color: rgba(255, 255, 255, 0.1);
}

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

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

.oi[b-eujh33eopr] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

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

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

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

.nav-item[b-eujh33eopr]  a {
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

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

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

.nav-item[b-eujh33eopr]  [data-nav-custom-color] .mud-icon-root,
.nav-item[b-eujh33eopr]  [data-nav-custom-color] .mud-nav-link-icon,
.mud-nav-menu[b-eujh33eopr]  [data-nav-custom-color] .mud-icon-root,
.mud-nav-menu[b-eujh33eopr]  [data-nav-custom-color] .mud-nav-link-icon {
    color: var(--nav-custom-color) !important;
}

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

    .collapse[b-eujh33eopr] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}
/* /Components/Layout/NavMenuRight.razor.rz.scp.css */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
#components-reconnect-modal[b-nmfi2g4yie] {
    width: min(28rem, calc(100vw - 2rem));
    box-sizing: border-box;
    margin: auto;
    padding: 1.75rem;
    border: 1px solid var(--mud-palette-lines-default, #dedee5);
    border-radius: 12px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #282833);
    box-shadow: 0 12px 48px rgb(0 0 0 / 25%);
}
#components-reconnect-modal[b-nmfi2g4yie]::backdrop { background: rgb(0 0 0 / 45%); }
.reconnect-content[b-nmfi2g4yie] { display: grid; gap: 1.25rem; }
.reconnect-content h2[b-nmfi2g4yie] { margin: 0; font-size: 1.35rem; line-height: 1.4; }
.reconnect-content p[b-nmfi2g4yie] { margin: 0; line-height: 1.6; }
.reconnect-warning[b-nmfi2g4yie] { color: var(--mud-palette-text-secondary, #595966); font-size: .9rem; }
.reconnect-actions[b-nmfi2g4yie] { display: flex; flex-wrap: wrap; gap: .75rem; }
.reconnect-actions button[b-nmfi2g4yie] {
    min-height: 44px;
    padding: .65rem 1rem;
    border: 1px solid var(--mud-palette-primary, #594ae2);
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-primary, #594ae2);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.reconnect-actions .reconnect-primary[b-nmfi2g4yie],
[data-recovery-state="rejected"] #components-reload-button[b-nmfi2g4yie] {
    background: var(--mud-palette-primary, #594ae2);
    color: var(--mud-palette-primary-text, #fff);
}
.reconnect-actions button:hover[b-nmfi2g4yie] { filter: brightness(.92); }
.reconnect-actions button:focus-visible[b-nmfi2g4yie] { outline: 3px solid var(--mud-palette-primary, #594ae2); outline-offset: 3px; }
.reconnect-actions button:disabled[b-nmfi2g4yie] { opacity: .6; cursor: wait; }
[role="status"] p[b-nmfi2g4yie],
.reconnect-warning[b-nmfi2g4yie],
.reconnect-actions button[b-nmfi2g4yie] { display: none; }
[data-recovery-state="show"] .reconnect-connecting[b-nmfi2g4yie],
[data-recovery-state="retrying"] .reconnect-retrying[b-nmfi2g4yie],
[data-recovery-state="failed"] .reconnect-failed[b-nmfi2g4yie],
[data-recovery-state="rejected"] .reconnect-rejected[b-nmfi2g4yie],
[data-recovery-state="paused"] .reconnect-paused[b-nmfi2g4yie],
[data-recovery-state="resume-failed"] .reconnect-resume-failed[b-nmfi2g4yie],
[data-recovery-state="recovering"] .reconnect-recovering[b-nmfi2g4yie],
[data-recovery-state="failed"] .reconnect-warning[b-nmfi2g4yie],
[data-recovery-state="rejected"] .reconnect-warning[b-nmfi2g4yie],
[data-recovery-state="resume-failed"] .reconnect-warning[b-nmfi2g4yie],
[data-recovery-state="failed"] #components-reconnect-button[b-nmfi2g4yie],
[data-recovery-state="paused"] #components-resume-button[b-nmfi2g4yie],
[data-recovery-state="resume-failed"] #components-resume-button[b-nmfi2g4yie],
[data-recovery-state="failed"] #components-reload-button[b-nmfi2g4yie],
[data-recovery-state="rejected"] #components-reload-button[b-nmfi2g4yie],
[data-recovery-state="resume-failed"] #components-reload-button[b-nmfi2g4yie] { display: block; }
@media (max-width: 400px) {
    #components-reconnect-modal[b-nmfi2g4yie] { padding: 1.25rem; }
    .reconnect-actions button[b-nmfi2g4yie] { width: 100%; }
}
/* /Components/Notes/NoteContent.razor.rz.scp.css */
.note-content[b-lkzc1bqfts] {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.note-content[b-lkzc1bqfts]  li[data-list="bullet"] {
    list-style-type: disc;
}

.note-content[b-lkzc1bqfts]  li[data-list="ordered"] {
    list-style-type: decimal;
}
/* /Components/Reports/CustomerContactEntry.razor.rz.scp.css */
.contact-entry[b-532ur0e63j] { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
.contact-fields[b-532ur0e63j] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.contact-time[b-532ur0e63j] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact-entry[b-532ur0e63j]  .contact-help { color: var(--mud-palette-text-secondary); line-height: 1.6; }
.contact-actions[b-532ur0e63j] { display: flex; justify-content: flex-end; gap: 12px; padding-top: 8px; }
@media (max-width: 650px) { .contact-fields[b-532ur0e63j], .contact-time[b-532ur0e63j] { grid-template-columns: minmax(0, 1fr); } }
/* /Components/Reports/CustomerGrowthReport.razor.rz.scp.css */
.growth-report[b-mv67xr6lia] { max-width: 1600px; padding: 8px 0 24px; }
.growth-header[b-mv67xr6lia] { margin-bottom: 24px; }
.growth-filters[b-mv67xr6lia] { padding: 20px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius); }
.growth-advanced[b-mv67xr6lia] { margin-top: 20px; }
.growth-actions[b-mv67xr6lia] { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.growth-periods[b-mv67xr6lia] { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 24px 0 16px; font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.growth-periods strong[b-mv67xr6lia] { color: var(--mud-palette-text-primary); margin-right: 8px; }
.growth-details[b-mv67xr6lia] { margin-top: 32px; }
.growth-section-heading[b-mv67xr6lia] { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.growth-section-heading h3[b-mv67xr6lia] { margin: 0; font-size: 1rem; font-weight: 600; }
.growth-section-heading span[b-mv67xr6lia] { color: var(--mud-palette-text-secondary); font-size: .875rem; }
.growth-pagination[b-mv67xr6lia] { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
@media (max-width: 600px) {
    .growth-filters[b-mv67xr6lia] { padding: 16px; }
    .growth-periods[b-mv67xr6lia] { flex-direction: column; }
}
/* /Components/Reports/CustomerGrowthSummary.razor.rz.scp.css */
.growth-metrics[b-l3lkg2tabo] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.growth-metric[b-l3lkg2tabo] { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius); }
.growth-metric span[b-l3lkg2tabo] { color: var(--mud-palette-text-secondary); font-size: .875rem; }
.growth-metric strong[b-l3lkg2tabo] { font-size: 1.5rem; font-weight: 600; overflow-wrap: anywhere; }
.growth-coverage[b-l3lkg2tabo] { margin: 20px 0 28px; padding: 16px 20px; background: var(--mud-palette-background-gray); border-left: 3px solid var(--mud-palette-info); font-size: .8125rem; line-height: 1.6; }
.growth-coverage p[b-l3lkg2tabo] { margin: 4px 0 0; color: var(--mud-palette-text-secondary); }
h3[b-l3lkg2tabo] { margin: 0 0 12px; font-size: 1rem; font-weight: 600; }
section[b-l3lkg2tabo]  th:not(:first-child), section[b-l3lkg2tabo]  td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .growth-metrics[b-l3lkg2tabo] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .growth-metrics[b-l3lkg2tabo] { grid-template-columns: minmax(0, 1fr); } }
/* /Components/Reports/ReportAmountBreakdown.razor.rz.scp.css */
.report-amount-drill[b-by7wqa5jk1] {
    cursor: pointer;
    white-space: nowrap;
    text-decoration: underline dotted;
    text-decoration-color: var(--mud-palette-text-secondary);
    text-underline-offset: 3px;
}

.report-amount-drill:focus-visible[b-by7wqa5jk1] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 2px;
}
/* /Components/Reports/ReportExperimentSettingsEditor.razor.rz.scp.css */
.experiment-settings[b-vqgo54lzlu] {
    max-width: 1120px;
    padding: 8px 0;
}

.experiment-settings p[b-vqgo54lzlu] {
    margin: 4px 0 12px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
}

.experiment-header[b-vqgo54lzlu] {
    margin-bottom: 20px;
}

.experiment-suspension[b-vqgo54lzlu] {
    padding: 8px 16px;
    margin-bottom: 20px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-gray);
}

.experiment-suspension p[b-vqgo54lzlu] {
    margin-left: 12px;
}

.experiment-grid[b-vqgo54lzlu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.experiment-card[b-vqgo54lzlu] {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.experiment-card h3[b-vqgo54lzlu] {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 600;
}

.experiment-options[b-vqgo54lzlu],
.experiment-status[b-vqgo54lzlu],
.experiment-save-status[b-vqgo54lzlu] {
    display: flex;
    flex-direction: column;
}

.experiment-ranking[b-vqgo54lzlu] {
    max-width: 360px;
    margin-top: 20px;
}

.experiment-capture-group + .experiment-capture-group[b-vqgo54lzlu] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.experiment-status[b-vqgo54lzlu] {
    gap: 4px;
    padding: 12px;
    margin: 12px 0;
    background: var(--mud-palette-background-gray);
    border-radius: var(--mud-default-borderradius);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.experiment-settings .experiment-note[b-vqgo54lzlu] {
    font-size: 0.8125rem;
}

.experiment-footer[b-vqgo54lzlu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.experiment-actions[b-vqgo54lzlu] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.experiment-save-status[b-vqgo54lzlu] {
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

@media (max-width: 800px) {
    .experiment-grid[b-vqgo54lzlu] {
        grid-template-columns: minmax(0, 1fr);
    }

    .experiment-card[b-vqgo54lzlu] {
        padding: 16px;
    }
}
/* /Components/Reports/ReportLayout.razor.rz.scp.css */
.report-layout[b-l2q9beja5q] { max-width: 1600px; padding: 8px 0 24px; }
.report-layout[b-l2q9beja5q]  .report-header { margin-bottom: 24px; }
.report-layout[b-l2q9beja5q]  .report-description { display: block; margin-top: 8px; max-width: 1100px; color: var(--mud-palette-text-secondary); line-height: 1.6; font-size: .875rem; }
.report-layout[b-l2q9beja5q]  .report-controls { padding: 20px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius); margin-bottom: 24px; }
.report-layout[b-l2q9beja5q]  .report-advanced { margin-top: 20px; }
.report-layout[b-l2q9beja5q]  .report-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.report-layout[b-l2q9beja5q]  .report-options { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.report-layout[b-l2q9beja5q]  .report-actions, .report-layout[b-l2q9beja5q]  .report-pagination { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.report-layout[b-l2q9beja5q]  .report-period { display: block; margin: 0 0 16px; color: var(--mud-palette-text-secondary); font-size: .8125rem; }
.report-layout[b-l2q9beja5q]  .report-summary { padding: 20px; margin-bottom: 20px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius); font-size: 1rem; line-height: 1.7; }
.report-layout[b-l2q9beja5q]  .report-coverage { display: block; margin: 16px 0 24px; padding: 16px 20px; background: var(--mud-palette-background-gray); border-left: 3px solid var(--mud-palette-info); color: var(--mud-palette-text-secondary); line-height: 1.6; font-size: .8125rem; }
.report-layout[b-l2q9beja5q]  .report-detail { margin-top: 32px; }
.report-layout[b-l2q9beja5q]  .report-section-title { display: block; margin-bottom: 12px; }
@media (max-width: 800px) { .report-layout[b-l2q9beja5q]  .report-filter-grid { grid-template-columns: minmax(0, 1fr); } }

.report-layout[b-l2q9beja5q]  .report-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 16px 0 20px; }
.report-layout[b-l2q9beja5q]  .report-metric { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius); }
.report-layout[b-l2q9beja5q]  .report-metric span { font-size: .875rem; color: var(--mud-palette-text-secondary); }
.report-layout[b-l2q9beja5q]  .report-metric strong { font-size: 1.5rem; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 900px) { .report-layout[b-l2q9beja5q]  .report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .report-layout[b-l2q9beja5q]  .report-metrics { grid-template-columns: minmax(0, 1fr); } }
/* /Components/Reports/ReportTableFrame.razor.rz.scp.css */
/* Wrapped header labels ("SO / #", "31- / 60", "Total / M+L / Sales / $") doubled the header
   height on tablets and were hard to read; one line per label, with shorter titles on the pages. */
.report-table-frame[b-kgs6ixm0o9]  .mud-table-head th {
    white-space: nowrap;
}

/* Sticky columns sit over the columns that scroll under them. Without an edge the pinned
   column looked like it cut into its neighbour ("E / D" plus stray digits). */
.report-table-frame[b-kgs6ixm0o9]  .mud-table-cell.sticky-left {
    box-shadow: inset -1px 0 0 var(--mud-palette-lines-default), 4px 0 6px -4px rgba(0, 0, 0, 0.18);
}

.report-table-frame[b-kgs6ixm0o9]  .mud-table-cell.sticky-right {
    box-shadow: inset 1px 0 0 var(--mud-palette-lines-default), -4px 0 6px -4px rgba(0, 0, 0, 0.18);
}
/* /Components/Scheduler/Queue/UnscheduledWorkQueue.razor.rz.scp.css */
/* Collapsed rail label is a button now; drop the native button look so it keeps the rail's
   vertical label style from scheduler.css. */
button.pb-unscheduled-queue-rail-label[b-k4ob2htjxq] {
    background: none;
    border: none;
    border-radius: 6px;
    padding: 6px 2px;
    font: inherit;
    cursor: pointer;
}

button.pb-unscheduled-queue-rail-label:hover[b-k4ob2htjxq],
button.pb-unscheduled-queue-rail-label:focus-visible[b-k4ob2htjxq] {
    background-color: var(--mud-palette-action-default-hover);
}

.pb-unscheduled-queue-rail-text[b-k4ob2htjxq] {
    font-size: 0.75rem;
    font-weight: 500;
}
/* /Components/Scheduler/Views/MonthViewComponent.razor.rz.scp.css */
/* Tablets (below 1100px): a day cell is about 110px wide, so the month list showed truncated
   "Person ..." names in 10px text with tiny "Show more (7)" links. Each day shows a readable
   summary instead (techs scheduled, overbooked, conflicts); tapping it opens that day. The week
   rows drop the height reserved for the hidden list. Wider screens keep the detailed month. */
.pb-month-day-summary[b-uhnr6wxtpz] {
    display: none;
}

@media (max-width: 1099.98px) {
    .rz-events[b-uhnr6wxtpz] {
        display: none;
    }

    .rz-week[b-uhnr6wxtpz] {
        min-height: 96px !important;
    }

    .rz-slot[b-uhnr6wxtpz] {
        flex-direction: column;
        align-items: stretch;
    }

    .pb-month-day-summary[b-uhnr6wxtpz] {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 2px;
        min-height: 44px;
        width: 100%;
        margin: 0;
        padding: 4px 6px;
        border: 0;
        background: transparent;
        color: var(--mud-palette-text-primary);
        font: inherit;
        font-size: 0.8125rem;
        line-height: 1.3;
        text-align: left;
        cursor: pointer;
    }

    .pb-month-day-summary:hover[b-uhnr6wxtpz],
    .pb-month-day-summary:focus-visible[b-uhnr6wxtpz] {
        background: rgba(var(--mud-palette-primary-rgb), 0.08);
    }

    .pb-month-day-summary:focus-visible[b-uhnr6wxtpz] {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: -2px;
    }

    .pb-month-day-summary-line[b-uhnr6wxtpz] {
        font-weight: 500;
    }

    .pb-month-day-summary-line.is-overbooked[b-uhnr6wxtpz] {
        color: var(--mud-palette-warning-darken);
    }

    .pb-month-day-summary-line.is-conflict[b-uhnr6wxtpz] {
        color: var(--mud-palette-error);
    }
}
/* /Components/Scheduler/Views/VsNewDayView.razor.rz.scp.css */
/* The fixed horizontal scroll rail sits on top of the legend, which itself sits above the My Bar
   (see Pages/Schedule/Index.razor.css), so both offsets add up. */
.pb-day-view-horizontal-scrollbar[b-eoh8buk9py] {
    bottom: calc(var(--pb-schedule-legend-height, 48px) + var(--my-bar-height));
}

/* Tablets (below 1280px): 300px tech columns showed only 2.5 techs on an iPad Air in portrait,
   with the last column cut through a card. Columns narrow to 240px there, and the Personal and
   Route header buttons drop their text (icon only; the name is in aria-label and the tooltip)
   so the tech name keeps its room. A single bound tech still fills the row (:only-child). */
@media (max-width: 1279.98px) {
    .pb-day-view-column-new:not(:only-child)[b-eoh8buk9py] {
        flex-basis: 240px;
        width: 240px;
        min-width: 240px;
        max-width: 240px;
    }

    .pb-day-view-header-actions[b-eoh8buk9py]  .pb-day-view-add-personal,
    .pb-day-view-header-actions[b-eoh8buk9py]  .pb-day-view-route-btn {
        font-size: 0 !important;
        min-width: 32px !important;
        padding: 4px !important;
    }

    .pb-day-view-header-actions[b-eoh8buk9py]  .mud-button-icon-start {
        margin: 0;
    }
}

/* Touch: the Personal and Route buttons were 94x23 and 72x23 targets. Any coarse pointer gets
   finger-sized buttons, whatever the screen width. */
@media (any-pointer: coarse) {
    .pb-day-view-header-actions[b-eoh8buk9py] {
        gap: 6px;
    }

    .pb-day-view-header-actions[b-eoh8buk9py]  .pb-day-view-add-personal,
    .pb-day-view-header-actions[b-eoh8buk9py]  .pb-day-view-route-btn {
        min-width: 40px !important;
        min-height: 40px;
    }
}

/* The quick-edit pencil on each card only appeared on hover, which touch screens do not have.
   Show it whenever a touch pointer is present, and whenever the card has keyboard focus. */
.pb-scheduler-view-day-cell-container:focus-within .pb-schedule-edit-btn[b-eoh8buk9py] {
    opacity: 1;
}

@media (hover: none), (any-pointer: coarse) {
    .pb-schedule-edit-btn[b-eoh8buk9py] {
        opacity: 1;
    }

    .pb-schedule-edit-btn[b-eoh8buk9py]  .pb-schedule-inline-edit-trigger {
        min-width: 40px;
        min-height: 40px;
    }
}

/* The labelled Move button is the touch way to move a schedule (drag-and-drop needs a long
   press on iPad Safari and often does not start). Mouse users keep the hover pencil. */
.pb-schedule-edit-btn[b-eoh8buk9py]  .pb-schedule-move-btn {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    .pb-schedule-edit-btn[b-eoh8buk9py]  .pb-schedule-inline-edit-trigger {
        display: none;
    }

    .pb-schedule-edit-btn[b-eoh8buk9py]  .pb-schedule-move-btn {
        display: inline-flex;
        min-height: 40px;
    }

    /* Quick edit form: Save and Cancel as finger-sized buttons. */
    .pb-schedule-inline-edit[b-eoh8buk9py]  .mud-button-root {
        min-height: 40px;
    }

    /* The drag handle was a 12x20px grip. On touch it becomes a full-height 40px strip down
       the left of the card, with the grip drawn in its middle; the card makes room for it. */
    .pb-scheduler-view-day-cell-container[b-eoh8buk9py] {
        padding-left: 44px;
    }

    .pb-schedule-drag-handle[b-eoh8buk9py] {
        top: 0;
        bottom: 0;
        left: 0;
        width: 40px;
        height: auto;
        background: none;
        box-shadow: none;
        border-radius: 8px 0 0 8px;
        opacity: 1;
    }

    .pb-schedule-drag-handle[b-eoh8buk9py]::after {
        content: "";
        position: absolute;
        top: 10px;
        left: 14px;
        width: 12px;
        height: 20px;
        border-radius: 3px;
        background-color: rgba(0, 0, 0, 0.15);
        background-image: repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.7),
            rgba(255, 255, 255, 0.7) 2px,
            transparent 2px,
            transparent 4px
        );
    }
}

/* On touch the Move button shares the time row. The row wraps so the button drops below the time
   on a narrow card (a short personal block, a tablet column) instead of squeezing the time onto two
   lines or running past the card's edge. */
@media (hover: none) and (pointer: coarse) {
    .pb-schedule-inline-edit-row[b-eoh8buk9py] {
        flex-wrap: wrap;
    }

    .pb-schedule-time-link[b-eoh8buk9py] {
        white-space: nowrap;
    }

    .pb-schedule-edit-btn[b-eoh8buk9py] {
        margin-left: auto;
    }
}
/* /Components/Scheduler/Views/VsWeekViewComponent.razor.rz.scp.css */
/* Tablets: seven 220px day columns needed 1540px, so even a landscape iPad (1180px) scrolled
   sideways to reach Thursday. Columns and cards narrow to 150px below 1400px, which fits the
   whole week in landscape; a portrait iPad still scrolls, but less. */
@media (max-width: 1400px) {
    .pb-week-slot-header[b-34430h8gy4],
    .pb-week-slots[b-34430h8gy4] {
        min-width: 150px;
    }

    .pb-week-slots[b-34430h8gy4]  .pb-scheduler-week-item {
        width: auto;
        min-width: 0;
    }
}

/* Touch: each day's add button was a 28px icon and a card's drag grip a 12x20px strip. The add
   button becomes finger-sized; the grip keeps its look but takes touches in a 40px square around
   it, so a card is not widened to fit a 150px column. */
@media (hover: none) and (pointer: coarse) {
    .pb-week-slot-header[b-34430h8gy4]  .mud-icon-button {
        min-width: 40px;
        min-height: 40px;
    }

    .pb-week-slots[b-34430h8gy4]  .pb-schedule-drag-handle::before {
        content: "";
        position: absolute;
        top: -10px;
        left: -4px;
        width: 40px;
        height: 40px;
    }
}
/* /Components/TaskManagement/TaskBoardColumn.razor.rz.scp.css */
/* Collapsed lane. The base look (gradient pill, vertical title) is in site.css. */
.pb-tasks-collapsed-pill[b-o2zl1wcc8w] {
    width: 60px;
}

/* Portrait tablets: the expanded lanes wrap below the collapsed ones, so tall vertical pills
   only pushed the tasks down. Show collapsed lanes as short horizontal chips instead. */
@media (max-width: 1099.98px) {
    .pb-tasks-collapsed-pill[b-o2zl1wcc8w] {
        flex-direction: row;
        align-items: center;
        width: auto;
        height: auto;
        min-height: 40px;
        gap: 8px;
        padding: 6px 14px;
        border-radius: 20px;
    }

    .pb-tasks-collapsed-pill:hover[b-o2zl1wcc8w] {
        transform: none;
    }

    .pb-tasks-collapsed-title[b-o2zl1wcc8w] {
        writing-mode: horizontal-tb;
    }
}
/* /Components/Tracking/OrderInboundTruck.razor.rz.scp.css */
.oit-section-head[b-455ciy9m6z] {
    cursor: pointer;
    user-select: none;
    padding: 6px 8px;
    margin-left: -8px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.oit-section-head:hover[b-455ciy9m6z] {
    background-color: var(--mud-palette-action-default-hover);
}

.oit-section-head:focus-visible[b-455ciy9m6z] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.oit-count[b-455ciy9m6z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.oit-section-chevron[b-455ciy9m6z] {
    margin-left: auto;
    transition: transform 0.25s ease;
}

.oit-section-chevron--open[b-455ciy9m6z] {
    transform: rotate(180deg);
}

.oit-card[b-455ciy9m6z] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 14px;
}

.oit-head[b-455ciy9m6z] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.oit-avatar[b-455ciy9m6z] {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.oit-id[b-455ciy9m6z] {
    flex: 1 1 auto;
    min-width: 0;
}

.oit-truck[b-455ciy9m6z] {
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.3;
}

.oit-sub[b-455ciy9m6z] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.oit-chip[b-455ciy9m6z] {
    padding: 2px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.oit-info[b-455ciy9m6z] {
    background: rgba(33, 150, 243, 0.14);
    background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent);
    color: var(--mud-palette-info);
}

.oit-success[b-455ciy9m6z] {
    background: rgba(0, 200, 83, 0.14);
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
    color: var(--mud-palette-success);
}

.oit-warn[b-455ciy9m6z] {
    background: rgba(255, 152, 0, 0.14);
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    color: var(--mud-palette-warning);
}

.oit-muted[b-455ciy9m6z] {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.oit-eta[b-455ciy9m6z] {
    margin-left: auto;
    text-align: right;
    flex-shrink: 0;
}

.oit-eta-min[b-455ciy9m6z] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
}

.oit-eta-mid[b-455ciy9m6z] {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
}

.oit-eta-sub[b-455ciy9m6z] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
}

.oit-bar[b-455ciy9m6z] {
    margin-top: 18px;
}

.oit-bar-track[b-455ciy9m6z] {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
}

.oit-bar-fill[b-455ciy9m6z] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 999px;
    transition: width 0.8s ease;
}

.oit-bar-fill.oit-info[b-455ciy9m6z] {
    background: var(--mud-palette-info);
}

.oit-bar-fill.oit-success[b-455ciy9m6z] {
    background: var(--mud-palette-success);
}

.oit-bar-dot[b-455ciy9m6z] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--mud-palette-surface);
    transition: left 0.8s ease;
    z-index: 1;
}

.oit-bar-dot.oit-info[b-455ciy9m6z] {
    background: var(--mud-palette-info);
    color: var(--mud-palette-info-text, #fff);
}

.oit-bar-dot.oit-success[b-455ciy9m6z] {
    background: var(--mud-palette-success);
    color: var(--mud-palette-success-text, #fff);
}

.oit-bar-dot.oit-live[b-455ciy9m6z]::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    animation: oit-pulse-b-455ciy9m6z 2.2s ease-out infinite;
}

.oit-bar-dot.oit-success.oit-live[b-455ciy9m6z]::after {
    animation-name: oit-pulse-success-b-455ciy9m6z;
}

@keyframes oit-pulse-b-455ciy9m6z {
    0% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.45);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-info) 45%, transparent);
    }

    100% {
        box-shadow: 0 0 0 12px transparent;
    }
}

@keyframes oit-pulse-success-b-455ciy9m6z {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.45);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-success) 45%, transparent);
    }

    100% {
        box-shadow: 0 0 0 12px transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oit-bar-dot.oit-live[b-455ciy9m6z]::after {
        animation: none;
    }

    .oit-bar-fill[b-455ciy9m6z],
    .oit-bar-dot[b-455ciy9m6z] {
        transition: none;
    }
}

.oit-bar-labels[b-455ciy9m6z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.oit-bar-dest[b-455ciy9m6z] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.oit-timeline[b-455ciy9m6z] {
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 16px;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.oit-tl-row[b-455ciy9m6z] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.oit-tl-row.oit-tl-now[b-455ciy9m6z] {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.oit-tl-row[b-455ciy9m6z]  .oit-tl-done {
    color: var(--mud-palette-success);
}

.oit-tl-row[b-455ciy9m6z]  .oit-tl-at {
    color: var(--mud-palette-info);
}

.oit-tl-row[b-455ciy9m6z]  .oit-tl-truck {
    background: none;
}

.oit-tl-row[b-455ciy9m6z]  .oit-tl-truck.oit-info {
    color: var(--mud-palette-info);
}

.oit-tl-row[b-455ciy9m6z]  .oit-tl-truck.oit-success {
    color: var(--mud-palette-success);
}

.oit-tl-row[b-455ciy9m6z]  .oit-tl-truck.oit-muted {
    color: var(--mud-palette-text-secondary);
}

.oit-foot[b-455ciy9m6z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.oit-updated[b-455ciy9m6z] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.oit-map[b-455ciy9m6z] {
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
}
/* /Pages/Accounting/ArAgingTrend.razor.rz.scp.css */
/* "DSO (30-day)" and "Overdue Invoices" wrapped mid-label on portrait iPads. */
.ar-area-comparison th[b-cuzijkoei1] {
    white-space: nowrap;
}

.ar-area-empty td[b-cuzijkoei1] {
    color: var(--mud-palette-text-disabled);
}
/* /Pages/Accounting/CollectionsForecast.razor.rz.scp.css */
.cf-tiles[b-7grggjmd8i] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 959.98px) {
    .cf-tiles[b-7grggjmd8i] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 599.98px) {
    .cf-tiles[b-7grggjmd8i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cf-nowrap[b-7grggjmd8i] {
    white-space: nowrap;
}

/* Reason wrapped to ~9 lines in a 90px column on portrait iPads. */
.cf-reason-cell[b-7grggjmd8i] {
    min-width: 200px;
}

.cf-reason-clamp[b-7grggjmd8i] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Invoice, account and order links are stacked in one cell; give each a finger-sized row. */
@media (any-pointer: coarse) {
    .cf-item-links[b-7grggjmd8i]  a {
        display: inline-block;
        padding: 4px 0;
    }
}
/* /Pages/Accounting/CompletedWorkInvoiceGenerator.razor.rz.scp.css */
.cwi-nowrap[b-tn44818qap] {
    white-space: nowrap;
}

.cwi-note summary[b-tn44818qap] {
    cursor: pointer;
}
/* /Pages/Accounting/EditPaymentData.razor.rz.scp.css */
/* /Pages/Accounting/PaymentManagement.razor.rz.scp.css */
/* Payment Page - layout and allocation visual styles */

/* ============================================
   Page-scoped design tokens
   ============================================ */
/* Defined on the .payment-root wrapper (a real element in PaymentManagement.razor) so the
   tokens cascade to all descendants — including ::deep child components — without leaking
   to :global(html/body). Colors alias the MudBlazor palette so they follow light/dark. */
.payment-root[b-cr7mwei065] {
    --payment-card-radius: 12px;
    --payment-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    --payment-text-primary: var(--mud-palette-text-primary);
    --payment-text-secondary: var(--mud-palette-text-secondary);
    --payment-border-color: var(--mud-palette-lines-default);

    /* MudGrid's spacing is implemented with negative side margins, which poke past the page
       container and give the content area a useless horizontal scrollbar. Clip x only; `clip`
       (unlike `hidden`) does not create a scroll container, so the sticky rail inside keeps
       tracking the layout scrollport. */
    overflow-x: clip;
}

/* ============================================
   Sticky summary rail
   ============================================ */
/* The payment form and pay actions stay in view while the user scrolls the allocation
   tables on the right. Below the md breakpoint the columns stack, so pinning would only
   trap the form over the tables — fall back to static. */
.payment-sticky[b-cr7mwei065] {
    position: sticky;
    top: 8px;
    z-index: 20;
}

@media (max-width: 960px) {
    .payment-sticky[b-cr7mwei065] {
        position: static;
    }
}

/* ============================================
   Summary card
   ============================================ */
[b-cr7mwei065] .payment-card {
    padding: 1.25rem;
    border-radius: var(--payment-card-radius);
    border: 1px solid var(--payment-border-color);
    background: var(--mud-palette-surface);
    box-shadow: var(--payment-card-shadow);
}

[b-cr7mwei065] .payment-section-title {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

[b-cr7mwei065] .payment-order-context {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin: 0.5rem 0 0.75rem;
}

/* Long order descriptions must not blow up the sticky rail; full text stays on the title attr. */
[b-cr7mwei065] .payment-order-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--payment-text-secondary);
}

/* ============================================
   Live stat rows (Total / Allocated / Unallocated, balance preview)
   ============================================ */
[b-cr7mwei065] .payment-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.15rem 0;
    font-size: 0.875rem;
    color: var(--payment-text-secondary);
}

[b-cr7mwei065] .payment-stat-row strong {
    color: var(--payment-text-primary);
    font-variant-numeric: tabular-nums;
}

[b-cr7mwei065] .payment-stat-row-error,
[b-cr7mwei065] .payment-stat-row-error strong {
    color: var(--mud-palette-error);
}

[b-cr7mwei065] .payment-block-reasons {
    margin: 0;
    padding-left: 1rem;
}

/* ============================================
   Allocation tables
   ============================================ */
/* Rows where Pay Today exceeds the open amount. */
[b-cr7mwei065] .allocation-row-error td {
    background-color: rgba(var(--mud-palette-error-rgb), 0.08) !important;
}
/* /Pages/Accounting/Statements.razor.rz.scp.css */
.statements-generate-container[b-vr3y3veb4l] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
}

.statements-generate-button[b-vr3y3veb4l] {
    margin-top: 10px;
    padding-bottom: 10px;
}

.statements-period[b-vr3y3veb4l] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}
/* /Pages/Accounting/ViewPaymentData.razor.rz.scp.css */
/* /Pages/Accounting/ViewPaymentItemData.razor.rz.scp.css */
/* /Pages/Accounting/ViewPaymentTransactionData.razor.rz.scp.css */
/* /Pages/Accounting/ViewStatement.razor.rz.scp.css */
/* /Pages/Accounts/Index.razor.rz.scp.css */
/* The count cells (quotes, open, all, complete, invoices) were bare digits, so the link was
   about 8x16px. Centre the digit in a larger box: it looks the same but is easier to hit. */
.accounts-grid[b-hkjx8i8q3z]  .account-count-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    border-radius: 4px;
}

@media (any-pointer: coarse) {
    .accounts-grid[b-hkjx8i8q3z]  .account-count-link {
        min-width: 44px;
        min-height: 44px;
    }
}
/* /Pages/Accounts/RetentionQueue.razor.rz.scp.css */
/* Recent orders stack two to five order links in one cell. With 4px between 22px-tall links a
   finger hit the wrong order on tablets, so keep at least 8px apart and grow the links on touch. */
.retention-recent-orders[b-4a1gpmwpl1] {
    gap: 8px;
}

.retention-recent-orders[b-4a1gpmwpl1]  .retention-order-link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

@media (any-pointer: coarse) {
    .retention-recent-orders[b-4a1gpmwpl1]  .retention-order-link {
        min-height: 36px;
    }
}
/* /Pages/Apm/ApmDetailDiff.razor.rz.scp.css */
.apm-visit-row[b-l63c25xxpf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 6px;
}

.apm-visit-row:nth-child(even)[b-l63c25xxpf] {
    background-color: var(--mud-palette-background-grey);
}

.apm-visit-row:hover[b-l63c25xxpf] {
    background-color: var(--mud-palette-action-default-hover);
}

.apm-visit-main[b-l63c25xxpf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.apm-visit-desc[b-l63c25xxpf] {
    font-weight: 500;
}

.apm-visit-date[b-l63c25xxpf] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 3rem;
    justify-content: center;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-action-default-hover);
}

.apm-visit-meta[b-l63c25xxpf] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding-left: 2px;
    color: var(--mud-palette-text-secondary);
}

.apm-visit-tag[b-l63c25xxpf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
}

.apm-visit-was[b-l63c25xxpf] {
    padding-left: 2px;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}
/* /Pages/Apm/Components/VesselServiceWeekPreview.razor.rz.scp.css */
.wp-header[b-bwetfsebwm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.wp-title[b-bwetfsebwm] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wp-live-pill[b-bwetfsebwm] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #6b7280);
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 999px;
    padding: 1px 10px;
    white-space: nowrap;
}

.wp-nav[b-bwetfsebwm] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.wp-range[b-bwetfsebwm] {
    font-size: 13px;
    font-weight: 600;
    padding: 0 6px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wp-legend[b-bwetfsebwm] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 12px 0 14px;
    font-size: 13px;
}

.wp-legend-item[b-bwetfsebwm] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.wp-legend-item.off[b-bwetfsebwm] {
    opacity: 0.55;
}

.wp-legend-dot[b-bwetfsebwm] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: none;
}

.wp-legend-cadence[b-bwetfsebwm] {
    color: var(--mud-palette-text-secondary, #6b7280);
    font-size: 12px;
}

.wp-grid-wrap[b-bwetfsebwm] {
    overflow-x: auto;
}

.wp-grid[b-bwetfsebwm] {
    display: grid;
    grid-template-columns: 52px repeat(7, minmax(96px, 1fr));
    min-width: 760px;
}

.wp-corner[b-bwetfsebwm] {
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

.wp-day-head[b-bwetfsebwm] {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-left: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

.wp-day-head .num[b-bwetfsebwm] {
    color: var(--mud-palette-text-secondary, #6b7280);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.wp-day-head.today[b-bwetfsebwm] {
    color: var(--mud-palette-primary, #594ae2);
}

.wp-day-head.today .num[b-bwetfsebwm] {
    color: var(--mud-palette-primary, #594ae2);
}

.wp-hours[b-bwetfsebwm] {
    position: relative;
}

.wp-hour-label[b-bwetfsebwm] {
    position: absolute;
    right: 8px;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #6b7280);
    font-variant-numeric: tabular-nums;
}

/* Hour lines every 56px must match PxPerHour in the code-behind. */
.wp-col[b-bwetfsebwm] {
    position: relative;
    border-left: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 55px,
        var(--mud-palette-lines-default, #e0e0e0) 55px,
        var(--mud-palette-lines-default, #e0e0e0) 56px
    );
}

/* Single-line labels: short blocks (30m = ~26px) cannot fit wrapped text, so overflow gets an
   ellipsis and the full name/time range lives in the tooltip. */
.wp-visit[b-bwetfsebwm] {
    position: absolute;
    border-left: 3px solid;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.wp-visit-time[b-bwetfsebwm] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wp-visit.conflict[b-bwetfsebwm] {
    outline: 1.5px dashed var(--mud-palette-error, #c62828);
    outline-offset: -1.5px;
}
/* /Pages/Apm/VesselServiceEdit.razor.rz.scp.css */
.chemicals-section[b-io7ydtl7ra] {
    margin-top: 2rem;
}

.chemicals-table[b-io7ydtl7ra] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chemicals-header[b-io7ydtl7ra],
.chemicals-row[b-io7ydtl7ra] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(240px, 1fr) 140px 48px;
    gap: 1rem;
    align-items: center;
}

.chemicals-row[b-io7ydtl7ra] {
    padding: 0.5rem 0;
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,0.12));
}

.chemicals-row:first-of-type[b-io7ydtl7ra] {
    border-top: none;
}

.chemicals-col[b-io7ydtl7ra] {
    width: 100%;
}

.chemicals-col.actions[b-io7ydtl7ra] {
    display: flex;
    justify-content: flex-end;
}

.chemicals-autocomplete[b-io7ydtl7ra] {
    width: 100%;
}

.chemicals-qty-input[b-io7ydtl7ra] {
    max-width: 120px;
    margin: 0 auto;
}

.chemicals-qty-input .mud-input-root[b-io7ydtl7ra] {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.chemicals-remove-button[b-io7ydtl7ra] {
    padding: 0;
    margin: 0;
}

.instruction-text[b-io7ydtl7ra] {
    font-size: 0.85rem;
}

@media (max-width: 960px) {
    .chemicals-header[b-io7ydtl7ra] {
        display: none;
    }

    .chemicals-row[b-io7ydtl7ra] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .chemicals-col.quantity[b-io7ydtl7ra] {
        max-width: 160px;
    }

    .chemicals-col.actions[b-io7ydtl7ra] {
        justify-content: flex-start;
    }
}
/* /Pages/BusinessOpportunities/MarginPricingLeakageCenter.razor.rz.scp.css */
/* --mlc-tiles / --mlc-tiles-narrow are set inline from the number of visible tiles. */
.mlc-tiles[b-hwpxjpc30b] {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(var(--mlc-tiles), minmax(0, 1fr));
}

@media (max-width: 1279.98px) {
    .mlc-tiles[b-hwpxjpc30b] {
        grid-template-columns: repeat(var(--mlc-tiles-narrow), minmax(0, 1fr));
    }
}

@media (max-width: 599.98px) {
    .mlc-tiles[b-hwpxjpc30b] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Pages/BusinessOpportunities/QuoteFunnel.razor.rz.scp.css */
.qf-stage-row[b-of201b18jt] {
    cursor: pointer;
}

@media (any-pointer: coarse) {
    .qf-stage-row td[b-of201b18jt] {
        height: 44px;
    }
}
/* /Pages/BusinessOpportunities/SalesRepScorecard.razor.rz.scp.css */
/* The table scrolls inside this box so the sticky header has a scroll container to stick to. */
.scorecard-table[b-5ny5ef1d2v]  .mud-table-sticky-header .mud-table-container {
    max-height: max(320px, calc(100dvh - 300px));
}

.scorecard-name[b-5ny5ef1d2v] {
    white-space: nowrap;
}

.scorecard-value[b-5ny5ef1d2v] {
    white-space: nowrap;
}

.scorecard-detail[b-5ny5ef1d2v] {
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}
/* /Pages/Chat/Chat.razor.rz.scp.css */
.pb-chat-page[b-hr2d3lg1n7] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    /* Use MudBlazor palette variables with enhanced fallbacks */
    --pb-chat-surface: var(--mud-palette-background, var(--mud-palette-surface, #ffffff));
    --pb-chat-surface-subtle: var(--mud-palette-surface, #f8fafc);
    --pb-chat-surface-hover: rgba(var(--mud-palette-primary-rgb, 99, 102, 241), 0.08);
    --pb-chat-border: var(--mud-palette-lines-default, #e2e8f0);
    --pb-chat-text: var(--mud-palette-text-primary, #1e293b);
    --pb-chat-text-muted: var(--mud-palette-text-secondary, #64748b);
    --pb-chat-text-faint: var(--mud-palette-text-disabled, #94a3b8);
    --pb-chat-avatar-bg: var(--mud-palette-background-gray, #e0e7ff);
    --pb-chat-primary: var(--mud-palette-primary, #4f46e5);
    --pb-chat-primary-soft: rgba(var(--mud-palette-primary-rgb, 79, 70, 229), 0.12);
    --pb-chat-primary-strong: rgba(var(--mud-palette-primary-rgb, 79, 70, 229), 0.2);
    --pb-chat-primary-contrast: var(--mud-palette-primary-text, #ffffff);
    --pb-chat-secondary: var(--mud-palette-secondary, #7c3aed);
    --pb-chat-success: var(--mud-palette-success, #22c55e);
    --pb-chat-warning: var(--mud-palette-warning, #f59e0b);
    --pb-chat-warning-soft: rgba(var(--mud-palette-warning-rgb, 245, 158, 11), 0.15);
    --pb-chat-error: var(--mud-palette-error, #ef4444);
    --pb-chat-error-soft: rgba(var(--mud-palette-error-rgb, 239, 68, 68), 0.12);
    --pb-chat-info: var(--mud-palette-info, #0ea5e9);
    --pb-chat-info-soft: rgba(var(--mud-palette-info-rgb, 14, 165, 233), 0.12);
    --pb-chat-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    --pb-chat-shadow-strong: 0 8px 20px rgba(15, 23, 42, 0.12);
    --pb-chat-shadow-popover: 0 12px 32px rgba(15, 23, 42, 0.15);
}

.pb-chat-shell[b-hr2d3lg1n7] {
    position: relative;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 240px;
    gap: 16px;
    flex: 1;
    min-height: 0;
    height: 100%;
    padding: 12px 0;
    box-sizing: border-box;
}

.pb-chat-shell.is-sidebar-collapsed[b-hr2d3lg1n7] {
    grid-template-columns: minmax(0, 1fr) 240px;
}

.pb-chat-shell.is-sidebar-collapsed.is-detail-collapsed[b-hr2d3lg1n7] {
    grid-template-columns: minmax(0, 1fr);
}

.pb-chat-shell.is-detail-collapsed[b-hr2d3lg1n7] {
    grid-template-columns: 280px minmax(0, 1fr);
}

/* Hide sidebar when collapsed */
.pb-chat-shell.is-sidebar-collapsed[b-hr2d3lg1n7]  .pb-chat-sidebar {
    display: none !important;
}

/* Hide details panel when collapsed */
.pb-chat-shell.is-detail-collapsed[b-hr2d3lg1n7]  .pb-chat-detail {
    display: none !important;
}

.pb-chat-main[b-hr2d3lg1n7] {
    background: var(--pb-chat-surface);
    border: 1px solid var(--pb-chat-border);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pb-chat-main-body[b-hr2d3lg1n7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

/* "Back to channels" affordance — only shown in the single-pane (tablet/phone) layout below. */
.pb-chat-main[b-hr2d3lg1n7]  .pb-chat-back-to-channels {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 6px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--pb-chat-primary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

.pb-chat-main[b-hr2d3lg1n7]  .pb-chat-back-to-channels:hover {
    background: var(--pb-chat-primary-soft);
}

/* The members/details overlay toggle only exists in the layouts below 1280px. */
.pb-chat-main[b-hr2d3lg1n7]  .pb-chat-toggle-detail-overlay-btn {
    display: none;
}

@media (max-width: 1279.98px) {
    .pb-chat-shell[b-hr2d3lg1n7] {
        grid-template-columns: 240px minmax(0, 1fr);
        min-height: 0;
    }

    .pb-chat-main[b-hr2d3lg1n7] {
        max-height: none;
    }

    .pb-chat-shell.is-detail-collapsed[b-hr2d3lg1n7] {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .pb-chat-shell.is-sidebar-collapsed[b-hr2d3lg1n7] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pb-chat-shell.is-sidebar-collapsed.is-detail-collapsed[b-hr2d3lg1n7] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Two columns leave no room for the details panel: as a third grid item it wrapped under
       the conversation (iPad Air landscape, 12.9" portrait), leaving ~200px for messages. It
       now opens over the right side of the conversation from the header's members button. */
    .pb-chat-shell[b-hr2d3lg1n7]  .pb-chat-detail {
        display: none !important;
    }

    .pb-chat-shell.is-detail-overlay-open[b-hr2d3lg1n7]  .pb-chat-detail {
        display: flex !important;
        position: absolute;
        top: 12px;
        right: 0;
        bottom: 12px;
        width: min(340px, 90%);
        z-index: 20;
        overflow-y: auto;
        box-shadow: var(--pb-chat-shadow-popover);
    }

    .pb-chat-main[b-hr2d3lg1n7]  .pb-chat-toggle-detail-btn {
        display: none;
    }

    .pb-chat-main[b-hr2d3lg1n7]  .pb-chat-toggle-detail-overlay-btn {
        display: inline-flex;
    }
}

@media (max-width: 900px) {
    .pb-chat-shell[b-hr2d3lg1n7],
    .pb-chat-shell.is-detail-collapsed[b-hr2d3lg1n7],
    .pb-chat-shell.is-sidebar-collapsed[b-hr2d3lg1n7] {
        grid-template-columns: 1fr;
    }

    /* Single-pane master–detail: the 3-column desktop grid would otherwise stack all three
       panels vertically (channel list, a squished conversation, then members). Show one at a time. */

    /* Details/members panel is never stacked here; it opens as the overlay above. On the
       channel list (no channel open) it has nothing to show. */
    .pb-chat-shell.is-detail-overlay-open:not(.has-selected-channel)[b-hr2d3lg1n7]  .pb-chat-detail {
        display: none !important;
    }

    /* A channel is open → show the conversation, hide the channel list. */
    .pb-chat-shell.has-selected-channel[b-hr2d3lg1n7]  .pb-chat-sidebar {
        display: none !important;
    }

    /* No channel open → show the channel list, hide the empty conversation pane. */
    .pb-chat-shell:not(.has-selected-channel) .pb-chat-main[b-hr2d3lg1n7] {
        display: none;
    }

    /* Swap the desktop sidebar/detail toggles for a single "back to channels" button. */
    .pb-chat-main[b-hr2d3lg1n7]  .pb-chat-back-to-channels {
        display: inline-flex;
    }

    .pb-chat-main[b-hr2d3lg1n7]  .pb-chat-toggle-sidebar-btn,
    .pb-chat-main[b-hr2d3lg1n7]  .pb-chat-toggle-detail-btn {
        display: none;
    }
}

@media (max-width: 600px) {
    .pb-chat-shell[b-hr2d3lg1n7] {
        padding: 8px;
        gap: 8px;
    }

    .pb-chat-main-header[b-hr2d3lg1n7] {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Ensure touch-friendly tap targets on small screens */
    .pb-chat-main-actions[b-hr2d3lg1n7]  .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }

    .pb-chat-composer-actions[b-hr2d3lg1n7]  .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}

.pb-chat-loading-state[b-hr2d3lg1n7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    flex: 1;
}

/* Discord-inspired dark mode - richer, deeper colors */
:global(.mud-theme-dark) .pb-chat-page[b-hr2d3lg1n7] {
    --pb-chat-surface: #2f3136;
    --pb-chat-surface-subtle: #36393f;
    --pb-chat-surface-hover: rgba(79, 84, 92, 0.4);
    --pb-chat-border: #202225;
    --pb-chat-text: #dcddde;
    --pb-chat-text-muted: #b9bbbe;
    --pb-chat-text-faint: #72767d;
    --pb-chat-avatar-bg: #40444b;
    --pb-chat-primary-soft: rgba(88, 101, 242, 0.2);
    --pb-chat-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    --pb-chat-shadow-strong: 0 16px 32px rgba(0, 0, 0, 0.5);
}
/* /Pages/Chat/ChatChannelRow.razor.rz.scp.css */
/*
 * Channel-row styles. These live with the component (not in ChatSidebar.razor.css)
 * because Blazor scoped CSS only applies to the component that owns the markup —
 * the row is rendered here, so its styling must be scoped here.
 */

.pb-chat-channel-row:first-child[b-0ynq9wqmdv] {
    margin-top: 0;
}

.pb-chat-channel-row[b-0ynq9wqmdv] {
    border: none;
    border-radius: 6px;
    padding: 8px 10px 8px 14px;
    text-align: left;
    background: transparent;
    color: var(--pb-chat-text-muted);
    cursor: pointer;
    position: relative;
    transition: background 0.1s ease, color 0.1s ease;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    flex-shrink: 0;
}

.pb-chat-channel-row.is-hidden[b-0ynq9wqmdv] {
    opacity: 0.5;
}

.pb-chat-channel-row:hover[b-0ynq9wqmdv] {
    background: var(--pb-chat-surface-hover);
    color: var(--pb-chat-text);
}

/* Discord-style indicator pill */
.pb-chat-channel-row[b-0ynq9wqmdv]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0;
    background: var(--pb-chat-text);
    border-radius: 0 4px 4px 0;
    transition: height 0.15s ease;
}

.pb-chat-channel-row:hover[b-0ynq9wqmdv]::before {
    height: 8px;
}

.pb-chat-channel-row.is-active[b-0ynq9wqmdv] {
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-text);
}

.pb-chat-channel-row.is-active[b-0ynq9wqmdv]::before {
    height: 40px;
    background: var(--pb-chat-primary);
}

.pb-chat-channel-row.is-active:hover[b-0ynq9wqmdv] {
    background: var(--pb-chat-primary-strong);
}

/* Pinned channel styling */
.pb-chat-channel-row.is-pinned[b-0ynq9wqmdv] {
    background: var(--pb-chat-surface-subtle);
}

.pb-chat-channel-row.is-pinned[b-0ynq9wqmdv]::before {
    height: 20px;
    background: var(--pb-chat-warning);
}

.pb-chat-channel-row-title[b-0ynq9wqmdv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.pb-chat-channel-row-title-left[b-0ynq9wqmdv] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.pb-chat-channel-row-title-right[b-0ynq9wqmdv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.pb-chat-channel-row[b-0ynq9wqmdv]  .pb-chat-channel-type-icon {
    color: var(--pb-chat-text-muted);
    flex-shrink: 0;
}

.pb-chat-channel-row[b-0ynq9wqmdv]  .pb-chat-channel-lock-icon {
    color: var(--pb-chat-text-faint);
    flex-shrink: 0;
}

.pb-chat-channel-row-name[b-0ynq9wqmdv] {
    font-weight: 600;
    color: var(--pb-chat-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Touch users get no hover title, so a long channel name wraps to a second line instead of
   being cut off with an ellipsis. */
@media (any-pointer: coarse) {
    .pb-chat-channel-row-name[b-0ynq9wqmdv] {
        white-space: normal;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

.pb-chat-channel-badges[b-0ynq9wqmdv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.pb-chat-channel-actions[b-0ynq9wqmdv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0.65;
    transition: opacity 0.15s ease;
}

.pb-chat-channel-row:hover .pb-chat-channel-actions[b-0ynq9wqmdv],
.pb-chat-channel-row:focus-within .pb-chat-channel-actions[b-0ynq9wqmdv] {
    opacity: 1;
}

.pb-chat-channel-action[b-0ynq9wqmdv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 6px;
    color: var(--pb-chat-text-muted);
}

.pb-chat-channel-action:hover[b-0ynq9wqmdv] {
    background: var(--pb-chat-surface-hover);
    color: var(--pb-chat-text);
}

/* The pin/hide actions were 20px icons, too small to hit with a finger inside a tappable row. */
@media (any-pointer: coarse) {
    .pb-chat-channel-action[b-0ynq9wqmdv] {
        min-width: 32px;
        min-height: 32px;
    }
}

.pb-chat-channel-action.is-locked[b-0ynq9wqmdv] {
    color: var(--pb-chat-primary);
    background: var(--pb-chat-primary-soft);
}

.pb-chat-channel-row-preview[b-0ynq9wqmdv] {
    font-size: 0.8rem;
    color: var(--pb-chat-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    text-align: left;
}

.pb-chat-channel-row-meta[b-0ynq9wqmdv] {
    font-size: 0.7rem;
    color: var(--pb-chat-text-faint);
    font-weight: 500;
    text-align: left;
}

/* Legacy channel indicator - now using ::before pseudo-element on channel-row */
.pb-chat-channel-indicator[b-0ynq9wqmdv] {
    display: none;
}

/* Unread channel row state - using ::before for indicator */
.pb-chat-channel-row:has(.pb-chat-unread-badge)[b-0ynq9wqmdv]::before,
.pb-chat-channel-row:has(.pb-chat-channel-indicator.has-unread)[b-0ynq9wqmdv]::before {
    height: 8px;
    background: var(--pb-chat-text);
}

.pb-chat-channel-row:has(.pb-chat-unread-badge) .pb-chat-channel-row-name[b-0ynq9wqmdv],
.pb-chat-channel-row:has(.pb-chat-channel-indicator.has-unread) .pb-chat-channel-row-name[b-0ynq9wqmdv] {
    font-weight: 700;
    color: var(--pb-chat-text);
}

.pb-chat-unread-badge[b-0ynq9wqmdv] {
    background: var(--pb-chat-error);
    color: var(--mud-palette-error-contrast, #fff);
    border-radius: 999px;
    font-size: 0.65rem;
    padding: 2px 6px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
}

.pb-chat-unread-badge.is-bump[b-0ynq9wqmdv] {
    animation: pb-unread-bump-b-0ynq9wqmdv 0.35s ease;
}

.pb-chat-mention-badge[b-0ynq9wqmdv] {
    background: var(--pb-chat-warning);
    color: var(--mud-palette-warning-contrast, #fff);
    border-radius: 999px;
    font-size: 0.65rem;
    padding: 2px 6px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
}

@keyframes pb-unread-bump-b-0ynq9wqmdv {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}
/* /Pages/Chat/ChatComposer.razor.rz.scp.css */
.pb-chat-composer[b-eow7pliyyb] {
    border-top: 1px solid var(--pb-chat-border);
    padding-top: 8px;
    margin-top: 8px;
}

/* Wrapper for disabled buttons to maintain tooltip pointer events */
.pb-chat-disabled-wrapper[b-eow7pliyyb] {
    display: inline-flex;
    cursor: not-allowed;
}

.pb-chat-related-input[b-eow7pliyyb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--pb-chat-border);
    border-radius: 10px;
    background: var(--pb-chat-surface-subtle);
}

.pb-chat-related-input[b-eow7pliyyb]  .pb-chat-related-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--pb-chat-text-muted);
    margin-right: 4px;
}

.pb-chat-related-attached[b-eow7pliyyb] {
    display: grid;
    gap: 4px;
    margin-bottom: 8px;
}

.pb-chat-related-attached-chips[b-eow7pliyyb] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pb-chat-composer-row[b-eow7pliyyb] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: flex-end;
}

.pb-chat-composer-actions[b-eow7pliyyb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 30% smaller than MudBlazor's medium icon button (12px padding around a 1.5rem icon).
   Small screens still get the 44px touch target set further down. */
.pb-chat-composer-actions[b-eow7pliyyb]  .mud-icon-button {
    padding: 8.4px;
}

.pb-chat-composer-actions[b-eow7pliyyb]  .mud-icon-button .mud-icon-root {
    font-size: 1.05rem;
}

.pb-chat-composer-send[b-eow7pliyyb] {
    justify-content: flex-end;
}

.pb-chat-mention-input[b-eow7pliyyb] {
    position: relative;
    width: 100%;
}

.pb-chat-mention-input[b-eow7pliyyb]  .mud-input-control {
    width: 100%;
}

[b-eow7pliyyb] .pb-chat-mention-popover {
    width: 320px;
    max-height: 240px;
    overflow-y: auto;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid var(--pb-chat-border);
    background: var(--pb-chat-surface);
    box-shadow: var(--pb-chat-shadow-strong);
    display: grid;
    gap: 6px;
}

[b-eow7pliyyb] .pb-chat-mention-item {
    border-radius: 8px;
    cursor: pointer;
    padding: 6px 8px;
}

[b-eow7pliyyb] .pb-chat-mention-item.is-selected {
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-primary);
}

.pb-chat-mention-row[b-eow7pliyyb] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pb-chat-mention-avatar[b-eow7pliyyb] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-primary);
    border: 1px solid var(--pb-chat-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

[b-eow7pliyyb] .pb-chat-mention-item.is-selected .pb-chat-mention-avatar {
    background: var(--pb-chat-primary);
    color: var(--pb-chat-primary-contrast, #fff);
    border-color: var(--pb-chat-primary);
}

.pb-chat-mention-info[b-eow7pliyyb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.pb-chat-mention-name[b-eow7pliyyb] {
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-chat-mention-role[b-eow7pliyyb] {
    font-size: 0.75rem;
    color: var(--pb-chat-text-muted);
}

[b-eow7pliyyb] .pb-chat-related-popover {
    z-index: 1405 !important;
}

[b-eow7pliyyb] .pb-chat-related-popover .mud-paper {
    border: 1px solid var(--pb-chat-border);
    box-shadow: var(--pb-chat-shadow-popover);
}

@media (max-width: 900px) {
    .pb-chat-composer-row[b-eow7pliyyb] {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

}

/* Finger-sized tap targets on phones and on any touch screen (the 30% smaller desktop
   buttons were about 20x20px icons on iPads). */
@media (max-width: 600px), (any-pointer: coarse) {
    .pb-chat-composer-actions[b-eow7pliyyb]  .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}

/* "Replying to" bar shown above the input while an inline reply is being composed. */
.pb-chat-composer-reply[b-eow7pliyyb] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: 6px;
    padding: 6px 8px 6px 10px;
    border-left: 3px solid var(--pb-chat-primary);
    border-radius: 6px;
    background: var(--pb-chat-surface-subtle);
    font-size: 0.8rem;
    color: var(--pb-chat-text-muted);
}

.pb-chat-composer-reply-icon[b-eow7pliyyb] {
    color: var(--pb-chat-primary);
    flex: 0 0 auto;
}

.pb-chat-composer-reply-label[b-eow7pliyyb] {
    flex: 0 0 auto;
    white-space: nowrap;
}

.pb-chat-composer-reply-label strong[b-eow7pliyyb] {
    color: var(--pb-chat-text);
    font-weight: 600;
}

.pb-chat-composer-reply-preview[b-eow7pliyyb] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pb-chat-text-faint);
}

.pb-chat-composer-reply[b-eow7pliyyb]  .pb-chat-composer-reply-cancel {
    flex: 0 0 auto;
    margin-left: auto;
}
/* /Pages/Chat/ChatDetailsPanel.razor.rz.scp.css */
.pb-chat-detail[b-1nkw0dsg6q] {
    background: var(--pb-chat-surface);
    border: 1px solid var(--pb-chat-border);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

/* Wrapper for disabled buttons to maintain tooltip pointer events */
.pb-chat-disabled-wrapper[b-1nkw0dsg6q] {
    display: inline-flex;
    cursor: not-allowed;
}

[b-1nkw0dsg6q] .pb-chat-shell.is-detail-collapsed .pb-chat-detail,
:global(.pb-chat-shell.is-detail-collapsed .pb-chat-detail)[b-1nkw0dsg6q] {
    display: none !important;
}

.pb-chat-detail-nav[b-1nkw0dsg6q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.pb-chat-detail-nav-actions[b-1nkw0dsg6q] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.pb-chat-detail-nav-arrows[b-1nkw0dsg6q],
.pb-chat-detail-nav-icons[b-1nkw0dsg6q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pb-chat-detail[b-1nkw0dsg6q]  .pb-chat-detail-tabs {
    flex: 1;
    min-height: 0;
}

.pb-chat-detail[b-1nkw0dsg6q]  .pb-chat-detail-tabs .mud-tabs-scroll-button {
    display: none !important;
}

.pb-chat-detail[b-1nkw0dsg6q]  .pb-chat-detail-tabs .mud-tabs-tabbar {
    display: none;
}

.pb-chat-detail[b-1nkw0dsg6q]  .pb-chat-detail-tabs .mud-tabs-panels {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    text-align: left !important;
    align-items: flex-start !important;
}

.pb-chat-detail[b-1nkw0dsg6q]  .pb-chat-detail-tabs .mud-tab-panel {
    text-align: left !important;
    align-items: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
}

.pb-chat-detail[b-1nkw0dsg6q]  .pb-chat-detail-tabs .mud-tab-panel > * {
    width: 100% !important;
    text-align: left !important;
}

.pb-chat-detail[b-1nkw0dsg6q]  .pb-chat-detail-tabs .mud-tabs-tabbar-content {
    white-space: normal;
}

.pb-chat-detail[b-1nkw0dsg6q]  .pb-chat-detail-tabs .mud-tabs-tabbar-wrapper {
    width: 100%;
    flex-wrap: wrap;
}

.pb-chat-member-filters[b-1nkw0dsg6q] {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.pb-chat-add-member[b-1nkw0dsg6q] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.pb-chat-member-list[b-1nkw0dsg6q],
.pb-chat-pin-list[b-1nkw0dsg6q],
.pb-chat-search-results[b-1nkw0dsg6q] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-top: 12px;
    width: 100%;
}

/* Discord-style member item */
.pb-chat-member[b-1nkw0dsg6q] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.1s ease;
    width: 100%;
}

.pb-chat-member:hover[b-1nkw0dsg6q] {
    background: var(--pb-chat-surface-hover);
}

.pb-chat-member-profile-button[b-1nkw0dsg6q],
.pb-chat-member-profile-static[b-1nkw0dsg6q] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    flex: 1;
    width: 100%;
}

.pb-chat-member-profile-button:focus-visible[b-1nkw0dsg6q] {
    outline: 2px solid var(--pb-chat-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.pb-chat-member-profile-static[b-1nkw0dsg6q] {
    cursor: default;
}

/* Avatar wrapper with presence indicator */
.pb-chat-member-avatar-wrapper[b-1nkw0dsg6q] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.pb-chat-member-avatar[b-1nkw0dsg6q] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pb-chat-avatar-bg, var(--pb-chat-primary-soft));
    color: var(--pb-chat-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

.pb-chat-member-profile-button:hover .pb-chat-member-name[b-1nkw0dsg6q],
.pb-chat-member-profile-button:focus-visible .pb-chat-member-name[b-1nkw0dsg6q] {
    color: var(--pb-chat-primary);
    text-decoration: underline;
}

.pb-chat-member-name[b-1nkw0dsg6q] {
    font-weight: 600;
    color: var(--pb-chat-text);
    font-size: 0.9rem;
}

.pb-chat-member-info[b-1nkw0dsg6q] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.pb-chat-member-last-seen[b-1nkw0dsg6q] {
    font-size: 0.7rem;
    color: var(--pb-chat-text-faint);
}

.pb-chat-member-actions[b-1nkw0dsg6q] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0.65;
    transition: opacity 0.15s ease;
}

.pb-chat-member:hover .pb-chat-member-actions[b-1nkw0dsg6q],
.pb-chat-member:focus-within .pb-chat-member-actions[b-1nkw0dsg6q] {
    opacity: 1;
}

/* Member group headers (Discord-style role sections) */
.pb-chat-member-group[b-1nkw0dsg6q] {
    margin-top: 12px;
}

.pb-chat-member-group:first-child[b-1nkw0dsg6q] {
    margin-top: 0;
}

.pb-chat-member-group-header[b-1nkw0dsg6q] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin-bottom: 4px;
}

.pb-chat-member-role-name[b-1nkw0dsg6q] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--pb-chat-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pb-chat-member-role-count[b-1nkw0dsg6q] {
    font-size: 0.65rem;
    color: var(--pb-chat-text-faint);
}

.pb-chat-read-receipts[b-1nkw0dsg6q] {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--pb-chat-border);
}

.pb-chat-read-receipts-header[b-1nkw0dsg6q] {
    margin-bottom: 8px;
    color: var(--pb-chat-text-muted);
}

.pb-chat-read-receipts-list[b-1nkw0dsg6q] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pb-chat-read-receipt-avatar[b-1nkw0dsg6q] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
    cursor: default;
}

.pb-chat-read-receipt-more[b-1nkw0dsg6q] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--pb-chat-surface-subtle);
    color: var(--pb-chat-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 600;
    cursor: default;
}

/* Discord-style presence indicator - positioned on avatar */
.pb-chat-presence[b-1nkw0dsg6q] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--pb-chat-surface);
    background: var(--pb-chat-text-faint);
}

.pb-chat-presence.is-online[b-1nkw0dsg6q] {
    background: var(--pb-chat-success);
}

.pb-chat-presence.is-away[b-1nkw0dsg6q] {
    background: var(--pb-chat-warning);
}

.pb-chat-presence.is-busy[b-1nkw0dsg6q] {
    background: var(--pb-chat-error);
}

.pb-chat-presence.is-offline[b-1nkw0dsg6q] {
    background: var(--pb-chat-text-faint);
}

.pb-chat-moderation-block[b-1nkw0dsg6q] {
    border: 1px solid var(--pb-chat-border);
    border-radius: 10px;
    padding: 12px;
    background: var(--pb-chat-surface-subtle);
    display: grid;
    gap: 10px;
}

.pb-chat-pin-item[b-1nkw0dsg6q],
.pb-chat-search-item[b-1nkw0dsg6q] {
    border: 1px solid var(--pb-chat-border);
    border-radius: 10px;
    padding: 10px;
    background: var(--pb-chat-surface-subtle);
    text-align: left;
}

.pb-chat-pin-item[b-1nkw0dsg6q] {
    display: block;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pb-chat-pin-item:hover[b-1nkw0dsg6q],
.pb-chat-pin-item:focus-visible[b-1nkw0dsg6q] {
    border-color: var(--pb-chat-border);
    background: var(--pb-chat-surface-hover);
}

.pb-chat-search-filters[b-1nkw0dsg6q] {
    display: grid;
    gap: 8px;
    margin: 8px 0;
}

.pb-chat-search-header[b-1nkw0dsg6q] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--pb-chat-text-muted);
}

.pb-chat-search-header-left[b-1nkw0dsg6q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.pb-chat-search-header-left[b-1nkw0dsg6q]  .pb-chat-channel-lock-icon {
    color: var(--pb-chat-text-faint);
    flex-shrink: 0;
}

.pb-chat-search-body[b-1nkw0dsg6q] {
    margin-top: 6px;
    color: var(--pb-chat-text);
}

/* Search result highlighting */
.pb-chat-search-body mark.pb-chat-search-highlight[b-1nkw0dsg6q] {
    background: var(--pb-chat-warning-soft);
    color: var(--pb-chat-text);
    border-radius: 3px;
    padding: 1px 3px;
    font-weight: 600;
}

:global(mark.pb-chat-search-highlight)[b-1nkw0dsg6q] {
    background: var(--pb-chat-warning-soft);
    color: var(--pb-chat-text);
    border-radius: 3px;
    padding: 1px 3px;
    font-weight: 600;
}

/* Thread panel */
.pb-chat-thread-panel[b-1nkw0dsg6q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pb-chat-thread-root[b-1nkw0dsg6q] {
    border: 1px solid var(--pb-chat-border);
    border-radius: 10px;
    padding: 12px;
    background: var(--pb-chat-surface-subtle);
}

.pb-chat-thread-root-header[b-1nkw0dsg6q] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}

.pb-chat-thread-root-sender[b-1nkw0dsg6q] {
    font-weight: 600;
    color: var(--pb-chat-text);
}

.pb-chat-thread-sender-button[b-1nkw0dsg6q] {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.pb-chat-thread-sender-button:hover[b-1nkw0dsg6q],
.pb-chat-thread-sender-button:focus-visible[b-1nkw0dsg6q] {
    color: var(--pb-chat-primary);
    text-decoration: underline;
}

.pb-chat-thread-sender-button:focus-visible[b-1nkw0dsg6q] {
    outline: 2px solid var(--pb-chat-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.pb-chat-thread-root-time[b-1nkw0dsg6q] {
    color: var(--pb-chat-text-muted);
}

.pb-chat-thread-root-body[b-1nkw0dsg6q] {
    margin-top: 6px;
    color: var(--pb-chat-text);
    white-space: pre-wrap;
}

.pb-chat-thread-root-body[b-1nkw0dsg6q]  .pb-chat-mention,
.pb-chat-thread-reply-body[b-1nkw0dsg6q]  .pb-chat-mention {
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-primary);
    border-radius: 4px;
    padding: 0 4px;
    font-weight: 600;
}

.pb-chat-thread-root-body[b-1nkw0dsg6q]  button.pb-chat-mention,
.pb-chat-thread-reply-body[b-1nkw0dsg6q]  button.pb-chat-mention {
    border: 0;
    font: inherit;
    cursor: pointer;
}

.pb-chat-thread-root-body[b-1nkw0dsg6q]  button.pb-chat-mention:hover,
.pb-chat-thread-root-body[b-1nkw0dsg6q]  button.pb-chat-mention:focus-visible,
.pb-chat-thread-reply-body[b-1nkw0dsg6q]  button.pb-chat-mention:hover,
.pb-chat-thread-reply-body[b-1nkw0dsg6q]  button.pb-chat-mention:focus-visible {
    text-decoration: underline;
}

.pb-chat-thread-root-count[b-1nkw0dsg6q] {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--pb-chat-primary);
    font-weight: 600;
}

.pb-chat-thread-replies[b-1nkw0dsg6q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.pb-chat-thread-reply[b-1nkw0dsg6q] {
    border: 1px solid var(--pb-chat-border);
    border-radius: 8px;
    padding: 10px;
    background: var(--pb-chat-surface);
}

.pb-chat-thread-reply-header[b-1nkw0dsg6q] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
}

.pb-chat-thread-reply-avatar[b-1nkw0dsg6q] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pb-chat-primary-soft);
    border: 1px solid var(--pb-chat-border);
    color: var(--pb-chat-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
}

.pb-chat-thread-reply-sender[b-1nkw0dsg6q] {
    font-weight: 600;
    color: var(--pb-chat-text);
}

.pb-chat-thread-reply-time[b-1nkw0dsg6q] {
    color: var(--pb-chat-text-muted);
}

.pb-chat-thread-reply-body[b-1nkw0dsg6q] {
    margin-top: 4px;
    color: var(--pb-chat-text);
    font-size: 0.85rem;
    white-space: pre-wrap;
}

.pb-chat-thread-read-status[b-1nkw0dsg6q] {
    display: flex;
    align-items: center;
    gap: 3px;
    width: fit-content;
    margin-top: 5px;
    margin-left: auto;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--pb-chat-text-faint);
}

.pb-chat-thread-read-status.is-read[b-1nkw0dsg6q] {
    color: var(--pb-chat-primary);
}

.pb-chat-thread-read-status[b-1nkw0dsg6q]  .pb-chat-thread-read-status-icon {
    font-size: 0.85rem;
}

.pb-chat-thread-composer[b-1nkw0dsg6q] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pb-chat-thread-composer[b-1nkw0dsg6q]  .mud-input-outlined {
    flex: 1;
}

@media (max-width: 1200px) {
    .pb-chat-detail[b-1nkw0dsg6q] {
        grid-column: 1 / -1;
        height: auto;
        max-height: none;
    }

    /* Ensure details panel stays hidden when collapsed on smaller screens */
    :global(.pb-chat-shell.is-detail-collapsed) .pb-chat-detail[b-1nkw0dsg6q] {
        display: none !important;
    }

    .pb-chat-detail[b-1nkw0dsg6q]  .pb-chat-detail-tabs {
        flex: 0 0 auto;
        min-height: auto;
    }

    .pb-chat-detail[b-1nkw0dsg6q]  .pb-chat-detail-tabs .mud-tabs-panels {
        overflow-y: visible;
        height: auto;
        flex: 0 0 auto;
    }

    .pb-chat-detail[b-1nkw0dsg6q]  .pb-chat-detail-tabs .mud-tab-panel {
        height: auto;
    }
}

.pb-chat-loading-state[b-1nkw0dsg6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
}
/* /Pages/Chat/ChatHeader.razor.rz.scp.css */
.pb-chat-main-header[b-qi5qju2rxt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pb-chat-border);
}

.pb-chat-main-actions-left[b-qi5qju2rxt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.pb-chat-channel-title-line[b-qi5qju2rxt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pb-chat-text);
}

.pb-chat-channel-title-button[b-qi5qju2rxt] {
    border: 0;
    background: transparent;
    color: var(--pb-chat-text);
    padding: 0;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.pb-chat-channel-title-button:hover[b-qi5qju2rxt],
.pb-chat-channel-title-button:focus-visible[b-qi5qju2rxt] {
    color: var(--pb-chat-primary);
    text-decoration: underline;
}

.pb-chat-channel-title-button:focus-visible[b-qi5qju2rxt] {
    outline: 2px solid var(--pb-chat-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Take the free space so the title sits beside the sidebar toggle. With three children,
   the header's space-between would otherwise push the title toward the middle. */
.pb-chat-channel-header[b-qi5qju2rxt] {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 2px;
}

/* subtitle1's default 1.75 line height leaves a tall empty band around the one-line title. */
.pb-chat-channel-title-line[b-qi5qju2rxt]  .mud-typography {
    line-height: 1.3;
}

.pb-chat-channel-header[b-qi5qju2rxt]  .pb-chat-channel-lock-icon {
    color: var(--pb-chat-text-faint);
    flex-shrink: 0;
}

.pb-chat-channel-topic-row[b-qi5qju2rxt] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pb-chat-channel-topic-text[b-qi5qju2rxt] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400px;
}

.pb-chat-channel-topic-edit[b-qi5qju2rxt] {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.pb-chat-channel-topic-row:hover .pb-chat-channel-topic-edit[b-qi5qju2rxt] {
    opacity: 1;
}

[b-qi5qju2rxt] .pb-chat-channel-topic-edit {
    padding: 2px;
    width: 20px;
    height: 20px;
}

[b-qi5qju2rxt] .pb-chat-channel-topic-edit .mud-icon-root {
    font-size: 14px;
}

.pb-chat-channel-add-topic[b-qi5qju2rxt] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px dashed var(--pb-chat-border);
    border-radius: 4px;
    background: transparent;
    color: var(--pb-chat-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pb-chat-channel-add-topic:hover[b-qi5qju2rxt] {
    background: var(--pb-chat-surface-hover);
    border-color: var(--pb-chat-text-muted);
    color: var(--pb-chat-text);
}

.pb-chat-channel-add-topic[b-qi5qju2rxt]  .mud-icon-root {
    font-size: 14px;
}

.pb-chat-main-actions[b-qi5qju2rxt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Ensure touch-friendly tap targets on small screens */
@media (max-width: 600px) {
    .pb-chat-main-actions[b-qi5qju2rxt]  .mud-icon-button,
    .pb-chat-main-actions-left[b-qi5qju2rxt]  .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}
/* /Pages/Chat/ChatMessagesPane.razor.rz.scp.css */
.pb-chat-message-pane[b-y1srs011uv] {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* New Messages Banner */
.pb-chat-new-messages-banner[b-y1srs011uv] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: var(--pb-chat-info);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 0 0 8px 8px;
    margin: 0 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: pb-banner-slide-down-b-y1srs011uv 0.2s ease-out;
}

@keyframes pb-banner-slide-down-b-y1srs011uv {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pb-chat-new-messages-text[b-y1srs011uv] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pb-chat-new-messages-actions[b-y1srs011uv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pb-chat-new-messages-jump[b-y1srs011uv],
.pb-chat-new-messages-mark[b-y1srs011uv] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pb-chat-new-messages-jump:hover[b-y1srs011uv],
.pb-chat-new-messages-mark:hover[b-y1srs011uv] {
    background: rgba(255, 255, 255, 0.35);
}

.pb-chat-new-messages-jump:focus-visible[b-y1srs011uv],
.pb-chat-new-messages-mark:focus-visible[b-y1srs011uv] {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .pb-chat-new-messages-banner[b-y1srs011uv] {
        animation: none;
    }
}

.pb-chat-message-list[b-y1srs011uv] {
    /* The sticky day separator cancels this padding; see .pb-chat-day-separator. */
    --pb-chat-message-list-padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    padding: var(--pb-chat-message-list-padding-top) 6px 8px 4px;
    flex: 1;
    min-height: 0;
    max-height: 100%;
}

.pb-chat-empty[b-y1srs011uv] {
    border: 1px dashed var(--pb-chat-border);
    border-radius: 16px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--pb-chat-text-muted);
    background: var(--pb-chat-surface-subtle);
    text-align: center;
}

.pb-chat-empty-icon[b-y1srs011uv] {
    font-size: 2.2rem;
    color: var(--pb-chat-text-faint);
}

.pb-chat-scroll-fab[b-y1srs011uv] {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    animation: pb-fab-pop-in-b-y1srs011uv 0.2s ease-out;
}

/* 30% smaller than MudBlazor's small fab (40px with a 1.5rem icon). MudFab renders the button,
   so a rule scoped to this component needs ::deep to reach it. */
.pb-chat-message-pane[b-y1srs011uv]  .pb-chat-scroll-fab {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
}

.pb-chat-message-pane[b-y1srs011uv]  .pb-chat-scroll-fab .mud-icon-root {
    font-size: 1.05rem;
}

@keyframes pb-fab-pop-in-b-y1srs011uv {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Sticky offsets are measured inside the scroller's padding, so top: 0 would pin the
   separator below the list's top padding and leave a strip where scrolled messages show
   through. A negative top equal to that padding pins it flush with the scroller's edge. */
.pb-chat-day-separator[b-y1srs011uv] {
    position: sticky;
    top: calc(-1 * var(--pb-chat-message-list-padding-top));
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    background: var(--pb-chat-surface);
}

.pb-chat-day-separator-line[b-y1srs011uv] {
    flex: 1;
    height: 1px;
    background: var(--pb-chat-border);
    border-radius: 999px;
}

.pb-chat-day-separator-label[b-y1srs011uv] {
    font-size: 0.72rem;
    color: var(--pb-chat-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* New messages banner - Discord-style */
.pb-chat-new-messages-banner[b-y1srs011uv] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: var(--pb-chat-info);
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 0 0 8px 8px;
    margin: -8px -4px 12px -4px;
    animation: pb-banner-slide-down-b-y1srs011uv 0.2s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pb-chat-new-messages-banner button[b-y1srs011uv] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.1s ease;
}

.pb-chat-new-messages-banner button:hover[b-y1srs011uv] {
    background: rgba(255, 255, 255, 0.3);
}

@keyframes pb-banner-slide-down-b-y1srs011uv {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Unread marker - enhanced visibility with glow effect */
.pb-chat-unread-marker[b-y1srs011uv] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--pb-chat-error);
    font-size: 0.75rem;
    margin: 20px 0;
    padding: 0 4px;
    animation: pb-unread-marker-enter-b-y1srs011uv 0.3s ease-out;
}

@keyframes pb-unread-marker-enter-b-y1srs011uv {
    from {
        opacity: 0;
        transform: scaleX(0.8);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

.pb-chat-unread-marker-line[b-y1srs011uv] {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--pb-chat-error) 10%, var(--pb-chat-error) 90%, transparent 100%);
    border-radius: 999px;
    position: relative;
}

.pb-chat-unread-marker-line[b-y1srs011uv]::after {
    content: '';
    position: absolute;
    inset: -2px 0;
    background: linear-gradient(90deg, transparent 0%, var(--pb-chat-error) 10%, var(--pb-chat-error) 90%, transparent 100%);
    border-radius: 999px;
    opacity: 0.3;
    filter: blur(4px);
}

.pb-chat-unread-marker-label[b-y1srs011uv] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    background: var(--pb-chat-error);
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.7rem;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
    animation: pb-unread-badge-pulse-b-y1srs011uv 2s ease-in-out infinite;
}

@keyframes pb-unread-badge-pulse-b-y1srs011uv {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
    }
    50% {
        box-shadow: 0 2px 16px rgba(239, 68, 68, 0.55);
    }
}

.pb-chat-unread-marker-actions[b-y1srs011uv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pb-chat-unread-marker-actions button[b-y1srs011uv] {
    background: transparent;
    border: 1px solid var(--pb-chat-error);
    color: var(--pb-chat-error);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pb-chat-unread-marker-actions button:hover[b-y1srs011uv] {
    background: var(--pb-chat-error);
    color: white;
}

.pb-chat-unread-marker-actions button:focus-visible[b-y1srs011uv] {
    outline: 2px solid var(--pb-chat-error);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .pb-chat-unread-marker[b-y1srs011uv] {
        animation: none;
    }
    .pb-chat-unread-marker-label[b-y1srs011uv] {
        animation: none;
    }
}

.pb-chat-message-anchor[b-y1srs011uv] {
    height: 1px;
}

.pb-chat-message[b-y1srs011uv] {
    border: none;
    border-left: 2px solid transparent;
    border-radius: 4px;
    padding: 6px 12px 6px 10px;
    margin: 0 4px;
    background: transparent;
    position: relative;
    transition: background 0.1s ease, border-color 0.1s ease;
}

/* Only messages that arrive live animate in. History loads render a whole page at once, and
   animating fifty items together caused visible jank on phones. */
.pb-chat-message.is-live[b-y1srs011uv] {
    animation: pb-message-fade-in-b-y1srs011uv 0.15s ease-out;
}

.pb-chat-message:hover[b-y1srs011uv] {
    background: var(--pb-chat-surface-hover);
    border-left-color: var(--pb-chat-primary);
}

@keyframes pb-message-fade-in-b-y1srs011uv {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Grouped messages - tighter spacing, no duplicate headers */
.pb-chat-message.is-grouped[b-y1srs011uv] {
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 0;
}

.pb-chat-message.is-grouped .pb-chat-message-header[b-y1srs011uv] {
    display: none;
}

/* Show timestamp on hover for grouped messages */
.pb-chat-message.is-grouped:hover .pb-chat-message-header[b-y1srs011uv] {
    display: flex;
    justify-content: flex-end;
}

/* First message in a group gets more padding */
.pb-chat-message:not(.is-grouped)[b-y1srs011uv] {
    padding-top: 10px;
    margin-top: 8px;
}

.pb-chat-message.is-me[b-y1srs011uv] {
    background: var(--pb-chat-info-soft);
    border-left-color: var(--pb-chat-info);
}

.pb-chat-message.is-me:hover[b-y1srs011uv] {
    background: var(--pb-chat-info-soft);
    border-left-color: var(--pb-chat-info);
}

/* Pinned messages keep a permanent amber tint, border, and badge, whether or not the message
   shows its header. The badge sits above the body so grouped messages show it too. */
.pb-chat-message.is-pinned[b-y1srs011uv],
.pb-chat-message.is-pinned:hover[b-y1srs011uv],
.pb-chat-message.is-me.is-pinned[b-y1srs011uv],
.pb-chat-message.is-me.is-pinned:hover[b-y1srs011uv] {
    background: var(--pb-chat-warning-soft);
    border-left-color: var(--pb-chat-warning);
}

.pb-chat-message-pinned-badge[b-y1srs011uv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pb-chat-warning);
}

.pb-chat-message-pinned-badge[b-y1srs011uv]  .mud-icon-root {
    font-size: 0.9rem;
}

/* Inline reply reference: who and what this message answers. Clicking jumps to the original. */
.pb-chat-message-reply-ref[b-y1srs011uv] {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    margin-top: 4px;
    padding: 2px 8px 2px 6px;
    border: none;
    border-left: 2px solid var(--pb-chat-border);
    border-radius: 4px;
    background: transparent;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--pb-chat-text-muted);
    text-align: left;
    cursor: pointer;
}

.pb-chat-message-reply-ref:hover[b-y1srs011uv] {
    background: var(--pb-chat-surface-hover);
    border-left-color: var(--pb-chat-primary);
}

.pb-chat-message-reply-ref:focus-visible[b-y1srs011uv] {
    outline: 2px solid var(--pb-chat-primary);
    outline-offset: 1px;
}

.pb-chat-message-reply-ref[b-y1srs011uv]  .pb-chat-message-reply-ref-icon {
    flex: 0 0 auto;
    font-size: 0.95rem;
    color: var(--pb-chat-text-faint);
    transform: scaleX(-1);
}

.pb-chat-message-reply-ref-author[b-y1srs011uv] {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--pb-chat-text);
}

.pb-chat-message-reply-ref-text[b-y1srs011uv] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-chat-message-reply-ref.is-deleted .pb-chat-message-reply-ref-text[b-y1srs011uv] {
    font-style: italic;
}

/* Brief highlight on the message a reply reference jumped to. */
.pb-chat-message.is-jump-target[b-y1srs011uv] {
    animation: pb-jump-target-flash-b-y1srs011uv 1.6s ease-out;
}

@keyframes pb-jump-target-flash-b-y1srs011uv {
    0%,
    40% {
        background: var(--pb-chat-primary-soft);
        border-left-color: var(--pb-chat-primary);
    }
    100% {
        background: transparent;
    }
}

:global(.pb-chat-page.is-compact) .pb-chat-message-list[b-y1srs011uv] {
    gap: 1px;
}

:global(.pb-chat-page.is-compact) .pb-chat-message[b-y1srs011uv] {
    padding: 3px 10px 3px 8px;
}

:global(.pb-chat-page.is-compact) .pb-chat-message:not(.is-grouped)[b-y1srs011uv] {
    padding-top: 6px;
    margin-top: 4px;
}

:global(.pb-chat-page.is-compact) .pb-chat-message-meta[b-y1srs011uv] {
    font-size: 0.72rem;
}

:global(.pb-chat-page.is-compact) .pb-chat-message-avatar[b-y1srs011uv] {
    width: 22px;
    height: 22px;
    font-size: 0.55rem;
}

:global(.pb-chat-page.is-compact) .pb-chat-message-body[b-y1srs011uv] {
    margin-top: 4px;
}

:global(.pb-chat-page.is-compact) .pb-chat-related[b-y1srs011uv],
:global(.pb-chat-page.is-compact) .pb-chat-reactions[b-y1srs011uv] {
    margin-top: 4px;
}

:global(.pb-chat-page.is-compact) .pb-chat-message-actions[b-y1srs011uv] {
    top: 6px;
    right: 4px;
}

.pb-chat-message-header[b-y1srs011uv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Discord-style floating action bar */
.pb-chat-message-actions[b-y1srs011uv] {
    position: absolute;
    top: -12px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    border-radius: 6px;
    background: var(--pb-chat-surface);
    border: 1px solid var(--pb-chat-border);
    box-shadow: var(--pb-chat-shadow-strong);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease, top 0.1s ease;
}

/* Wrapper for disabled buttons to maintain tooltip pointer events */
.pb-chat-action-wrapper[b-y1srs011uv] {
    display: inline-flex;
    cursor: not-allowed;
}

/* Lightweight hover tooltip for per-message controls. MudTooltip registers a popover with the
   provider and five server-side pointer handlers per instance; with 14 per message that meant
   hundreds of idle popovers and a circuit round-trip on every hover across the action bar. */
.pb-chat-tip[b-y1srs011uv] {
    position: relative;
    display: inline-flex;
}

.pb-chat-tip[b-y1srs011uv]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%) translateY(2px);
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--pb-chat-text);
    color: var(--pb-chat-surface);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.1s ease 0.3s, transform 0.1s ease 0.3s;
}

.pb-chat-tip:hover[b-y1srs011uv]::after,
.pb-chat-tip:focus-within[b-y1srs011uv]::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (hover: none) {
    .pb-chat-tip[b-y1srs011uv]::after {
        display: none;
    }
}

/* Quick reaction buttons */
.pb-chat-quick-reactions[b-y1srs011uv] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-right: 4px;
    border-right: 1px solid var(--pb-chat-border);
    margin-right: 4px;
}

.pb-chat-quick-reaction[b-y1srs011uv] {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s ease, transform 0.1s ease;
}

.pb-chat-quick-reaction:hover[b-y1srs011uv] {
    background: var(--pb-chat-surface-hover);
    transform: scale(1.15);
}

.pb-chat-quick-reaction.is-active[b-y1srs011uv] {
    background: var(--pb-chat-primary-soft);
}

.pb-chat-quick-reaction:focus-visible[b-y1srs011uv] {
    outline: 2px solid var(--pb-chat-primary);
    outline-offset: 1px;
}

.pb-chat-more-reactions-menu[b-y1srs011uv]  .mud-icon-button {
    width: 26px;
    height: 26px;
    padding: 2px;
}

/* Emoji picker wrapper and popover */
.pb-chat-emoji-picker-wrapper[b-y1srs011uv] {
    position: relative;
    display: inline-flex;
}

.pb-chat-emoji-picker-trigger[b-y1srs011uv] {
    width: 26px;
    height: 26px;
}

[b-y1srs011uv] .pb-chat-emoji-popover {
    z-index: 1300;
}

.pb-chat-emoji-picker-backdrop[b-y1srs011uv] {
    position: fixed;
    inset: 0;
    z-index: 1299;
}

.pb-chat-message:hover .pb-chat-message-actions[b-y1srs011uv],
.pb-chat-message:has(:focus-visible) .pb-chat-message-actions[b-y1srs011uv] {
    opacity: 1;
    pointer-events: auto;
    top: -16px;
}

:global(.pb-chat-page.is-compact) .pb-chat-message:hover .pb-chat-message-actions[b-y1srs011uv],
:global(.pb-chat-page.is-compact) .pb-chat-message:has(:focus-visible) .pb-chat-message-actions[b-y1srs011uv] {
    top: 2px;
}

/* Hide actions when hovering over related entity chips, unless message is entity-only */
.pb-chat-message:not(.is-entity-only) .pb-chat-related:hover ~ .pb-chat-message-actions[b-y1srs011uv],
.pb-chat-message:not(.is-entity-only):has(.pb-chat-related:hover) .pb-chat-message-actions[b-y1srs011uv] {
    opacity: 0;
    pointer-events: none;
}

/* For entity-only messages, always show actions on message hover */
.pb-chat-message.is-entity-only:hover .pb-chat-message-actions[b-y1srs011uv] {
    opacity: 1;
    pointer-events: auto;
}

.pb-chat-message-meta[b-y1srs011uv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--pb-chat-text-muted);
}

/* Avatar wrapper for presence indicator */
.pb-chat-avatar-wrapper[b-y1srs011uv] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.pb-chat-message-avatar[b-y1srs011uv] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pb-chat-avatar-bg, var(--pb-chat-primary-soft));
    color: var(--pb-chat-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Avatar presence indicator dot */
.pb-chat-avatar-presence[b-y1srs011uv] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--pb-chat-surface, #fff);
    background: var(--pb-chat-text-faint);
}

.pb-chat-avatar-presence.is-online[b-y1srs011uv] {
    background: var(--pb-chat-success);
}

.pb-chat-avatar-presence.is-away[b-y1srs011uv] {
    background: var(--pb-chat-warning);
}

.pb-chat-avatar-presence.is-busy[b-y1srs011uv] {
    background: var(--pb-chat-error);
}

.pb-chat-avatar-presence.is-offline[b-y1srs011uv] {
    background: var(--pb-chat-text-faint);
}

.pb-chat-message-sender[b-y1srs011uv] {
    font-weight: 600;
    color: var(--pb-chat-text);
}

.pb-chat-message-sender-button[b-y1srs011uv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.pb-chat-message-sender-button:hover .pb-chat-message-sender[b-y1srs011uv],
.pb-chat-message-sender-button:focus-visible .pb-chat-message-sender[b-y1srs011uv] {
    color: var(--pb-chat-primary);
    text-decoration: underline;
}

.pb-chat-message-sender-button:focus-visible[b-y1srs011uv] {
    outline: 2px solid var(--pb-chat-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.pb-chat-message-body[b-y1srs011uv] {
    margin-top: 6px;
    color: var(--pb-chat-text);
    white-space: pre-wrap;
}

.pb-chat-message-body[b-y1srs011uv]  .pb-chat-mention {
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-primary);
    border-radius: 4px;
    padding: 0 4px;
    font-weight: 600;
}

.pb-chat-message-body[b-y1srs011uv]  button.pb-chat-mention {
    border: 0;
    font: inherit;
    cursor: pointer;
}

.pb-chat-message-body[b-y1srs011uv]  button.pb-chat-mention:hover,
.pb-chat-message-body[b-y1srs011uv]  button.pb-chat-mention:focus-visible {
    text-decoration: underline;
}

.pb-chat-message-body.is-mention[b-y1srs011uv] {
    background: var(--pb-chat-warning-soft);
    border-radius: 8px;
    padding: 6px 8px;
}

/* Markdown Styling */
.pb-chat-message-body strong[b-y1srs011uv],
.pb-chat-message-body b[b-y1srs011uv] {
    font-weight: 700;
}

.pb-chat-message-body em[b-y1srs011uv],
.pb-chat-message-body i[b-y1srs011uv] {
    font-style: italic;
}

.pb-chat-message-body del[b-y1srs011uv],
.pb-chat-message-body s[b-y1srs011uv] {
    text-decoration: line-through;
    opacity: 0.75;
}

.pb-chat-message-body code[b-y1srs011uv] {
    background: var(--pb-chat-surface-subtle);
    border: 1px solid var(--pb-chat-border);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85em;
    color: var(--pb-chat-text);
}

.pb-chat-message-body pre[b-y1srs011uv] {
    background: var(--pb-chat-surface-subtle);
    border: 1px solid var(--pb-chat-border);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 8px 0;
    overflow-x: auto;
}

.pb-chat-message-body pre code[b-y1srs011uv] {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.85rem;
}

.pb-chat-message-body a[b-y1srs011uv] {
    color: var(--pb-chat-primary);
    text-decoration: none;
}

.pb-chat-message-body a:hover[b-y1srs011uv] {
    text-decoration: underline;
}

.pb-chat-message-body blockquote[b-y1srs011uv] {
    border-left: 3px solid var(--pb-chat-primary);
    margin: 8px 0;
    padding: 4px 0 4px 12px;
    color: var(--pb-chat-text-muted);
    font-style: italic;
}

.pb-chat-message-body ul[b-y1srs011uv],
.pb-chat-message-body ol[b-y1srs011uv] {
    margin: 6px 0;
    padding-left: 24px;
}

.pb-chat-message-body li[b-y1srs011uv] {
    margin: 3px 0;
}

.pb-chat-related[b-y1srs011uv] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.pb-chat-related-chip[b-y1srs011uv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--pb-chat-border);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.7rem;
    background: var(--pb-chat-surface);
    color: var(--pb-chat-text);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pb-chat-related-chip[b-y1srs011uv]  .pb-chat-related-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--pb-chat-text-muted);
    margin-right: 4px;
}

.pb-chat-related-chip:hover[b-y1srs011uv],
.pb-chat-related-chip:focus-visible[b-y1srs011uv] {
    background: var(--pb-chat-surface-subtle);
    border-color: var(--pb-chat-border);
}

.pb-chat-related-chip:focus-visible[b-y1srs011uv] {
    outline: 2px solid var(--pb-chat-primary);
    outline-offset: 2px;
}

.pb-chat-reactions[b-y1srs011uv] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.pb-chat-reaction-chip[b-y1srs011uv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    border: 1px solid var(--pb-chat-border);
    background: var(--pb-chat-surface);
    padding: 2px 8px;
    font-size: 0.75rem;
    color: var(--pb-chat-text);
    cursor: pointer;
}

.pb-chat-reaction-chip.is-mine[b-y1srs011uv] {
    border-color: var(--pb-chat-primary);
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-primary);
}

.pb-chat-reaction-emoji[b-y1srs011uv] {
    font-size: 0.9rem;
}

.pb-chat-reaction-count[b-y1srs011uv] {
    font-weight: 600;
}

.pb-chat-message-edited[b-y1srs011uv] {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--pb-chat-text-faint);
    background: none;
    border: none;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pb-chat-message-edited:hover[b-y1srs011uv] {
    background: var(--pb-chat-surface-hover);
    color: var(--pb-chat-text-muted);
}

.pb-chat-message-read-status[b-y1srs011uv] {
    display: flex;
    align-items: center;
    gap: 3px;
    width: fit-content;
    margin-top: 4px;
    margin-left: auto;
    font-size: 0.72rem;
    line-height: 1;
    color: var(--pb-chat-text-faint);
}

.pb-chat-message-read-status.is-read[b-y1srs011uv] {
    color: var(--pb-chat-primary);
}

.pb-chat-message-read-status[b-y1srs011uv]  .pb-chat-message-read-status-icon {
    font-size: 0.9rem;
}

/* Thread summary */
.pb-chat-thread-summary[b-y1srs011uv] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--pb-chat-surface);
    border: 1px solid var(--pb-chat-border);
    font-size: 0.75rem;
    color: var(--pb-chat-primary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.pb-chat-thread-summary:hover[b-y1srs011uv],
.pb-chat-thread-summary:focus-visible[b-y1srs011uv] {
    background: var(--pb-chat-primary-soft);
    border-color: var(--pb-chat-primary);
}

.pb-chat-thread-summary:focus-visible[b-y1srs011uv] {
    outline: 2px solid var(--pb-chat-primary);
    outline-offset: 2px;
}

.pb-chat-thread-summary[b-y1srs011uv]  .pb-chat-thread-icon {
    color: var(--pb-chat-primary);
    font-size: 1rem;
}

.pb-chat-thread-count[b-y1srs011uv] {
    font-weight: 600;
}

.pb-chat-thread-separator[b-y1srs011uv] {
    color: var(--pb-chat-text-muted);
}

.pb-chat-thread-time[b-y1srs011uv] {
    color: var(--pb-chat-text-muted);
}

.pb-chat-thread-preview[b-y1srs011uv] {
    color: var(--pb-chat-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Enhanced typing indicator with avatars */
.pb-chat-typing[b-y1srs011uv] {
    font-size: 0.8rem;
    color: var(--pb-chat-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--pb-chat-surface-subtle);
    border-radius: 8px;
    margin-top: 8px;
}

.pb-chat-typing-avatars[b-y1srs011uv] {
    display: flex;
    align-items: center;
}

.pb-chat-typing-avatar[b-y1srs011uv] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pb-chat-avatar-bg, var(--pb-chat-primary-soft));
    color: var(--pb-chat-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
    margin-left: -8px;
    border: 2px solid var(--pb-chat-surface-subtle);
}

.pb-chat-typing-avatar:first-child[b-y1srs011uv] {
    margin-left: 0;
}

.pb-chat-typing-avatar.is-more[b-y1srs011uv] {
    background: var(--pb-chat-surface-hover);
    color: var(--pb-chat-text-muted);
    font-size: 0.5rem;
}

.pb-chat-typing-text[b-y1srs011uv] {
    flex: 1;
}

.pb-chat-typing-dots[b-y1srs011uv] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.pb-chat-typing-dots span[b-y1srs011uv] {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--pb-chat-text-muted);
    display: inline-block;
    animation: pb-typing-bounce-b-y1srs011uv 1.2s infinite ease-in-out;
}

.pb-chat-typing-dots span:nth-child(2)[b-y1srs011uv] {
    animation-delay: 0.15s;
}

.pb-chat-typing-dots span:nth-child(3)[b-y1srs011uv] {
    animation-delay: 0.3s;
}

@keyframes pb-typing-bounce-b-y1srs011uv {
    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.6;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Touch devices: there is no hover, so the floating action bar stays hidden. Showing it on
   every message overlapped neighbouring messages (each bar is absolutely positioned above its
   message and wider than short messages). Message actions are reached through the context menu,
   which site.js opens on long-press (visionChatLongPress); keyboard focus still reveals the bar.
   Text selection is off so the hold does not also start the native selection callout. */
@media (hover: none) {
    .pb-chat-message[b-y1srs011uv] {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        touch-action: pan-y;
        transition: transform 0.15s ease, background 0.1s ease, border-color 0.1s ease;
    }

    /* Swipe-to-reply feedback driven by visionChatSwipeReply in site.js. */
    .pb-chat-message.is-swiping[b-y1srs011uv] {
        transition: none;
    }

    .pb-chat-message.is-swipe-armed[b-y1srs011uv] {
        background: var(--pb-chat-primary-soft);
        border-left-color: var(--pb-chat-primary);
    }

    .pb-chat-message-actions[b-y1srs011uv] {
        opacity: 0;
        pointer-events: none;
    }

    .pb-chat-message:has(:focus-visible) .pb-chat-message-actions[b-y1srs011uv] {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pb-chat-message[b-y1srs011uv] {
        animation: none;
    }

    .pb-chat-message.is-jump-target[b-y1srs011uv] {
        animation: none;
    }

    .pb-chat-scroll-fab[b-y1srs011uv] {
        animation: none;
    }

    .pb-chat-typing-dots span[b-y1srs011uv] {
        animation: none;
        opacity: 1;
        transform: scale(1);
    }

    .pb-chat-message-actions[b-y1srs011uv] {
        transition: none;
    }

    .pb-chat-related-chip[b-y1srs011uv] {
        transition: none;
    }

    .pb-chat-reaction-chip[b-y1srs011uv] {
        transition: none;
    }
}
/* /Pages/Chat/ChatSidebar.razor.rz.scp.css */
.pb-chat-sidebar[b-y2wokb3h51] {
    background: var(--pb-chat-surface);
    border: 1px solid var(--pb-chat-border);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

[b-y2wokb3h51] .pb-chat-shell.is-sidebar-collapsed .pb-chat-sidebar,
:global(.pb-chat-shell.is-sidebar-collapsed .pb-chat-sidebar)[b-y2wokb3h51] {
    display: none !important;
}

.pb-chat-sidebar-header[b-y2wokb3h51] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pb-chat-border);
}

.pb-chat-sidebar-header[b-y2wokb3h51]  .pb-btn {
    font-size: 0.75rem;
}

.pb-chat-sidebar-actions[b-y2wokb3h51] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pb-chat-channel-filters[b-y2wokb3h51] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

/* In the 240px tablet sidebar the upper-case labels with 12px padding left "MENTIONS"
   touching its border; sentence case and 8px padding keep all three filters readable. */
.pb-chat-channel-filters[b-y2wokb3h51]  .pb-chat-filter-button {
    font-size: 0.75rem;
    padding: 5px 8px;
    text-transform: none;
    white-space: nowrap;
    min-height: auto;
    border-radius: 6px;
    border: 1px solid var(--pb-chat-border);
    background: var(--pb-chat-surface);
    color: var(--pb-chat-text-muted);
    font-weight: 500;
    transition: all 0.15s ease;
    box-shadow: none;
}

.pb-chat-channel-filters[b-y2wokb3h51]  .pb-chat-filter-button:hover {
    background: var(--pb-chat-surface-subtle);
    border-color: var(--pb-chat-border);
}

.pb-chat-channel-filters[b-y2wokb3h51]  .pb-chat-filter-button.is-active {
    background: var(--pb-chat-primary);
    border-color: var(--pb-chat-primary);
    color: var(--pb-chat-primary-contrast);
}

.pb-chat-channel-filters[b-y2wokb3h51]  .pb-chat-filter-button.is-active:hover {
    background: var(--pb-chat-primary);
    border-color: var(--pb-chat-primary);
}

.pb-chat-filter-count[b-y2wokb3h51] {
    margin-left: 4px;
    background: var(--pb-chat-surface-hover);
    color: var(--pb-chat-text);
    border-radius: 999px;
    font-size: 0.6rem;
    padding: 1px 5px;
    font-weight: 600;
}

.pb-chat-channel-filters[b-y2wokb3h51]  .pb-chat-filter-button.is-active .pb-chat-filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: var(--pb-chat-primary-contrast);
}

.pb-chat-channel-toolbar[b-y2wokb3h51] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.pb-chat-channel-toolbar[b-y2wokb3h51]  .mud-input-control {
    flex: 1;
}

.pb-chat-direct-message[b-y2wokb3h51] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

[b-y2wokb3h51] .pb-chat-direct-message-popover {
    width: 320px;
    max-width: calc(100vw - 32px);
}

[b-y2wokb3h51] .pb-chat-direct-message-card {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pb-chat-channel-list[b-y2wokb3h51] {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    gap: 8px;
    margin-top: 12px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.pb-chat-channel-section-title[b-y2wokb3h51] {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pb-chat-text-muted);
    margin-top: 4px;
}

.pb-chat-channel-toggle[b-y2wokb3h51] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pb-chat-text-muted);
    font-size: 0.75rem;
    border: none;
    background: transparent;
    padding: 2px 0;
    cursor: pointer;
}

.pb-chat-channel-toggle:hover[b-y2wokb3h51] {
    color: var(--pb-chat-text);
}

.pb-chat-channel-group-header[b-y2wokb3h51] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 4px 4px 4px 2px;
    margin-top: 4px;
    color: var(--pb-chat-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    /* Tablet-friendly touch target for expand/collapse. */
    min-height: 32px;
}

.pb-chat-channel-group-header:hover[b-y2wokb3h51] {
    color: var(--pb-chat-text);
}

.pb-chat-channel-group-title[b-y2wokb3h51] {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-chat-channel-group-count[b-y2wokb3h51] {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--pb-chat-text-muted);
    background: rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    padding: 0 7px;
    line-height: 1.4;
    font-size: 0.68rem;
}
/* /Pages/Config/Address/Add.razor.rz.scp.css */
.address-form-container[b-tmphuwowoi] {
    max-width: 720px;
    margin: 0 auto;
}

.state-dropdown[b-tmphuwowoi] {
    max-width: 320px;
}
/* /Pages/Config/Cart/CartSettings.razor.rz.scp.css */
.cart-settings[b-5ubsc2gm4u] {
    max-width: 900px;
}

/* Label/value pairs on one line each, instead of bootstrap rows whose labels wrapped. */
.cart-settings-stats[b-5ubsc2gm4u] {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 24px;
    row-gap: 8px;
    margin: 0;
}

.cart-settings-stats dt[b-5ubsc2gm4u] {
    color: var(--mud-palette-text-secondary);
}

.cart-settings-stats dd[b-5ubsc2gm4u] {
    margin: 0;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.cart-settings-sync[b-5ubsc2gm4u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 20px;
}

.cart-settings-sync[b-5ubsc2gm4u]  .mud-typography {
    flex: 1 1 280px;
}
/* /Pages/Config/CheckLists/Create/AddEditCheckList.razor.rz.scp.css */
.checklist-template-meta[b-nr7bgq39by],
.checklist-builder-panel[b-nr7bgq39by],
.checklist-items-panel[b-nr7bgq39by] {
    height: 100%;
}

.pb-muted-text[b-nr7bgq39by] {
    opacity: 0.8;
}

.checklist-template-item[b-nr7bgq39by] {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.checklist-template-item:hover[b-nr7bgq39by] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px rgba(25, 118, 210, 0.25);
}

.checklist-template-item-grab[b-nr7bgq39by] {
    min-width: 24px;
    cursor: grab;
    color: var(--mud-palette-text-secondary);
}

.checklist-template-item-grab .mud-icon[b-nr7bgq39by] {
    opacity: 0.8;
}

.checklist-inline-preview[b-nr7bgq39by] {
    max-height: 520px;
    overflow: auto;
}

@media (max-width: 960px) {
    .checklist-inline-preview[b-nr7bgq39by] {
        max-height: none;
    }
}
/* /Pages/Config/CheckLists/UpdateFilledData.razor.rz.scp.css */
/* Sticky like the fill page's action bar: the page scroller (.mud-container) already ends above My Bar. */
.checklist-update-actions[b-umqh48y1fy] {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.06);
    background: var(--mud-palette-surface);
}
/* /Pages/Config/EmailHistoryData.razor.rz.scp.css */
/* Rendered by this page inside the grid, so it carries the scope attribute itself. */
.email-empty[b-4kmsweqb54] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 12px;
    text-align: center;
}
/* /Pages/Config/Orders/WorkOrderTemplates.razor.rz.scp.css */
/* MudBlazor rounds the tabs with overflow: hidden, which turns the tabs box into the scroll
   container for everything inside it, so the sticky Save bar had nothing to stick to. `clip`
   still clips the rounded corners but is not a scroll container, so the bar sticks to the page's
   scroll area again. */
.work-order-templates[b-2c3ueim0nk]  .mud-tabs.mud-tabs-rounded {
    overflow: clip;
}
/* /Pages/Config/Roles/RolesConfigComponent.razor.rz.scp.css */
/* A plain block instead of FluentGrid, whose negative margins scrolled the page ~12px sideways. */
.roles-priority[b-ym81rbqi3w] {
    max-width: 720px;
    padding-top: 12px;
}

.roles-priority-help[b-ym81rbqi3w] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.roles-priority[b-ym81rbqi3w]  .roles-priority-caption {
    display: block;
    margin-bottom: 6px;
    color: var(--mud-palette-text-secondary);
}

/* Rows tall enough for the up/down buttons (the default 32px rows were hard to grab on touch). */
.roles-priority[b-ym81rbqi3w]  .fluent-sortable-list {
    --fluent-sortable-list-item-height: 44px;
    --fluent-sortable-list-border-color: var(--mud-palette-divider);
    --fluent-sortable-list-item-border-color: var(--mud-palette-divider);
    --fluent-sortable-list-item-background-color: var(--mud-palette-surface);
    --fluent-sortable-list-item-focused-background-color: var(--mud-palette-primary-hover);
    --fluent-sortable-list-item-focused-border-color: var(--mud-palette-primary);
    --fluent-sortable-list-item-grabbed-background-color: var(--mud-palette-primary-hover);
    --fluent-sortable-list-item-grabbed-border-color: var(--mud-palette-primary);
    margin-bottom: 16px;
}

.roles-priority[b-ym81rbqi3w]  .sortable-grab {
    background-color: transparent;
}

.roles-priority-item[b-ym81rbqi3w] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.roles-priority-name[b-ym81rbqi3w] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Neutral: the old red-to-green colouring made low importance read as an error. */
.roles-priority-importance[b-ym81rbqi3w] {
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.roles-priority-moves[b-ym81rbqi3w] {
    display: inline-flex;
    gap: 2px;
}

.roles-priority-moves[b-ym81rbqi3w]  .mud-icon-button {
    min-width: 36px;
    min-height: 36px;
}

@media (any-pointer: coarse) {
    .roles-priority[b-ym81rbqi3w]  .fluent-sortable-list {
        --fluent-sortable-list-item-height: 48px;
    }

    .roles-priority-moves[b-ym81rbqi3w]  .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}
/* /Pages/Home/HomeDashboardKpi.razor.rz.scp.css */
.pb-kpi-dashboard[b-uy5xj003bc] {
    --pb-kpi-frame-color: rgba(34, 72, 108, 0.55);
}

.pb-kpi-dashboard-header[b-uy5xj003bc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.pb-kpi-dashboard-headline[b-uy5xj003bc] {
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--mud-palette-text-primary);
    padding: 0.35rem 0.85rem;
    border-left: 5px solid var(--mud-palette-primary);
    border-bottom: 1px solid var(--pb-kpi-frame-color);
    background: linear-gradient(90deg, rgba(25, 118, 210, 0.1) 0%, rgba(25, 118, 210, 0.02) 50%, rgba(25, 118, 210, 0) 100%);
    margin-bottom: 0;
    flex: 1 1 280px;
}

.pb-kpi-settings-action[b-uy5xj003bc] {
    flex: 0 0 auto;
    white-space: nowrap;
}

.pb-kpi-section-title[b-uy5xj003bc] {
    border-left: 4px solid rgba(25, 118, 210, 0.7);
    color: var(--mud-palette-primary);
    font-weight: 800;
    letter-spacing: 0.01em;
    padding-left: 0.55rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(34, 72, 108, 0.15);
    margin-bottom: 0.5rem;
}

[b-uy5xj003bc] .kpi-card {
    background: linear-gradient(180deg, rgba(25, 118, 210, 0.06) 0%, rgba(25, 118, 210, 0.015) 18%, rgba(25, 118, 210, 0) 50%), var(--mud-palette-surface);
    border: 2px solid var(--pb-kpi-frame-color);
    box-shadow: 0 2px 8px rgba(17, 40, 65, 0.1), 0 6px 18px rgba(17, 40, 65, 0.07);
    border-radius: 8px;
    transition: box-shadow 0.2s ease;
}

[b-uy5xj003bc] .kpi-card:hover {
    box-shadow: 0 4px 12px rgba(17, 40, 65, 0.14), 0 8px 24px rgba(17, 40, 65, 0.1);
}

[b-uy5xj003bc] .kpi-card .mud-card-header {
    border-bottom: 2px solid rgba(34, 72, 108, 0.18);
    padding-bottom: 0.45rem;
}

[b-uy5xj003bc] .kpi-card .mud-card-content {
    padding-top: 0.8rem;
}

[b-uy5xj003bc] .pb-kpi-card-title {
    color: var(--mud-palette-text-primary);
    font-weight: 800;
    letter-spacing: 0.01em;
}

[b-uy5xj003bc] .kpi-card .mud-simple-table thead th {
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    background-color: rgba(25, 118, 210, 0.04);
}

[b-uy5xj003bc] .kpi-card .mud-simple-table tbody td {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

[b-uy5xj003bc] .kpi-card .mud-charts-xaxis text,
[b-uy5xj003bc] .kpi-card .mud-charts-yaxis text {
    fill: var(--mud-palette-text-primary);
    font-size: 0.9rem;
    font-weight: 900;
}

[b-uy5xj003bc] .kpi-card .mud-chart-legend .mud-chart-legend-item .mud-chart-legend-text {
    color: var(--mud-palette-text-primary);
    font-size: 0.95rem;
    font-weight: 600;
}

.pb-kpi-single-column[b-uy5xj003bc]  .mud-grid-item {
    max-width: 100% !important;
    flex-basis: 100% !important;
}

@media (max-width: 960px) {
    .pb-kpi-dashboard-header[b-uy5xj003bc] {
        align-items: stretch;
    }

    .pb-kpi-settings-action[b-uy5xj003bc] {
        width: 100%;
    }

    .pb-kpi-dashboard-headline[b-uy5xj003bc] {
        font-size: 1.55rem;
    }

    [b-uy5xj003bc] .kpi-card .mud-charts-xaxis text,
    [b-uy5xj003bc] .kpi-card .mud-charts-yaxis text {
        font-size: 0.8rem;
        font-weight: 900;
    }
}
/* /Pages/Home/HomeHourlyData.razor.rz.scp.css */
#index-timerecord-title h1[b-g4n4ek9ijc],
#index-timerecord-title p[b-g4n4ek9ijc] {
    display: inline;
    vertical-align: top;
    font-size: 20px;
    line-height: 20px;
}

#index-timerecord-title h1[b-g4n4ek9ijc] {
    font-size: 30px;
}

/* Active Time Recording Styling */
.active-time-recording[b-g4n4ek9ijc] {
    border-left: 5px solid var(--mud-palette-success);
    background-color: rgba(76, 175, 80, 0.08);
}

/* Quick Actions Styling */
.text-truncate[b-g4n4ek9ijc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile swipe card styling */
.mobile-swipe-card[b-g4n4ek9ijc] {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    transition: transform 0.3s ease;
}

.mobile-swipe-card[b-g4n4ek9ijc]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.mobile-swipe-card:active[b-g4n4ek9ijc]::before {
    transform: translateX(100%);
}

/* Touch feedback */
.mobile-swipe-card:active[b-g4n4ek9ijc] {
    transform: scale(0.98);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    [b-g4n4ek9ijc] .mud-button {
        min-height: 48px;
    }

    .home-time-records-container[b-g4n4ek9ijc] {
        flex-direction: column;
    }

    .home-time-records-account-container[b-g4n4ek9ijc],
    .home-time-records-schedules-container[b-g4n4ek9ijc] {
        width: 100%;
        margin-bottom: 1rem;
    }

    .mobile-swipe-card[b-g4n4ek9ijc] {
        margin: 0 -16px;
        border-radius: 0;
    }

    /* Larger touch targets for mobile */
    [b-g4n4ek9ijc] .mud-icon-button {
        width: 48px;
        height: 48px;
    }

}
/* /Pages/Home/HomeIndex.razor.rz.scp.css */
#index-timerecord-title h1[b-kqmtxspd8w],
#index-timerecord-title p[b-kqmtxspd8w] {
    display: inline;
    vertical-align: top;
    font-size: 20px;
    line-height: 20px;
}

#index-timerecord-title h1[b-kqmtxspd8w] {
    font-size: 30px;
}
/* /Pages/Inventory/Components/InventoryCockpitTile.razor.rz.scp.css */
.cockpit-tile-link[b-03sii50fzo] {
    display: block;
    height: 100%;
}

.cockpit-tile[b-03sii50fzo] {
    height: 100%;
    padding: 1rem 1.15rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.cockpit-tile:hover[b-03sii50fzo] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}

.cockpit-tile__head[b-03sii50fzo] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--mud-palette-text-secondary);
}

.cockpit-tile__icon[b-03sii50fzo] {
    color: var(--mud-palette-text-secondary);
}

.cockpit-tile__title[b-03sii50fzo] {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cockpit-tile__value[b-03sii50fzo] {
    margin-top: 0.35rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
}

.cockpit-tile__sub[b-03sii50fzo] {
    margin-top: 0.25rem;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    min-height: 1.1rem;
}

/* Severity accents — left rail + headline number. */
.cockpit-tile--info[b-03sii50fzo] {
    border-left-color: var(--mud-palette-info);
}

.cockpit-tile--good[b-03sii50fzo] {
    border-left-color: var(--mud-palette-success);
}

.cockpit-tile--warn[b-03sii50fzo] {
    border-left-color: var(--mud-palette-warning);
}
.cockpit-tile--warn .cockpit-tile__value[b-03sii50fzo] {
    color: var(--mud-palette-warning);
}

.cockpit-tile--critical[b-03sii50fzo] {
    border-left-color: var(--mud-palette-error);
}
.cockpit-tile--critical .cockpit-tile__value[b-03sii50fzo] {
    color: var(--mud-palette-error);
}
/* /Pages/Inventory/Components/MessageBodyPreview.razor.rz.scp.css */
.message-body-preview[b-knqyak3zjo] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    min-width: 220px;
}

.message-body-preview__clamp[b-knqyak3zjo],
.message-body-preview__full[b-knqyak3zjo] {
    flex: 1 1 auto;
    min-width: 0;
}

.message-body-preview__clamp[b-knqyak3zjo] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
/* /Pages/Inventory/Po/PurchaseOrder.razor.rz.scp.css */
/* Purchase Order Page - Polished Visual Styles (mirrors Order.razor.css so PO matches the
   Sales Order gold standard). */

/* ============================================
   Page-scoped design tokens
   ============================================ */
/* Defined on the .po-root wrapper (a real element in PurchaseOrder.razor) so the tokens cascade to
   all descendants — including ::deep child components — without leaking to :global(html/body).
   Colors alias the MudBlazor palette so they follow light/dark. */
.po-root[b-l4vuhpvbu1] {
    --po-card-radius: 12px;
    --po-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --po-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
    --po-text-primary: var(--mud-palette-text-primary);
    --po-text-secondary: var(--mud-palette-text-secondary);
    --po-accent-blue: var(--mud-palette-primary);
    --po-border-color: var(--mud-palette-lines-default);
}

/* MudGrid's spacing uses negative side margins that poke past the container and give the content
   area a useless horizontal scrollbar. Clip x only; `clip` (unlike `hidden`) does not create a
   scroll container, so the sticky stack inside keeps tracking the layout scrollport. */
.po-page-gutter[b-l4vuhpvbu1] {
    overflow-x: clip;
}

/* ============================================
   Sticky header stack (section nav + financial summary)
   ============================================ */
/* The nav and financial summary pin together as one unit. The class name MUST stay
   `order-sticky-stack`: site.js (scrollToOrderSection / initSectionObserver) queries it to measure
   the scroll offset and observer rootMargin. */
.order-sticky-stack[b-l4vuhpvbu1] {
    position: sticky;
    top: 0;
    padding-top: 8px;
    z-index: 30;
    background: var(--mud-palette-background);
}

/* ============================================
   Breadcrumbs Styling
   ============================================ */
[b-l4vuhpvbu1] .mud-breadcrumbs {
    background: var(--mud-palette-surface);
    padding: 0.75rem 1rem;
    border-radius: var(--po-card-radius);
    box-shadow: var(--po-card-shadow);
    margin-bottom: 1.5rem !important;
}

[b-l4vuhpvbu1] .mud-breadcrumbs .mud-breadcrumb-item {
    color: var(--po-text-secondary);
    font-weight: 500;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    max-width: 260px;
}

/* Long account names must not blow up the trail; full text stays on the title attr. The ellipsis
   lives on an inner block element: text-overflow is ignored on a flex container. */
[b-l4vuhpvbu1] .mud-breadcrumbs .crumb-text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-l4vuhpvbu1] .mud-breadcrumbs .mud-breadcrumb-item:hover {
    color: var(--po-accent-blue);
}

[b-l4vuhpvbu1] .mud-breadcrumbs .mud-breadcrumb-item--current,
[b-l4vuhpvbu1] .mud-breadcrumbs .mud-breadcrumb-item--current:hover {
    color: var(--po-text-primary);
    transition: none;
    cursor: default;
}

/* ============================================
   Page Title Enhancement
   ============================================ */
[b-l4vuhpvbu1] .mud-typography-h5 {
    color: var(--po-text-primary);
    font-weight: 700;
    letter-spacing: -0.025em;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--po-accent-blue);
    display: inline-block;
}

/* ============================================
   MudCard Global Enhancements (PO Page Scope)
   ============================================ */
[b-l4vuhpvbu1] .mud-card {
    border-radius: var(--po-card-radius) !important;
    box-shadow: var(--po-card-shadow) !important;
    border: 1px solid var(--po-border-color) !important;
    transition: all 0.3s ease !important;
    overflow: hidden;
}

[b-l4vuhpvbu1] .mud-card:hover {
    box-shadow: var(--po-card-shadow-hover) !important;
}

@media (prefers-reduced-motion: no-preference) {
    [b-l4vuhpvbu1] .mud-card:hover {
        transform: translateY(-2px);
    }
}

[b-l4vuhpvbu1] .mud-card-content {
    padding: 1.25rem !important;
}

/* ============================================
   MudTable Global Enhancements (PO Page Scope) — restyles the items table without editing it
   ============================================ */
[b-l4vuhpvbu1] .mud-table {
    border-radius: var(--po-card-radius) !important;
    overflow: hidden;
    box-shadow: var(--po-card-shadow) !important;
}

[b-l4vuhpvbu1] .mud-table-container {
    border-radius: var(--po-card-radius) !important;
}

[b-l4vuhpvbu1] .mud-table thead th {
    background: var(--mud-palette-background-gray) !important;
    color: var(--po-text-primary) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em;
    padding: 1rem 0.75rem !important;
    border-bottom: 2px solid var(--po-border-color) !important;
}

[b-l4vuhpvbu1] .mud-table tbody tr {
    transition: background-color 0.2s ease;
}

[b-l4vuhpvbu1] .mud-table tbody tr:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}

[b-l4vuhpvbu1] .mud-table tbody td {
    padding: 0.875rem 0.75rem !important;
    border-bottom: 1px solid var(--po-border-color) !important;
}

[b-l4vuhpvbu1] .mud-table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--mud-palette-background-gray) !important;
}

/* ============================================
   MudExpansionPanel Enhancements
   ============================================ */
[b-l4vuhpvbu1] .mud-expansion-panels {
    border-radius: var(--po-card-radius) !important;
    overflow: hidden;
    box-shadow: var(--po-card-shadow) !important;
}

[b-l4vuhpvbu1] .mud-expansion-panel {
    border-radius: var(--po-card-radius) !important;
    margin-bottom: 0 !important;
}

[b-l4vuhpvbu1] .mud-expansion-panel-header {
    padding: 1rem 1.25rem !important;
    background: var(--mud-palette-surface) !important;
    transition: background-color 0.2s ease !important;
}

[b-l4vuhpvbu1] .mud-expansion-panel-header:hover {
    background: var(--mud-palette-background-gray) !important;
}

[b-l4vuhpvbu1] .mud-expansion-panel-content {
    padding: 1rem 1.25rem !important;
    background: var(--mud-palette-background-gray) !important;
    border-top: 1px solid var(--po-border-color) !important;
}

/* ============================================
   MudAlert Enhancements
   ============================================ */
[b-l4vuhpvbu1] .mud-alert {
    border-radius: 10px !important;
    padding: 1rem 1.25rem !important;
}

/* ============================================
   MudLink Enhancements
   ============================================ */
[b-l4vuhpvbu1] .mud-link {
    color: var(--po-accent-blue) !important;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

[b-l4vuhpvbu1] .mud-link:hover {
    color: var(--mud-palette-primary) !important;
    text-decoration: underline !important;
}

/* ============================================
   MudChip Enhancements
   ============================================ */
[b-l4vuhpvbu1] .mud-chip {
    border-radius: 20px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

@media (prefers-reduced-motion: no-preference) {
    [b-l4vuhpvbu1] .mud-chip:hover {
        transform: scale(1.02);
    }
}

/* ============================================
   Button Enhancements
   ============================================ */
[b-l4vuhpvbu1] .mud-button-root {
    border-radius: 8px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    transition: all 0.2s ease !important;
}

[b-l4vuhpvbu1] .mud-button-root:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

@media (prefers-reduced-motion: no-preference) {
    [b-l4vuhpvbu1] .mud-button-root:hover {
        transform: translateY(-1px);
    }
}

[b-l4vuhpvbu1] .mud-icon-button {
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

[b-l4vuhpvbu1] .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}

/* ============================================
   Text & Typography Enhancements
   ============================================ */
[b-l4vuhpvbu1] .mud-typography strong {
    color: var(--po-text-primary);
    font-weight: 600;
}

[b-l4vuhpvbu1] .mud-typography-h6 {
    color: var(--po-text-primary) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================
   Form Elements
   ============================================ */
[b-l4vuhpvbu1] .mud-input {
    border-radius: 8px !important;
}

[b-l4vuhpvbu1] .mud-select {
    border-radius: 8px !important;
}

/* ============================================
   Dividers
   ============================================ */
[b-l4vuhpvbu1] .mud-divider {
    margin: 1rem 0 !important;
    border-color: var(--po-border-color) !important;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
[b-l4vuhpvbu1] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[b-l4vuhpvbu1] ::-webkit-scrollbar-track {
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
}

[b-l4vuhpvbu1] ::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 4px;
}

[b-l4vuhpvbu1] ::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-text-secondary);
}

/* ============================================
   PO control bar (Add item / Show-Hide items)
   ============================================ */
.po-control-bar[b-l4vuhpvbu1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: var(--mud-palette-surface);
    padding: 1rem 1.5rem;
    border-radius: var(--po-card-radius);
    box-shadow: var(--po-card-shadow);
    margin: 0.5rem 0 1rem;
}

.po-section-block[b-l4vuhpvbu1] {
    margin-top: 1.25rem;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 768px) {
    [b-l4vuhpvbu1] .mud-card-content {
        padding: 1rem !important;
    }

    [b-l4vuhpvbu1] .mud-table thead th {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.7rem !important;
    }

    [b-l4vuhpvbu1] .mud-table tbody td {
        padding: 0.625rem 0.5rem !important;
    }
}
/* /Pages/Inventory/Po/PurchaseOrderDetails.razor.rz.scp.css */
.order-access.notes[b-f9arz4hkfv] {
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-tax-exempt[b-f9arz4hkfv] {
    display: flex;
    justify-content: flex-start; /* Align items to the left */
}
/* /Pages/Inventory/Po/PurchaseOrdersIndex.razor.rz.scp.css */
.pb-order-grid-soid-header[b-y1wyb00o2z] {
    min-width: 100px;
}

.pb-order-grid-soid-footer[b-y1wyb00o2z] {
    min-width: 100px;
}

/* Total and Balance were two stacked, unlabelled amounts. A two-column grid puts a small label
   in front of each amount and keeps each pair on one line. */
.po-amounts[b-y1wyb00o2z] {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 6px;
    align-items: baseline;
    justify-content: start;
    white-space: nowrap;
}

.po-amounts__label[b-y1wyb00o2z] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}
/* /Pages/Inventory/Po/PurchaseOrderTopDetails.razor.rz.scp.css */
/* Order Summary header identity block.

   The purchase order id doubles as the shortcut into the header edit form, so it has to read as a
   link at a glance. The page-scoped rules in PurchaseOrder.razor.css flatten `.mud-link`
   (`text-decoration: none !important`), so these rules carry `!important` and win on specificity:
   `.po-summary-id[b-scope] .mud-link` outranks the page's `[b-page] .mud-link`. Thickness needs
   `!important` too, because the page's `text-decoration` shorthand resets that longhand. */

.po-summary-id[b-uw36biyyme]  .mud-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 1px 4px;
    /* Pull the padding back so the id stays optically aligned with its label. */
    margin-left: -4px;
    border-radius: 6px;
    font-weight: 700;
    color: var(--mud-palette-primary) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px;
    transition: background-color 0.15s ease;
}

.po-summary-id[b-uw36biyyme]  .mud-link:hover,
.po-summary-id[b-uw36biyyme]  .mud-link:focus-visible {
    background-color: var(--mud-palette-primary-hover);
    text-decoration-thickness: 2px !important;
}

.po-summary-id[b-uw36biyyme]  .mud-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* The pencil is the edit cue; keep it optically matched to the id text rather than icon-sized. */
.po-summary-id[b-uw36biyyme]  .mud-link .mud-icon-root {
    font-size: 1rem;
}
/* /Pages/Inventory/Po/Statuses/PurchaseOrderStatuses.razor.rz.scp.css */
/* Status panel: three peer cards that share the row instead of being pushed to its edges. */

.po-status-panel[b-ifacm0zoir] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1rem;
}

.po-status-col[b-ifacm0zoir] {
    display: flex;
    /* Grow to fill the row: the previous `justify-content-between` left a wide dead gap between the
       status buttons and the admin controls on desktop. */
    flex: 1 1 280px;
    min-width: 0;
}

/* `.mud-card` qualifier is deliberate: PurchaseOrder.razor.css styles `::deep .mud-card`
   with !important at the same specificity, so without it the winner is bundle order. */
[b-ifacm0zoir] .mud-card.po-status-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem;
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    background: var(--mud-palette-surface) !important;
}

.po-status-card-title[b-ifacm0zoir] {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Reverse-status is a step backwards, so it sits below a rule rather than beside the forward
   actions. `margin-top: auto` keeps it on the card floor when the cards are different heights. */
.po-status-card-footer[b-ifacm0zoir] {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ============================================
   Admin override
   ============================================ */
/* Tinted and boxed so it reads as a deliberate escape hatch rather than a peer of the normal
   workflow controls. It stays visible for admins exactly as before. */
.po-status-admin[b-ifacm0zoir] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: auto;
    padding: 0.75rem;
    border: 1px solid var(--mud-palette-warning);
    border-radius: 8px;
    background: rgba(var(--mud-palette-warning-rgb), 0.08);
}

.po-status-admin-title[b-ifacm0zoir] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--mud-palette-warning-darken);
    font-weight: 600;
    font-size: 0.8125rem;
}

[b-ifacm0zoir] .po-status-admin .mud-icon-root {
    font-size: 1rem;
}

/* ============================================
   Status buttons
   ============================================ */
[b-ifacm0zoir] .order-status-button {
    min-width: 110px;
}
/* /Pages/Inventory/Transfer/TransferOrder.razor.rz.scp.css */
/* Transfer Order Page - Polished Visual Styles (mirrors Order.razor.css so TO matches the
   Sales Order gold standard). Transfer Orders hide pricing, so there is no financial panel here. */

/* ============================================
   Page-scoped design tokens
   ============================================ */
/* Defined on the .to-root wrapper (a real element in TransferOrder.razor) so the tokens cascade to
   all descendants — including ::deep child components — without leaking to :global(html/body).
   Colors alias the MudBlazor palette so they follow light/dark. */
.to-root[b-05dvzo3k0l] {
    --to-card-radius: 12px;
    --to-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --to-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
    --to-text-primary: var(--mud-palette-text-primary);
    --to-text-secondary: var(--mud-palette-text-secondary);
    --to-accent-blue: var(--mud-palette-primary);
    --to-border-color: var(--mud-palette-lines-default);
}

/* MudGrid's spacing uses negative side margins that give the content area a useless horizontal
   scrollbar. Clip x only; `clip` (unlike `hidden`) does not create a scroll container, so the
   sticky stack inside keeps tracking the layout scrollport. */
.to-page-gutter[b-05dvzo3k0l] {
    overflow-x: clip;
}

/* ============================================
   Sticky header stack (section nav only — TO hides pricing)
   ============================================ */
/* The class name MUST stay `order-sticky-stack`: site.js (scrollToOrderSection /
   initSectionObserver) queries it to measure the scroll offset and observer rootMargin. */
.order-sticky-stack[b-05dvzo3k0l] {
    position: sticky;
    top: 0;
    padding-top: 8px;
    z-index: 30;
    background: var(--mud-palette-background);
}

/* ============================================
   Breadcrumbs Styling
   ============================================ */
[b-05dvzo3k0l] .mud-breadcrumbs {
    background: var(--mud-palette-surface);
    padding: 0.75rem 1rem;
    border-radius: var(--to-card-radius);
    box-shadow: var(--to-card-shadow);
    margin-bottom: 1.5rem !important;
}

[b-05dvzo3k0l] .mud-breadcrumbs .mud-breadcrumb-item {
    color: var(--to-text-secondary);
    font-weight: 500;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    max-width: 260px;
}

/* Long names must not blow up the trail; full text stays on the title attr. The ellipsis lives on
   an inner block element: text-overflow is ignored on a flex container. */
[b-05dvzo3k0l] .mud-breadcrumbs .crumb-text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-05dvzo3k0l] .mud-breadcrumbs .mud-breadcrumb-item:hover {
    color: var(--to-accent-blue);
}

[b-05dvzo3k0l] .mud-breadcrumbs .mud-breadcrumb-item--current,
[b-05dvzo3k0l] .mud-breadcrumbs .mud-breadcrumb-item--current:hover {
    color: var(--to-text-primary);
    transition: none;
    cursor: default;
}

/* ============================================
   Page Title Enhancement
   ============================================ */
[b-05dvzo3k0l] .mud-typography-h5 {
    color: var(--to-text-primary);
    font-weight: 700;
    letter-spacing: -0.025em;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--to-accent-blue);
    display: inline-block;
}

/* ============================================
   MudCard Global Enhancements (TO Page Scope)
   ============================================ */
[b-05dvzo3k0l] .mud-card {
    border-radius: var(--to-card-radius) !important;
    box-shadow: var(--to-card-shadow) !important;
    border: 1px solid var(--to-border-color) !important;
    transition: all 0.3s ease !important;
    overflow: hidden;
}

[b-05dvzo3k0l] .mud-card:hover {
    box-shadow: var(--to-card-shadow-hover) !important;
}

@media (prefers-reduced-motion: no-preference) {
    [b-05dvzo3k0l] .mud-card:hover {
        transform: translateY(-2px);
    }
}

[b-05dvzo3k0l] .mud-card-content {
    padding: 1.25rem !important;
}

/* ============================================
   MudTable Global Enhancements (TO Page Scope) — restyles the items table without editing it
   ============================================ */
[b-05dvzo3k0l] .mud-table {
    border-radius: var(--to-card-radius) !important;
    overflow: hidden;
    box-shadow: var(--to-card-shadow) !important;
}

[b-05dvzo3k0l] .mud-table-container {
    border-radius: var(--to-card-radius) !important;
}

[b-05dvzo3k0l] .mud-table thead th {
    background: var(--mud-palette-background-gray) !important;
    color: var(--to-text-primary) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em;
    padding: 1rem 0.75rem !important;
    border-bottom: 2px solid var(--to-border-color) !important;
}

[b-05dvzo3k0l] .mud-table tbody tr {
    transition: background-color 0.2s ease;
}

[b-05dvzo3k0l] .mud-table tbody tr:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}

[b-05dvzo3k0l] .mud-table tbody td {
    padding: 0.875rem 0.75rem !important;
    border-bottom: 1px solid var(--to-border-color) !important;
}

[b-05dvzo3k0l] .mud-table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--mud-palette-background-gray) !important;
}

/* ============================================
   MudExpansionPanel Enhancements
   ============================================ */
[b-05dvzo3k0l] .mud-expansion-panels {
    border-radius: var(--to-card-radius) !important;
    overflow: hidden;
    box-shadow: var(--to-card-shadow) !important;
}

[b-05dvzo3k0l] .mud-expansion-panel {
    border-radius: var(--to-card-radius) !important;
    margin-bottom: 0 !important;
}

[b-05dvzo3k0l] .mud-expansion-panel-header {
    padding: 1rem 1.25rem !important;
    background: var(--mud-palette-surface) !important;
    transition: background-color 0.2s ease !important;
}

[b-05dvzo3k0l] .mud-expansion-panel-header:hover {
    background: var(--mud-palette-background-gray) !important;
}

[b-05dvzo3k0l] .mud-expansion-panel-content {
    padding: 1rem 1.25rem !important;
    background: var(--mud-palette-background-gray) !important;
    border-top: 1px solid var(--to-border-color) !important;
}

/* ============================================
   MudAlert Enhancements
   ============================================ */
[b-05dvzo3k0l] .mud-alert {
    border-radius: 10px !important;
    padding: 1rem 1.25rem !important;
}

/* ============================================
   MudLink Enhancements
   ============================================ */
[b-05dvzo3k0l] .mud-link {
    color: var(--to-accent-blue) !important;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

[b-05dvzo3k0l] .mud-link:hover {
    color: var(--mud-palette-primary) !important;
    text-decoration: underline !important;
}

/* ============================================
   MudChip Enhancements
   ============================================ */
[b-05dvzo3k0l] .mud-chip {
    border-radius: 20px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

@media (prefers-reduced-motion: no-preference) {
    [b-05dvzo3k0l] .mud-chip:hover {
        transform: scale(1.02);
    }
}

/* ============================================
   Button Enhancements
   ============================================ */
[b-05dvzo3k0l] .mud-button-root {
    border-radius: 8px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    transition: all 0.2s ease !important;
}

[b-05dvzo3k0l] .mud-button-root:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

@media (prefers-reduced-motion: no-preference) {
    [b-05dvzo3k0l] .mud-button-root:hover {
        transform: translateY(-1px);
    }
}

[b-05dvzo3k0l] .mud-icon-button {
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

[b-05dvzo3k0l] .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}

/* ============================================
   Text & Typography Enhancements
   ============================================ */
[b-05dvzo3k0l] .mud-typography strong {
    color: var(--to-text-primary);
    font-weight: 600;
}

[b-05dvzo3k0l] .mud-typography-h6 {
    color: var(--to-text-primary) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================
   Form Elements
   ============================================ */
[b-05dvzo3k0l] .mud-input {
    border-radius: 8px !important;
}

[b-05dvzo3k0l] .mud-select {
    border-radius: 8px !important;
}

/* ============================================
   Dividers
   ============================================ */
[b-05dvzo3k0l] .mud-divider {
    margin: 1rem 0 !important;
    border-color: var(--to-border-color) !important;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
[b-05dvzo3k0l] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[b-05dvzo3k0l] ::-webkit-scrollbar-track {
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
}

[b-05dvzo3k0l] ::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 4px;
}

[b-05dvzo3k0l] ::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-text-secondary);
}

/* ============================================
   TO control bar (Transfer Items / Add item / Show-Hide items)
   ============================================ */
.to-control-bar[b-05dvzo3k0l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: var(--mud-palette-surface);
    padding: 1rem 1.5rem;
    border-radius: var(--to-card-radius);
    box-shadow: var(--to-card-shadow);
    margin: 0.5rem 0 1rem;
}

.to-section-block[b-05dvzo3k0l] {
    margin-top: 1.25rem;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 768px) {
    [b-05dvzo3k0l] .mud-card-content {
        padding: 1rem !important;
    }

    [b-05dvzo3k0l] .mud-table thead th {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.7rem !important;
    }

    [b-05dvzo3k0l] .mud-table tbody td {
        padding: 0.625rem 0.5rem !important;
    }
}
/* /Pages/Inventory/Transfer/TransferOrderDetails.razor.rz.scp.css */
.order-access.notes[b-6x7wperlrz] {
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-tax-exempt[b-6x7wperlrz] {
    display: flex;
    justify-content: flex-start; /* Align items to the left */
}
/* /Pages/Inventory/Transfer/TransferOrdersIndex.razor.rz.scp.css */
.pb-order-grid-soid-header[b-3k9xo4dta3] {
    min-width: 100px;
}

.pb-order-grid-soid-footer[b-3k9xo4dta3] {
    min-width: 100px;
}

.transfer-requested-by-filter[b-3k9xo4dta3] {
    width: 240px;
    max-width: 100%;
}

/* Total and Balance, each with a small label, one pair per line. */
.to-amounts[b-3k9xo4dta3] {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 6px;
    align-items: baseline;
    justify-content: start;
    white-space: nowrap;
}

.to-amounts__label[b-3k9xo4dta3] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}
/* /Pages/Inventory/Transfer/TransferOrderTopDetails.razor.rz.scp.css */
/* Order Summary header identity block.

   The transfer order id doubles as the shortcut into the header edit form, so it has to read as a
   link at a glance. The page-scoped rules in TransferOrder.razor.css flatten `.mud-link`
   (`text-decoration: none !important`), so these rules carry `!important` and win on specificity:
   `.to-summary-id[b-scope] .mud-link` outranks the page's `[b-page] .mud-link`. Thickness needs
   `!important` too, because the page's `text-decoration` shorthand resets that longhand. */

.to-summary-id[b-yz28t2ra22]  .mud-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 1px 4px;
    /* Pull the padding back so the id stays optically aligned with its label. */
    margin-left: -4px;
    border-radius: 6px;
    font-weight: 700;
    color: var(--mud-palette-primary) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px;
    transition: background-color 0.15s ease;
}

.to-summary-id[b-yz28t2ra22]  .mud-link:hover,
.to-summary-id[b-yz28t2ra22]  .mud-link:focus-visible {
    background-color: var(--mud-palette-primary-hover);
    text-decoration-thickness: 2px !important;
}

.to-summary-id[b-yz28t2ra22]  .mud-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* The pencil is the edit cue; keep it optically matched to the id text rather than icon-sized. */
.to-summary-id[b-yz28t2ra22]  .mud-link .mud-icon-root {
    font-size: 1rem;
}
/* /Pages/Inventory/TruckTracking.razor.rz.scp.css */
/* Long Samsara addresses wrapped to 4-5 lines on portrait tablets. Clamp them to two lines;
   the full address stays in the title and on the map. */
.truck-tracking-address[b-mm2lc0xq6w] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-width: 160px;
}
/* /Pages/Logs/AuditOperations.razor.rz.scp.css */
/* In a MudDrawerContainer the drawer is position: absolute against an ancestor outside this page,
   so the closed drawer sat past the right edge and widened the page. Fixed to the viewport it opens
   as a full-height side sheet and, closed, sits off screen without adding scroll width. */
[b-gwkpuu94dz] .audit-timeline-drawer {
    position: fixed;
    top: 0;
    height: 100vh;
    height: 100dvh;
    max-width: 100vw;
    z-index: 1400;
}

[b-gwkpuu94dz] .audit-timeline-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

[b-gwkpuu94dz] .audit-timeline-content {
    flex: 1;
    overflow: auto;
    padding-bottom: 16px;
}

[b-gwkpuu94dz] .audit-timeline-item {
    width: 100%;
    padding: 8px 4px;
}

[b-gwkpuu94dz] .audit-nowrap {
    white-space: nowrap;
}
/* /Pages/Orders/Components/NonCompliantReasonsTrigger.razor.rz.scp.css */
/* Reads as the flag text rather than a boxed button: native button chrome is reset so the parent's
   color and font carry through, and hover underlines the text to show it opens the reasons. */
.nc-reasons-trigger[b-avf88m0jos] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.nc-reasons-trigger:hover[b-avf88m0jos] {
    text-decoration: underline;
}

.nc-reasons-trigger:focus-visible[b-avf88m0jos] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
}

/* On the Items tab the trigger sits inside the description cell, where site.css stretches every
   descendant to 100% width (.order-items-table-description *). That rule pushed the earlier info icon
   onto its own full-width line, so the trigger and everything inside it opt out. */
.nc-reasons-trigger[b-avf88m0jos],
.nc-reasons-trigger[b-avf88m0jos]  * {
    width: auto !important;
    max-width: none !important;
}

.nc-reasons-trigger[b-avf88m0jos]  svg {
    flex: none;
    width: 1.25rem !important;
    height: 1.25rem;
}
/* /Pages/Orders/Components/OrderChecklistBar.razor.rz.scp.css */
.order-checklist-bar[b-3qwmkfvo51] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 6px 0 4px;
}

.order-checklist-status[b-3qwmkfvo51] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

/* Right-aligned so every row's action sits in the same place. */
.order-checklist-actions[b-3qwmkfvo51] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.order-checklist-actions[b-3qwmkfvo51]  .mud-button-root {
    text-transform: none;
    white-space: nowrap;
}

@media (pointer: coarse) {
    .order-checklist-actions[b-3qwmkfvo51]  .mud-button-root {
        min-height: 40px;
    }
}

/* site.css gives everything inside .order-items-table-description width: 100% !important, which
   spread the bar's icon across the cell, pushed the status past its edge and stretched every button. */
.order-checklist-bar[b-3qwmkfvo51]  * {
    width: auto !important;
}

.order-checklist-bar[b-3qwmkfvo51]  .mud-icon-root {
    width: 1em !important;
}
/* /Pages/Orders/Components/OrderDetails.razor.rz.scp.css */
/* OrderDetails Component - Polished Visual Styles */

/* ============================================
   Original Styles (preserved)
   ============================================ */
.order-access-notes[b-sh9kw4a609] {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    background: rgba(var(--mud-palette-warning-rgb), 0.15);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid var(--mud-palette-lines-default);
}

.order-access-notes span[b-sh9kw4a609] {
    color: var(--mud-palette-warning);
    font-size: 0.875rem;
}

/* Bill To | Ship To | terms and rep. */
.order-details-top[b-sh9kw4a609] {
    display: flex;
    flex-wrap: wrap;
}

.order-details-top__address[b-sh9kw4a609] {
    flex: 0 0 30%;
    max-width: 30%;
}

.order-details-top__terms[b-sh9kw4a609] {
    flex: 0 0 39%;
    max-width: 39%;
}

@media (max-width: 999.98px) {
    .order-details-top[b-sh9kw4a609] {
        row-gap: 8px;
    }

    .order-details-top__address[b-sh9kw4a609] {
        flex-basis: 50%;
        max-width: 50%;
    }

    .order-details-top__terms[b-sh9kw4a609] {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* ============================================
   Main Container
   ============================================ */
[b-sh9kw4a609] .d-flex.gap-2.pt-3.pb-3 {
    padding: 0.25rem 0 !important;
}

/* ============================================
   Top Row Cards (Billing, Shipping, Invoice)
   ============================================ */
[b-sh9kw4a609] .d-flex.gap-2.pt-3.pb-3 > div > .mud-card {
    height: 100%;
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s ease !important;
    overflow: hidden;
}

[b-sh9kw4a609] .d-flex.gap-2.pt-3.pb-3 > div > .mud-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px);
}

[b-sh9kw4a609] .d-flex.gap-2.pt-3.pb-3 > div > .mud-card .mud-card-content {
    padding: 0.75rem 1rem !important;
}

/* Card Header Accent Lines */
[b-sh9kw4a609] .d-flex.gap-2.pt-3.pb-3 > div:first-child > .mud-card {
    border-top: 3px solid var(--mud-palette-primary) !important;
}

[b-sh9kw4a609] .d-flex.gap-2.pt-3.pb-3 > div:nth-child(2) > .mud-card {
    border-top: 3px solid var(--mud-palette-success) !important;
}

[b-sh9kw4a609] .d-flex.gap-2.pt-3.pb-3 > div:nth-child(3) > .mud-card {
    border-top: 3px solid var(--mud-palette-warning) !important;
}

/* ============================================
   Address & Invoice Cards Content
   ============================================ */
[b-sh9kw4a609] .d-flex.align-items-center.gap-1 {
    padding: 0.25rem 0;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

[b-sh9kw4a609] .d-flex.align-items-center.gap-1:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04);
}

/* Save Buttons Styling */
[b-sh9kw4a609] .mud-icon-button[style*="Primary"] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

[b-sh9kw4a609] .mud-icon-button[style*="Primary"]:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.2) !important;
    transform: scale(1.1);
}

/* ============================================
   Grid Cards Section (Contact, Notes, Schedule)
   ============================================ */
[b-sh9kw4a609] .mud-grid.pt-3.pb-5 {
    gap: 1rem;
}

[b-sh9kw4a609] .mud-grid.pt-3.pb-5 .mud-card {
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s ease !important;
}

[b-sh9kw4a609] .mud-grid.pt-3.pb-5 .mud-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px);
}

/* Card Headers with Icons */
[b-sh9kw4a609] .d-flex.align-items-center.gap-1.mb-2 {
    padding-bottom: 0.75rem;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

[b-sh9kw4a609] .d-flex.align-items-center.gap-1.mb-2 .mud-icon {
    color: var(--mud-palette-primary) !important;
}

[b-sh9kw4a609] .d-flex.align-items-center.gap-1.mb-2 .mud-typography-h6 {
    color: var(--mud-palette-text-primary) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

/* ============================================
   Contact Card Styling
   ============================================ */
[b-sh9kw4a609] .mud-grid-item:first-of-type .mud-card {
    border-left: 4px solid var(--mud-palette-info) !important;
}

[b-sh9kw4a609] .mud-grid-item:first-of-type .mud-typography {
    padding: 0.25rem 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

[b-sh9kw4a609] .mud-grid-item:first-of-type strong {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

/* ============================================
   Notes & Specs Card Styling
   ============================================ */
[b-sh9kw4a609] .mud-grid-item:nth-of-type(2) .mud-card {
    border-left: 4px solid var(--mud-palette-primary) !important;
}

/* Notes Table Styling */
[b-sh9kw4a609] .mud-table {
    border-radius: 8px !important;
    overflow: hidden;
    margin: 0.75rem 0;
}

[b-sh9kw4a609] .mud-table thead th {
    background: var(--mud-palette-background-gray) !important;
    padding: 0.625rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary) !important;
}

[b-sh9kw4a609] .mud-table tbody td {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem;
}

/* File Chips */
[b-sh9kw4a609] .mud-chip.mud-chip-color-primary {
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    font-weight: 500 !important;
    border-radius: 20px !important;
    padding: 0.25rem 0.75rem !important;
}

[b-sh9kw4a609] .mud-chip.mud-chip-color-error {
    background: var(--mud-palette-error) !important;
    color: white !important;
    font-weight: 500 !important;
    border-radius: 20px !important;
    padding: 0.25rem 0.75rem !important;
}

/* ============================================
   Schedule Card Styling
   ============================================ */
[b-sh9kw4a609] .mud-grid-item:nth-of-type(3) .mud-card {
    border-left: 4px solid var(--mud-palette-success) !important;
}

/* ============================================
   Description Card (Full Width)
   ============================================ */
[b-sh9kw4a609] .mud-grid-item:last-of-type .mud-card {
    border-left: 4px solid var(--mud-palette-warning) !important;
    background: rgba(var(--mud-palette-warning-rgb), 0.15) !important;
}

[b-sh9kw4a609] .mud-grid-item:last-of-type .mud-card .mud-typography {
    padding: 0.375rem 0;
    font-size: 0.9rem;
}

[b-sh9kw4a609] .mud-grid-item:last-of-type .mud-card strong {
    color: var(--mud-palette-warning);
}

/* ============================================
   Edit Button Styling
   ============================================ */
[b-sh9kw4a609] .mud-icon-button {
    border-radius: 6px !important;
    padding: 0.375rem !important;
    transition: all 0.2s ease !important;
}

[b-sh9kw4a609] .mud-icon-button:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1) !important;
}

/* ============================================
   Link Styling
   ============================================ */
[b-sh9kw4a609] .mud-link {
    color: var(--mud-palette-primary) !important;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

[b-sh9kw4a609] .mud-link:hover {
    color: var(--mud-palette-primary) !important;
    text-decoration: underline !important;
}

/* ============================================
   Pager Styling
   ============================================ */
[b-sh9kw4a609] .mud-table-pagination {
    background: var(--mud-palette-background-gray) !important;
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 0.5rem !important;
}

[b-sh9kw4a609] .mud-table-pagination .mud-select {
    border-radius: 6px !important;
}

/* ============================================
   Dropdown Styling
   ============================================ */
[b-sh9kw4a609] .mud-select .mud-input {
    border-radius: 8px !important;
}

[b-sh9kw4a609] .mud-input-control-input-container {
    border-radius: 8px !important;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 1200px) {
    [b-sh9kw4a609] .d-flex.gap-2.pt-3.pb-3 {
        flex-wrap: wrap;
    }

    [b-sh9kw4a609] .d-flex.gap-2.pt-3.pb-3 > div {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    [b-sh9kw4a609] .mud-grid.pt-3.pb-5 .mud-item {
        padding: 0.5rem !important;
    }

    [b-sh9kw4a609] .mud-card-content {
        padding: 0.875rem !important;
    }
}

.order-spec-files[b-sh9kw4a609] {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.order-spec-files__item[b-sh9kw4a609] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
}

/* Long file names wrap instead of pushing the delete button out of the card. */
.order-spec-files__item[b-sh9kw4a609]  .order-spec-files__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (any-pointer: coarse) {
    .order-spec-files__item[b-sh9kw4a609]  .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}
/* /Pages/Orders/Components/OrderStatuses.razor.rz.scp.css */
/* OrderStatuses Component - Polished Visual Styles */

/* ============================================
   Main Status Container
   ============================================ */
[b-5ycbz2hkhv] .d-flex.gap-3 {
    padding: 1rem 0;
}

/* ============================================
   Status Control Card (Left Section)
   ============================================ */
.order-status-panel[b-5ycbz2hkhv] {
    width: 100%;
}

/* ============================================
   Status Info Alert
   ============================================ */
[b-5ycbz2hkhv] .mud-alert.mud-alert-info {
    background: rgba(var(--mud-palette-primary-rgb), 0.15) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
}

[b-5ycbz2hkhv] .mud-alert.mud-alert-info .mud-typography {
    color: var(--mud-palette-primary) !important;
    font-weight: 500;
}

[b-5ycbz2hkhv] .mud-alert.mud-alert-info .mud-link {
    color: var(--mud-palette-primary) !important;
    font-weight: 600;
    text-decoration: underline !important;
}

/* ============================================
   Expansion Panels for Status Actions
   ============================================ */
[b-5ycbz2hkhv] .mud-expansion-panels {
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
}

[b-5ycbz2hkhv] .mud-expansion-panel {
    border: none !important;
    margin: 0 !important;
}

[b-5ycbz2hkhv] .mud-expansion-panel-header {
    padding: 0.875rem 1rem !important;
    background: var(--mud-palette-surface) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    transition: all 0.2s ease !important;
}

[b-5ycbz2hkhv] .mud-expansion-panel-header:hover {
    background: var(--mud-palette-action-default-hover) !important;
}

/* Panel Title with Icon */
[b-5ycbz2hkhv] .mud-expansion-panel-header .d-flex.align-items-center.gap-2 {
    font-weight: 600;
}

[b-5ycbz2hkhv] .mud-expansion-panel-header .mud-icon {
    font-size: 1.25rem !important;
}

/* Primary Status Panel Title */
[b-5ycbz2hkhv] .mud-expansion-panel-header .mud-typography[style*="color: var(--mud-palette-primary)"],
[b-5ycbz2hkhv] .mud-expansion-panel-header .mud-typography-body1[style*="Primary"] {
    color: var(--mud-palette-primary) !important;
}

/* Warning Status Panel Title (Admin) */
[b-5ycbz2hkhv] .mud-expansion-panel-header .mud-typography[style*="Warning"],
[b-5ycbz2hkhv] .mud-expansion-panel-header .mud-typography-body1[style*="Warning"] {
    color: var(--mud-palette-warning) !important;
}

[b-5ycbz2hkhv] .mud-expansion-panel-content {
    padding: 1rem 1.25rem !important;
    background: var(--mud-palette-background-gray) !important;
}

/* ============================================
   Status Buttons
   ============================================ */
.order-status-button[b-5ycbz2hkhv] {
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    min-width: 120px;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.order-status-button:hover[b-5ycbz2hkhv] {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.order-status-button:disabled[b-5ycbz2hkhv] {
    opacity: 0.5;
    transform: none !important;
    box-shadow: none !important;
}

/* Status Section Titles */
[b-5ycbz2hkhv] .mud-typography-subtitle1 {
    color: var(--mud-palette-text-secondary) !important;
    font-weight: 600 !important;
    margin-bottom: 0.75rem !important;
}

/* Previous Status Divider — a real class instead of the old inline-hex + fragile
   [style*="border-top"] attribute coupling. */
[b-5ycbz2hkhv] .previous-status-divider {
    border-top: 2px dashed var(--mud-palette-lines-default) !important;
    margin-top: 1.5rem !important;
    padding-top: 1.5rem !important;
}

/* ============================================
   Admin Override Section
   ============================================ */
[b-5ycbz2hkhv] .mud-expansion-panel:last-child .mud-expansion-panel-header {
    background: rgba(var(--mud-palette-warning-rgb), 0.15) !important;
    border-left: 4px solid var(--mud-palette-warning) !important;
}

[b-5ycbz2hkhv] .mud-expansion-panel:last-child .mud-expansion-panel-content {
    background: rgba(var(--mud-palette-warning-rgb), 0.15) !important;
}

/* Admin Dropdown */
[b-5ycbz2hkhv] .pb-dropdown-225 {
    border-radius: 8px !important;
}

[b-5ycbz2hkhv] .pb-dropdown-225 .mud-input {
    border-radius: 8px !important;
}

/* ============================================
   Center Section (Order Top Details Container)
   ============================================ */
[b-5ycbz2hkhv] .d-flex.gap-3 > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ============================================
   Right Section (Account Links)
   ============================================ */
[b-5ycbz2hkhv] .d-flex.gap-3 > div:last-child {
    font-size: 0.9rem;
}

/* Account Links */
[b-5ycbz2hkhv] .d-flex.gap-3 > div:last-child .mud-link {
    color: var(--mud-palette-primary) !important;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

[b-5ycbz2hkhv] .d-flex.gap-3 > div:last-child .mud-link:hover {
    color: var(--mud-palette-primary) !important;
}

[b-5ycbz2hkhv] .d-flex.gap-3 > div:last-child .mud-link .mud-icon {
    font-size: 1rem !important;
}

/* ============================================
   Tooltip Enhancements
   ============================================ */
[b-5ycbz2hkhv] .mud-tooltip {
    border-radius: 8px !important;
    font-size: 0.8125rem !important;
    padding: 0.5rem 0.75rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 1200px) {
    [b-5ycbz2hkhv] .d-flex.gap-3 {
        flex-wrap: wrap;
    }

    [b-5ycbz2hkhv] .d-flex.gap-3 > div {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    [b-5ycbz2hkhv] .d-flex.gap-3 > div:nth-child(2) {
        order: -1;
    }
}

@media (max-width: 768px) {
    .order-status-button[b-5ycbz2hkhv] {
        min-width: 100px;
        font-size: 0.8rem !important;
    }

    [b-5ycbz2hkhv] .mud-expansion-panel-content {
        padding: 0.75rem 1rem !important;
    }
}

/* ============================================
   Quick Links (Right Section)
   ============================================ */
/* The panel reads as one contained unit instead of loose text and buttons. Radius, border and
   surface deliberately match the summary card in the middle column
   (OrderTopDetails.razor.css) so the two columns read as a set. The shadow is lighter than that
   card's on purpose: this is the secondary utility surface and should not compete with the
   primary summary for attention. */
.order-quick-links[b-5ycbz2hkhv] {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.order-quick-links-header[b-5ycbz2hkhv] {
    line-height: 1.3;
    margin-bottom: 2px;
}

/* Scope label above each group. A plain span rather than MudText on purpose: CSS isolation
   only stamps its scope attribute onto elements written in this file, so a scoped rule cannot
   reach a child component's own markup without ::deep. */
.order-quick-links-eyebrow[b-5ycbz2hkhv] {
    display: block;
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* The account name is what identifies this panel, so it has to outweigh the button labels
   below it (0.875rem / 500). ::deep because MudLink renders the anchor itself. */
.order-quick-links-header[b-5ycbz2hkhv]  .mud-link,
.order-quick-links-title-fallback[b-5ycbz2hkhv] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}

.order-quick-links-title-fallback[b-5ycbz2hkhv] {
    color: var(--mud-palette-text-primary);
}

/* Group separation has to beat the 4px gap between buttons, or the two groups read as one
   flat list. The previous `my-1` matched that gap exactly. */
.order-quick-links[b-5ycbz2hkhv]  .order-quick-links-divider {
    margin-top: 8px;
    margin-bottom: 8px;
}

/* Buttons carry their own 8px horizontal inset, so pull each row back by it to line the icons
   up with the eyebrow text above them rather than leaving them visibly indented. */
.order-quick-links-actions[b-5ycbz2hkhv] {
    margin-left: -8px;
}

/* Dense buttons: the block competes with the status panel for vertical space. */
.order-quick-links[b-5ycbz2hkhv]  .mud-button-root {
    padding: 2px 8px;
    min-width: 0;
}

/* Dense only where there is a mouse: on touch the ~28px buttons (Orders, Edit Account, Return to
   Order, Print, Payment) were too small to hit reliably, so they get a 40px target and more room. */
@media (pointer: coarse) {
    .order-quick-links[b-5ycbz2hkhv]  .mud-button-root {
        min-height: 40px;
        padding: 4px 12px;
    }

    .order-quick-links-actions[b-5ycbz2hkhv] {
        gap: 8px !important;
    }
}

/* ============================================
   Status / summary / quick-links row
   ============================================ */
/* Was three children pinned at `flex: 0 0 30%|40%|30%` with matching max-widths and no wrapping.
   On a 1024px tablet that produced 288/385/288px columns and clipped the quick-links column; at
   768px it fell to 212/282/212 and the status controls wrapped onto four lines each. Now the
   columns keep their desktop proportions while there is room, then wrap 2-up and 1-up. */
.order-status-row[b-5ycbz2hkhv] {
    flex-wrap: wrap;
}

.order-status-col[b-5ycbz2hkhv] {
    min-width: 0;
}

.order-status-col--side[b-5ycbz2hkhv] {
    flex: 1 1 280px;
}

.order-status-col--main[b-5ycbz2hkhv] {
    flex: 2 1 360px;
}

/* Above the wrap point, hold the original 30/40/30 split so desktop is untouched. Ratios rather
   than literal percentages: 30% + 40% + 30% plus the row's two 16px gaps adds up to more than the
   container, which - now that the row can wrap - pushed the third column onto its own line at
   1440px. A `0` basis divides the space *after* the gaps, giving the same proportions safely. */
@media (min-width: 1280px) {
    .order-status-col--side[b-5ycbz2hkhv] {
        flex: 3 1 0;
    }

    .order-status-col--main[b-5ycbz2hkhv] {
        flex: 4 1 0;
    }
}
/* /Pages/Orders/Components/OrderTopDetails.razor.rz.scp.css */
/* OrderTopDetails - the sales order summary card.

   Every selector here hangs off a class this component actually writes. The previous version
   targeted positional utility chains (`.d-flex.flex-column.align-items-center.gap-3 > .mud-card`);
   the markup moved to `gap-2` at some point and the whole stylesheet went inert. */

.order-summary[b-53clxaejc1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.order-summary-actions[b-53clxaejc1] {
    width: 100%;
}

[b-53clxaejc1] .order-summary-actions .mud-button-root {
    border-radius: 8px !important;
    text-transform: none !important;
    font-weight: 600 !important;
}

/* Demote the raised, heavily-shadowed default so the two actions read as a pair. */
[b-53clxaejc1] .order-summary-actions .mud-button-filled-info {
    background: var(--mud-palette-primary) !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease !important;
}

[b-53clxaejc1] .order-summary-actions .mud-button-filled-info:hover {
    background: var(--mud-palette-primary-darken) !important;
}

[b-53clxaejc1] .order-summary-actions .mud-button-root .mud-icon-root {
    font-size: 1.125rem !important;
}

/* ============================================
   Summary card
   ============================================ */
/* `.mud-card` qualifier is deliberate: Order.razor.css styles `::deep .mud-card` with
   !important at the same specificity, so without it the winner is bundle order. */
[b-53clxaejc1] .mud-card.order-summary-card {
    width: 100%;
    min-width: 280px;
    max-width: 450px;
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    background: var(--mud-palette-surface) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* ============================================
   Label / value pairs
   ============================================ */
.order-summary-grid[b-53clxaejc1] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.order-summary-label[b-53clxaejc1] {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.order-summary-value[b-53clxaejc1] {
    color: var(--mud-palette-text-primary);
    min-width: 0;
    overflow-wrap: anywhere;
}

[b-53clxaejc1] .order-summary-value .mud-icon-root {
    font-size: 1.125rem;
    color: var(--mud-palette-primary);
    vertical-align: text-bottom;
    margin-right: 0.25rem;
}

/* ============================================
   Footer meta (who touched it last)
   ============================================ */
.order-summary-meta[b-53clxaejc1] {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

@media (max-width: 768px) {
    /* `.mud-card` qualifier is deliberate: Order.razor.css styles `::deep .mud-card` with
   !important at the same specificity, so without it the winner is bundle order. */
[b-53clxaejc1] .mud-card.order-summary-card {
        max-width: 100%;
    }

    [b-53clxaejc1] .order-summary-actions .mud-button-root {
        flex: 1 1 auto;
        min-width: 140px;
    }
}
/* /Pages/Orders/Components/OrderTotalDetails.razor.rz.scp.css */
/* OrderTotalDetails Component - Polished Visual Styles */

/* ============================================
   Main Container
   ============================================ */
[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 {
    background: var(--mud-palette-surface);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--mud-palette-lines-default);
    margin-top: 1.5rem !important;
}

/* ============================================
   Left Section (Payment, Shipping, Status Info)
   ============================================ */
[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 > .pt-5:first-child {
    background: var(--mud-palette-background-gray);
    padding: 1.25rem !important;
    border-radius: 10px;
    border-left: 4px solid var(--mud-palette-primary);
    min-width: 200px;
}

[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 > .pt-5:first-child .row {
    padding: 0.5rem 0;
    transition: background-color 0.2s ease;
}

[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 > .pt-5:first-child .row:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
    border-radius: 6px;
}

[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 > .pt-5:first-child .mud-typography {
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
}

[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 > .pt-5:first-child strong {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

/* ============================================
   Right Section (Pricing Totals Table)
   ============================================ */
[b-spfjl53vhx] #order-pricing-totals,
[b-spfjl53vhx] [id*="OrderPricingTotals"] {
    padding: 0 !important;
}

/* ============================================
   Pricing Table
   ============================================ */
[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table {
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    min-width: 350px;
}

[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table-container {
    border-radius: 10px !important;
}

/* Table Header */
[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table thead th {
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em;
    padding: 0.875rem 1rem !important;
    border-bottom: none !important;
}

[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table thead th:first-child {
    border-top-left-radius: 10px !important;
}

[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table thead th:last-child {
    border-top-right-radius: 10px !important;
}

/* Table Rows */
[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table tbody tr {
    transition: background-color 0.2s ease;
}

[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table tbody tr:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04) !important;
}

[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table tbody td {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

/* Type Column (First Column) */
[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table tbody td:first-child {
    background: var(--mud-palette-background-gray);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* Price Columns */
[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table tbody td:not(:first-child) {
    text-align: right;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.875rem;
}

/* ============================================
   Balance Row Highlight
   ============================================ */
[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table tbody tr:last-child {
    background: rgba(var(--mud-palette-warning-rgb), 0.15) !important;
}

[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table tbody tr:last-child td {
    border-bottom: none !important;
    font-weight: 700 !important;
}

[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table tbody tr:last-child td:first-child {
    background: transparent !important;
    color: var(--mud-palette-warning) !important;
}

[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table tbody tr:last-child td strong {
    color: var(--mud-palette-warning) !important;
    font-size: 1rem;
}

/* ============================================
   Subtotal Row Styling
   ============================================ */
[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table tbody tr:first-child {
    background: var(--mud-palette-success-hover) !important;
}

[b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table tbody tr:first-child td:first-child {
    background: transparent !important;
    color: var(--mud-palette-success) !important;
}

/* ============================================
   Color-Coded Price Values
   ============================================ */
/* Positive Values (Green) */
[b-spfjl53vhx] .pb-text[style*="Success"],
[b-spfjl53vhx] .mud-typography[style*="color: green"],
[b-spfjl53vhx] [style*="color: var(--mud-palette-success)"] {
    color: var(--mud-palette-success) !important;
    font-weight: 600 !important;
}

/* Negative/Warning Values (Red/Orange) */
[b-spfjl53vhx] .pb-text[style*="Error"],
[b-spfjl53vhx] .pb-text[style*="Warning"],
[b-spfjl53vhx] .mud-typography[style*="color: red"],
[b-spfjl53vhx] [style*="color: var(--mud-palette-error)"] {
    color: var(--mud-palette-error) !important;
    font-weight: 600 !important;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 1200px) {
    [b-spfjl53vhx] .d-flex.justify-content-between.mb-3 {
        flex-direction: column;
        gap: 1.5rem;
    }

    [b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table {
        min-width: 100%;
    }
}

@media (max-width: 768px) {
    [b-spfjl53vhx] .d-flex.justify-content-between.mb-3 {
        padding: 1rem;
    }

    [b-spfjl53vhx] .d-flex.justify-content-between.mb-3 > .pt-5:first-child {
        padding: 1rem !important;
    }

    [b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table tbody td {
        padding: 0.625rem 0.75rem !important;
        font-size: 0.8125rem;
    }

    [b-spfjl53vhx] .d-flex.justify-content-between.mb-3 .mud-table thead th {
        padding: 0.75rem 0.75rem !important;
        font-size: 0.7rem !important;
    }
}
/* /Pages/Orders/CreateOrderHeader.razor.rz.scp.css */
.create-order-heading[b-yc57gqtj1u] {
    padding: 12px 0 16px;
}
/* /Pages/Orders/Details/DetailsTimeRecords.razor.rz.scp.css */
/* Hourly rate inputs (adjust, cost, price) must fit three integer digits plus cents ("999.99"): about
   14px padding on each side and 54px of digits, 82px in all (they have no spin buttons). Without a floor
   the auto-sized table squeezed the price column until its value was clipped. The ceiling keeps them
   from taking the room the tech name needs. */
[b-cinlafjnmj] .time-record-rate-input {
    min-width: 6rem;
    max-width: 7rem;
}

/* The date and time pickers have no intrinsic width inside the auto-sized table, so the rate and
   tech floors squeezed them to 0px and only their icons showed. A floor that fits "09/01" or "17:04"
   beside the icon keeps the values readable; the table scrolls sideways inside its card instead. */
[b-cinlafjnmj] .time-record-date-input {
    min-width: 7.5rem;
}

[b-cinlafjnmj] .time-record-time-input {
    min-width: 7rem;
}

/* The tech dropdown has to show a full name, so it gets a floor about twice the rate inputs. */
[b-cinlafjnmj] .time-record-tech {
    min-width: 15rem;
}

/* Tablets: the table scrolls sideways inside its container; a smaller name floor keeps that scroll short. */
@media (max-width: 1200px) {
    [b-cinlafjnmj] .time-record-tech {
        min-width: 11rem;
    }
}
/* /Pages/Orders/Details/EditShipmentItemDetail.razor.rz.scp.css */
/*
 * Scoped styles for the Edit Shipment Item Detail page.
 * Selectors use `.pb-detail-page ::deep .x` because most targets are classes
 * placed on MudBlazor components (MudPaper/MudText/...), whose rendered
 * elements don't carry this component's scope attribute.
 */

.pb-detail-page[b-xuxfbtmzr4] {
    max-width: 1500px;
    margin: 0 auto;
    /* Bottom padding leaves room so the sticky action bar doesn't overlay the
       last content (Time Records buttons) while scrolling. ~= action-bar height. */
    padding: 8px 4px 88px;
    position: relative;
}

/* ---- Header / breadcrumb ---- */
.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-header {
    margin-bottom: 12px;
}

.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-breadcrumb-label {
    color: var(--mud-palette-text-secondary);
}

.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-sep {
    color: var(--mud-palette-text-disabled);
}

.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-desc {
    color: var(--mud-palette-text-secondary);
}

/* Non-compliant banner and the checklist button share a row; the button wraps under the banner
   when there is no room beside it. */
.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-top: 10px;
}

.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-alert {
    flex: 1 1 320px;
}

.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-checklist-action {
    min-height: 44px;
}

/* ---- Cards ---- */
.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-card {
    padding: 16px;
    margin-bottom: 16px;
}

.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-card-title {
    font-weight: 600;
    margin-bottom: 14px;
}

.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-card-warn {
    border-color: var(--mud-palette-warning);
}

/* ---- Fields ---- */
.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-field {
    margin-bottom: 18px;
    width: 100%;
}

.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-field-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-field-pair > * {
    flex: 1 1 200px;
    min-width: 0;
}

.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
    margin-bottom: 18px;
}

.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-meta {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

/* ---- Checklist status ---- */
.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-checklist-status {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- Time tracking ---- */
.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-timer-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* ---- Wide content (grids / time records) scroll on narrow screens ---- */
.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-scroll {
    width: 100%;
    overflow-x: auto;
}

/* ---- Sticky action bar ---- */
.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-top: 8px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.07);
}

.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-actionbar-spacer {
    flex: 1 1 auto;
}
/* /Pages/Orders/Index.razor.rz.scp.css */
.pb-order-grid-soid-header[b-w854qieexx] {
    min-width: 100px;
}

.pb-order-grid-soid-footer[b-w854qieexx] {
    min-width: 100px;
}

/* ============================================
   Bill To / Ship To cells
   ============================================ */
/* The party name used to wrap without limit, so one long account name ("Golfview Condo Association
   c/o Lakes Property Management") pushed a single row past 150px and dragged the whole viewport's
   row rhythm with it. Two lines, then ellipsis; the full name stays on the title attribute. */
/* No `::deep` on these three: the elements are written in this page's own markup, so they carry
   the scope attribute themselves. `::deep` compiles to a descendant selector ([b-x] .foo), which
   needs a scoped *ancestor* - and inside a MudDataGrid CellTemplate there isn't one. */
.grid-party-cell[b-w854qieexx] {
    max-width: 180px;
}

.grid-party-name[b-w854qieexx] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
}

.grid-party-location[b-w854qieexx] {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   Row actions
   ============================================ */
/* Favorite/watch toggles above the add/overflow menus, with two controls per row.
   Quick view is available from the overflow menu at every screen width. */
.grid-row-actions[b-w854qieexx] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
}

.grid-row-actions[b-w854qieexx]  .mud-icon-button {
    padding: 3px;
}

/* The inline group takes part in the grid as if its buttons were direct children. */
.grid-row-actions-inline[b-w854qieexx] {
    display: contents;
}

.grid-row-actions-state[b-w854qieexx] {
    display: none;
}

/* Tablets and phones: the inline buttons fold into the overflow menu (site.css shows the
   .grid-row-actions-compact items there) and the two state glyphs sit beside the trigger. */
@media (max-width: 1279.98px) {
    .grid-row-actions[b-w854qieexx] {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 2px;
    }

    .grid-row-actions-inline[b-w854qieexx] {
        display: none;
    }

    .grid-row-actions-state[b-w854qieexx] {
        display: inline-flex;
        align-items: center;
        gap: 2px;
    }
}

/* ============================================
   Wide-desktop-only columns
   ============================================ */
/* Between the tablet layout (below 1280px, where the column defaults already drop these two) and
   about 1500px the full column set does not fit: at 1366px (iPad Pro landscape) and 1440px the
   grid scrolled sideways, headers wrapped over four lines and Type was off-screen. Ship To mostly
   repeats Bill To, and the date/ship-total column repeats the order date and totals, so they go
   first. Below 1280px the column chooser decides, so an explicit choice there is kept. */
@media (min-width: 1280px) and (max-width: 1499.98px) {
    .orders-grid-wrap[b-w854qieexx]  .orders-col-wide {
        display: none;
    }
}

/* ============================================
   Header row
   ============================================ */
/* Below 1280px the breadcrumb is hidden (site.css), leaving the order count alone on the row;
   keep it off the screen edge and clear of the filter bar. */
.orders-header-meta[b-w854qieexx] {
    margin-left: auto;
    padding: 2px 4px 0;
}
/* /Pages/Orders/Messages/Index.razor.rz.scp.css */
/* Row actions and the preview start at the top of the row, so the edit/delete icons line up with
   the subject instead of floating in the middle of a tall cell. */
.message-templates[b-hcc7o7e851]  td {
    vertical-align: top;
}

.message-template-preview[b-hcc7o7e851] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-width: 14rem;
    overflow-wrap: anywhere;
}

.message-template-full[b-hcc7o7e851] {
    padding: 8px 12px;
    max-width: 60rem;
    overflow-wrap: anywhere;
}
/* /Pages/Orders/NonCompliantOrderDetails.razor.rz.scp.css */
/* Page-local KPI tiles. Visual pattern mirrors Components/Home/HomeSummaryStrip.razor.css
   so non-compliant counts share the home page's at-a-glance urgency language. */

.nc-kpi-strip[b-fsivgsu4no] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

/* Tooltip wrappers are the grid items; stretch them so each tile fills its cell. */
.nc-kpi-strip[b-fsivgsu4no]  .mud-tooltip-root {
    display: block;
}

.nc-kpi-strip[b-fsivgsu4no]  .nc-kpi-tile {
    padding: 12px 14px;
    border-radius: 8px;
    border-left: 4px solid transparent;
    background-color: var(--mud-palette-surface);
}

.nc-kpi-strip[b-fsivgsu4no]  .nc-kpi-tile-label {
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* NC Orders */
.nc-kpi-strip[b-fsivgsu4no]  .nc-kpi-tile--error {
    border-left-color: var(--mud-palette-error);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-error) 6%, transparent) 0%, transparent 60%);
}

/* Tech Assignments */
.nc-kpi-strip[b-fsivgsu4no]  .nc-kpi-tile--primary {
    border-left-color: var(--mud-palette-primary);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-primary) 6%, transparent) 0%, transparent 60%);
}

/* Unique Details */
.nc-kpi-strip[b-fsivgsu4no]  .nc-kpi-tile--warning {
    border-left-color: var(--mud-palette-warning);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-warning) 6%, transparent) 0%, transparent 60%);
}

.nc-kpi-header[b-fsivgsu4no]  .text-muted {
    font-size: 0.875rem;
}

/* Grid density overrides migrated from the page's former inline <style> block. */
.nc-details-grid[b-fsivgsu4no]  .mud-table-cell {
    padding: 4px 8px !important;
}

.nc-details-grid[b-fsivgsu4no]  .mud-table-row {
    height: auto !important;
}

.nc-details-grid[b-fsivgsu4no]  .text-muted {
    font-size: 0.875rem;
}

/* Two lines with an ellipsis; the tooltip-wrapped single line was clipped with no ellipsis. */
.nc-detail-description[b-fsivgsu4no] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    max-width: 250px;
}
/* /Pages/Orders/Order.razor.rz.scp.css */
/* Order Page - Polished Visual Styles */

/* ============================================
   Page-scoped design tokens
   ============================================ */
/* Defined on the .order-root wrapper (a real element in Order.razor) so the tokens
   cascade to all descendants — including ::deep child components — without leaking to
   :global(html/body). Colors alias the MudBlazor palette so they follow light/dark. */
.order-root[b-tlii94biux] {
    --order-card-radius: 12px;
    --order-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --order-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
    --order-text-primary: var(--mud-palette-text-primary);
    --order-text-secondary: var(--mud-palette-text-secondary);
    --order-accent-blue: var(--mud-palette-primary);
    --order-border-color: var(--mud-palette-lines-default);
}

/* MudGrid's spacing is implemented with negative side margins, which poke ~24px past the page
   container and give the whole content area a useless horizontal scrollbar. Clip x only; `clip`
   (unlike `hidden`) does not create a scroll container, so the sticky stack inside keeps tracking
   the layout scrollport. Grid item content is inset by its own padding, so nothing visible is cut. */
.order-page-gutter[b-tlii94biux] {
    overflow-x: clip;
}

/* ============================================
   Sticky header stack (section nav + financial summary)
   ============================================ */
/* The nav and financial summary pin together as one unit (the wrapper is a real element in
   Order.razor). Sticking the wrapper — instead of each child at a hard-coded offset — keeps the
   panel beside or directly below the nav even when the nav wraps to multiple rows. The
   page-background fill hides content scrolling behind the gap between the two cards. */
.order-sticky-stack[b-tlii94biux] {
    position: sticky;
    /* Pin flush to the scrollport and keep the 8px breathing room INSIDE the stack (padding), so
       content can't scroll visibly through a gap above it. */
    top: 0;
    padding-top: 8px;
    z-index: 30;
    background: var(--mud-palette-background);
    /* When the tabs and the summary fit side by side they share one row, so the pinned stack is one
       card tall and leaves more vertical space for order content. When they don't fit, the summary
       wraps onto its own row as before. */
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    /* Flex items' margins don't collapse through the stack, so the cards drop their own bottom
       margins (below) and the spacing moves here, outside the pinned area, where the collapsed card
       margin used to sit. A wrapped stack is therefore no taller than the old stacked layout. */
    margin-bottom: 12px;
}

/* On a shared row the nav absorbs the free space: its large grow factor leaves the summary at its
   natural width. A wrapped summary is alone on its row, so it still stretches to the full width. */
.order-sticky-stack[b-tlii94biux]  .order-section-tabs {
    flex: 1000 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

/* FinancialSummaryPanel.razor.js switches the panel to its compact size when that is what lets it
   fit beside the tabs; when even the compact panel does not fit, it stays full size and wraps. */
.order-sticky-stack[b-tlii94biux]  .financial-summary-panel {
    flex: 1 1 auto;
    margin-bottom: 0;
}

/* Pinned (order-sticky-state.js sets data-stuck once the page scrolls past the header), the stack
   folds into one row: the tabs keep a single line that scrolls sideways and the summary switches to
   its compact size beside them. A wrapped stack was ~158px on a portrait iPad and kept a quarter of
   a landscape screen covered while reading items. At the top of the page it keeps the full layout. */
.order-sticky-stack[data-stuck][b-tlii94biux] {
    flex-wrap: nowrap;
    padding-top: 4px;
    gap: 8px;
}

.order-sticky-stack[data-stuck][b-tlii94biux]  .order-section-tabs {
    flex-wrap: nowrap;
    padding: 3px;
}

.order-sticky-stack[data-stuck][b-tlii94biux]  .section-tab {
    flex: none;
}

.order-sticky-stack[data-stuck][b-tlii94biux]  .section-tab-top {
    margin-inline-start: 0;
}

.order-sticky-stack[data-stuck][b-tlii94biux]  .financial-summary-panel {
    flex: none;
}

/* ============================================
   Page Container & Layout
   ============================================ */
[b-tlii94biux] .order-page-container {
    padding: 1.5rem;
    background: var(--mud-palette-background);
    min-height: 100vh;
}

/* ============================================
   Breadcrumbs Styling
   ============================================ */
/* Tight vertical rhythm above the content: on a landscape tablet the breadcrumb, title and action
   rows pushed the first card ~350px down an 820px screen. */
[b-tlii94biux] .mud-breadcrumbs {
    background: var(--mud-palette-surface);
    padding: 0.5rem 1rem;
    border-radius: var(--order-card-radius);
    box-shadow: var(--order-card-shadow);
    margin-bottom: 0.75rem !important;
}

[b-tlii94biux] .mud-breadcrumbs .mud-breadcrumb-item {
    color: var(--order-text-secondary);
    font-weight: 500;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    max-width: 260px;
}

/* Long account names must not blow up the trail; full text stays on the title attr.
   The ellipsis has to live on an inner block element: text-overflow is ignored on
   the flex container itself, and a flex item only shrinks with min-width: 0. */
[b-tlii94biux] .mud-breadcrumbs .crumb-text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-tlii94biux] .mud-breadcrumbs .mud-breadcrumb-item:hover {
    color: var(--order-accent-blue);
}

[b-tlii94biux] .mud-breadcrumbs .mud-breadcrumb-item--current,
[b-tlii94biux] .mud-breadcrumbs .mud-breadcrumb-item--current:hover {
    color: var(--order-text-primary);
    transition: none;
    cursor: default;
}

/* ============================================
   Page Title Enhancement
   ============================================ */
[b-tlii94biux] .mud-typography-h5 {
    color: var(--order-text-primary);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-bottom: 1.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 3px solid var(--order-accent-blue);
    display: inline-block;
}

/* Header tools (Communications, Chat, Notes, Watch, Add): sentence case like the History and
   Activity buttons beside them, and finger-sized on touch. */
.order-header-tools[b-tlii94biux]  .mud-button-root {
    text-transform: none;
}

@media (pointer: coarse) {
    .order-header-tools[b-tlii94biux]  .mud-button-root {
        min-height: 40px;
    }
}

/* ============================================
   Items toolbar (add/ship, Order/Shipment switch, view toggles)
   ============================================ */
.order-items-toolbar[b-tlii94biux] {
    background: var(--mud-palette-surface);
    padding: 0.75rem 1rem;
    border-radius: var(--order-card-radius);
    box-shadow: var(--order-card-shadow);
}

/* ============================================
   Section Headers (Collapsible Sections)
   ============================================ */
[b-tlii94biux] .pt-5 > div:first-child {
    margin-bottom: 0.75rem;
}

[b-tlii94biux] .pt-5 > div:nth-child(2) {
    color: var(--order-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 0;
}

/* ============================================
   Collapsible Section Containers
   ============================================ */
[b-tlii94biux] .collapse.show,
[b-tlii94biux] .collapse:not(.show) + .collapse.show {
    background: var(--mud-palette-surface);
    padding: 1rem;
    border-radius: var(--order-card-radius);
    box-shadow: var(--order-card-shadow);
    margin-top: 0.5rem;
}

/* ============================================
   MudCard Global Enhancements (Order Page Scope)
   ============================================ */
[b-tlii94biux] .mud-card {
    border-radius: var(--order-card-radius) !important;
    box-shadow: var(--order-card-shadow) !important;
    border: 1px solid var(--order-border-color) !important;
    transition: all 0.3s ease !important;
    overflow: hidden;
}

[b-tlii94biux] .mud-card:hover {
    box-shadow: var(--order-card-shadow-hover) !important;
}

@media (prefers-reduced-motion: no-preference) {
    [b-tlii94biux] .mud-card:hover {
        transform: translateY(-2px);
    }
}

[b-tlii94biux] .mud-card-content {
    padding: 1.25rem !important;
}

/* ============================================
   MudTable Global Enhancements (Order Page Scope)
   ============================================ */
[b-tlii94biux] .mud-table {
    border-radius: var(--order-card-radius) !important;
    overflow: hidden;
    box-shadow: var(--order-card-shadow) !important;
}

[b-tlii94biux] .mud-table-container {
    border-radius: var(--order-card-radius) !important;
}

[b-tlii94biux] .mud-table thead th {
    background: var(--mud-palette-background-gray) !important;
    color: var(--order-text-primary) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em;
    padding: 1rem 0.75rem !important;
    border-bottom: 2px solid var(--order-border-color) !important;
}

[b-tlii94biux] .mud-table tbody tr {
    transition: background-color 0.2s ease;
}

[b-tlii94biux] .mud-table tbody tr:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}

[b-tlii94biux] .mud-table tbody td {
    padding: 0.875rem 0.75rem !important;
    border-bottom: 1px solid var(--order-border-color) !important;
}

[b-tlii94biux] .mud-table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--mud-palette-background-gray) !important;
}

/* ============================================
   MudExpansionPanel Enhancements
   ============================================ */
[b-tlii94biux] .mud-expansion-panels {
    border-radius: var(--order-card-radius) !important;
    overflow: hidden;
    box-shadow: var(--order-card-shadow) !important;
}

[b-tlii94biux] .mud-expansion-panel {
    border-radius: var(--order-card-radius) !important;
    margin-bottom: 0 !important;
}

[b-tlii94biux] .mud-expansion-panel-header {
    padding: 1rem 1.25rem !important;
    background: var(--mud-palette-surface) !important;
    transition: background-color 0.2s ease !important;
}

[b-tlii94biux] .mud-expansion-panel-header:hover {
    background: var(--mud-palette-background-gray) !important;
}

[b-tlii94biux] .mud-expansion-panel-content {
    padding: 1rem 1.25rem !important;
    background: var(--mud-palette-background-gray) !important;
    border-top: 1px solid var(--order-border-color) !important;
}

/* ============================================
   MudAlert Enhancements
   ============================================ */
[b-tlii94biux] .mud-alert {
    border-radius: 10px !important;
    padding: 1rem 1.25rem !important;
}

[b-tlii94biux] .mud-alert-info {
    background: rgba(var(--mud-palette-info-rgb), 0.15) !important;
    border: 1px solid var(--mud-palette-info) !important;
}

/* ============================================
   MudLink Enhancements
   ============================================ */
[b-tlii94biux] .mud-link {
    color: var(--order-accent-blue) !important;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

[b-tlii94biux] .mud-link:hover {
    color: var(--mud-palette-primary) !important;
    text-decoration: underline !important;
}

/* ============================================
   MudChip Enhancements
   ============================================ */
[b-tlii94biux] .mud-chip {
    border-radius: 20px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

@media (prefers-reduced-motion: no-preference) {
    [b-tlii94biux] .mud-chip:hover {
        transform: scale(1.02);
    }
}

/* ============================================
   Button Enhancements
   ============================================ */
[b-tlii94biux] .mud-button-root {
    border-radius: 8px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    transition: all 0.2s ease !important;
}

[b-tlii94biux] .mud-button-root:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

@media (prefers-reduced-motion: no-preference) {
    [b-tlii94biux] .mud-button-root:hover {
        transform: translateY(-1px);
    }
}

[b-tlii94biux] .mud-icon-button {
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

[b-tlii94biux] .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}

/* ============================================
   Text & Typography Enhancements
   ============================================ */
[b-tlii94biux] .mud-typography strong {
    color: var(--order-text-primary);
    font-weight: 600;
}

[b-tlii94biux] .mud-typography-h6 {
    color: var(--order-text-primary) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================
   Form Elements
   ============================================ */
[b-tlii94biux] .mud-input-control {
    margin-bottom: 0.5rem;
}

[b-tlii94biux] .mud-input {
    border-radius: 8px !important;
}

[b-tlii94biux] .mud-select {
    border-radius: 8px !important;
}

/* ============================================
   Dividers
   ============================================ */
[b-tlii94biux] .mud-divider {
    margin: 1rem 0 !important;
    border-color: var(--order-border-color) !important;
}

/* ============================================
   Loading States
   ============================================ */
[b-tlii94biux] .mud-progress-circular {
    color: var(--order-accent-blue) !important;
}

/* ============================================
   Tooltip Enhancements
   ============================================ */
[b-tlii94biux] .mud-tooltip {
    border-radius: 8px !important;
    font-size: 0.8125rem !important;
    padding: 0.5rem 0.75rem !important;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
[b-tlii94biux] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[b-tlii94biux] ::-webkit-scrollbar-track {
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
}

[b-tlii94biux] ::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 4px;
}

[b-tlii94biux] ::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-text-secondary);
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 1200px) {
    [b-tlii94biux] .mud-card {
        margin-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    [b-tlii94biux] .mud-card-content {
        padding: 1rem !important;
    }

    [b-tlii94biux] .mud-table thead th {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.7rem !important;
    }

    [b-tlii94biux] .mud-table tbody td {
        padding: 0.625rem 0.5rem !important;
    }
}

/* ============================================
   Animation Utilities
   ============================================ */
@keyframes fadeIn-b-tlii94biux {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-tlii94biux] .fade-in {
    animation: fadeIn-b-tlii94biux 0.3s ease-out;
}
/* /Pages/Orders/Taxes/TaxCodes.razor.rz.scp.css */
/* Long Avalara descriptions made rows 7-10 lines tall on portrait tablets. Two lines are enough
   to recognise a code; the full text is in the tooltip and on the edit page. */
.tax-code-clamp[b-r6308ht1hx] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-width: 10rem;
}
/* /Pages/People/Edit.razor.rz.scp.css */
/* Areas & Roles master-detail: searchable area list (master) beside a role checkbox grid (detail),
   wrapped as one bordered card so the two panes read as a single control instead of the old
   disconnected summary-card + two floating dropdowns. */
.people-access[b-ggdgnuzrds] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.people-access__areas[b-ggdgnuzrds] {
    flex: 1 1 240px;
    min-width: 220px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

.people-access__area-list[b-ggdgnuzrds] {
    overflow-y: auto;
    max-height: 340px;
}

/* Each area is a full-width button; the active one gets a primary rail + tint. */
.people-access__area[b-ggdgnuzrds] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    border-left: 3px solid transparent;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: var(--mud-palette-text-primary);
    transition: background-color 0.12s ease;
}

.people-access__area:hover[b-ggdgnuzrds] {
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
}

.people-access__area--active[b-ggdgnuzrds] {
    background: rgba(var(--mud-palette-primary-rgb), 0.10);
    border-left-color: var(--mud-palette-primary);
    font-weight: 600;
}

.people-access__area-name[b-ggdgnuzrds] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.people-access__area-muted[b-ggdgnuzrds] {
    color: var(--mud-palette-text-secondary);
}

/* Assigned-role count pill. */
.people-access__count[b-ggdgnuzrds] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.people-access__roles[b-ggdgnuzrds] {
    flex: 2 1 340px;
    min-width: 280px;
}

/* Roles wrap into as many columns as fit so long role sets stay compact. */
.people-access__roles-grid[b-ggdgnuzrds] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.15rem 0.75rem;
}

.people-access__role[b-ggdgnuzrds] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Stack the panes on narrow screens. */
@media (max-width: 900px) {
    .people-access__areas[b-ggdgnuzrds] {
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }
}
/* /Pages/Resources/Page.razor.rz.scp.css */
/* Resource pages are authored HTML, mostly long lists of document links (often "English |
   Spanish" pairs on one line). On touch screens those were 16px links on 20px lines; give each
   link a 40px tap target and each list row some room. */
.resource-content[b-7w6jocmi5o]  li {
    margin-bottom: 2px;
}

@media (any-pointer: coarse) {
    .resource-content[b-7w6jocmi5o]  li {
        padding: 2px 0;
    }

    .resource-content[b-7w6jocmi5o]  a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 4px;
    }
}
/* /Pages/Schedule/DispatchConsole.razor.rz.scp.css */
/* Beside the board (md and up) the queue scrolls inside its own panel, sized to the visible
   page, instead of growing the page far below the calendar. Stacked on small screens it keeps
   its natural height. */
@media (min-width: 960px) {
    .pb-dispatch-queue-body[b-546sje4uzo] {
        max-height: calc(100dvh - var(--toolbar-header-height) - var(--my-bar-height) - 200px);
        min-height: 300px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Reached through ::deep from the queue body, which this page renders: MudListItem's own
   element does not carry this page's scope attribute. */
.pb-dispatch-queue-body[b-546sje4uzo]  .pb-dispatch-detail-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-left: 4px solid var(--mud-palette-primary);
}

.pb-dispatch-queue-body[b-546sje4uzo]  .pb-dispatch-detail-selected .mud-typography-body2 {
    font-weight: 600;
}

/* Queue toggle: only where the queue stacks above the board (below md). There the queue and its
   filter can start hidden so the board is on the first screen. */
@media (min-width: 960px) {
    .pb-dispatch-queue-head[b-546sje4uzo]  .pb-dispatch-queue-toggle {
        display: none;
    }
}

@media (max-width: 959.98px) {
    .is-hidden-when-stacked[b-546sje4uzo] {
        display: none;
    }
}

/* Queue rows in the ~325px rail: order and account on one line each, cut with an ellipsis
   (full text in the row's tooltip), and a long description meta capped so it cannot squeeze
   them out. */
.pb-dispatch-queue-item-text[b-546sje4uzo] {
    min-width: 0;
}

.pb-dispatch-queue-item-text[b-546sje4uzo]  .mud-typography {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-dispatch-queue-body[b-546sje4uzo]  .pb-dispatch-queue-item-meta {
    flex-shrink: 0;
    max-width: 40%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Pages/Schedule/ExceptionsCenter.razor.rz.scp.css */
.exceptions-center[b-uicdomrr1a] {
    max-width: 1100px;
}
/* /Pages/Schedule/Index.razor.rz.scp.css */
/* The day-view legend is fixed to the bottom of the viewport. It must sit above the fixed My Bar
   (--my-bar-height, 0px when the bar is not shown): at bottom 0 the bar covered it, cutting the
   legend chips in half on tablets and leaving only the word "Legend" on a 12.9" iPad. */
.pb-schedule-day-legend-wrapper[b-4sxhzibflq] {
    bottom: var(--my-bar-height);
}

/* Toolbar on tablets (769-1099px, and landscape touch screens up to 1400px): it wrapped into
   three rows (tech and address filters, then search, then the tech scroll arrows). Now full
   screen, Refresh, the tech filter and the Filters button share the first row with the scroll
   arrows; the address and text filters sit behind the Filters button on a second row. A
   landscape iPad kept both filters open, which cost a whole row of its 820px height.
   Phones keep the stacked layout in scheduler.css. */
@media (min-width: 769px) and (max-width: 1099.98px),
       (min-width: 769px) and (max-width: 1400px) and (pointer: coarse) {
    .pb-schedule-toolbar-actions[b-4sxhzibflq] {
        flex: 1 1 auto;
        flex-wrap: wrap;
    }

    .pb-schedule-toolbar-nav[b-4sxhzibflq] {
        order: 1;
    }

    .pb-schedule-toolbar-filters[b-4sxhzibflq] {
        order: 2;
        flex: 1 1 100%;
    }

    .pb-schedule-toolbar-filters.is-collapsed[b-4sxhzibflq] {
        display: none;
    }

    .pb-schedule-toolbar-actions[b-4sxhzibflq]  .pb-schedule-filters-toggle {
        display: inline-flex !important;
        min-height: 40px;
    }

    .pb-schedule-toolbar-filters[b-4sxhzibflq]  .pb-schedule-address-filter {
        flex: 1 1 260px;
        width: auto;
    }

    .pb-schedule-toolbar-filters[b-4sxhzibflq]  .pb-dropdown-225 {
        flex: 1 1 200px;
    }
}

/* Short screens (landscape tablets): the toolbar and the date row took ~140px above the
   schedule cards. Trim their padding so more of the day is visible. */
@media (max-height: 900px) {
    .pb-schedule-toolbar[b-4sxhzibflq] {
        padding: 4px 0;
        margin-bottom: 4px;
        gap: 8px;
    }

    [b-4sxhzibflq] .rz-scheduler-nav {
        padding: 4px 8px;
        margin-bottom: 4px;
    }

    [b-4sxhzibflq] .rz-scheduler-nav-views .rz-button {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* Phones: the tech filter now sits in the actions row, which must be allowed to wrap. */
@media (max-width: 768px) {
    .pb-schedule-toolbar-actions[b-4sxhzibflq] {
        flex-wrap: wrap;
    }
}

.pb-schedule-nav-caption[b-4sxhzibflq] {
    margin-right: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}
/* /Pages/Search/GlobalSearch.razor.rz.scp.css */
/* The cards and the list are MudBlazor components, which do not carry this page's scope
   attribute, so every rule goes through ::deep from the page's own wrapper element.
   (Without it none of these styles applied and the help text touched the app bar.) */
.global-search-page[b-8qxect82jy] {
    padding-top: 12px;
}

.global-search-page[b-8qxect82jy]  .global-search-card {
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.global-search-page[b-8qxect82jy]  .global-search-input {
    width: 100%;
}

.global-search-page[b-8qxect82jy]  .global-search-results-card {
    padding: 0.5rem;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.global-search-page[b-8qxect82jy]  .global-search-results {
    max-height: 60vh;
    overflow-y: auto;
}

.global-search-prefixes[b-8qxect82jy] {
    margin-top: 16px;
}

/* The result row itself is styled globally in site.css ("Global Search result
   row"), so the toolbar dropdown, the command palette and this page stay in
   sync and the hover tint follows the active theme. */
/* /Pages/Settings/NavMenuTreeEditor.razor.rz.scp.css */
.nav-tree-container[b-jopzbnf7se] {
    max-height: 65vh;
    overflow: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 8px;
    background: var(--mud-palette-background);
}

.nav-tree-list[b-jopzbnf7se] {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.nav-tree-root[b-jopzbnf7se] {
    padding-left: 0;
}

.nav-tree-item[b-jopzbnf7se] {
    margin: 4px 0;
}

.nav-tree-children[b-jopzbnf7se] {
    margin: 4px 0 0 18px;
    padding-left: 12px;
    border-left: 1px dashed var(--mud-palette-lines-default);
}

.nav-tree-children:empty[b-jopzbnf7se] {
    display: none;
}

.nav-tree-row[b-jopzbnf7se] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: var(--mud-palette-surface);
    cursor: pointer;
}

.nav-tree-row:hover[b-jopzbnf7se] {
    background: var(--mud-palette-surface-variant);
}

.nav-tree-row-selected[b-jopzbnf7se] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.nav-tree-row-hidden[b-jopzbnf7se] {
    opacity: 0.55;
}

.nav-tree-title[b-jopzbnf7se] {
    display: flex;
    flex-direction: column;
}

.nav-tree-meta[b-jopzbnf7se] {
    font-size: 0.75rem;
}

.nav-tree-drag[b-jopzbnf7se] {
    cursor: grab;
}

.nav-tree-drag:active[b-jopzbnf7se] {
    cursor: grabbing;
}

.nav-color-presets[b-jopzbnf7se] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.nav-color-swatch[b-jopzbnf7se] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: transparent;
    cursor: pointer;
}

.nav-color-swatch:focus-visible[b-jopzbnf7se] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
/* /Pages/Settings/SystemSettings.razor.rz.scp.css */
/* MudPaper renders its own element, so reach it from the page's wrapper. */
.system-maintenance-tab[b-zdc0puteyq]  .system-maintenance {
    max-width: 900px;
}

/* One row per action: what it does on the left, its button on the right (wraps on phones). */
.system-maintenance-action[b-zdc0puteyq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 12px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.system-maintenance-action:first-of-type[b-zdc0puteyq] {
    margin-top: 8px;
}

.system-maintenance-action > div[b-zdc0puteyq] {
    flex: 1 1 320px;
}
/* /Pages/SmartOrders/CreateSmartOrder.razor.rz.scp.css */
.quick-order-primary[b-wu6o89z0vh] {
    border: 2px solid var(--mud-palette-primary);
}

.quick-order-secondary[b-wu6o89z0vh] {
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-grey);
}
/* /Pages/Support/BugReports.razor.rz.scp.css */
/* Row actions: roomier targets than bare 20px icons, with a gap that keeps the red Delete
   apart from the green Resolve. */
.bug-row-actions[b-4wawr741dq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bug-row-actions[b-4wawr741dq]  .mud-icon-button {
    min-width: 36px;
    min-height: 36px;
}

.bug-row-actions[b-4wawr741dq]  .bug-row-delete {
    margin-left: 8px;
}

@media (any-pointer: coarse) {
    .bug-row-actions[b-4wawr741dq]  .mud-icon-button {
        min-width: 40px;
        min-height: 40px;
    }
}

.bug-reporter[b-4wawr741dq] {
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
/* /Pages/TimeRecords/DayRecordsList.razor.rz.scp.css */
.tr-list[b-5p8nzjssmd] {
    display: flex;
    flex-direction: column;
}

.tr-row[b-5p8nzjssmd] {
    display: grid;
    grid-template-columns: minmax(250px, 300px) 84px minmax(150px, 220px) minmax(0, 1fr) 52px;
    column-gap: 14px;
    align-items: center;
    padding: 4px 8px 4px 12px;
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

/* Category strip in the timeline color. An inset shadow rather than a border, so rows and the
   header keep the same content alignment. */
.tr-row-customer[b-5p8nzjssmd] {
    box-shadow: inset 3px 0 0 var(--mud-palette-info, #2196f3);
}

.tr-row-internal[b-5p8nzjssmd] {
    box-shadow: inset 3px 0 0 var(--mud-palette-text-secondary, #9e9e9e);
}

.tr-row-break[b-5p8nzjssmd] {
    box-shadow: inset 3px 0 0 var(--mud-palette-success, #4caf50);
}

/* Brief highlight on the row a timeline tap scrolled to; visionScrollIntoViewById adds and removes
   the class. */
.tr-row.tr-row-flash[b-5p8nzjssmd] {
    animation: tr-row-flash-b-5p8nzjssmd 1.6s ease-out;
}

@keyframes tr-row-flash-b-5p8nzjssmd {
    0%,
    40% {
        background-color: color-mix(in srgb, var(--mud-palette-primary, #594ae2) 14%, transparent);
    }
    100% {
        background-color: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tr-row.tr-row-flash[b-5p8nzjssmd] {
        animation: none;
        background-color: color-mix(in srgb, var(--mud-palette-primary, #594ae2) 14%, transparent);
    }
}

.tr-head[b-5p8nzjssmd] {
    padding-top: 4px;
    padding-bottom: 8px;
    border-top: none;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
}

.tr-row-locked[b-5p8nzjssmd] {
    background-color: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.03));
}

.tr-time[b-5p8nzjssmd] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tr-pick[b-5p8nzjssmd] {
    width: 116px;
}

.tr-pick[b-5p8nzjssmd]  .mud-input-control {
    min-width: 0;
}

.tr-dash[b-5p8nzjssmd] {
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
}

.tr-static[b-5p8nzjssmd] {
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
}

.tr-total[b-5p8nzjssmd] {
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary, rgba(0, 0, 0, 0.87));
}

.tr-expense[b-5p8nzjssmd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tr-order[b-5p8nzjssmd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-width: 0;
    font-size: 0.82rem;
}

.tr-order-text[b-5p8nzjssmd] {
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
}

/* MudLink renders its own element, which does not carry this component's scope attribute, so
   these rules need ::deep to reach it (without it the id link wrapped onto three lines). */
.tr-order[b-5p8nzjssmd]  .tr-order-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

/* The order/shipment/item/detail id stays on one line; a long one ends in an ellipsis and the
   full text is in the tooltip. */
.tr-order[b-5p8nzjssmd]  .tr-order-id {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.tr-locked-note[b-5p8nzjssmd] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
}

.tr-action[b-5p8nzjssmd] {
    display: flex;
    justify-content: center;
}

/* Delete stays neutral so a full day of rows is not a column of red; it only turns red on hover.
   Nothing is removed until Save, so the quieter button carries no extra risk. */
.tr-action[b-5p8nzjssmd]  .mud-icon-button:hover {
    color: var(--mud-palette-error, #f44336);
}

@media (any-pointer: coarse) {
    .tr-action[b-5p8nzjssmd]  .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}

.tr-empty[b-5p8nzjssmd] {
    display: flex;
    align-items: center;
    padding: 16px 8px;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.tr-between[b-5p8nzjssmd] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 2px 8px;
    padding: 2px 10px;
    font-size: 0.76rem;
    border-left: 3px solid transparent;
}

.tr-between-gap[b-5p8nzjssmd] {
    color: var(--mud-palette-warning-darken, #c77700);
    border-left-color: var(--mud-palette-warning, #ff9800);
}

.tr-between-overlap[b-5p8nzjssmd] {
    color: var(--mud-palette-error, #f44336);
    border-left-color: var(--mud-palette-error, #f44336);
}

.tr-action-bar[b-5p8nzjssmd] {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    background-color: var(--mud-palette-surface, #fff);
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
}

.tr-action-bar-right[b-5p8nzjssmd] {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* /Pages/TimeRecords/Edit.razor.rz.scp.css */
.tr-day-header[b-lrymk8k7vh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.tr-day-nav[b-lrymk8k7vh] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tr-day-picker[b-lrymk8k7vh] {
    flex: 1 1 auto;
    min-width: 220px;
    max-width: 340px;
}

.tr-day-meta[b-lrymk8k7vh] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.tr-day-name[b-lrymk8k7vh] {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary, rgba(0, 0, 0, 0.87));
}

.tr-day-date[b-lrymk8k7vh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
}
/* /Pages/TimeRecords/Index.razor.rz.scp.css */
/* Day cells: TimeRecordDayCell's link fills the cell as the tap target, so the cell drops the
   table's padding. !important matches the Tailwind table utilities this rule overrides. */
.tw-time-page[b-nbnj0irazg]  td.pb-time-day-cell {
    padding: 2px !important;
}
/* /Pages/TimeRecords/TimeRecordDayCell.razor.rz.scp.css */
.pb-time-day-link[b-5u56kfcoe6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 44px;
    padding: 0 4px;
    border-radius: 6px;
    text-decoration: none;
}

.pb-time-day-link:hover[b-5u56kfcoe6],
.pb-time-day-link:focus-visible[b-5u56kfcoe6] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

.pb-time-day-link:focus-visible[b-5u56kfcoe6] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.pb-time-day-empty[b-5u56kfcoe6] {
    color: var(--mud-palette-text-secondary);
}

.pb-time-day-link:hover .pb-time-day-empty[b-5u56kfcoe6],
.pb-time-day-link:focus-visible .pb-time-day-empty[b-5u56kfcoe6] {
    color: var(--mud-palette-primary);
}
/* /Pages/TimeRecords/TimeRecordDaySummary.razor.rz.scp.css */
.tr-summary[b-in0tm8wlfp] {
    margin: 0.5rem 0 1rem;
}

.tr-stat-grid[b-in0tm8wlfp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

/* Each category card carries its timeline color as a left strip, so the cards double as the bar's
   legend while the numbers stay in the readable primary text color. The strip is drawn inside the
   padding so card text lines up whether or not a card has one. */
.tr-stat[b-in0tm8wlfp] {
    --tr-accent: transparent;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
}

.tr-stat[b-in0tm8wlfp]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--tr-accent);
}

.tr-accent-customer[b-in0tm8wlfp] {
    --tr-accent: var(--mud-palette-info, #2196f3);
}

.tr-accent-internal[b-in0tm8wlfp] {
    --tr-accent: var(--mud-palette-text-secondary, #9e9e9e);
}

.tr-accent-break[b-in0tm8wlfp] {
    --tr-accent: var(--mud-palette-success, #4caf50);
}

.tr-accent-gap[b-in0tm8wlfp] {
    --tr-accent: var(--mud-palette-warning, #ff9800);
}

.tr-stat-label[b-in0tm8wlfp] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
}

.tr-stat-value[b-in0tm8wlfp] {
    font-size: 1.25rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary, rgba(0, 0, 0, 0.87));
}

.tr-stat-zero[b-in0tm8wlfp] {
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
}

.tr-stat-sub[b-in0tm8wlfp] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
}

/* Only a real gap turns its card into a warning. */
.tr-stat-warn[b-in0tm8wlfp] {
    border-color: var(--mud-palette-warning, #ff9800);
    background-color: color-mix(in srgb, var(--mud-palette-warning, #ff9800) 10%, transparent);
}

.tr-timeline[b-in0tm8wlfp] {
    position: relative;
    height: 16px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    background-color: var(--mud-palette-surface, #fff);
}

.tr-seg[b-in0tm8wlfp] {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    appearance: none;
}

/* A 1px surface-colored seam on each block's right edge keeps touching segments of the same
   category from merging into one block. */
.tr-seg:not(.tr-seg-gap)[b-in0tm8wlfp] {
    box-shadow: inset -1px 0 0 var(--mud-palette-surface, #fff);
}

.tr-seg:hover[b-in0tm8wlfp] {
    filter: brightness(1.12);
}

.tr-seg:focus-visible[b-in0tm8wlfp] {
    z-index: 1;
    outline: 2px solid var(--mud-palette-primary, #594ae2);
    outline-offset: -2px;
}

.tr-seg-locked[b-in0tm8wlfp] {
    opacity: 0.55;
}

.tr-cat-customer[b-in0tm8wlfp] {
    background-color: var(--mud-palette-info, #2196f3);
}

.tr-cat-internal[b-in0tm8wlfp] {
    background-color: var(--mud-palette-text-secondary, #9e9e9e);
}

.tr-cat-break[b-in0tm8wlfp] {
    background-color: var(--mud-palette-success, #4caf50);
}

.tr-seg-gap[b-in0tm8wlfp] {
    background-image: repeating-linear-gradient(
        45deg,
        var(--mud-palette-warning, #ff9800),
        var(--mud-palette-warning, #ff9800) 3px,
        transparent 3px,
        transparent 6px
    );
}

/* Start and end sit at the edges through flex; hour marks are placed absolutely at their percent. */
.tr-timeline-axis[b-in0tm8wlfp] {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
}

.tr-tick[b-in0tm8wlfp] {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
}

.tr-tick[b-in0tm8wlfp]::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 1px;
    height: 3px;
    background-color: var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.tr-legend[b-in0tm8wlfp] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
}

.tr-legend-item[b-in0tm8wlfp] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tr-dot[b-in0tm8wlfp] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* A taller bar gives fingers room to tap a segment. A very short segment also gets an invisible
   28px tap area centered on it and drawn above its wider neighbours, so a finger can still reach
   it; the visible block keeps its true width. */
@media (any-pointer: coarse) {
    .tr-timeline[b-in0tm8wlfp] {
        height: 32px;
    }

    .tr-seg-narrow[b-in0tm8wlfp] {
        z-index: 1;
    }

    .tr-seg-narrow[b-in0tm8wlfp]::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 28px;
        transform: translateX(-50%);
    }
}