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

/* /Components/Chat/ChatDrawer.razor.rz.scp.css */
.pb-chat-drawer[b-2shs3a2ibo] {
    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-2shs3a2ibo] {
    right: 0;
}

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

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

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

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

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

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

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

/* Discord-inspired dark mode - richer, deeper colors */
:global(.mud-theme-dark) .pb-chat-drawer[b-2shs3a2ibo] {
    --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-2shs3a2ibo] {
    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-2shs3a2ibo 0.2s ease-out;
}

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

.pb-chat-drawer-thread-header[b-2shs3a2ibo] {
    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-2shs3a2ibo] {
    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-2shs3a2ibo]  .mud-icon-root {
    color: var(--pb-chat-primary);
}

.pb-chat-drawer-thread-root[b-2shs3a2ibo] {
    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-2shs3a2ibo] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.pb-chat-drawer-thread-root .pb-chat-drawer-message-avatar[b-2shs3a2ibo] {
    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-2shs3a2ibo] {
    font-weight: 600;
    color: var(--pb-chat-text);
}

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

.pb-chat-drawer-thread-root .pb-chat-drawer-message-body[b-2shs3a2ibo] {
    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-2shs3a2ibo] {
    background: var(--pb-chat-warning-soft);
    border-radius: 6px;
    padding: 4px 6px;
}

.pb-chat-drawer-thread-root .pb-chat-drawer-message-body[b-2shs3a2ibo]  .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-divider[b-2shs3a2ibo] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--pb-chat-border);
}

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

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

.pb-chat-drawer-thread-reply[b-2shs3a2ibo] {
    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-2shs3a2ibo] {
    margin-top: -4px;
}

.pb-chat-drawer-thread-reply .pb-chat-drawer-message-header[b-2shs3a2ibo] {
    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-2shs3a2ibo] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pb-chat-drawer-thread-reply .pb-chat-drawer-message-avatar[b-2shs3a2ibo] {
    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-2shs3a2ibo] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pb-chat-text);
}

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

.pb-chat-drawer-thread-reply .pb-chat-drawer-message-body[b-2shs3a2ibo] {
    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-2shs3a2ibo] {
    background: var(--pb-chat-warning-soft);
    border-radius: 6px;
    padding: 4px 6px;
}

.pb-chat-drawer-thread-reply .pb-chat-drawer-message-body[b-2shs3a2ibo]  .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-2shs3a2ibo] {
    margin-top: 4px;
    font-size: 0.68rem;
    color: var(--pb-chat-text-faint);
}

.pb-chat-drawer-thread-composer[b-2shs3a2ibo] {
    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-2shs3a2ibo] {
    flex: 1;
    position: relative;
}

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

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

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

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

@media (prefers-reduced-motion: reduce) {
    .pb-chat-drawer-thread-panel[b-2shs3a2ibo] {
        animation: none;
    }
}
/* /Components/Chat/ChatDrawerAlertsTab.razor.rz.scp.css */
.pb-chat-drawer-empty[b-xndfh4jggg] {
    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-xndfh4jggg] {
    font-size: 2rem;
    color: var(--pb-chat-text-faint);
}

.pb-chat-alert-item[b-xndfh4jggg] {
    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-xndfh4jggg] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--pb-chat-text-muted);
}

.pb-chat-alert-pill[b-xndfh4jggg] {
    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-xndfh4jggg] {
    font-weight: 600;
    margin-top: 6px;
}

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

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

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

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

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

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

.pb-chat-channel-filters[b-lbnvo83nli]  .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-lbnvo83nli]  .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-lbnvo83nli]  .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-lbnvo83nli]  .pb-chat-filter-button.is-active:hover {
    background: var(--pb-chat-primary);
    border-color: var(--pb-chat-primary);
}

.pb-chat-filter-count[b-lbnvo83nli] {
    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-lbnvo83nli]  .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-lbnvo83nli] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pb-chat-channel-section-title[b-lbnvo83nli] {
    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-lbnvo83nli] {
    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-lbnvo83nli] {
    color: var(--pb-chat-text);
}

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

.pb-chat-channel-item[b-lbnvo83nli] {
    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-lbnvo83nli] {
    background: var(--pb-chat-surface-hover);
    color: var(--pb-chat-text);
}

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

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

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

/* Discord-style unread indicator pill on left */
.pb-chat-channel-item[b-lbnvo83nli]::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-lbnvo83nli]::before {
    height: 8px;
}

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

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

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

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

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

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

.pb-chat-channel-title[b-lbnvo83nli] {
    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-lbnvo83nli] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

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

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

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

.pb-chat-channel-name[b-lbnvo83nli] {
    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-lbnvo83nli]  .pb-chat-channel-dm-indicator {
    font-size: 0.75rem;
    color: var(--pb-chat-text-faint);
    flex-shrink: 0;
}

.pb-chat-channel-actions[b-lbnvo83nli] {
    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-lbnvo83nli],
.pb-chat-channel-item:focus-within .pb-chat-channel-actions[b-lbnvo83nli] {
    opacity: 1;
    pointer-events: auto;
}

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

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

button.pb-chat-channel-action[b-lbnvo83nli],
span.pb-chat-channel-action[b-lbnvo83nli] {
    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-lbnvo83nli] {
    background: var(--pb-chat-surface-hover);
    color: var(--pb-chat-text);
}

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

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

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

.pb-chat-channel-preview[b-lbnvo83nli] {
    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-lbnvo83nli] {
    font-size: 0.65rem;
    color: var(--pb-chat-text-faint);
    flex-shrink: 0;
    white-space: nowrap;
}

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

.pb-chat-unread-badge[b-lbnvo83nli] {
    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-lbnvo83nli] {
    animation: pb-unread-bump-b-lbnvo83nli 0.35s ease;
}

.pb-chat-mention-badge[b-lbnvo83nli] {
    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-lbnvo83nli {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

:global(.mud-theme-dark) .pb-chat-channel-item:focus-visible[b-lbnvo83nli] {
    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-lbnvo83nli] {
        animation: none;
    }

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

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

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

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

.pb-chat-related-input-header[b-juk37lc170] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

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

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

.pb-chat-drawer-related-input[b-juk37lc170]  .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-juk37lc170]  .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-juk37lc170]  .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-juk37lc170] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 2px;
}

.pb-chat-related-result-main[b-juk37lc170] {
    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-juk37lc170] {
    font-size: 0.75rem;
    color: var(--pb-chat-text-muted);
}

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

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

.pb-chat-drawer-related-preview[b-juk37lc170] {
    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-juk37lc170] {
    color: var(--pb-chat-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.65rem;
}

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

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

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

[b-juk37lc170] .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-juk37lc170] .pb-chat-drawer-mention-item {
    border-radius: 8px;
    cursor: pointer;
    padding: 6px 8px;
}

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

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

.pb-chat-drawer-mention-avatar[b-juk37lc170] {
    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-juk37lc170] .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-juk37lc170] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

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

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

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

[b-juk37lc170] .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-womuu1naas] {
    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-womuu1naas] {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

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

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

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

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

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

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

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

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

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

.pb-chat-channel-add-topic[b-womuu1naas] {
    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-womuu1naas] {
    background: var(--pb-chat-surface-hover);
    border-color: var(--pb-chat-text-muted);
    color: var(--pb-chat-text);
}

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

/* New Messages Banner */
.pb-chat-drawer-new-messages-banner[b-xtw4fq0hng] {
    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-xtw4fq0hng 0.2s ease-out;
}

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

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

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

.pb-chat-drawer-new-messages-jump[b-xtw4fq0hng],
.pb-chat-drawer-new-messages-mark[b-xtw4fq0hng] {
    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-xtw4fq0hng],
.pb-chat-drawer-new-messages-mark:hover[b-xtw4fq0hng] {
    background: rgba(255, 255, 255, 0.35);
}

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

.pb-chat-drawer-messages[b-xtw4fq0hng] {
    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-xtw4fq0hng] {
    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-xtw4fq0hng] {
    font-size: 2rem;
    color: var(--pb-chat-text-faint);
}

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

.pb-chat-drawer-day-separator[b-xtw4fq0hng] {
    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-xtw4fq0hng] {
    flex: 1;
    height: 1px;
    background: var(--pb-chat-border);
    border-radius: 999px;
}

.pb-chat-drawer-day-label[b-xtw4fq0hng] {
    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-xtw4fq0hng] {
    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-xtw4fq0hng 0.2s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pb-chat-new-messages-banner button[b-xtw4fq0hng] {
    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-xtw4fq0hng] {
    background: rgba(255, 255, 255, 0.3);
}

@keyframes pb-banner-slide-down-b-xtw4fq0hng {
    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-xtw4fq0hng] {
    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-xtw4fq0hng 0.3s ease-out;
}

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

.pb-chat-drawer-unread-line[b-xtw4fq0hng] {
    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-xtw4fq0hng]::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-xtw4fq0hng] {
    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-xtw4fq0hng 2s ease-in-out infinite;
}

@keyframes pb-drawer-unread-badge-pulse-b-xtw4fq0hng {
    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-xtw4fq0hng] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pb-chat-drawer-unread-actions button[b-xtw4fq0hng] {
    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-xtw4fq0hng] {
    background: var(--pb-chat-error);
    color: white;
}

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

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

.pb-chat-drawer-message[b-xtw4fq0hng] {
    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-xtw4fq0hng 0.15s ease-out;
    transition: background 0.1s ease, border-color 0.1s ease;
}

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

@keyframes pb-drawer-message-fade-in-b-xtw4fq0hng {
    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-xtw4fq0hng] {
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 0;
}

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

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

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

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

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

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

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

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

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

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

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

.pb-chat-drawer-message-header[b-xtw4fq0hng] {
    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-xtw4fq0hng] {
    display: flex;
    align-items: center;
    gap: 6px;
}

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

.pb-chat-drawer-message-avatar[b-xtw4fq0hng] {
    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-xtw4fq0hng] {
    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-xtw4fq0hng] {
    background: var(--pb-chat-success);
}

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

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

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

/* Discord-style floating action bar */
.pb-chat-drawer-message-actions[b-xtw4fq0hng] {
    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-xtw4fq0hng] {
    display: inline-flex;
    cursor: not-allowed;
}

/* Quick reaction buttons */
.pb-chat-drawer-quick-reactions[b-xtw4fq0hng] {
    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-xtw4fq0hng] {
    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-xtw4fq0hng] {
    background: var(--pb-chat-surface-hover);
    transform: scale(1.15);
}

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

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

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

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

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

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

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

.pb-chat-drawer-message:hover .pb-chat-drawer-message-actions[b-xtw4fq0hng],
.pb-chat-drawer-message:focus-within .pb-chat-drawer-message-actions[b-xtw4fq0hng] {
    opacity: 1;
    pointer-events: auto;
    top: -16px;
}

:global(.pb-chat-drawer.is-compact) .pb-chat-drawer-message:hover .pb-chat-drawer-message-actions[b-xtw4fq0hng],
:global(.pb-chat-drawer.is-compact) .pb-chat-drawer-message:focus-within .pb-chat-drawer-message-actions[b-xtw4fq0hng] {
    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-xtw4fq0hng] {
    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-xtw4fq0hng] {
    opacity: 1;
    pointer-events: auto;
}

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

.pb-chat-drawer-message-body[b-xtw4fq0hng]  .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.is-mention[b-xtw4fq0hng] {
    background: var(--pb-chat-warning-soft);
    border-radius: 8px;
    padding: 4px 6px;
}

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

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

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

.pb-chat-drawer-message-body code[b-xtw4fq0hng] {
    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-xtw4fq0hng] {
    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-xtw4fq0hng] {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.8rem;
}

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

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

.pb-chat-drawer-message-body blockquote[b-xtw4fq0hng] {
    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-xtw4fq0hng],
.pb-chat-drawer-message-body ol[b-xtw4fq0hng] {
    margin: 4px 0;
    padding-left: 20px;
}

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

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

.pb-chat-related-chip[b-xtw4fq0hng] {
    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-xtw4fq0hng]  .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-xtw4fq0hng],
.pb-chat-related-chip:focus-visible[b-xtw4fq0hng] {
    background: var(--pb-chat-surface-subtle);
    border-color: var(--pb-chat-border);
}

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

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

.pb-chat-drawer-reaction-chip[b-xtw4fq0hng] {
    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-xtw4fq0hng] {
    border-color: var(--pb-chat-primary);
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-primary);
}

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

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

.pb-chat-drawer-message-edited[b-xtw4fq0hng] {
    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-xtw4fq0hng] {
    background: var(--pb-chat-surface-hover);
    color: var(--pb-chat-text-muted);
}

/* Enhanced typing indicator with avatars */
.pb-chat-drawer-typing[b-xtw4fq0hng] {
    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-xtw4fq0hng] {
    display: flex;
    align-items: center;
}

.pb-chat-drawer-typing-avatar[b-xtw4fq0hng] {
    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-xtw4fq0hng] {
    margin-left: 0;
}

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

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

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

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

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

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

@keyframes pb-typing-bounce-b-xtw4fq0hng {
    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-xtw4fq0hng] {
        opacity: 0.7;
        pointer-events: auto;
    }

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

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

/* Thread summary button */
.pb-chat-drawer-thread-summary[b-xtw4fq0hng] {
    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-xtw4fq0hng] {
    background: var(--pb-chat-surface-hover);
    border-color: var(--pb-chat-primary);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.pb-edit-history-header[b-j93zybrqzi] {
    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-j93zybrqzi] {
    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-j93zybrqzi] {
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

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

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

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

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

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

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

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

:global(.mud-theme-dark) .pb-edit-history-label[b-j93zybrqzi] {
    background: rgba(var(--mud-palette-primary-rgb), 0.2);
}
/* /Components/Chat/ChatEmojiPicker.razor.rz.scp.css */
.pb-emoji-picker[b-f3xjxy11vi] {
    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-f3xjxy11vi] {
    padding: 10px 12px 6px 12px;
    border-bottom: 1px solid var(--pb-chat-border, var(--mud-palette-lines-default, #e0e0e0));
}

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

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

.pb-emoji-picker-categories[b-f3xjxy11vi] {
    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-f3xjxy11vi]::-webkit-scrollbar {
    display: none;
}

.pb-emoji-category-btn[b-f3xjxy11vi] {
    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-f3xjxy11vi] {
    background: var(--pb-chat-surface-hover, rgba(0, 0, 0, 0.06));
    transform: scale(1.1);
}

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

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

.pb-emoji-category-label[b-f3xjxy11vi] {
    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-f3xjxy11vi] {
    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-f3xjxy11vi] {
    background: var(--pb-chat-surface-hover, rgba(0, 0, 0, 0.08));
    transform: scale(1.2);
}

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

.pb-emoji-picker-footer[b-f3xjxy11vi] {
    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-f3xjxy11vi] {
    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-f3xjxy11vi] {
        width: 280px;
    }

    .pb-emoji-btn[b-f3xjxy11vi] {
        width: 32px;
        height: 32px;
        font-size: 1.2rem;
    }
}
/* /Components/Common/CollapsibleFormSection.razor.rz.scp.css */
.collapsible-form-section .collapsible-header[b-yaoexfv30m] {
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.collapsible-form-section .collapsible-header:hover[b-yaoexfv30m] {
    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-yaoexfv30m] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

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

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

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

@keyframes sectionFadeIn-b-yaoexfv30m {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Common/EmptyState.razor.rz.scp.css */
/* EmptyState - Animated icon + subtle gradient background */

.empty-state[b-rdnqty3y04] {
    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-rdnqty3y04 0.4s ease-out;
}

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

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

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

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

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

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

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

/* Search focus ring */
[b-wcaie6cayq] .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-wcaie6cayq] {
    font-weight: 500;
    animation: chipPop-b-wcaie6cayq 0.25s ease-out;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[b-opltxdhai2] .quick-edit-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
}
/* /Components/FloatingTimer.razor.rz.scp.css */
.floating-timer-container[b-fzt6n1usfr] {
    position: fixed;
    bottom: var(--floating-timer-bottom, 20px);
    right: 20px;
    z-index: 1400;
    animation: slideInUp-b-fzt6n1usfr 0.3s ease-out;
}

.floating-timer-hidden-toggle[b-fzt6n1usfr] {
    position: fixed;
    bottom: var(--floating-timer-bottom, 20px);
    right: 20px;
    z-index: 1400;
}

.floating-timer[b-fzt6n1usfr] {
    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-fzt6n1usfr] {
    max-width: 200px;
}

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

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

    .floating-timer-hidden-toggle[b-fzt6n1usfr] {
        bottom: max(70px, var(--floating-timer-bottom, 20px)); /* Above mobile navigation */
        right: 10px;
    }
    
    .floating-timer[b-fzt6n1usfr] {
        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-f74hsf84h2] {
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

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

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

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

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

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

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

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

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

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

.activity-digest-timeline[b-f74hsf84h2]::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-f74hsf84h2] {
    position: relative;
    padding: 8px 0 8px 12px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

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

/* Timeline dot */
.activity-digest-timeline-dot[b-f74hsf84h2] {
    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-f74hsf84h2] {
    background: var(--mud-palette-primary);
}

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

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

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

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

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

/* Dark mode adjustments */
:global(.mud-theme-dark) .activity-digest-card:hover[b-f74hsf84h2] {
    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-geghmpd33p] {
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

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

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

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

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

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

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

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

.priority-group[b-062bv0hst5] {
    margin-bottom: 16px;
}

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

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

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

[b-062bv0hst5] .recommendation-panels {
    margin-top: 8px;
}

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

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

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

.detail-action-row[b-062bv0hst5] {
    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-062bv0hst5] {
    border-bottom: none;
}
/* /Components/Home/HomeOrderSelectorDialog.razor.rz.scp.css */
.order-selector-backdrop[b-dczhwbfp8m] {
    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-dczhwbfp8m] {
    width: min(1100px, 100%);
    max-height: 90vh;
    overflow-y: auto;
}
/* /Components/Home/HomeQuickStartPanel.razor.rz.scp.css */
/* Quick Actions Styling */
[b-xsop1fjeqc] .quick-start-button {
    justify-content: flex-start;
    text-align: left;
    min-height: 5.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

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

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

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

[b-xsop1fjeqc] .quick-start-detail {
    white-space: normal;
    opacity: 0.85;
}
/* /Components/Home/HomeWelcomeSection.razor.rz.scp.css */
/* Welcome Card Styling */
.welcome-card[b-7ukubq33xa] {
    border-radius: 12px;
    overflow: hidden;
}

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

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

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

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

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

.welcome-stats[b-7ukubq33xa] {
    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-7ukubq33xa] {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

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

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

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

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

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

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

[b-7ukubq33xa] .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-7ukubq33xa] .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-7ukubq33xa] {
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
}

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

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

.truck-header[b-7ukubq33xa] {
    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-7ukubq33xa] {
    background: linear-gradient(135deg, var(--mud-palette-primary-darken) 0%, var(--mud-palette-primary-darker) 100%);
}

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

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

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

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

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

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

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

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

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

    [b-7ukubq33xa] .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-kqzrg5k13e] {
    border-radius: 12px;
}

.work-queue-section[b-kqzrg5k13e] {
    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-kqzrg5k13e] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Critical - Non-compliant, Overdue, Conflicts, Overbooked */
.work-queue-critical[b-kqzrg5k13e] {
    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-kqzrg5k13e] {
    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-kqzrg5k13e] {
    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-kqzrg5k13e] {
    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-kqzrg5k13e] {
    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-kqzrg5k13e] {
    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-kqzrg5k13e] {
    position: relative;
    overflow: hidden;
}

.work-queue-glow[b-kqzrg5k13e]::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-kqzrg5k13e]::before {
    opacity: 1;
}

.work-queue-critical.work-queue-glow[b-kqzrg5k13e]::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-kqzrg5k13e]::before {
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--mud-palette-warning) 8%, transparent),
        transparent 70%
    );
}

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

[b-kqzrg5k13e] .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-kqzrg5k13e] {
    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-kqzrg5k13e] {
    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-kqzrg5k13e] {
    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-kqzrg5k13e] {
    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-kqzrg5k13e] {
    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-kqzrg5k13e] {
    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-kqzrg5k13e] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* /Components/Home/Kpi/KpiCard.razor.rz.scp.css */
.pb-kpi-expand-overlay[b-0h5ivhk3dg] {
    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-0h5ivhk3dg] {
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}
/* /Components/Home/Kpi/KpiLeaderboardPanel.razor.rz.scp.css */
.pb-kpi-rankings-toolbar[b-b4sqtpt5xn] {
    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-b4sqtpt5xn] {
    margin-right: 0.25rem;
}

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

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

.pb-kpi-excluded-list[b-b4sqtpt5xn] {
    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-b4sqtpt5xn] {
        align-items: stretch;
    }

    [b-b4sqtpt5xn] .pb-kpi-rankings-select {
        min-width: 100%;
        max-width: 100%;
    }
}
/* /Components/Home/Kpi/KpiTcoChart.razor.rz.scp.css */
.pb-kpi-expand-overlay[b-1c38ghpuwo] {
    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-1c38ghpuwo] {
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-qxez1yc9f0] {
    position: relative;
    display: flex;
    flex-direction: column;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.floating-timer-hidden-toggle[b-qxez1yc9f0] {
    position: fixed;
    bottom: var(--floating-timer-bottom, 20px);
    right: 20px;
    z-index: 1400;
}

.floating-timer[b-qxez1yc9f0] {
    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-qxez1yc9f0] {
    max-width: 200px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .collapse[b-j0zq2q21h4] {
        /* 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-7se5nkomn1],
.components-reconnect-repeated-attempt-visible[b-7se5nkomn1],
.components-reconnect-failed-visible[b-7se5nkomn1],
.components-pause-visible[b-7se5nkomn1],
.components-resume-failed-visible[b-7se5nkomn1],
.components-rejoining-animation[b-7se5nkomn1] {
    display: none;
}

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


#components-reconnect-modal[b-7se5nkomn1] {
    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-7se5nkomn1 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-7se5nkomn1 {
    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/Search/PbGlobalSearch.razor.rz.scp.css */
.global-search-item[b-qxl31aq1k5] {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.global-search-item:hover[b-qxl31aq1k5] {
    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-d7035ledj3] {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.global-search-item:hover[b-d7035ledj3] {
    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. */
/* /Pages/Accounting/EditPaymentData.razor.rz.scp.css */
/* /Pages/Accounting/Statements.razor.rz.scp.css */
.statements-generate-container[b-3c3ojakx0x] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
}

.statements-generate-button[b-3c3ojakx0x] {
    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/VesselServiceEdit.razor.rz.scp.css */
.chemicals-section[b-mre007fzw4] {
    margin-top: 2rem;
}

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

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

.chemicals-row[b-mre007fzw4] {
    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-mre007fzw4] {
    border-top: none;
}

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

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

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

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

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

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

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

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

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

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

    .chemicals-col.actions[b-mre007fzw4] {
        justify-content: flex-start;
    }
}
/* /Pages/Chat/Chat.razor.rz.scp.css */
.pb-chat-page[b-yflu7wb0rb] {
    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-yflu7wb0rb] {
    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-yflu7wb0rb] {
    grid-template-columns: minmax(0, 1fr) 240px;
}

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

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

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

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

.pb-chat-main[b-yflu7wb0rb] {
    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-yflu7wb0rb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

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

    .pb-chat-main[b-yflu7wb0rb] {
        max-height: none;
    }

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

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

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

@media (max-width: 900px) {
    .pb-chat-shell[b-yflu7wb0rb] {
        grid-template-columns: 1fr;
    }

    .pb-chat-shell.is-detail-collapsed[b-yflu7wb0rb] {
        grid-template-columns: 1fr;
    }

    .pb-chat-shell.is-sidebar-collapsed[b-yflu7wb0rb] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .pb-chat-shell[b-yflu7wb0rb] {
        padding: 8px;
        gap: 8px;
    }

    .pb-chat-main-header[b-yflu7wb0rb] {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Ensure touch-friendly tap targets on small screens */
    .pb-chat-main-actions[b-yflu7wb0rb]  .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }

    .pb-chat-composer-actions[b-yflu7wb0rb]  .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}

.pb-chat-loading-state[b-yflu7wb0rb] {
    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-yflu7wb0rb] {
    --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/ChatComposer.razor.rz.scp.css */
.pb-chat-composer[b-jhl2p8z66q] {
    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-jhl2p8z66q] {
    display: inline-flex;
    cursor: not-allowed;
}

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

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

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

.pb-chat-related-input[b-jhl2p8z66q]  .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-jhl2p8z66q]  .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-jhl2p8z66q]  .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-jhl2p8z66q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 2px;
}

.pb-chat-related-result-main[b-jhl2p8z66q] {
    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-jhl2p8z66q] {
    font-size: 0.75rem;
    color: var(--pb-chat-text-muted);
}

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

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

.pb-chat-composer-row[b-jhl2p8z66q] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: flex-end;
}

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

.pb-chat-composer-send[b-jhl2p8z66q] {
    justify-content: flex-end;
}

.pb-chat-mention-input[b-jhl2p8z66q] {
    position: relative;
    width: 100%;
}

.pb-chat-mention-input[b-jhl2p8z66q]  .mud-input-control {
    width: 100%;
}

[b-jhl2p8z66q] .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-jhl2p8z66q] .pb-chat-mention-item {
    border-radius: 8px;
    cursor: pointer;
    padding: 6px 8px;
}

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

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

.pb-chat-mention-avatar[b-jhl2p8z66q] {
    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-jhl2p8z66q] .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-jhl2p8z66q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

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

.pb-chat-mention-role[b-jhl2p8z66q] {
    font-size: 0.75rem;
    color: var(--pb-chat-text-muted);
}

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

[b-jhl2p8z66q] .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-jhl2p8z66q] {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

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

/* Ensure touch-friendly tap targets on small screens */
@media (max-width: 600px) {
    .pb-chat-composer-actions[b-jhl2p8z66q]  .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}
/* /Pages/Chat/ChatDetailsPanel.razor.rz.scp.css */
.pb-chat-detail[b-gkwiglu2lu] {
    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-gkwiglu2lu] {
    display: inline-flex;
    cursor: not-allowed;
}

[b-gkwiglu2lu] .pb-chat-shell.is-detail-collapsed .pb-chat-detail,
:global(.pb-chat-shell.is-detail-collapsed .pb-chat-detail)[b-gkwiglu2lu] {
    display: none !important;
}

.pb-chat-detail-nav[b-gkwiglu2lu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.pb-chat-detail-nav-actions[b-gkwiglu2lu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.pb-chat-detail-nav-arrows[b-gkwiglu2lu],
.pb-chat-detail-nav-icons[b-gkwiglu2lu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pb-chat-detail[b-gkwiglu2lu]  .pb-chat-detail-tabs {
    flex: 1;
    min-height: 0;
}

.pb-chat-detail[b-gkwiglu2lu]  .pb-chat-detail-tabs .mud-tabs-scroll-button {
    display: none !important;
}

.pb-chat-detail[b-gkwiglu2lu]  .pb-chat-detail-tabs .mud-tabs-tabbar {
    display: none;
}

.pb-chat-detail[b-gkwiglu2lu]  .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-gkwiglu2lu]  .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-gkwiglu2lu]  .pb-chat-detail-tabs .mud-tab-panel > * {
    width: 100% !important;
    text-align: left !important;
}

.pb-chat-detail[b-gkwiglu2lu]  .pb-chat-detail-tabs .mud-tabs-tabbar-content {
    white-space: normal;
}

.pb-chat-detail[b-gkwiglu2lu]  .pb-chat-detail-tabs .mud-tabs-tabbar-wrapper {
    width: 100%;
    flex-wrap: wrap;
}

.pb-chat-member-filters[b-gkwiglu2lu] {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.pb-chat-member-list[b-gkwiglu2lu],
.pb-chat-pin-list[b-gkwiglu2lu],
.pb-chat-search-results[b-gkwiglu2lu] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-top: 12px;
    width: 100%;
}

/* Discord-style member item */
.pb-chat-member[b-gkwiglu2lu] {
    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-gkwiglu2lu] {
    background: var(--pb-chat-surface-hover);
}

.pb-chat-member-mention[b-gkwiglu2lu] {
    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%;
}

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

.pb-chat-member-avatar[b-gkwiglu2lu] {
    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-mention:hover .pb-chat-member-name[b-gkwiglu2lu] {
    color: var(--pb-chat-primary);
}

.pb-chat-member-name[b-gkwiglu2lu] {
    font-weight: 600;
    color: var(--pb-chat-text);
    font-size: 0.9rem;
}

.pb-chat-member-info[b-gkwiglu2lu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.pb-chat-member-last-seen[b-gkwiglu2lu] {
    font-size: 0.7rem;
    color: var(--pb-chat-text-faint);
}

/* Member group headers (Discord-style role sections) */
.pb-chat-member-group[b-gkwiglu2lu] {
    margin-top: 12px;
}

.pb-chat-member-group:first-child[b-gkwiglu2lu] {
    margin-top: 0;
}

.pb-chat-member-group-header[b-gkwiglu2lu] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin-bottom: 4px;
}

.pb-chat-member-role-name[b-gkwiglu2lu] {
    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-gkwiglu2lu] {
    font-size: 0.65rem;
    color: var(--pb-chat-text-faint);
}

.pb-chat-read-receipts[b-gkwiglu2lu] {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--pb-chat-border);
}

.pb-chat-read-receipts-header[b-gkwiglu2lu] {
    margin-bottom: 8px;
    color: var(--pb-chat-text-muted);
}

.pb-chat-read-receipts-list[b-gkwiglu2lu] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pb-chat-read-receipt-avatar[b-gkwiglu2lu] {
    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-gkwiglu2lu] {
    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-gkwiglu2lu] {
    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-gkwiglu2lu] {
    background: var(--pb-chat-success);
}

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

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

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

.pb-chat-moderation-block[b-gkwiglu2lu] {
    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-gkwiglu2lu],
.pb-chat-search-item[b-gkwiglu2lu] {
    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-gkwiglu2lu] {
    display: block;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pb-chat-pin-item:hover[b-gkwiglu2lu],
.pb-chat-pin-item:focus-visible[b-gkwiglu2lu] {
    border-color: var(--pb-chat-border);
    background: var(--pb-chat-surface-hover);
}

.pb-chat-search-filters[b-gkwiglu2lu] {
    display: grid;
    gap: 8px;
    margin: 8px 0;
}

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

.pb-chat-search-header-left[b-gkwiglu2lu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

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

.pb-chat-search-body[b-gkwiglu2lu] {
    margin-top: 6px;
    color: var(--pb-chat-text);
}

/* Search result highlighting */
.pb-chat-search-body mark.pb-chat-search-highlight[b-gkwiglu2lu] {
    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-gkwiglu2lu] {
    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-gkwiglu2lu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pb-chat-thread-root[b-gkwiglu2lu] {
    border: 1px solid var(--pb-chat-border);
    border-radius: 10px;
    padding: 12px;
    background: var(--pb-chat-surface-subtle);
}

.pb-chat-thread-root-header[b-gkwiglu2lu] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}

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

.pb-chat-thread-root-time[b-gkwiglu2lu] {
    color: var(--pb-chat-text-muted);
}

.pb-chat-thread-root-body[b-gkwiglu2lu] {
    margin-top: 6px;
    color: var(--pb-chat-text);
    white-space: pre-wrap;
}

.pb-chat-thread-root-count[b-gkwiglu2lu] {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--pb-chat-primary);
    font-weight: 600;
}

.pb-chat-thread-replies[b-gkwiglu2lu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

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

.pb-chat-thread-reply-header[b-gkwiglu2lu] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
}

.pb-chat-thread-reply-avatar[b-gkwiglu2lu] {
    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-gkwiglu2lu] {
    font-weight: 600;
    color: var(--pb-chat-text);
}

.pb-chat-thread-reply-time[b-gkwiglu2lu] {
    color: var(--pb-chat-text-muted);
}

.pb-chat-thread-reply-body[b-gkwiglu2lu] {
    margin-top: 4px;
    color: var(--pb-chat-text);
    font-size: 0.85rem;
    white-space: pre-wrap;
}

.pb-chat-thread-composer[b-gkwiglu2lu] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pb-chat-thread-composer[b-gkwiglu2lu]  .mud-input-outlined {
    flex: 1;
}

@media (max-width: 1200px) {
    .pb-chat-detail[b-gkwiglu2lu] {
        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-gkwiglu2lu] {
        display: none !important;
    }

    .pb-chat-detail[b-gkwiglu2lu]  .pb-chat-detail-tabs {
        flex: 0 0 auto;
        min-height: auto;
    }

    .pb-chat-detail[b-gkwiglu2lu]  .pb-chat-detail-tabs .mud-tabs-panels {
        overflow-y: visible;
        height: auto;
        flex: 0 0 auto;
    }

    .pb-chat-detail[b-gkwiglu2lu]  .pb-chat-detail-tabs .mud-tab-panel {
        height: auto;
    }
}

.pb-chat-loading-state[b-gkwiglu2lu] {
    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-46o2rybz9c] {
    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-46o2rybz9c] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.pb-chat-channel-title-line[b-46o2rybz9c] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pb-chat-text);
}

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

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

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

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

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

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

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

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

.pb-chat-channel-add-topic[b-46o2rybz9c] {
    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-46o2rybz9c] {
    background: var(--pb-chat-surface-hover);
    border-color: var(--pb-chat-text-muted);
    color: var(--pb-chat-text);
}

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

.pb-chat-main-actions[b-46o2rybz9c] {
    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-46o2rybz9c]  .mud-icon-button,
    .pb-chat-main-actions-left[b-46o2rybz9c]  .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}
/* /Pages/Chat/ChatMessagesPane.razor.rz.scp.css */
.pb-chat-message-pane[b-cxnz43a96l] {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* New Messages Banner */
.pb-chat-new-messages-banner[b-cxnz43a96l] {
    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-cxnz43a96l 0.2s ease-out;
}

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

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

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

.pb-chat-new-messages-jump[b-cxnz43a96l],
.pb-chat-new-messages-mark[b-cxnz43a96l] {
    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-cxnz43a96l],
.pb-chat-new-messages-mark:hover[b-cxnz43a96l] {
    background: rgba(255, 255, 255, 0.35);
}

.pb-chat-new-messages-jump:focus-visible[b-cxnz43a96l],
.pb-chat-new-messages-mark:focus-visible[b-cxnz43a96l] {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

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

.pb-chat-message-list[b-cxnz43a96l] {
    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-cxnz43a96l] {
    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-cxnz43a96l] {
    font-size: 2.2rem;
    color: var(--pb-chat-text-faint);
}

.pb-chat-scroll-fab[b-cxnz43a96l] {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    animation: pb-fab-pop-in-b-cxnz43a96l 0.2s ease-out;
}

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

.pb-chat-day-separator[b-cxnz43a96l] {
    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-cxnz43a96l] {
    flex: 1;
    height: 1px;
    background: var(--pb-chat-border);
    border-radius: 999px;
}

.pb-chat-day-separator-label[b-cxnz43a96l] {
    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-cxnz43a96l] {
    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-cxnz43a96l 0.2s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pb-chat-new-messages-banner button[b-cxnz43a96l] {
    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-cxnz43a96l] {
    background: rgba(255, 255, 255, 0.3);
}

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

/* Unread marker - enhanced visibility with glow effect */
.pb-chat-unread-marker[b-cxnz43a96l] {
    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-cxnz43a96l 0.3s ease-out;
}

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

.pb-chat-unread-marker-line[b-cxnz43a96l] {
    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-cxnz43a96l]::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-cxnz43a96l] {
    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-cxnz43a96l 2s ease-in-out infinite;
}

@keyframes pb-unread-badge-pulse-b-cxnz43a96l {
    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-cxnz43a96l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pb-chat-unread-marker-actions button[b-cxnz43a96l] {
    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-cxnz43a96l] {
    background: var(--pb-chat-error);
    color: white;
}

.pb-chat-unread-marker-actions button:focus-visible[b-cxnz43a96l] {
    outline: 2px solid var(--pb-chat-error);
    outline-offset: 2px;
}

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

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

.pb-chat-message[b-cxnz43a96l] {
    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-cxnz43a96l 0.15s ease-out;
    transition: background 0.1s ease, border-color 0.1s ease;
}

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

@keyframes pb-message-fade-in-b-cxnz43a96l {
    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-cxnz43a96l] {
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 0;
}

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

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

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

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

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

:global(.pb-chat-page.is-compact) .pb-chat-message-list[b-cxnz43a96l] {
    gap: 1px;
}

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

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

:global(.pb-chat-page.is-compact) .pb-chat-message-meta[b-cxnz43a96l] {
    font-size: 0.72rem;
}

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

:global(.pb-chat-page.is-compact) .pb-chat-message-body[b-cxnz43a96l] {
    margin-top: 4px;
}

:global(.pb-chat-page.is-compact) .pb-chat-related[b-cxnz43a96l],
:global(.pb-chat-page.is-compact) .pb-chat-reactions[b-cxnz43a96l] {
    margin-top: 4px;
}

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

.pb-chat-message-header[b-cxnz43a96l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Discord-style floating action bar */
.pb-chat-message-actions[b-cxnz43a96l] {
    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-cxnz43a96l] {
    display: inline-flex;
    cursor: not-allowed;
}

/* Quick reaction buttons */
.pb-chat-quick-reactions[b-cxnz43a96l] {
    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-cxnz43a96l] {
    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-cxnz43a96l] {
    background: var(--pb-chat-surface-hover);
    transform: scale(1.15);
}

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

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

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

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

.pb-chat-emoji-picker-trigger[b-cxnz43a96l] {
    width: 26px;
    height: 26px;
}

[b-cxnz43a96l] .pb-chat-emoji-popover {
    z-index: 1300;
}

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

.pb-chat-message:hover .pb-chat-message-actions[b-cxnz43a96l],
.pb-chat-message:focus-within .pb-chat-message-actions[b-cxnz43a96l] {
    opacity: 1;
    pointer-events: auto;
    top: -16px;
}

:global(.pb-chat-page.is-compact) .pb-chat-message:hover .pb-chat-message-actions[b-cxnz43a96l],
:global(.pb-chat-page.is-compact) .pb-chat-message:focus-within .pb-chat-message-actions[b-cxnz43a96l] {
    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-cxnz43a96l],
.pb-chat-message:not(.is-entity-only):has(.pb-chat-related:hover) .pb-chat-message-actions[b-cxnz43a96l] {
    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-cxnz43a96l] {
    opacity: 1;
    pointer-events: auto;
}

.pb-chat-message-meta[b-cxnz43a96l] {
    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-cxnz43a96l] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.pb-chat-message-avatar[b-cxnz43a96l] {
    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-cxnz43a96l] {
    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-cxnz43a96l] {
    background: var(--pb-chat-success);
}

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

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

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

.pb-chat-message-sender[b-cxnz43a96l] {
    font-weight: 600;
    color: var(--pb-chat-text);
}

.pb-chat-message-meta[b-cxnz43a96l]  .pb-chat-message-pin {
    color: var(--pb-chat-warning);
}

.pb-chat-message-body[b-cxnz43a96l] {
    margin-top: 6px;
    color: var(--pb-chat-text);
    white-space: pre-wrap;
}

.pb-chat-message-body[b-cxnz43a96l]  .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.is-mention[b-cxnz43a96l] {
    background: var(--pb-chat-warning-soft);
    border-radius: 8px;
    padding: 6px 8px;
}

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

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

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

.pb-chat-message-body code[b-cxnz43a96l] {
    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-cxnz43a96l] {
    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-cxnz43a96l] {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.85rem;
}

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

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

.pb-chat-message-body blockquote[b-cxnz43a96l] {
    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-cxnz43a96l],
.pb-chat-message-body ol[b-cxnz43a96l] {
    margin: 6px 0;
    padding-left: 24px;
}

.pb-chat-message-body li[b-cxnz43a96l] {
    margin: 3px 0;
}

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

.pb-chat-related-chip[b-cxnz43a96l] {
    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-cxnz43a96l]  .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-cxnz43a96l],
.pb-chat-related-chip:focus-visible[b-cxnz43a96l] {
    background: var(--pb-chat-surface-subtle);
    border-color: var(--pb-chat-border);
}

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

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

.pb-chat-reaction-chip[b-cxnz43a96l] {
    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-cxnz43a96l] {
    border-color: var(--pb-chat-primary);
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-primary);
}

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

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

.pb-chat-message-edited[b-cxnz43a96l] {
    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-cxnz43a96l] {
    background: var(--pb-chat-surface-hover);
    color: var(--pb-chat-text-muted);
}

/* Thread summary */
.pb-chat-thread-summary[b-cxnz43a96l] {
    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-cxnz43a96l],
.pb-chat-thread-summary:focus-visible[b-cxnz43a96l] {
    background: var(--pb-chat-primary-soft);
    border-color: var(--pb-chat-primary);
}

.pb-chat-thread-summary:focus-visible[b-cxnz43a96l] {
    outline: 2px solid var(--pb-chat-primary);
    outline-offset: 2px;
}

.pb-chat-thread-summary[b-cxnz43a96l]  .pb-chat-thread-icon {
    color: var(--pb-chat-primary);
    font-size: 1rem;
}

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

.pb-chat-thread-separator[b-cxnz43a96l] {
    color: var(--pb-chat-text-muted);
}

.pb-chat-thread-time[b-cxnz43a96l] {
    color: var(--pb-chat-text-muted);
}

.pb-chat-thread-preview[b-cxnz43a96l] {
    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-cxnz43a96l] {
    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-cxnz43a96l] {
    display: flex;
    align-items: center;
}

.pb-chat-typing-avatar[b-cxnz43a96l] {
    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-cxnz43a96l] {
    margin-left: 0;
}

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

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

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

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

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

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

@keyframes pb-typing-bounce-b-cxnz43a96l {
    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-message-actions[b-cxnz43a96l] {
        opacity: 0.7;
        pointer-events: auto;
    }

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

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

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

    .pb-chat-scroll-fab[b-cxnz43a96l] {
        animation: none;
    }

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

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

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

    .pb-chat-reaction-chip[b-cxnz43a96l] {
        transition: none;
    }
}
/* /Pages/Chat/ChatSidebar.razor.rz.scp.css */
.pb-chat-sidebar[b-iy3r7re6pv] {
    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-iy3r7re6pv] .pb-chat-shell.is-sidebar-collapsed .pb-chat-sidebar,
:global(.pb-chat-shell.is-sidebar-collapsed .pb-chat-sidebar)[b-iy3r7re6pv] {
    display: none !important;
}

.pb-chat-sidebar-header[b-iy3r7re6pv] {
    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-iy3r7re6pv]  .pb-btn {
    font-size: 0.75rem;
}

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

.pb-chat-channel-filters[b-iy3r7re6pv] {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.pb-chat-channel-filters[b-iy3r7re6pv]  .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-iy3r7re6pv]  .pb-chat-filter-button:hover {
    background: var(--pb-chat-surface-subtle);
    border-color: var(--pb-chat-border);
}

.pb-chat-channel-filters[b-iy3r7re6pv]  .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-iy3r7re6pv]  .pb-chat-filter-button.is-active:hover {
    background: var(--pb-chat-primary);
    border-color: var(--pb-chat-primary);
}

.pb-chat-filter-count[b-iy3r7re6pv] {
    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-iy3r7re6pv]  .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-iy3r7re6pv] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

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

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

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

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

.pb-chat-channel-list[b-iy3r7re6pv] {
    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-iy3r7re6pv] {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pb-chat-text-muted);
    margin-top: 4px;
}

.pb-chat-channel-toggle[b-iy3r7re6pv] {
    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-iy3r7re6pv] {
    color: var(--pb-chat-text);
}

.pb-chat-channel-row:first-child[b-iy3r7re6pv] {
    margin-top: 0;
}

.pb-chat-channel-row[b-iy3r7re6pv] {
    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-iy3r7re6pv] {
    opacity: 0.5;
}

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

/* Discord-style indicator pill */
.pb-chat-channel-row[b-iy3r7re6pv]::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-iy3r7re6pv]::before {
    height: 8px;
}

.pb-chat-channel-row.is-active[b-iy3r7re6pv] {
    background: var(--pb-chat-primary-soft);
    color: var(--pb-chat-text);
}

.pb-chat-channel-row.is-active[b-iy3r7re6pv]::before {
    height: 40px;
    background: var(--pb-chat-primary);
}

.pb-chat-channel-row.is-active:hover[b-iy3r7re6pv] {
    background: var(--pb-chat-primary-strong);
}

/* Pinned channel styling */
.pb-chat-channel-row.is-pinned[b-iy3r7re6pv] {
    background: var(--pb-chat-surface-subtle);
}

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

.pb-chat-channel-row-title[b-iy3r7re6pv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.pb-chat-channel-row-title-left[b-iy3r7re6pv] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

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

.pb-chat-channel-row[b-iy3r7re6pv]  .pb-chat-channel-type-icon {
    color: var(--pb-chat-text-muted);
    flex-shrink: 0;
}

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

.pb-chat-channel-row-name[b-iy3r7re6pv] {
    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-iy3r7re6pv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.pb-chat-channel-actions[b-iy3r7re6pv] {
    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-iy3r7re6pv],
.pb-chat-channel-row:focus-within .pb-chat-channel-actions[b-iy3r7re6pv] {
    opacity: 1;
}

.pb-chat-channel-action[b-iy3r7re6pv] {
    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-iy3r7re6pv] {
    background: var(--pb-chat-surface-hover);
    color: var(--pb-chat-text);
}

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

.pb-chat-channel-row-preview[b-iy3r7re6pv] {
    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-iy3r7re6pv] {
    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-iy3r7re6pv] {
    display: none;
}

/* Unread channel row state - using ::before for indicator */
.pb-chat-channel-row:has(.pb-chat-unread-badge)[b-iy3r7re6pv]::before,
.pb-chat-channel-row:has(.pb-chat-channel-indicator.has-unread)[b-iy3r7re6pv]::before {
    height: 8px;
    background: var(--pb-chat-text);
}

.pb-chat-channel-row:has(.pb-chat-unread-badge) .pb-chat-channel-row-name[b-iy3r7re6pv],
.pb-chat-channel-row:has(.pb-chat-channel-indicator.has-unread) .pb-chat-channel-row-name[b-iy3r7re6pv] {
    font-weight: 700;
    color: var(--pb-chat-text);
}

.pb-chat-unread-badge[b-iy3r7re6pv] {
    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-iy3r7re6pv] {
    animation: pb-unread-bump-b-iy3r7re6pv 0.35s ease;
}

.pb-chat-mention-badge[b-iy3r7re6pv] {
    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-iy3r7re6pv {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}
/* /Pages/Config/Address/Add.razor.rz.scp.css */
.address-form-container[b-3kga7ce3cp] {
    max-width: 720px;
    margin: 0 auto;
}

.state-dropdown[b-3kga7ce3cp] {
    max-width: 320px;
}
/* /Pages/Config/EmailHistoryData.razor.rz.scp.css */
.email-toolbar[b-cea371o12i] {
    align-items: flex-end;
    gap: 12px;
    padding: 8px 0 6px;
}

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

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

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

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

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

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

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

    .email-toolbar .email-refresh[b-cea371o12i] {
        flex: 0 0 150px;
        justify-content: flex-end;
    }
}
/* /Pages/Home/HomeDashboardKpi.razor.rz.scp.css */
.pb-kpi-dashboard[b-4k9jjzh75x] {
    --pb-kpi-frame-color: rgba(34, 72, 108, 0.55);
}

.pb-kpi-dashboard-header[b-4k9jjzh75x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.pb-kpi-dashboard-headline[b-4k9jjzh75x] {
    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-4k9jjzh75x] {
    flex: 0 0 auto;
    white-space: nowrap;
}

.pb-kpi-section-title[b-4k9jjzh75x] {
    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-4k9jjzh75x] .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-4k9jjzh75x] .kpi-card:hover {
    box-shadow: 0 4px 12px rgba(17, 40, 65, 0.14), 0 8px 24px rgba(17, 40, 65, 0.1);
}

[b-4k9jjzh75x] .kpi-card .mud-card-header {
    border-bottom: 2px solid rgba(34, 72, 108, 0.18);
    padding-bottom: 0.45rem;
}

[b-4k9jjzh75x] .kpi-card .mud-card-content {
    padding-top: 0.8rem;
}

[b-4k9jjzh75x] .pb-kpi-card-title {
    color: var(--mud-palette-text-primary);
    font-weight: 800;
    letter-spacing: 0.01em;
}

[b-4k9jjzh75x] .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-4k9jjzh75x] .kpi-card .mud-simple-table tbody td {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

[b-4k9jjzh75x] .kpi-card .mud-charts-xaxis text,
[b-4k9jjzh75x] .kpi-card .mud-charts-yaxis text {
    fill: var(--mud-palette-text-primary);
    font-size: 0.9rem;
    font-weight: 900;
}

[b-4k9jjzh75x] .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-4k9jjzh75x]  .mud-grid-item {
    max-width: 100% !important;
    flex-basis: 100% !important;
}

@media (max-width: 960px) {
    .pb-kpi-dashboard-header[b-4k9jjzh75x] {
        align-items: stretch;
    }

    .pb-kpi-settings-action[b-4k9jjzh75x] {
        width: 100%;
    }

    .pb-kpi-dashboard-headline[b-4k9jjzh75x] {
        font-size: 1.55rem;
    }

    [b-4k9jjzh75x] .kpi-card .mud-charts-xaxis text,
    [b-4k9jjzh75x] .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-p1328q2vnw],
#index-timerecord-title p[b-p1328q2vnw] {
    display: inline;
    vertical-align: top;
    font-size: 20px;
    line-height: 20px;
}

#index-timerecord-title h1[b-p1328q2vnw] {
    font-size: 30px;
}

/* Active Time Recording Styling */
.active-time-recording[b-p1328q2vnw] {
    border-left: 5px solid var(--mud-palette-success);
    background-color: rgba(76, 175, 80, 0.08);
}

/* Quick Actions Styling */
.text-truncate[b-p1328q2vnw] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile swipe card styling */
.mobile-swipe-card[b-p1328q2vnw] {
    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-p1328q2vnw]::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-p1328q2vnw]::before {
    transform: translateX(100%);
}

/* Touch feedback */
.mobile-swipe-card:active[b-p1328q2vnw] {
    transform: scale(0.98);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    [b-p1328q2vnw] .mud-button {
        min-height: 48px;
    }

    .home-time-records-container[b-p1328q2vnw] {
        flex-direction: column;
    }

    .home-time-records-account-container[b-p1328q2vnw],
    .home-time-records-schedules-container[b-p1328q2vnw] {
        width: 100%;
        margin-bottom: 1rem;
    }

    .mobile-swipe-card[b-p1328q2vnw] {
        margin: 0 -16px;
        border-radius: 0;
    }

    /* Larger touch targets for mobile */
    [b-p1328q2vnw] .mud-icon-button {
        width: 48px;
        height: 48px;
    }

}
/* /Pages/Home/HomeIndex.razor.rz.scp.css */
#index-timerecord-title h1[b-m0amxvrilt],
#index-timerecord-title p[b-m0amxvrilt] {
    display: inline;
    vertical-align: top;
    font-size: 20px;
    line-height: 20px;
}

#index-timerecord-title h1[b-m0amxvrilt] {
    font-size: 30px;
}
/* /Pages/Inventory/Po/PurchaseOrderDetails.razor.rz.scp.css */
.order-access.notes[b-yab7ujwtub] {
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-tax-exempt[b-yab7ujwtub] {
    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-qwwrvee1cq] {
    min-width: 100px;
}

.pb-order-grid-soid-footer[b-qwwrvee1cq] {
    min-width: 100px;
}
/* /Pages/Inventory/Po/PurchaseOrderTopDetails.razor.rz.scp.css */
.order-top-type[b-jhv6wehga9] {
    font-size: 16px;
}
/* /Pages/Inventory/Transfer/TransferOrderDetails.razor.rz.scp.css */
.order-access.notes[b-o9nbbemupq] {
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-tax-exempt[b-o9nbbemupq] {
    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-vrmvx8ev70] {
    min-width: 100px;
}

.pb-order-grid-soid-footer[b-vrmvx8ev70] {
    min-width: 100px;
}
/* /Pages/Inventory/Transfer/TransferOrderTopDetails.razor.rz.scp.css */
.order-top-type[b-lns8982zsz] {
    font-size: 16px;
}
/* /Pages/Logs/AuditOperations.razor.rz.scp.css */
:deep(.audit-timeline-drawer)[b-d47ke0cjam] {
    width: 420px;
    max-width: 100vw;
    z-index: 1400;
}

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

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

:deep(.audit-timeline-item)[b-d47ke0cjam] {
    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-ycrm53luqm] {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid #fbbf24;
}

.order-access-notes span[b-ycrm53luqm] {
    color: #92400e;
    font-size: 0.875rem;
}

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

.order-tax-exempt input[type="checkbox"][b-ycrm53luqm] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    accent-color: #3b82f6;
    cursor: not-allowed;
}

/* ============================================
   Main Container
   ============================================ */
[b-ycrm53luqm] .d-flex.gap-2.pt-3.pb-3 {
    padding: 0.25rem 0 !important;
}

/* ============================================
   Top Row Cards (Billing, Shipping, Invoice)
   ============================================ */
[b-ycrm53luqm] .d-flex.gap-2.pt-3.pb-3 > div > .mud-card {
    height: 100%;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s ease !important;
    overflow: hidden;
}

[b-ycrm53luqm] .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-ycrm53luqm] .d-flex.gap-2.pt-3.pb-3 > div > .mud-card .mud-card-content {
    padding: 0.75rem 1rem !important;
}

/* Card Header Accent Lines */
[b-ycrm53luqm] .d-flex.gap-2.pt-3.pb-3 > div:first-child > .mud-card {
    border-top: 3px solid #3b82f6 !important;
}

[b-ycrm53luqm] .d-flex.gap-2.pt-3.pb-3 > div:nth-child(2) > .mud-card {
    border-top: 3px solid #22c55e !important;
}

[b-ycrm53luqm] .d-flex.gap-2.pt-3.pb-3 > div:nth-child(3) > .mud-card {
    border-top: 3px solid #f59e0b !important;
}

/* ============================================
   Address & Invoice Cards Content
   ============================================ */
[b-ycrm53luqm] .d-flex.align-items-center.gap-1 {
    padding: 0.25rem 0;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

[b-ycrm53luqm] .d-flex.align-items-center.gap-1:hover {
    background-color: rgba(59, 130, 246, 0.04);
}

/* Save Buttons Styling */
[b-ycrm53luqm] .mud-icon-button[style*="Primary"] {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

[b-ycrm53luqm] .mud-icon-button[style*="Primary"]:hover {
    background-color: rgba(59, 130, 246, 0.2) !important;
    transform: scale(1.1);
}

/* ============================================
   Grid Cards Section (Contact, Notes, Schedule)
   ============================================ */
[b-ycrm53luqm] .mud-grid.pt-3.pb-5 {
    gap: 1rem;
}

[b-ycrm53luqm] .mud-grid.pt-3.pb-5 .mud-card {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s ease !important;
}

[b-ycrm53luqm] .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-ycrm53luqm] .d-flex.align-items-center.gap-1.mb-2 {
    padding-bottom: 0.75rem;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid #f1f5f9;
}

[b-ycrm53luqm] .d-flex.align-items-center.gap-1.mb-2 .mud-icon {
    color: #3b82f6 !important;
}

[b-ycrm53luqm] .d-flex.align-items-center.gap-1.mb-2 .mud-typography-h6 {
    color: #1e293b !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

/* ============================================
   Contact Card Styling
   ============================================ */
[b-ycrm53luqm] .mud-grid-item:first-of-type .mud-card {
    border-left: 4px solid #06b6d4 !important;
}

[b-ycrm53luqm] .mud-grid-item:first-of-type .mud-typography {
    padding: 0.25rem 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

[b-ycrm53luqm] .mud-grid-item:first-of-type strong {
    color: #475569;
    font-weight: 600;
}

/* ============================================
   Notes & Specs Card Styling
   ============================================ */
[b-ycrm53luqm] .mud-grid-item:nth-of-type(2) .mud-card {
    border-left: 4px solid #8b5cf6 !important;
}

/* Notes Table Styling */
[b-ycrm53luqm] .mud-table {
    border-radius: 8px !important;
    overflow: hidden;
    margin: 0.75rem 0;
}

[b-ycrm53luqm] .mud-table thead th {
    background: #f8fafc !important;
    padding: 0.625rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569 !important;
}

[b-ycrm53luqm] .mud-table tbody td {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem;
}

/* File Chips */
[b-ycrm53luqm] .mud-chip.mud-chip-color-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
    font-weight: 500 !important;
    border-radius: 20px !important;
    padding: 0.25rem 0.75rem !important;
}

[b-ycrm53luqm] .mud-chip.mud-chip-color-error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
    font-weight: 500 !important;
    border-radius: 20px !important;
    padding: 0.25rem 0.75rem !important;
}

/* ============================================
   Schedule Card Styling
   ============================================ */
[b-ycrm53luqm] .mud-grid-item:nth-of-type(3) .mud-card {
    border-left: 4px solid #22c55e !important;
}

/* ============================================
   Description Card (Full Width)
   ============================================ */
[b-ycrm53luqm] .mud-grid-item:last-of-type .mud-card {
    border-left: 4px solid #f59e0b !important;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
}

[b-ycrm53luqm] .mud-grid-item:last-of-type .mud-card .mud-typography {
    padding: 0.375rem 0;
    font-size: 0.9rem;
}

[b-ycrm53luqm] .mud-grid-item:last-of-type .mud-card strong {
    color: #92400e;
}

/* ============================================
   Edit Button Styling
   ============================================ */
[b-ycrm53luqm] .mud-icon-button {
    border-radius: 6px !important;
    padding: 0.375rem !important;
    transition: all 0.2s ease !important;
}

[b-ycrm53luqm] .mud-icon-button:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

/* ============================================
   Link Styling
   ============================================ */
[b-ycrm53luqm] .mud-link {
    color: #3b82f6 !important;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

[b-ycrm53luqm] .mud-link:hover {
    color: #2563eb !important;
    text-decoration: underline !important;
}

/* ============================================
   Pager Styling
   ============================================ */
[b-ycrm53luqm] .mud-table-pagination {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0;
    padding: 0.5rem !important;
}

[b-ycrm53luqm] .mud-table-pagination .mud-select {
    border-radius: 6px !important;
}

/* ============================================
   Dropdown Styling
   ============================================ */
[b-ycrm53luqm] .mud-select .mud-input {
    border-radius: 8px !important;
}

[b-ycrm53luqm] .mud-input-control-input-container {
    border-radius: 8px !important;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 1200px) {
    [b-ycrm53luqm] .d-flex.gap-2.pt-3.pb-3 {
        flex-wrap: wrap;
    }

    [b-ycrm53luqm] .d-flex.gap-2.pt-3.pb-3 > div {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    [b-ycrm53luqm] .mud-grid.pt-3.pb-5 .mud-item {
        padding: 0.5rem !important;
    }

    [b-ycrm53luqm] .mud-card-content {
        padding: 0.875rem !important;
    }
}
/* /Pages/Orders/Components/OrderInvoices.razor.rz.scp.css */
/* OrderInvoices Component - Polished Visual Styles */

/* ============================================
   Container
   ============================================ */
[b-bkv7v4r2z6] .mud-table {
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #e2e8f0 !important;
    margin-top: 1rem;
}

/* ============================================
   Table Header
   ============================================ */
[b-bkv7v4r2z6] .mud-table thead th {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: white !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;
}

/* ============================================
   Table Rows
   ============================================ */
[b-bkv7v4r2z6] .mud-table tbody tr {
    transition: all 0.2s ease;
}

[b-bkv7v4r2z6] .mud-table tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.06) !important;
}

[b-bkv7v4r2z6] .mud-table-striped tbody tr:nth-of-type(odd) {
    background-color: #eff6ff !important;
}

[b-bkv7v4r2z6] .mud-table tbody td {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* ============================================
   Invoice Number Column
   ============================================ */
[b-bkv7v4r2z6] .mud-table tbody td:first-child {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-weight: 700;
    color: #2563eb;
}

/* ============================================
   Amount Column
   ============================================ */
[b-bkv7v4r2z6] .mud-table tbody td[data-label*="Amount"],
[b-bkv7v4r2z6] .mud-table tbody td:nth-child(3) {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 0.9rem;
    color: #1e293b;
}

/* ============================================
   Partial Invoice Badge
   ============================================ */
[b-bkv7v4r2z6] .mud-table tbody td[data-label*="Partial"] {
    font-weight: 600;
}

[b-bkv7v4r2z6] .mud-chip {
    border-radius: 12px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

/* ============================================
   Action Links
   ============================================ */
[b-bkv7v4r2z6] .mud-link {
    color: #2563eb !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

[b-bkv7v4r2z6] .mud-link:hover {
    color: #1d4ed8 !important;
    background-color: rgba(37, 99, 235, 0.1);
}

/* ============================================
   Create Partial Invoice Button
   ============================================ */
[b-bkv7v4r2z6] .mud-button-root {
    border-radius: 8px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

[b-bkv7v4r2z6] .mud-button-root:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ============================================
   Pager
   ============================================ */
[b-bkv7v4r2z6] .mud-table-pagination {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0;
    padding: 0.5rem 1rem !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
/* /Pages/Orders/Components/OrderItemsTable.razor.rz.scp.css */
/* OrderItemsTable Component - Polished Visual Styles */

/* ============================================
   Main Table Container
   ============================================ */
[b-iz5zxaa115] .mud-table.mt-5.vertical-align-top.w-90 {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e2e8f0 !important;
    margin-top: 1.5rem !important;
}

[b-iz5zxaa115] .mud-table-container {
    border-radius: 12px !important;
}

/* ============================================
   Table Header
   ============================================ */
[b-iz5zxaa115] .mud-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

[b-iz5zxaa115] .mud-table thead th {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    color: white !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.7rem !important;
    letter-spacing: 0.05em;
    padding: 1rem 0.625rem !important;
    border-bottom: none !important;
    white-space: nowrap;
}

[b-iz5zxaa115] .mud-table thead th:first-child {
    border-top-left-radius: 12px !important;
}

[b-iz5zxaa115] .mud-table thead th:last-child {
    border-top-right-radius: 12px !important;
}

/* ============================================
   Table Body Rows
   ============================================ */
[b-iz5zxaa115] .mud-table tbody tr {
    transition: all 0.2s ease;
}

[b-iz5zxaa115] .mud-table tbody tr:hover {
    background-color: rgba(59, 130, 246, 0.06) !important;
    transform: scale(1.001);
}

/* Striped Rows */
[b-iz5zxaa115] .mud-table-striped tbody tr:nth-of-type(odd) {
    background-color: #fafbfc !important;
}

[b-iz5zxaa115] .mud-table-striped tbody tr:nth-of-type(even) {
    background-color: white !important;
}

/* ============================================
   Table Cells
   ============================================ */
/* Force compact padding for this table, overriding Mud defaults */
/* Force compact padding for this table only, beating Mud defaults */
:global(.order-items-table.mud-table-dense .mud-table-body .mud-table-row > .mud-table-cell)[b-iz5zxaa115],
:global(.order-items-table .mud-table-body .mud-table-row > .mud-table-cell)[b-iz5zxaa115],
 
[b-iz5zxaa115] .order-items-table .mud-table-body .mud-table-row > .mud-table-cell {
    padding-top: 0.05rem !important;
    padding-bottom: 0.05rem !important;
    padding-left: 0.2rem !important;
    padding-right: 0.2rem !important;
    font-size: 0.875rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: top !important;
}

.vertical-align-top-column[b-iz5zxaa115] {
    vertical-align: top !important;
}

/* ============================================
   Expand/Collapse Button Column
   ============================================ */
[b-iz5zxaa115] .mud-table tbody td:first-child {
    text-align: center;
}

[b-iz5zxaa115] .mud-table tbody td:first-child .mud-icon-button {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

[b-iz5zxaa115] .mud-table tbody td:first-child .mud-icon-button:hover {
    background-color: rgba(59, 130, 246, 0.2) !important;
    transform: scale(1.1);
}

[b-iz5zxaa115] .mud-table tbody td:first-child .text-muted.small {
    color: #94a3b8 !important;
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 0.25rem;
}

/* ============================================
   ID Link Columns (Item, Detail)
   ============================================ */
[b-iz5zxaa115] .mud-table tbody td .mud-link,
[b-iz5zxaa115] .mud-table tbody td .mud-link.mud-primary-text,
[b-iz5zxaa115] .mud-table tbody td .mud-link-underline-always {
    color: #2563eb !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(37, 99, 235, 0.9) !important;
    text-underline-offset: 2px !important;
    transition: all 0.2s ease;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

[b-iz5zxaa115] .mud-table tbody td .mud-link:hover,
[b-iz5zxaa115] .mud-table tbody td .mud-link.mud-primary-text:hover,
[b-iz5zxaa115] .mud-table tbody td .mud-link-underline-always:hover {
    color: #1d4ed8 !important;
    background-color: rgba(37, 99, 235, 0.14);
    text-decoration: underline !important;
    text-decoration-color: #1d4ed8 !important;
}

/* ============================================
   Quantity Columns
   ============================================ */
[b-iz5zxaa115] .mud-table tbody td:nth-child(4),
[b-iz5zxaa115] .mud-table tbody td:nth-child(5),
[b-iz5zxaa115] .mud-table tbody td:nth-child(6) {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.8125rem;
    text-align: center;
}

/* ============================================
   SKU Column
   ============================================ */
[b-iz5zxaa115] .mud-table tbody td:nth-child(7) .mud-link {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.8125rem;
    color: #0ea5e9 !important;
    background: rgba(14, 165, 233, 0.18);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

[b-iz5zxaa115] .mud-table tbody td:nth-child(7) .mud-link:hover {
    background: rgba(14, 165, 233, 0.26);
    color: #0284c7 !important;
}

/* ============================================
   Description Column
   ============================================ */
.order-items-table-description[b-iz5zxaa115] {
    max-width: 350px !important;
    word-wrap: break-word;
    line-height: 1.5;
}

.order-items-table-description *[b-iz5zxaa115] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
}

.order-detail-desc[b-iz5zxaa115] {
    margin: 0 0 2px 0;
    padding: 0;
}

.order-detail-checklist-link[b-iz5zxaa115] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.order-detail-work[b-iz5zxaa115] {
    margin: 2px 0 2px 0;
    padding: 0;
}

/* ============================================
   Hours Column
   ============================================ */
[b-iz5zxaa115] .mud-table tbody td[data-label="Hours"] {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.8125rem;
}

/* ============================================
   Price/Total Columns
   ============================================ */
[b-iz5zxaa115] .mud-table tbody td[data-label*="Price"],
[b-iz5zxaa115] .mud-table tbody td[data-label="Total"] {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: right;
}

/* ============================================
   GP Columns (Gross Profit)
   ============================================ */
[b-iz5zxaa115] .mud-table tbody td[data-label*="GP"] {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.8125rem;
}

/* Positive GP - Green */
[b-iz5zxaa115] .mud-table tbody td[data-label*="GP"]:not(:empty) {
    color: #16a34a;
}

/* ============================================
   Status Column
   ============================================ */
[b-iz5zxaa115] .mud-table tbody td[data-label="Status"] {
    font-weight: 600;
    text-transform: capitalize;
}

/* ============================================
   Delete Button Column
   ============================================ */
[b-iz5zxaa115] .mud-table tbody td:last-child .mud-icon-button {
    color: #ef4444 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

[b-iz5zxaa115] .mud-table tbody td:last-child .mud-icon-button:hover {
    background-color: rgba(239, 68, 68, 0.1) !important;
    transform: scale(1.1);
}

/* ============================================
   Checkbox (Show on PDF) Styling
   ============================================ */
[b-iz5zxaa115] .mud-table tbody td .mud-checkbox {
    margin: 0;
}

[b-iz5zxaa115] .mud-table tbody td .mud-checkbox .mud-checkbox-input {
    width: 18px;
    height: 18px;
}

/* ============================================
   Item Row vs Detail Row Differentiation
   ============================================ */
/* Item rows (parent) - slightly emphasized */
[b-iz5zxaa115] .mud-table tbody tr[data-is-item="true"],
[b-iz5zxaa115] .mud-table tbody tr.item-row {
    background-color: #f8fafc !important;
    font-weight: 500;
}

/* Detail rows (child) - indented/subdued */
[b-iz5zxaa115] .mud-table tbody tr[data-is-detail="true"],
[b-iz5zxaa115] .mud-table tbody tr.detail-row {
    background-color: white !important;
}

[b-iz5zxaa115] .mud-table tbody tr.detail-row td:nth-child(2) {
    padding-left: 1.5rem !important;
}

/* ============================================
   Column Group Widths (already defined in component)
   ============================================ */
[b-iz5zxaa115] .mud-table colgroup col {
    transition: width 0.3s ease;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 1400px) {
    [b-iz5zxaa115] .mud-table thead th {
        font-size: 0.65rem !important;
        padding: 0.75rem 0.5rem !important;
    }

    [b-iz5zxaa115] .mud-table tbody td {
        font-size: 0.8125rem;
        padding: 0.625rem 0.5rem !important;
    }

    .order-items-table-description[b-iz5zxaa115] {
        max-width: 250px !important;
    }
}

@media (max-width: 1200px) {
    [b-iz5zxaa115] .mud-table.w-90 {
        width: 100% !important;
    }

    .order-items-table-description[b-iz5zxaa115] {
        max-width: 200px !important;
    }
}

@media (max-width: 992px) {
    [b-iz5zxaa115] .mud-table {
        font-size: 0.75rem;
    }

    [b-iz5zxaa115] .mud-table thead th {
        font-size: 0.6rem !important;
        padding: 0.625rem 0.375rem !important;
    }

    [b-iz5zxaa115] .mud-table tbody td {
        padding: 0.5rem 0.375rem !important;
    }

    .order-items-table-description[b-iz5zxaa115] {
        max-width: 150px !important;
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    [b-iz5zxaa115] .mud-table {
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }

    [b-iz5zxaa115] .mud-table thead th {
        background: #f0f0f0 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    [b-iz5zxaa115] .mud-table tbody tr:hover {
        background-color: transparent !important;
    }
}
/* /Pages/Orders/Components/OrderSectionNav.razor.rz.scp.css */
.order-section-nav[b-4oq9zw5u2z] {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    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);
}

.order-section-nav-toggle[b-4oq9zw5u2z] {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    padding: 4px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[b-4oq9zw5u2z] .section-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[b-4oq9zw5u2z] .section-nav-btn:hover {
    background-color: var(--mud-palette-action-default-hover);
}

[b-4oq9zw5u2z] .section-nav-btn.active {
    background-color: var(--mud-palette-primary-hover);
}

@media (max-width: 959.98px) {
    .order-section-nav[b-4oq9zw5u2z],
    .order-section-nav-toggle[b-4oq9zw5u2z] {
        display: none;
    }
}
/* /Pages/Orders/Components/OrderShipments.razor.rz.scp.css */
/* OrderShipments Component - Polished Visual Styles */

/* ============================================
   Container
   ============================================ */
[b-ko558oq9ps] .mud-table {
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #e2e8f0 !important;
    margin-top: 1rem;
}

/* ============================================
   Table Header
   ============================================ */
[b-ko558oq9ps] .mud-table thead th {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: white !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;
}

/* ============================================
   Table Rows
   ============================================ */
[b-ko558oq9ps] .mud-table tbody tr {
    transition: all 0.2s ease;
}

[b-ko558oq9ps] .mud-table tbody tr:hover {
    background-color: rgba(22, 163, 74, 0.06) !important;
}

[b-ko558oq9ps] .mud-table-striped tbody tr:nth-of-type(odd) {
    background-color: #f0fdf4 !important;
}

[b-ko558oq9ps] .mud-table tbody td {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* ============================================
   Shipment Index Column
   ============================================ */
[b-ko558oq9ps] .mud-table tbody td:first-child {
    font-weight: 700;
    color: #16a34a;
    font-size: 1rem;
}

/* ============================================
   Date Column
   ============================================ */
[b-ko558oq9ps] .mud-table tbody td[data-label*="Date"],
[b-ko558oq9ps] .mud-table tbody td:nth-child(2) {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.8125rem;
    color: #475569;
}

/* ============================================
   Invoice Number Column
   ============================================ */
[b-ko558oq9ps] .mud-table tbody td[data-label*="Invoice"],
[b-ko558oq9ps] .mud-table tbody td:nth-child(3) {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-weight: 600;
    color: #2563eb;
}

/* ============================================
   Amount Column
   ============================================ */
[b-ko558oq9ps] .mud-table tbody td[data-label*="Amount"],
[b-ko558oq9ps] .mud-table tbody td:nth-child(4) {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 0.9rem;
    color: #1e293b;
}

/* ============================================
   Status Column - Color Coded
   ============================================ */
[b-ko558oq9ps] .mud-table tbody td[data-label*="Status"],
[b-ko558oq9ps] .mud-table tbody td:last-child {
    font-weight: 600;
    text-transform: capitalize;
}

/* Completed Status */
[b-ko558oq9ps] .mud-table tbody tr td:last-child:contains("Completed"),
[b-ko558oq9ps] .mud-typography[style*="green"] {
    color: #16a34a !important;
}

/* In Progress Status */
[b-ko558oq9ps] .mud-typography[style*="blue"] {
    color: #2563eb !important;
}

/* Pending/Other Status */
[b-ko558oq9ps] .mud-typography[style*="orange"] {
    color: #ea580c !important;
}

/* ============================================
   Action Links
   ============================================ */
[b-ko558oq9ps] .mud-link {
    color: #16a34a !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

[b-ko558oq9ps] .mud-link:hover {
    color: #15803d !important;
    background-color: rgba(22, 163, 74, 0.1);
}

/* ============================================
   Pager
   ============================================ */
[b-ko558oq9ps] .mud-table-pagination {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0;
    padding: 0.5rem 1rem !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
/* /Pages/Orders/Components/OrderStatuses.razor.rz.scp.css */
/* OrderStatuses Component - Polished Visual Styles */

/* ============================================
   Main Status Container
   ============================================ */
[b-mku1v1v5h0] .d-flex.gap-3 {
    padding: 1rem 0;
}

/* ============================================
   Status Control Card (Left Section)
   ============================================ */
.order-status-panel[b-mku1v1v5h0] {
    width: 100%;
}

/* ============================================
   Status Info Alert
   ============================================ */
[b-mku1v1v5h0] .mud-alert.mud-alert-info {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
    border: 1px solid #7dd3fc !important;
    border-radius: 10px !important;
    padding: 1rem !important;
}

[b-mku1v1v5h0] .mud-alert.mud-alert-info .mud-typography {
    color: #0369a1 !important;
    font-weight: 500;
}

[b-mku1v1v5h0] .mud-alert.mud-alert-info .mud-link {
    color: #0284c7 !important;
    font-weight: 600;
    text-decoration: underline !important;
}

/* ============================================
   Expansion Panels for Status Actions
   ============================================ */
[b-mku1v1v5h0] .mud-expansion-panels {
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #e2e8f0 !important;
}

[b-mku1v1v5h0] .mud-expansion-panel {
    border: none !important;
    margin: 0 !important;
}

[b-mku1v1v5h0] .mud-expansion-panel-header {
    padding: 0.875rem 1rem !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    transition: all 0.2s ease !important;
}

[b-mku1v1v5h0] .mud-expansion-panel-header:hover {
    background: #f8fafc !important;
}

/* Panel Title with Icon */
[b-mku1v1v5h0] .mud-expansion-panel-header .d-flex.align-items-center.gap-2 {
    font-weight: 600;
}

[b-mku1v1v5h0] .mud-expansion-panel-header .mud-icon {
    font-size: 1.25rem !important;
}

/* Primary Status Panel Title */
[b-mku1v1v5h0] .mud-expansion-panel-header .mud-typography[style*="color: var(--mud-palette-primary)"],
[b-mku1v1v5h0] .mud-expansion-panel-header .mud-typography-body1[style*="Primary"] {
    color: #2563eb !important;
}

/* Warning Status Panel Title (Admin) */
[b-mku1v1v5h0] .mud-expansion-panel-header .mud-typography[style*="Warning"],
[b-mku1v1v5h0] .mud-expansion-panel-header .mud-typography-body1[style*="Warning"] {
    color: #d97706 !important;
}

[b-mku1v1v5h0] .mud-expansion-panel-content {
    padding: 1rem 1.25rem !important;
    background: #fafbfc !important;
}

/* ============================================
   Status Buttons
   ============================================ */
.order-status-button[b-mku1v1v5h0] {
    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-mku1v1v5h0] {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.order-status-button:disabled[b-mku1v1v5h0] {
    opacity: 0.5;
    transform: none !important;
    box-shadow: none !important;
}

/* Status Section Titles */
[b-mku1v1v5h0] .mud-typography-subtitle1 {
    color: #475569 !important;
    font-weight: 600 !important;
    margin-bottom: 0.75rem !important;
}

/* Previous Status Divider */
[b-mku1v1v5h0] .mt-4.pt-3[style*="border-top"] {
    border-top: 2px dashed #e2e8f0 !important;
    margin-top: 1.5rem !important;
    padding-top: 1.5rem !important;
}

/* ============================================
   Admin Override Section
   ============================================ */
[b-mku1v1v5h0] .mud-expansion-panel:last-child .mud-expansion-panel-header {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border-left: 4px solid #f59e0b !important;
}

[b-mku1v1v5h0] .mud-expansion-panel:last-child .mud-expansion-panel-content {
    background: #fffbeb !important;
}

/* Admin Dropdown */
[b-mku1v1v5h0] .pb-dropdown-225 {
    border-radius: 8px !important;
}

[b-mku1v1v5h0] .pb-dropdown-225 .mud-input {
    border-radius: 8px !important;
}

/* ============================================
   Center Section (Order Top Details Container)
   ============================================ */
[b-mku1v1v5h0] .d-flex.gap-3 > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ============================================
   Right Section (Account Links & Compliance)
   ============================================ */
[b-mku1v1v5h0] .d-flex.gap-3 > div:last-child {
    font-size: 0.9rem;
}

/* Account Links */
[b-mku1v1v5h0] .d-flex.gap-3 > div:last-child .mud-link {
    color: #3b82f6 !important;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

[b-mku1v1v5h0] .d-flex.gap-3 > div:last-child .mud-link:hover {
    color: #2563eb !important;
}

[b-mku1v1v5h0] .d-flex.gap-3 > div:last-child .mud-link .mud-icon {
    font-size: 1rem !important;
}

/* ============================================
   Compliance Card
   ============================================ */
[b-mku1v1v5h0] .d-flex.gap-3 > div:last-child > .mud-card {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
}

[b-mku1v1v5h0] .d-flex.gap-3 > div:last-child > .mud-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

/* Compliant Status - Green */
[b-mku1v1v5h0] .mud-typography-body1[style*="Success"],
[b-mku1v1v5h0] .pb-text[style*="Success"] {
    color: #16a34a !important;
    font-weight: 600 !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-mku1v1v5h0] .mud-typography-body1[style*="Success"]::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
}

/* Non-Compliant Status - Warning */
[b-mku1v1v5h0] .mud-typography-body1[style*="Warning"] strong,
[b-mku1v1v5h0] .pb-text[style*="Warning"] strong {
    color: #d97706 !important;
}

/* Compliance Toggle Button */
[b-mku1v1v5h0] .mud-icon-button[style*="Success"] {
    background-color: rgba(34, 197, 94, 0.1) !important;
    color: #16a34a !important;
}

[b-mku1v1v5h0] .mud-icon-button[style*="Success"]:hover {
    background-color: rgba(34, 197, 94, 0.2) !important;
}

[b-mku1v1v5h0] .mud-icon-button[style*="Warning"] {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: #d97706 !important;
}

[b-mku1v1v5h0] .mud-icon-button[style*="Warning"]:hover {
    background-color: rgba(245, 158, 11, 0.2) !important;
}

/* Non-Compliant Reason Section */
[b-mku1v1v5h0] .pt-2 .mb-2 {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid #fbbf24;
    color: #92400e;
    font-size: 0.875rem;
}

/* ============================================
   Tooltip Enhancements
   ============================================ */
[b-mku1v1v5h0] .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-mku1v1v5h0] .d-flex.gap-3 {
        flex-wrap: wrap;
    }

    [b-mku1v1v5h0] .d-flex.gap-3 > div {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    [b-mku1v1v5h0] .d-flex.gap-3 > div:nth-child(2) {
        order: -1;
    }
}

@media (max-width: 768px) {
    .order-status-button[b-mku1v1v5h0] {
        min-width: 100px;
        font-size: 0.8rem !important;
    }

    [b-mku1v1v5h0] .mud-expansion-panel-content {
        padding: 0.75rem 1rem !important;
    }
}
/* /Pages/Orders/Components/OrderTopDetails.razor.rz.scp.css */
/* OrderTopDetails Component - Polished Visual Styles */

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

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

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

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

/* Send Status Update Button */
[b-trfy6vhzjd] .d-flex.gap-2 .mud-button-root[style*="Info"],
[b-trfy6vhzjd] .d-flex.gap-2 button:first-child {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    border-radius: 10px !important;
    padding: 0.625rem 1.25rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3) !important;
    transition: all 0.2s ease !important;
}

[b-trfy6vhzjd] .d-flex.gap-2 .mud-button-root[style*="Info"]:hover,
[b-trfy6vhzjd] .d-flex.gap-2 button:first-child:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4) !important;
}

/* Status History Button */
[b-trfy6vhzjd] .d-flex.gap-2 .mud-button-root[style*="Secondary"],
[b-trfy6vhzjd] .d-flex.gap-2 button:nth-child(2) {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border-radius: 10px !important;
    padding: 0.625rem 1.25rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3) !important;
    transition: all 0.2s ease !important;
}

[b-trfy6vhzjd] .d-flex.gap-2 .mud-button-root[style*="Secondary"]:hover,
[b-trfy6vhzjd] .d-flex.gap-2 button:nth-child(2):hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4) !important;
}

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

/* ============================================
   Order Info Card
   ============================================ */
[b-trfy6vhzjd] .d-flex.flex-column.align-items-center.gap-3 > .mud-card {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
    min-width: 300px;
    max-width: 450px;
}

[b-trfy6vhzjd] .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-trfy6vhzjd] .d-flex.flex-column.align-items-center.gap-3 > .mud-card .text-center {
    padding: 0.25rem 0;
}

/* Order ID Link */
[b-trfy6vhzjd] .d-flex.flex-column.align-items-center.gap-3 > .mud-card .mud-link {
    color: #2563eb !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-trfy6vhzjd] .d-flex.flex-column.align-items-center.gap-3 > .mud-card .mud-link:hover {
    color: #1d4ed8 !important;
    background-color: rgba(37, 99, 235, 0.1);
}

/* Strong Labels */
[b-trfy6vhzjd] .d-flex.flex-column.align-items-center.gap-3 > .mud-card strong {
    color: #475569 !important;
    font-weight: 600 !important;
}

/* Order Type Icon */
[b-trfy6vhzjd] .d-flex.flex-column.align-items-center.gap-3 > .mud-card .mud-icon {
    color: #3b82f6 !important;
    font-size: 1.125rem !important;
    vertical-align: middle !important;
}

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

[b-trfy6vhzjd] .d-flex.flex-column.align-items-center.gap-3 > .mud-card div[style*="font-size: 0.85rem"] strong {
    color: #64748b !important;
}

/* ============================================
   APM Contract Link Highlight
   ============================================ */
[b-trfy6vhzjd] .d-flex.flex-column.align-items-center.gap-3 > .mud-card .mud-link[href*="apm"],
[b-trfy6vhzjd] .d-flex.flex-column.align-items-center.gap-3 > .mud-card .mud-link[href*="Apm"] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e !important;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-weight: 600 !important;
}

[b-trfy6vhzjd] .d-flex.flex-column.align-items-center.gap-3 > .mud-card .mud-link[href*="apm"]:hover,
[b-trfy6vhzjd] .d-flex.flex-column.align-items-center.gap-3 > .mud-card .mud-link[href*="Apm"]:hover {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
}

/* ============================================
   Order Type Badge
   ============================================ */
[b-trfy6vhzjd] .d-flex.flex-column.align-items-center.gap-3 > .mud-card .mud-icon + span {
    font-weight: 600;
    color: #1e293b;
}

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

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

    [b-trfy6vhzjd] .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-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    margin-top: 1.5rem !important;
}

/* ============================================
   Left Section (Payment, Shipping, Status Info)
   ============================================ */
[b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 > .pt-5:first-child {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 1.25rem !important;
    border-radius: 10px;
    border-left: 4px solid #3b82f6;
    min-width: 200px;
}

[b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 > .pt-5:first-child .row {
    padding: 0.5rem 0;
    transition: background-color 0.2s ease;
}

[b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 > .pt-5:first-child .row:hover {
    background-color: rgba(59, 130, 246, 0.05);
    border-radius: 6px;
}

[b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 > .pt-5:first-child .mud-typography {
    font-size: 0.9rem;
    color: #475569;
}

[b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 > .pt-5:first-child strong {
    color: #1e293b;
    font-weight: 600;
}

/* ============================================
   Right Section (Pricing Totals Table)
   ============================================ */
[b-ofbwbdvtzp] #order-pricing-totals,
[b-ofbwbdvtzp] [id*="OrderPricingTotals"] {
    padding: 0 !important;
}

[b-ofbwbdvtzp] .d-flex.flex-row-reverse.pt-5.padding-right-xl {
    padding: 0 !important;
}

[b-ofbwbdvtzp] .d-flex.flex-row-reverse.pt-5.padding-right-xl > .padding-right-xl {
    padding: 0 !important;
}

/* ============================================
   Pricing Table
   ============================================ */
[b-ofbwbdvtzp] .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 #e2e8f0 !important;
    min-width: 350px;
}

[b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 .mud-table-container {
    border-radius: 10px !important;
}

/* Table Header */
[b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 .mud-table thead th {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%) !important;
    color: white !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-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 .mud-table thead th:first-child {
    border-top-left-radius: 10px !important;
}

[b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 .mud-table thead th:last-child {
    border-top-right-radius: 10px !important;
}

/* Table Rows */
[b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 .mud-table tbody tr {
    transition: background-color 0.2s ease;
}

[b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 .mud-table tbody tr:hover {
    background-color: rgba(59, 130, 246, 0.04) !important;
}

[b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 .mud-table tbody td {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* Type Column (First Column) */
[b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 .mud-table tbody td:first-child {
    background: #f8fafc;
    font-weight: 600;
    color: #475569;
}

/* Price Columns */
[b-ofbwbdvtzp] .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-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 .mud-table tbody tr:last-child {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
}

[b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 .mud-table tbody tr:last-child td {
    border-bottom: none !important;
    font-weight: 700 !important;
}

[b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 .mud-table tbody tr:last-child td:first-child {
    background: transparent !important;
    color: #92400e !important;
}

[b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 .mud-table tbody tr:last-child td strong {
    color: #92400e !important;
    font-size: 1rem;
}

/* ============================================
   Subtotal Row Styling
   ============================================ */
[b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 .mud-table tbody tr:first-child {
    background: #f0fdf4 !important;
}

[b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 .mud-table tbody tr:first-child td:first-child {
    background: transparent !important;
    color: #166534 !important;
}

/* ============================================
   Color-Coded Price Values
   ============================================ */
/* Positive Values (Green) */
[b-ofbwbdvtzp] .pb-text[style*="Success"],
[b-ofbwbdvtzp] .mud-typography[style*="color: green"],
[b-ofbwbdvtzp] [style*="color: var(--mud-palette-success)"] {
    color: #16a34a !important;
    font-weight: 600 !important;
}

/* Negative/Warning Values (Red/Orange) */
[b-ofbwbdvtzp] .pb-text[style*="Error"],
[b-ofbwbdvtzp] .pb-text[style*="Warning"],
[b-ofbwbdvtzp] .mud-typography[style*="color: red"],
[b-ofbwbdvtzp] [style*="color: var(--mud-palette-error)"] {
    color: #dc2626 !important;
    font-weight: 600 !important;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 1200px) {
    [b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 {
        flex-direction: column;
        gap: 1.5rem;
    }

    [b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 .mud-table {
        min-width: 100%;
    }
}

@media (max-width: 768px) {
    [b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 {
        padding: 1rem;
    }

    [b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 > .pt-5:first-child {
        padding: 1rem !important;
    }

    [b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 .mud-table tbody td {
        padding: 0.625rem 0.75rem !important;
        font-size: 0.8125rem;
    }

    [b-ofbwbdvtzp] .d-flex.justify-content-between.mb-3 .mud-table thead th {
        padding: 0.75rem 0.75rem !important;
        font-size: 0.7rem !important;
    }
}
/* /Pages/Orders/Components/ShipmentBoxes.razor.rz.scp.css */
/* ShipmentBoxes Component - Polished Visual Styles */

/* ============================================
   Container
   ============================================ */
[b-sdnueo1qhg] .mud-table {
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #e2e8f0 !important;
}

/* ============================================
   Table Header
   ============================================ */
[b-sdnueo1qhg] .mud-table thead th {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    color: white !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;
}

/* ============================================
   Table Rows
   ============================================ */
[b-sdnueo1qhg] .mud-table tbody tr {
    transition: all 0.2s ease;
}

[b-sdnueo1qhg] .mud-table tbody tr:hover {
    background-color: rgba(217, 119, 6, 0.06) !important;
}

[b-sdnueo1qhg] .mud-table-striped tbody tr:nth-of-type(odd) {
    background-color: #fffbeb !important;
}

[b-sdnueo1qhg] .mud-table tbody td {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* ============================================
   Box Index Column
   ============================================ */
[b-sdnueo1qhg] .mud-table tbody td:first-child {
    font-weight: 700;
    color: #d97706;
}

/* ============================================
   Tracking Number Column
   ============================================ */
[b-sdnueo1qhg] .mud-table tbody td:last-child,
[b-sdnueo1qhg] .mud-table tbody td[data-label*="Tracking"] {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-weight: 600;
    color: #0891b2;
}

/* ============================================
   Carrier Column
   ============================================ */
[b-sdnueo1qhg] .mud-table tbody td[data-label*="Carrier"] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8125rem;
}

/* ============================================
   Links
   ============================================ */
[b-sdnueo1qhg] .mud-link {
    color: #d97706 !important;
    font-weight: 600 !important;
}

[b-sdnueo1qhg] .mud-link:hover {
    color: #b45309 !important;
}

/* ============================================
   Pager
   ============================================ */
[b-sdnueo1qhg] .mud-table-pagination {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0;
    padding: 0.5rem 1rem !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
/* /Pages/Orders/Components/ShipmentPayments.razor.rz.scp.css */
/* ShipmentPayments Component - Polished Visual Styles */

/* ============================================
   Container
   ============================================ */
[b-1zu59zrw4m] .mud-table {
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #e2e8f0 !important;
}

/* ============================================
   Table Header
   ============================================ */
[b-1zu59zrw4m] .mud-table thead th {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
    color: white !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;
}

/* ============================================
   Table Rows
   ============================================ */
[b-1zu59zrw4m] .mud-table tbody tr {
    transition: all 0.2s ease;
}

[b-1zu59zrw4m] .mud-table tbody tr:hover {
    background-color: rgba(8, 145, 178, 0.06) !important;
}

[b-1zu59zrw4m] .mud-table-striped tbody tr:nth-of-type(odd) {
    background-color: #ecfeff !important;
}

[b-1zu59zrw4m] .mud-table tbody td {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* ============================================
   Payment ID Column
   ============================================ */
[b-1zu59zrw4m] .mud-table tbody td:first-child {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-weight: 600;
    color: #0891b2;
}

/* ============================================
   Amount Column
   ============================================ */
[b-1zu59zrw4m] .mud-table tbody td[data-label*="Amount"],
[b-1zu59zrw4m] .mud-table tbody td:nth-child(5) {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 0.9rem;
}

/* ============================================
   Status Column - Color Coded
   ============================================ */
/* Approved - Green */
[b-1zu59zrw4m] .mud-table tbody td[style*="green"],
[b-1zu59zrw4m] .mud-typography[style*="color: green"] {
    color: #16a34a !important;
    font-weight: 700 !important;
}

/* Failed/Declined - Red */
[b-1zu59zrw4m] .mud-table tbody td[style*="red"],
[b-1zu59zrw4m] .mud-typography[style*="color: red"] {
    color: #dc2626 !important;
    font-weight: 700 !important;
}

/* Pending - Orange */
[b-1zu59zrw4m] .mud-table tbody td[style*="orange"],
[b-1zu59zrw4m] .mud-typography[style*="color: orange"] {
    color: #ea580c !important;
    font-weight: 600 !important;
}

/* ============================================
   Links
   ============================================ */
[b-1zu59zrw4m] .mud-link {
    color: #0891b2 !important;
    font-weight: 600 !important;
}

[b-1zu59zrw4m] .mud-link:hover {
    color: #0e7490 !important;
}

/* ============================================
   Pager
   ============================================ */
[b-1zu59zrw4m] .mud-table-pagination {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0;
    padding: 0.5rem 1rem !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
/* /Pages/Orders/Components/ShipmentSchedules.razor.rz.scp.css */
/* ShipmentSchedules Component - Polished Visual Styles */

/* ============================================
   Container
   ============================================ */
[b-ucwcf521fo] .mud-table {
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #e2e8f0 !important;
}

/* ============================================
   Table Header
   ============================================ */
[b-ucwcf521fo] .mud-table thead th {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: white !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;
}

/* ============================================
   Table Rows
   ============================================ */
[b-ucwcf521fo] .mud-table tbody tr {
    transition: all 0.2s ease;
}

[b-ucwcf521fo] .mud-table tbody tr:hover {
    background-color: rgba(5, 150, 105, 0.06) !important;
}

[b-ucwcf521fo] .mud-table-striped tbody tr:nth-of-type(odd) {
    background-color: #f0fdf4 !important;
}

[b-ucwcf521fo] .mud-table tbody td {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* ============================================
   Links
   ============================================ */
[b-ucwcf521fo] .mud-link {
    color: #059669 !important;
    font-weight: 600 !important;
}

[b-ucwcf521fo] .mud-link:hover {
    color: #047857 !important;
}

/* ============================================
   Pager
   ============================================ */
[b-ucwcf521fo] .mud-table-pagination {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0;
    padding: 0.5rem 1rem !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
/* /Pages/Orders/Components/ShipmentTimeCards.razor.rz.scp.css */
/* ShipmentTimeCards Component - Polished Visual Styles */

/* ============================================
   Container
   ============================================ */
[b-4v2blwqi28] .mud-table {
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #e2e8f0 !important;
}

/* ============================================
   Table Header
   ============================================ */
[b-4v2blwqi28] .mud-table thead th {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    color: white !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;
}

/* ============================================
   Table Rows
   ============================================ */
[b-4v2blwqi28] .mud-table tbody tr {
    transition: all 0.2s ease;
}

[b-4v2blwqi28] .mud-table tbody tr:hover {
    background-color: rgba(124, 58, 237, 0.06) !important;
}

[b-4v2blwqi28] .mud-table-striped tbody tr:nth-of-type(odd) {
    background-color: #faf5ff !important;
}

[b-4v2blwqi28] .mud-table tbody td {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* ============================================
   Time/Hours Values - Monospace
   ============================================ */
[b-4v2blwqi28] .mud-table tbody td:nth-child(n+2) {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.8125rem;
}

/* ============================================
   Cost/Price Columns
   ============================================ */
[b-4v2blwqi28] .mud-table tbody td:last-child,
[b-4v2blwqi28] .mud-table tbody td:nth-last-child(2) {
    font-weight: 600;
    color: #6d28d9;
}

/* ============================================
   Links
   ============================================ */
[b-4v2blwqi28] .mud-link {
    color: #7c3aed !important;
    font-weight: 600 !important;
}

[b-4v2blwqi28] .mud-link:hover {
    color: #6d28d9 !important;
}

/* ============================================
   Pager
   ============================================ */
[b-4v2blwqi28] .mud-table-pagination {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0;
    padding: 0.5rem 1rem !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
/* /Pages/Orders/Index.razor.rz.scp.css */
.pb-order-grid-soid-header[b-1bxe56u5it] {
    min-width: 100px;
}

.pb-order-grid-soid-footer[b-1bxe56u5it] {
    min-width: 100px;
}
/* /Pages/Orders/Order.razor.rz.scp.css */
/* Order Page - Polished Visual Styles */

/* ============================================
   CSS Variables for Order Page Theme
   ============================================ */
:root[b-yy924gm2k9],
:global(:root)[b-yy924gm2k9],
:global(html)[b-yy924gm2k9],
:global(body)[b-yy924gm2k9] {
    --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-primary-gradient: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    --order-success-gradient: linear-gradient(135deg, #43a047 0%, #388e3c 100%);
    --order-warning-gradient: linear-gradient(135deg, #fb8c00 0%, #f57c00 100%);
    --order-info-gradient: linear-gradient(135deg, #0288d1 0%, #0277bd 100%);
    --order-section-bg: #f8fafc;
    --order-border-color: #e2e8f0;
    --order-text-primary: #1e293b;
    --order-text-secondary: #64748b;
    --order-accent-blue: #3b82f6;
    --order-accent-green: #22c55e;
    --order-accent-orange: #f97316;
}

/* ============================================
   Page Container & Layout
   ============================================ */
[b-yy924gm2k9] .order-page-container {
    padding: 1.5rem;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    min-height: 100vh;
}

/* ============================================
   Breadcrumbs Styling
   ============================================ */
[b-yy924gm2k9] .mud-breadcrumbs {
    background: white;
    padding: 0.75rem 1rem;
    border-radius: var(--order-card-radius);
    box-shadow: var(--order-card-shadow);
    margin-bottom: 1.5rem !important;
}

[b-yy924gm2k9] .mud-breadcrumbs .mud-breadcrumb-item {
    color: var(--order-text-secondary);
    font-weight: 500;
    transition: color 0.2s ease;
}

[b-yy924gm2k9] .mud-breadcrumbs .mud-breadcrumb-item:hover {
    color: var(--order-accent-blue);
}

/* ============================================
   Page Title Enhancement
   ============================================ */
[b-yy924gm2k9] .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-yy924gm2k9] .mt-5.mb-5.d-flex.justify-content-between {
    background: white;
    padding: 1rem 1.5rem;
    border-radius: var(--order-card-radius);
    box-shadow: var(--order-card-shadow);
    align-items: center;
}

[b-yy924gm2k9] .mt-5.mb-5.d-flex.justify-content-between h4 {
    color: var(--order-accent-blue);
    cursor: pointer;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.1);
    transition: all 0.2s ease;
}

[b-yy924gm2k9] .mt-5.mb-5.d-flex.justify-content-between h4:hover {
    background: rgba(59, 130, 246, 0.2);
    transform: translateY(-1px);
}

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

/* ============================================
   Section Headers (Collapsible Sections)
   ============================================ */
[b-yy924gm2k9] .pt-5 > div:first-child {
    margin-bottom: 0.75rem;
}

[b-yy924gm2k9] .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-yy924gm2k9] .collapse.show,
[b-yy924gm2k9] .collapse:not(.show) + .collapse.show {
    background: white;
    padding: 1rem;
    border-radius: var(--order-card-radius);
    box-shadow: var(--order-card-shadow);
    margin-top: 0.5rem;
}

/* ============================================
   Admin Price Buttons Section
   ============================================ */
[b-yy924gm2k9] .float-right.padding-right-xl {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: 1rem 1.5rem;
    border-radius: var(--order-card-radius);
    border: 1px solid #fbbf24;
    margin-top: 1.5rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ============================================
   Scroll Buttons
   ============================================ */
[b-yy924gm2k9] .d-flex.justify-content-center.pt-5.pb-5 {
    margin-top: 2rem;
}

/* ============================================
   MudCard Global Enhancements (Order Page Scope)
   ============================================ */
[b-yy924gm2k9] .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-yy924gm2k9] .mud-card:hover {
    box-shadow: var(--order-card-shadow-hover) !important;
    transform: translateY(-2px);
}

[b-yy924gm2k9] .mud-card-content {
    padding: 1.25rem !important;
}

/* ============================================
   MudTable Global Enhancements (Order Page Scope)
   ============================================ */
[b-yy924gm2k9] .mud-table {
    border-radius: var(--order-card-radius) !important;
    overflow: hidden;
    box-shadow: var(--order-card-shadow) !important;
}

[b-yy924gm2k9] .mud-table-container {
    border-radius: var(--order-card-radius) !important;
}

[b-yy924gm2k9] .mud-table thead th {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !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-yy924gm2k9] .mud-table tbody tr {
    transition: background-color 0.2s ease;
}

[b-yy924gm2k9] .mud-table tbody tr:hover {
    background-color: rgba(59, 130, 246, 0.04) !important;
}

[b-yy924gm2k9] .mud-table tbody td {
    padding: 0.875rem 0.75rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

[b-yy924gm2k9] .mud-table-striped tbody tr:nth-of-type(odd) {
    background-color: #fafbfc !important;
}

/* ============================================
   MudExpansionPanel Enhancements
   ============================================ */
[b-yy924gm2k9] .mud-expansion-panels {
    border-radius: var(--order-card-radius) !important;
    overflow: hidden;
    box-shadow: var(--order-card-shadow) !important;
}

[b-yy924gm2k9] .mud-expansion-panel {
    border-radius: var(--order-card-radius) !important;
    margin-bottom: 0 !important;
}

[b-yy924gm2k9] .mud-expansion-panel-header {
    padding: 1rem 1.25rem !important;
    background: white !important;
    transition: background-color 0.2s ease !important;
}

[b-yy924gm2k9] .mud-expansion-panel-header:hover {
    background: #f8fafc !important;
}

[b-yy924gm2k9] .mud-expansion-panel-content {
    padding: 1rem 1.25rem !important;
    background: #fafbfc !important;
    border-top: 1px solid var(--order-border-color) !important;
}

/* ============================================
   MudAlert Enhancements
   ============================================ */
[b-yy924gm2k9] .mud-alert {
    border-radius: 10px !important;
    padding: 1rem 1.25rem !important;
}

[b-yy924gm2k9] .mud-alert-info {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
    border: 1px solid #7dd3fc !important;
}

/* ============================================
   MudLink Enhancements
   ============================================ */
[b-yy924gm2k9] .mud-link {
    color: var(--order-accent-blue) !important;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

[b-yy924gm2k9] .mud-link:hover {
    color: #2563eb !important;
    text-decoration: underline !important;
}

/* ============================================
   MudChip Enhancements
   ============================================ */
[b-yy924gm2k9] .mud-chip {
    border-radius: 20px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

[b-yy924gm2k9] .mud-chip:hover {
    transform: scale(1.02);
}

/* ============================================
   Button Enhancements
   ============================================ */
[b-yy924gm2k9] .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-yy924gm2k9] .mud-button-root:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

[b-yy924gm2k9] .mud-icon-button {
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

[b-yy924gm2k9] .mud-icon-button:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

/* ============================================
   Text & Typography Enhancements
   ============================================ */
[b-yy924gm2k9] .mud-typography strong {
    color: var(--order-text-primary);
    font-weight: 600;
}

[b-yy924gm2k9] .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-yy924gm2k9] .mud-input-control {
    margin-bottom: 0.5rem;
}

[b-yy924gm2k9] .mud-input {
    border-radius: 8px !important;
}

[b-yy924gm2k9] .mud-select {
    border-radius: 8px !important;
}

/* ============================================
   Dividers
   ============================================ */
[b-yy924gm2k9] .mud-divider {
    margin: 1rem 0 !important;
    border-color: var(--order-border-color) !important;
}

/* ============================================
   Loading States
   ============================================ */
[b-yy924gm2k9] .mud-progress-circular {
    color: var(--order-accent-blue) !important;
}

/* ============================================
   Tooltip Enhancements
   ============================================ */
[b-yy924gm2k9] .mud-tooltip {
    border-radius: 8px !important;
    font-size: 0.8125rem !important;
    padding: 0.5rem 0.75rem !important;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
[b-yy924gm2k9] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[b-yy924gm2k9] ::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

[b-yy924gm2k9] ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

[b-yy924gm2k9] ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 1200px) {
    [b-yy924gm2k9] .mud-card {
        margin-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    [b-yy924gm2k9] .mud-card-content {
        padding: 1rem !important;
    }

    [b-yy924gm2k9] .mud-table thead th {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.7rem !important;
    }

    [b-yy924gm2k9] .mud-table tbody td {
        padding: 0.625rem 0.5rem !important;
    }
}

/* ============================================
   Animation Utilities
   ============================================ */
@keyframes fadeIn-b-yy924gm2k9 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-yy924gm2k9] .fade-in {
    animation: fadeIn-b-yy924gm2k9 0.3s ease-out;
}
/* /Pages/Schedule/DispatchConsole.razor.rz.scp.css */
.pb-dispatch-console .pb-dispatch-detail-selected[b-8e5fb56ovy] {
    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-8e5fb56ovy] {
    font-weight: 600;
}

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

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

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

.global-search-results[b-luxz5vrgtv]  .global-search-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}
/* /Pages/Settings/NavMenuTreeEditor.razor.rz.scp.css */
.nav-tree-container[b-czw2zkioxc] {
    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-czw2zkioxc] {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.nav-tree-root[b-czw2zkioxc] {
    padding-left: 0;
}

.nav-tree-item[b-czw2zkioxc] {
    margin: 4px 0;
}

.nav-tree-children[b-czw2zkioxc] {
    margin: 4px 0 0 18px;
    padding-left: 12px;
    border-left: 1px dashed var(--mud-palette-lines-default);
}

.nav-tree-children:empty[b-czw2zkioxc] {
    display: none;
}

.nav-tree-row[b-czw2zkioxc] {
    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-czw2zkioxc] {
    background: var(--mud-palette-surface-variant);
}

.nav-tree-row-selected[b-czw2zkioxc] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.nav-tree-row-hidden[b-czw2zkioxc] {
    opacity: 0.55;
}

.nav-tree-title[b-czw2zkioxc] {
    display: flex;
    flex-direction: column;
}

.nav-tree-meta[b-czw2zkioxc] {
    font-size: 0.75rem;
}

.nav-tree-drag[b-czw2zkioxc] {
    cursor: grab;
}

.nav-tree-drag:active[b-czw2zkioxc] {
    cursor: grabbing;
}

.nav-color-presets[b-czw2zkioxc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.nav-color-swatch[b-czw2zkioxc] {
    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-czw2zkioxc] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
/* /Pages/SmartOrders/CreateSmartOrder.razor.rz.scp.css */
.quick-order-primary[b-mxcp7sat3c] {
    border: 2px solid var(--mud-palette-primary);
}

.quick-order-secondary[b-mxcp7sat3c] {
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-grey);
}
/* /Pages/TimeRecords/Index.razor.rz.scp.css */