@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.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/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;
    transition: right 0.25s ease;
    /* 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;
}

.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-related-input-header[b-3tt8wnaeko] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pb-chat-drawer-related-input[b-3tt8wnaeko]  .pb-chat-related-type-chips,
.pb-chat-drawer-related-input[b-3tt8wnaeko]  .pb-chat-related-quickbar {
    flex-wrap: wrap;
}

.pb-chat-drawer-related-input[b-3tt8wnaeko]  .pb-chat-related-section-title {
    margin-top: 4px;
    color: var(--pb-chat-text-muted);
}

.pb-chat-drawer-related-input[b-3tt8wnaeko]  .pb-chat-related-pill {
    border-radius: 999px;
    text-transform: none;
    padding: 2px 10px;
    min-height: 24px;
    font-size: 0.7rem;
}

.pb-chat-drawer-related-input[b-3tt8wnaeko]  .pb-chat-related-pill.is-active {
    border-color: var(--pb-chat-primary);
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-primary);
}

.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-related-result[b-3tt8wnaeko] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 2px;
}

.pb-chat-related-result-main[b-3tt8wnaeko] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--pb-chat-text);
}

.pb-chat-related-result-subtitle[b-3tt8wnaeko] {
    font-size: 0.75rem;
    color: var(--pb-chat-text-muted);
}

.pb-chat-related-result-meta[b-3tt8wnaeko] {
    font-size: 0.7rem;
    color: var(--pb-chat-text-faint);
}

.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);
}
/* /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] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    max-height: 100%;
    padding: 8px 4px;
}

.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;
}

.pb-chat-drawer-day-separator[b-oxdia6s4u6] {
    position: sticky;
    top: 0;
    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);
}

: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;
}

/* 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:focus-within .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:focus-within .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: show actions by default since hover is not available */
@media (hover: none) {
    .pb-chat-drawer-message-actions[b-oxdia6s4u6] {
        opacity: 0.7;
        pointer-events: auto;
    }

    .pb-chat-drawer-message:active .pb-chat-drawer-message-actions[b-oxdia6s4u6] {
        opacity: 1;
    }

    /* Ensure touch-friendly tap targets (min 44px) */
    .pb-chat-drawer-message-actions[b-oxdia6s4u6]  .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}

/* 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-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/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;
}

@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;
    padding: 5px 12px;
    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/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;
}

.order-selector-dialog[b-hbtofyunx3] {
    width: min(1100px, 100%);
    max-height: 90vh;
    overflow-y: auto;
}
/* /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-first-attempt-visible[b-nmfi2g4yie],
.components-reconnect-repeated-attempt-visible[b-nmfi2g4yie],
.components-reconnect-failed-visible[b-nmfi2g4yie],
.components-pause-visible[b-nmfi2g4yie],
.components-resume-failed-visible[b-nmfi2g4yie],
.components-rejoining-animation[b-nmfi2g4yie] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-nmfi2g4yie] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-nmfi2g4yie] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-nmfi2g4yie] {
        background-color: #6b9ed2;
    }

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/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/Search/PbGlobalSearch.razor.rz.scp.css */
.global-search-item[b-wnu5j3y2f2] {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.global-search-item:hover[b-wnu5j3y2f2] {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Popover highlight styles are in site.css (global-search-popover)
   because MudBlazor renders the popover outside this component's DOM tree,
   making scoped CSS ineffective. */
/* /Components/Search/PbGlobalSearchModal.razor.rz.scp.css */
.global-search-item[b-oaegkapqnw] {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.global-search-item:hover[b-oaegkapqnw] {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Popover highlight styles are in site.css (global-search-popover)
   because MudBlazor renders the popover outside this component's DOM tree,
   making scoped CSS ineffective. */
/* /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/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;
}
/* /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/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/Index.razor.rz.scp.css */
.apm-action-bar[b-n32az8we9f] {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 0.75rem;
    padding: 0.5rem 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);
}
/* /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/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] {
    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);
}

@media (max-width: 1200px) {
    .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);
    }
}

@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 not stacked here — it stays a desktop / drawer feature. */
    .pb-chat-shell[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;
}

.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);
}

.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: 12px;
    margin-top: 12px;
}

/* 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-header[b-eow7pliyyb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pb-chat-related-input[b-eow7pliyyb]  .pb-chat-related-type-chips,
.pb-chat-related-input[b-eow7pliyyb]  .pb-chat-related-quickbar {
    flex-wrap: wrap;
}

.pb-chat-related-input[b-eow7pliyyb]  .pb-chat-related-section-title {
    margin-top: 4px;
    color: var(--pb-chat-text-muted);
}

.pb-chat-related-input[b-eow7pliyyb]  .pb-chat-related-pill {
    border-radius: 999px;
    text-transform: none;
    padding: 2px 10px;
    min-height: 24px;
    font-size: 0.7rem;
}

.pb-chat-related-input[b-eow7pliyyb]  .pb-chat-related-pill.is-active {
    border-color: var(--pb-chat-primary);
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-primary);
}

.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-result[b-eow7pliyyb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 2px;
}

.pb-chat-related-result-main[b-eow7pliyyb] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--pb-chat-text);
}

.pb-chat-related-result-subtitle[b-eow7pliyyb] {
    font-size: 0.75rem;
    color: var(--pb-chat-text-muted);
}

.pb-chat-related-result-meta[b-eow7pliyyb] {
    font-size: 0.7rem;
    color: var(--pb-chat-text-faint);
}

.pb-chat-related-input-fields[b-eow7pliyyb] {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.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;
}

.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;
    }

    .pb-chat-related-input-fields[b-eow7pliyyb] {
        grid-template-columns: 1fr;
    }
}

/* Ensure touch-friendly tap targets on small screens */
@media (max-width: 600px) {
    .pb-chat-composer-actions[b-eow7pliyyb]  .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}
/* /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: 12px;
    padding-bottom: 12px;
    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;
}

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

.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] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    padding: 8px 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;
}

@keyframes pb-fab-pop-in-b-y1srs011uv {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.pb-chat-day-separator[b-y1srs011uv] {
    position: sticky;
    top: 0;
    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;
    animation: pb-message-fade-in-b-y1srs011uv 0.15s ease-out;
    transition: background 0.1s ease, border-color 0.1s ease;
}

.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);
}

: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;
}

/* 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:focus-within .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:focus-within .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-meta[b-y1srs011uv]  .pb-chat-message-pin {
    color: var(--pb-chat-warning);
}

.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 DON'T show the floating action bar on every message.
   Doing that overlapped neighbouring messages (each bar is absolutely positioned above its
   message and wider than short messages). On touch, message actions are reached via long-press
   (the context menu); the bar only surfaces for the message currently being interacted with. */
@media (hover: none) {
    .pb-chat-message-actions[b-y1srs011uv] {
        opacity: 0;
        pointer-events: none;
    }

    .pb-chat-message:active .pb-chat-message-actions[b-y1srs011uv],
    .pb-chat-message:focus-within .pb-chat-message-actions[b-y1srs011uv] {
        opacity: 1;
        pointer-events: auto;
    }

    /* Ensure touch-friendly tap targets (min 44px) */
    .pb-chat-message-actions[b-y1srs011uv]  .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pb-chat-message[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;
    gap: 6px;
    margin-bottom: 12px;
}

.pb-chat-channel-filters[b-y2wokb3h51]  .pb-chat-filter-button {
    font-size: 0.75rem;
    padding: 5px 12px;
    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/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/EmailHistoryData.razor.rz.scp.css */
.email-toolbar[b-4kmsweqb54] {
    align-items: flex-end;
    gap: 12px;
    padding: 8px 0 6px;
}

.email-toolbar .mud-grid-item[b-4kmsweqb54] {
    display: flex;
    align-items: flex-end;
}

.email-toolbar .mud-input-control[b-4kmsweqb54] {
    margin: 0;
}

.email-search-input[b-4kmsweqb54] {
    margin-top: 0;
    width: 100%;
}

.email-refresh-button[b-4kmsweqb54] {
    height: 44px;
}

@media (min-width: 960px) {
    .email-toolbar .email-type[b-4kmsweqb54] {
        flex: 0 0 210px;
        max-width: 220px;
    }

    .email-toolbar .email-status[b-4kmsweqb54] {
        flex: 0 0 180px;
        max-width: 200px;
    }

    .email-toolbar .email-search[b-4kmsweqb54] {
        flex: 1 1 360px;
        min-width: 320px;
    }

    .email-toolbar .email-refresh[b-4kmsweqb54] {
        flex: 0 0 150px;
        justify-content: flex-end;
    }
}
/* /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/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;
}
/* /Pages/Inventory/Po/PurchaseOrderTopDetails.razor.rz.scp.css */
.order-top-type[b-uw36biyyme] {
    font-size: 16px;
}
/* /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;
}
/* /Pages/Inventory/Transfer/TransferOrderTopDetails.razor.rz.scp.css */
.order-top-type[b-yz28t2ra22] {
    font-size: 16px;
}
/* /Pages/Logs/AuditOperations.razor.rz.scp.css */
:deep(.audit-timeline-drawer)[b-gwkpuu94dz] {
    width: 420px;
    max-width: 100vw;
    z-index: 1400;
}

:deep(.audit-timeline-drawer .mud-drawer-content)[b-gwkpuu94dz] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

:deep(.audit-timeline-content)[b-gwkpuu94dz] {
    flex: 1;
    overflow: auto;
    padding-bottom: 16px;
}

:deep(.audit-timeline-item)[b-gwkpuu94dz] {
    width: 100%;
    padding: 8px 4px;
}
/* /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;
}

.order-tax-exempt[b-sh9kw4a609] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.375rem 0;
}

.order-tax-exempt input[type="checkbox"][b-sh9kw4a609] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    accent-color: var(--mud-palette-primary);
    cursor: not-allowed;
}

/* ============================================
   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;
    }
}
/* /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)
   ============================================ */
.order-quick-links[b-5ycbz2hkhv] {
    width: 100%;
}

.order-quick-links-caption[b-5ycbz2hkhv] {
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
    display: block;
}

/* 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;
}
/* /Pages/Orders/Components/OrderTopDetails.razor.rz.scp.css */
/* OrderTopDetails Component - Polished Visual Styles */

/* ============================================
   Original Styles (preserved)
   ============================================ */
.order-top-type[b-53clxaejc1] {
    font-size: 16px;
}

/* ============================================
   Main Container
   ============================================ */
[b-53clxaejc1] #order-top-details,
[b-53clxaejc1] [id*="OrderTopDetails"] {
    padding: 0;
}

[b-53clxaejc1] .d-flex.flex-column.align-items-center.gap-2 {
    gap: 0.75rem !important;
}

/* ============================================
   Action Buttons Row
   ============================================ */
[b-53clxaejc1] .d-flex.gap-2 {
    gap: 0.75rem !important;
}

/* Send Status Update Button — flat tokenized (demoted from the raised, heavily-shadowed style).
   Target the Info button by its MudBlazor colour class rather than DOM position: the Status History
   and Activity buttons render conditionally, so a positional selector could paint the wrong one
   (e.g. the green Activity button) when Status History is hidden. */
[b-53clxaejc1] .d-flex.gap-2 .mud-button-filled-info {
    background: var(--mud-palette-primary) !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease !important;
}

[b-53clxaejc1] .d-flex.gap-2 .mud-button-filled-info:hover {
    background: var(--mud-palette-primary-darken) !important;
}

/* Button Icons */
[b-53clxaejc1] .d-flex.gap-2 .mud-button-root .mud-icon {
    font-size: 1.125rem !important;
    margin-right: 0.375rem !important;
}

/* ============================================
   Order Info Card
   ============================================ */
[b-53clxaejc1] .d-flex.flex-column.align-items-center.gap-3 > .mud-card {
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
    background: var(--mud-palette-surface) !important;
    min-width: 300px;
    max-width: 450px;
}

[b-53clxaejc1] .d-flex.flex-column.align-items-center.gap-3 > .mud-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-2px);
}

/* Card Content */
[b-53clxaejc1] .d-flex.flex-column.align-items-center.gap-3 > .mud-card .text-center {
    padding: 0.25rem 0;
}

/* Order ID Link */
[b-53clxaejc1] .d-flex.flex-column.align-items-center.gap-3 > .mud-card .mud-link {
    color: var(--mud-palette-primary) !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

[b-53clxaejc1] .d-flex.flex-column.align-items-center.gap-3 > .mud-card .mud-link:hover {
    color: var(--mud-palette-primary) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
}

/* Strong Labels */
[b-53clxaejc1] .d-flex.flex-column.align-items-center.gap-3 > .mud-card strong {
    color: var(--mud-palette-text-secondary) !important;
    font-weight: 600 !important;
}

/* Order Type Icon */
[b-53clxaejc1] .d-flex.flex-column.align-items-center.gap-3 > .mud-card .mud-icon {
    color: var(--mud-palette-primary) !important;
    font-size: 1.125rem !important;
    vertical-align: middle !important;
}

/* ============================================
   Meta Information (Update Date, Updated By)
   ============================================ */
[b-53clxaejc1] .d-flex.flex-column.align-items-center.gap-3 > .mud-card div[style*="font-size: 0.85rem"] {
    color: var(--mud-palette-text-secondary) !important;
    font-size: 0.8125rem !important;
    padding: 0.5rem 0 0 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 0.5rem;
}

[b-53clxaejc1] .d-flex.flex-column.align-items-center.gap-3 > .mud-card div[style*="font-size: 0.85rem"] strong {
    color: var(--mud-palette-text-secondary) !important;
}

/* ============================================
   APM Contract Link Highlight
   ============================================ */
[b-53clxaejc1] .d-flex.flex-column.align-items-center.gap-3 > .mud-card .mud-link[href*="apm"],
[b-53clxaejc1] .d-flex.flex-column.align-items-center.gap-3 > .mud-card .mud-link[href*="Apm"] {
    background: rgba(var(--mud-palette-warning-rgb), 0.15);
    color: var(--mud-palette-warning) !important;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-weight: 600 !important;
}

[b-53clxaejc1] .d-flex.flex-column.align-items-center.gap-3 > .mud-card .mud-link[href*="apm"]:hover,
[b-53clxaejc1] .d-flex.flex-column.align-items-center.gap-3 > .mud-card .mud-link[href*="Apm"]:hover {
    background: rgba(var(--mud-palette-warning-rgb), 0.15);
}

/* ============================================
   Order Type Badge
   ============================================ */
[b-53clxaejc1] .d-flex.flex-column.align-items-center.gap-3 > .mud-card .mud-icon + span {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 768px) {
    [b-53clxaejc1] .d-flex.flex-column.align-items-center.gap-3 > .mud-card {
        min-width: 100%;
        max-width: 100%;
    }

    [b-53clxaejc1] .d-flex.gap-2 {
        flex-wrap: wrap;
        justify-content: center;
    }

    [b-53clxaejc1] .d-flex.gap-2 .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/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);
}

.pb-detail-page[b-xuxfbtmzr4]  .pb-detail-alert {
    margin-top: 10px;
}

/* ---- 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;
}
/* /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;
}
/* /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 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);
}

/* ============================================
   Page Container & Layout
   ============================================ */
[b-tlii94biux] .order-page-container {
    padding: 1.5rem;
    background: var(--mud-palette-background);
    min-height: 100vh;
}

/* ============================================
   Breadcrumbs Styling
   ============================================ */
[b-tlii94biux] .mud-breadcrumbs {
    background: var(--mud-palette-surface);
    padding: 0.75rem 1rem;
    border-radius: var(--order-card-radius);
    box-shadow: var(--order-card-shadow);
    margin-bottom: 1.5rem !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.75rem;
    border-bottom: 3px solid var(--order-accent-blue);
    display: inline-block;
}

/* ============================================
   Action Buttons Bar
   ============================================ */
[b-tlii94biux] .mt-5.mb-5.d-flex.justify-content-between {
    background: var(--mud-palette-surface);
    padding: 1rem 1.5rem;
    border-radius: var(--order-card-radius);
    box-shadow: var(--order-card-shadow);
    align-items: center;
}

/* ============================================
   Control Bar (Show/Hide, Expand/Collapse)
   ============================================ */
[b-tlii94biux] .d-flex.align-items-center.gap-3.mt-3.flex-wrap {
    background: var(--mud-palette-surface);
    padding: 1rem 1.5rem;
    border-radius: var(--order-card-radius);
    box-shadow: var(--order-card-shadow);
    margin-bottom: 1rem;
}

/* ============================================
   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/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/Schedule/DispatchConsole.razor.rz.scp.css */
.pb-dispatch-console .pb-dispatch-detail-selected[b-546sje4uzo] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-left: 4px solid var(--mud-palette-primary);
}

.pb-dispatch-console .pb-dispatch-detail-selected .mud-typography-body2[b-546sje4uzo] {
    font-weight: 600;
}

/* /Pages/Search/GlobalSearch.razor.rz.scp.css */
.global-search-card[b-8qxect82jy] {
    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-input[b-8qxect82jy] {
    width: 100%;
}

.global-search-results-card[b-8qxect82jy] {
    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-results[b-8qxect82jy] {
    max-height: 60vh;
    overflow-y: auto;
}

.global-search-results[b-8qxect82jy]  .global-search-item {
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.global-search-results[b-8qxect82jy]  .global-search-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}
/* /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/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/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: 8px 8px;
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.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));
}

.tr-order-link[b-5p8nzjssmd] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.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;
}

.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;
    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;
    margin: 0 16px;
}

.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));
}

.tr-day-total[b-lrymk8k7vh] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}

.tr-day-total-value[b-lrymk8k7vh] {
    font-size: 1.5rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary, rgba(0, 0, 0, 0.87));
}

.tr-day-total-label[b-lrymk8k7vh] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
}
/* /Pages/TimeRecords/Index.razor.rz.scp.css */
/* /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;
}

.tr-stat[b-in0tm8wlfp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
}

.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-warn[b-in0tm8wlfp] {
    border-color: var(--mud-palette-warning, #ff9800);
}

.tr-stat-warn .tr-stat-value[b-in0tm8wlfp] {
    color: var(--mud-palette-warning-darken, #c77700);
}

.tr-cat-customer-text[b-in0tm8wlfp] {
    color: var(--mud-palette-info, #2196f3);
}

.tr-cat-break-text[b-in0tm8wlfp] {
    color: var(--mud-palette-success, #4caf50);
}

.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;
}

.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
    );
}

.tr-timeline-axis[b-in0tm8wlfp] {
    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-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;
}