/* /Components/Common/PortalSwitcher.razor.rz.scp.css */
/* =========================================
   PORTAL SWITCHER COMPONENT
   ========================================= */

.portal-switcher[b-iabpi47u5j] {
    position: relative;
}

.portal-switcher-btn[b-iabpi47u5j] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.2s ease;
}

.portal-switcher-btn:hover[b-iabpi47u5j] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    border-color: var(--border-color-hover);
}

.portal-switcher-btn:active[b-iabpi47u5j] {
    transform: scale(0.95);
}

/* Backdrop for closing dropdown */
.portal-switcher-backdrop[b-iabpi47u5j] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* Dropdown Menu */
.portal-dropdown[b-iabpi47u5j] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 100;
    animation: portalDropdownSlideIn-b-iabpi47u5j 0.2s ease;
}

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

.portal-dropdown-header[b-iabpi47u5j] {
    padding: 12px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.portal-option[b-iabpi47u5j] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
    font-size: 0.9375rem;
}

.portal-option:hover[b-iabpi47u5j] {
    background: var(--bg-surface-hover);
}

.portal-option.active[b-iabpi47u5j] {
    background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
    color: white;
}

.portal-option i:first-child[b-iabpi47u5j] {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.portal-option span[b-iabpi47u5j] {
    flex: 1;
}

.portal-option .check-icon[b-iabpi47u5j] {
    font-size: 0.9rem;
    flex-shrink: 0;
}
/* /Components/Common/SlideOutPanel.razor.rz.scp.css */
/* =========================================
   SLIDE OUT PANEL - Right Edge Slide
   ========================================= */

/* Panel Container */
.slide-out-panel[b-vte6tnvugj] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: 450px;
    max-width: 100vw;
    background: var(--bg-surface);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[data-theme="blue"] .slide-out-panel[b-vte6tnvugj],
[data-theme="dark"] .slide-out-panel[b-vte6tnvugj],
[data-theme="gunmetal"] .slide-out-panel[b-vte6tnvugj] {
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
}

.slide-out-panel.open[b-vte6tnvugj] {
    transform: translateX(0);
}

/* Header */
.slide-out-header[b-vte6tnvugj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface);
    flex-shrink: 0;
}

.slide-out-header h3[b-vte6tnvugj] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.slide-out-close[b-vte6tnvugj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.slide-out-close:hover[b-vte6tnvugj] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.slide-out-close:active[b-vte6tnvugj] {
    transform: scale(0.95);
}

/* Content Area */
.slide-out-content[b-vte6tnvugj] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    overscroll-behavior: contain;
}

/* Custom Scrollbar */
.slide-out-content[b-vte6tnvugj]::-webkit-scrollbar {
    width: 6px;
}

.slide-out-content[b-vte6tnvugj]::-webkit-scrollbar-track {
    background: transparent;
}

.slide-out-content[b-vte6tnvugj]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.slide-out-content[b-vte6tnvugj]::-webkit-scrollbar-thumb:hover {
    background: var(--border-color-hover);
}

/* Responsive */
@media (max-width: 500px) {
    .slide-out-panel[b-vte6tnvugj] {
        width: 100vw;
    }
}
/* /Components/Common/ThemeSelector.razor.rz.scp.css */
/* =========================================
   THEME SELECTOR COMPONENT
   Reusable dropdown for selecting themes
   ========================================= */

.theme-selector[b-jdtkvbm3r8] {
    position: relative;
    display: inline-flex;
}

/* Toggle Button */
.theme-selector-btn[b-jdtkvbm3r8] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: all 0.2s ease;
}

.theme-selector-btn:hover[b-jdtkvbm3r8] {
    background: var(--bg-surface-hover);
    border-color: var(--border-color-hover);
    color: var(--text-primary);
}

.theme-selector-btn:focus[b-jdtkvbm3r8] {
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-bg-light);
}

.theme-selector.open .theme-selector-btn[b-jdtkvbm3r8] {
    background: var(--bg-surface-hover);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Backdrop for closing */
.theme-backdrop[b-jdtkvbm3r8] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* Dropdown Menu */
.theme-dropdown[b-jdtkvbm3r8] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 100;
    animation: themeDropdownIn-b-jdtkvbm3r8 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes themeDropdownIn-b-jdtkvbm3r8 {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Theme Option */
.theme-option[b-jdtkvbm3r8] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.9375rem;
    text-align: left;
}

.theme-option:hover[b-jdtkvbm3r8] {
    background: var(--bg-surface-hover);
}

.theme-option.active[b-jdtkvbm3r8] {
    background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
    color: white;
}

.theme-option.active:hover[b-jdtkvbm3r8] {
    background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
}

/* Icon styling */
.theme-option i:first-child[b-jdtkvbm3r8] {
    font-size: 1.125rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.theme-option span[b-jdtkvbm3r8] {
    flex: 1;
}

/* Checkmark for active */
.theme-check[b-jdtkvbm3r8] {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* Responsive - slightly smaller on mobile */
@media (max-width: 600px) {
    .theme-selector-btn[b-jdtkvbm3r8] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .theme-dropdown[b-jdtkvbm3r8] {
        min-width: 160px;
    }

    .theme-option[b-jdtkvbm3r8] {
        padding: 8px 10px;
        font-size: 0.875rem;
    }
}
/* /Components/SelfService/SelfServiceSideMenu.razor.rz.scp.css */
/* =========================================
   SELF-SERVICE SIDE MENU
   ========================================= */

.ss-side-menu[b-lnwhyrcy3g] {
    position: fixed;
    top: 0; /* Start from top like other portals */
    left: 0;
    bottom: 0;
    width: 220px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-color);
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Sidebar Header with Logo (matches other portals) */
.ss-sidebar-header[b-lnwhyrcy3g] {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.ss-logo-link[b-lnwhyrcy3g] {
    display: block;
    text-decoration: none;
}

.ss-logo[b-lnwhyrcy3g] {
    max-width: 180px;
    width: 100%;
    height: auto;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.ss-logo:hover[b-lnwhyrcy3g] {
    transform: scale(1.02);
}

/* Dark theme logo treatment - add subtle background for visibility */
[data-theme="dark"] .ss-logo[b-lnwhyrcy3g],
[data-theme="gunmetal"] .ss-logo[b-lnwhyrcy3g] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 6px;
    padding: 6px 8px;
}

.ss-menu-items[b-lnwhyrcy3g] {
    display: flex;
    flex-direction: column;
    padding: 1rem 0.75rem;
    gap: 0.25rem;
}

/* Menu Item Base */
.ss-menu-item[b-lnwhyrcy3g] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.ss-menu-item i[b-lnwhyrcy3g] {
    font-size: 1.25rem;
    width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.ss-menu-item span[b-lnwhyrcy3g] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover State */
.ss-menu-item:hover[b-lnwhyrcy3g] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.ss-menu-item:hover i[b-lnwhyrcy3g] {
    transform: scale(1.1);
}

/* Active State */
.ss-menu-item.active[b-lnwhyrcy3g] {
    background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 59, 130, 246), 0.3);
}

.ss-menu-item.active:hover[b-lnwhyrcy3g] {
    background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
    color: white;
}

.ss-menu-item.active i[b-lnwhyrcy3g] {
    color: white;
}

/* Active Indicator Bar */
.ss-menu-item.active[b-lnwhyrcy3g]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: white;
    border-radius: 0 4px 4px 0;
    opacity: 0.5;
}

/* Focus State */
.ss-menu-item:focus[b-lnwhyrcy3g] {
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-gradient-start);
}

.ss-menu-item:focus:not(.active)[b-lnwhyrcy3g] {
    background: var(--bg-surface-hover);
}

/* Menu Divider */
.ss-menu-divider[b-lnwhyrcy3g] {
    height: 1px;
    background: var(--border-color);
    margin: 12px 16px;
}

/* Responsive - Hide labels on smaller screens */
@media (max-width: 900px) {
    .ss-side-menu[b-lnwhyrcy3g] {
        width: 70px;
    }

    .ss-menu-item[b-lnwhyrcy3g] {
        justify-content: center;
        padding: 0.875rem;
    }

    .ss-menu-item span[b-lnwhyrcy3g] {
        display: none;
    }

    .ss-menu-item i[b-lnwhyrcy3g] {
        margin: 0;
    }

    .ss-menu-item.active[b-lnwhyrcy3g]::before {
        display: none;
    }
}

/* Hide menu completely on mobile */
@media (max-width: 600px) {
    .ss-side-menu[b-lnwhyrcy3g] {
        display: none;
    }
}
/* /Pages/Admin/UserManagement.razor.rz.scp.css */
.um-page[b-zeyy1ehfz5] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
    overflow: hidden;
    padding: 24px;
    gap: 16px;
}

.um-toolbar[b-zeyy1ehfz5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.um-toolbar-left[b-zeyy1ehfz5] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.um-title[b-zeyy1ehfz5] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.um-subtitle[b-zeyy1ehfz5] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.um-toolbar-right[b-zeyy1ehfz5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.um-search-wrapper[b-zeyy1ehfz5] {
    position: relative;
    display: flex;
    align-items: center;
}

.um-search-icon[b-zeyy1ehfz5] {
    position: absolute;
    left: 10px;
    color: var(--text-tertiary);
    font-size: 0.875rem;
    pointer-events: none;
}

.um-search[b-zeyy1ehfz5] {
    padding: 7px 32px 7px 32px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.875rem;
    width: 240px;
    outline: none;
    transition: border-color 0.15s;
}

.um-search:focus[b-zeyy1ehfz5] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-alpha, rgba(59, 130, 246, 0.15));
}

.um-search-clear[b-zeyy1ehfz5] {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 1rem;
    line-height: 1;
}

.um-filter[b-zeyy1ehfz5] {
    padding: 7px 28px 7px 10px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    cursor: pointer;
    appearance: auto;
}

/* Role filter wrapper with count badge */
.um-filter-wrapper[b-zeyy1ehfz5] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.um-filter-count[b-zeyy1ehfz5] {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--accent-primary, #3b82f6);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    pointer-events: none;
    line-height: 1;
}

.um-btn-primary[b-zeyy1ehfz5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: var(--accent-primary, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.um-btn-primary:hover[b-zeyy1ehfz5] {
    background: var(--accent-primary-hover, #2563eb);
}

.um-btn-secondary[b-zeyy1ehfz5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: var(--bg-surface);
    color: var(--accent-primary, #3b82f6);
    border: 1px solid var(--accent-primary, #3b82f6);
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.um-btn-secondary:hover[b-zeyy1ehfz5] {
    background: var(--accent-primary-alpha, rgba(59, 130, 246, 0.08));
}

/* Loading */
.um-loading[b-zeyy1ehfz5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 0;
    color: var(--text-secondary);
}

.um-spinner[b-zeyy1ehfz5] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-primary);
    border-top-color: var(--accent-primary, #3b82f6);
    border-radius: 50%;
    animation: um-spin-b-zeyy1ehfz5 0.7s linear infinite;
}

@keyframes um-spin-b-zeyy1ehfz5 {
    to { transform: rotate(360deg); }
}

/* Empty state */
.um-empty[b-zeyy1ehfz5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    color: var(--text-tertiary);
    gap: 8px;
}

.um-empty i[b-zeyy1ehfz5] {
    font-size: 3rem;
    margin-bottom: 4px;
}

.um-empty p[b-zeyy1ehfz5] {
    margin: 0;
}

.um-empty-hint[b-zeyy1ehfz5] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Table */
.um-table-wrapper[b-zeyy1ehfz5] {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
}

.um-table[b-zeyy1ehfz5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.um-table thead[b-zeyy1ehfz5] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.um-table th[b-zeyy1ehfz5] {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    background: var(--bg-elevated, var(--bg-surface));
    border-bottom: 1px solid var(--border-primary);
    white-space: nowrap;
}

.um-row[b-zeyy1ehfz5] {
    cursor: pointer;
    transition: background 0.1s;
}

.um-row:hover[b-zeyy1ehfz5] {
    background: var(--bg-hover, rgba(0, 0, 0, 0.03));
}

.um-table td[b-zeyy1ehfz5] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-secondary, var(--border-primary));
    color: var(--text-primary);
    vertical-align: middle;
}

/* User cell */
.um-user-cell[b-zeyy1ehfz5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.um-avatar[b-zeyy1ehfz5] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

.um-user-name[b-zeyy1ehfz5] {
    font-weight: 500;
    line-height: 1.3;
}

.um-user-dept[b-zeyy1ehfz5] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Roles */
.um-role-badge[b-zeyy1ehfz5] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--accent-primary-alpha, rgba(59, 130, 246, 0.1));
    color: var(--accent-primary, #3b82f6);
    margin-right: 4px;
    white-space: nowrap;
    transition: all 0.15s;
}

.um-role-highlight[b-zeyy1ehfz5] {
    background: var(--accent-primary, #3b82f6);
    color: #fff;
    font-weight: 600;
}

.um-role-more[b-zeyy1ehfz5] {
    background: var(--bg-elevated, #f3f4f6);
    color: var(--text-secondary);
}

.um-no-roles[b-zeyy1ehfz5] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-style: italic;
}

/* Status badge */
.um-status-badge[b-zeyy1ehfz5] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
}

.um-status-badge:hover[b-zeyy1ehfz5] {
    opacity: 0.8;
}

.um-status-active[b-zeyy1ehfz5] {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.um-status-inactive[b-zeyy1ehfz5] {
    background: rgba(107, 114, 128, 0.12);
    color: #6b7280;
}

.um-never[b-zeyy1ehfz5] {
    color: var(--text-tertiary);
    font-style: italic;
}

/* Actions */
.um-btn-icon[b-zeyy1ehfz5] {
    background: none;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    padding: 4px 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.um-btn-icon:hover[b-zeyy1ehfz5] {
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
    color: var(--text-primary);
    border-color: var(--text-tertiary);
}

/* Pagination */
.um-pagination[b-zeyy1ehfz5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 0 4px;
}

.um-page-btn[b-zeyy1ehfz5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s;
}

.um-page-btn:hover:not(:disabled)[b-zeyy1ehfz5] {
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
    border-color: var(--text-tertiary);
}

.um-page-btn:disabled[b-zeyy1ehfz5] {
    opacity: 0.4;
    cursor: not-allowed;
}

.um-page-info[b-zeyy1ehfz5] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Column widths */
.um-col-name[b-zeyy1ehfz5] { min-width: 200px; }
.um-col-email[b-zeyy1ehfz5] { min-width: 180px; }
.um-col-roles[b-zeyy1ehfz5] { min-width: 200px; }
.um-col-status[b-zeyy1ehfz5] { width: 100px; }
.um-col-type[b-zeyy1ehfz5] { width: 120px; }
.um-col-signin[b-zeyy1ehfz5] { width: 120px; }
.um-col-actions[b-zeyy1ehfz5] { width: 70px; text-align: center; }
/* /Pages/Auth/AccessDenied.razor.rz.scp.css */
.access-denied-container[b-1ie5znp4x7] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg-app, #f8fafc);
    padding: 20px;
}

.access-denied-card[b-1ie5znp4x7] {
    background: var(--bg-surface, white);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: 48px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    border: 1px solid var(--border-color, #e5e7eb);
}

.access-denied-icon[b-1ie5znp4x7] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.access-denied-icon i[b-1ie5znp4x7] {
    font-size: 36px;
    color: #dc2626;
}

.access-denied-card h1[b-1ie5znp4x7] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
    margin: 0 0 16px;
}

.access-denied-message[b-1ie5znp4x7] {
    font-size: 16px;
    color: var(--text-secondary, #4b5563);
    margin: 0 0 12px;
    line-height: 1.6;
}

.access-denied-help[b-1ie5znp4x7] {
    font-size: 14px;
    color: var(--text-tertiary, #6b7280);
    margin: 0 0 32px;
    line-height: 1.6;
}

.access-denied-actions[b-1ie5znp4x7] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.access-denied-actions .btn[b-1ie5znp4x7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.access-denied-actions .btn-primary[b-1ie5znp4x7] {
    background: var(--primary-color, #3b82f6);
    color: white;
    border: none;
}

.access-denied-actions .btn-primary:hover[b-1ie5znp4x7] {
    background: var(--primary-hover, #2563eb);
}

.access-denied-actions .btn-outline-secondary[b-1ie5znp4x7] {
    background: transparent;
    color: var(--text-secondary, #4b5563);
    border: 1px solid var(--border-color, #d1d5db);
}

.access-denied-actions .btn-outline-secondary:hover[b-1ie5znp4x7] {
    background: var(--bg-hover, #f3f4f6);
}

.access-denied-contact[b-1ie5znp4x7] {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.access-denied-contact p[b-1ie5znp4x7] {
    font-size: 13px;
    color: var(--text-tertiary, #6b7280);
    margin: 0;
}

.access-denied-contact a[b-1ie5znp4x7] {
    color: var(--primary-color, #3b82f6);
    text-decoration: none;
}

.access-denied-contact a:hover[b-1ie5znp4x7] {
    text-decoration: underline;
}
/* /Pages/Auth/Login.razor.rz.scp.css */
.login-container[b-54zflb1lkh] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--bg-app, #f0f4f8) 0%, var(--bg-surface, #e2e8f0) 100%);
    padding: 20px;
    position: relative;
}

/* Loading overlay */
.login-overlay[b-54zflb1lkh] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.login-overlay-content[b-54zflb1lkh] {
    background: var(--bg-surface, white);
    padding: 32px 48px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.login-overlay-content .spinner-border[b-54zflb1lkh] {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
}

.login-overlay-text[b-54zflb1lkh] {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary, #1f2937);
    margin: 0;
}

.login-overlay-retry[b-54zflb1lkh] {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    margin: 8px 0 0;
}

.login-card[b-54zflb1lkh] {
    background: var(--bg-surface, white);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 420px;
    padding: 40px;
    border: 1px solid var(--border-color, #e5e7eb);
}

.login-header[b-54zflb1lkh] {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo[b-54zflb1lkh] {
    width: 64px;
    height: 64px;
    background: var(--primary-color, #3b82f6);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
    color: white;
}

.login-logo-img[b-54zflb1lkh] {
    max-width: 200px;
    height: auto;
    margin: 0 auto 16px;
    display: block;
}

.login-header h1[b-54zflb1lkh] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
    margin: 0 0 8px;
}

.login-subtitle[b-54zflb1lkh] {
    color: var(--text-secondary, #6b7280);
    font-size: 14px;
    margin: 0;
}

.login-error[b-54zflb1lkh] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    flex-wrap: wrap;
}

.login-error i[b-54zflb1lkh] {
    font-size: 18px;
}

.login-error-retryable[b-54zflb1lkh] {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

.login-error .btn-link[b-54zflb1lkh] {
    color: inherit;
    font-size: 13px;
    text-decoration: none;
}

.login-error .btn-link:hover[b-54zflb1lkh] {
    text-decoration: underline;
}

.login-methods[b-54zflb1lkh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-btn[b-54zflb1lkh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    width: 100%;
}

.login-btn:disabled[b-54zflb1lkh] {
    opacity: 0.7;
    cursor: not-allowed;
}

.login-btn-microsoft[b-54zflb1lkh] {
    background: #2f2f2f;
    color: white;
    border-color: #2f2f2f;
}

.login-btn-microsoft:hover:not(:disabled)[b-54zflb1lkh] {
    background: #1a1a1a;
}

.login-btn-google[b-54zflb1lkh] {
    background: white;
    color: #374151;
    border-color: #d1d5db;
}

.login-btn-google:hover:not(:disabled)[b-54zflb1lkh] {
    background: #f9fafb;
    border-color: #9ca3af;
}

.login-btn-email-toggle[b-54zflb1lkh] {
    background: transparent;
    color: var(--text-secondary, #6b7280);
    border-color: var(--border-color, #e5e7eb);
}

.login-btn-email-toggle:hover:not(:disabled)[b-54zflb1lkh] {
    background: var(--bg-hover, #f3f4f6);
    color: var(--text-primary, #374151);
}

.login-btn-email-toggle .toggle-icon[b-54zflb1lkh] {
    margin-left: auto;
    font-size: 12px;
}

.login-btn-submit[b-54zflb1lkh] {
    background: var(--primary-color, #3b82f6);
    color: white;
}

.login-btn-submit:hover:not(:disabled)[b-54zflb1lkh] {
    background: var(--primary-hover, #2563eb);
}

.login-divider[b-54zflb1lkh] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 8px 0;
}

.login-divider[b-54zflb1lkh]::before,
.login-divider[b-54zflb1lkh]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color, #e5e7eb);
}

.login-divider span[b-54zflb1lkh] {
    color: var(--text-tertiary, #9ca3af);
    font-size: 13px;
}

.email-form-container[b-54zflb1lkh] {
    padding-top: 8px;
}

.form-group[b-54zflb1lkh] {
    margin-bottom: 16px;
}

.form-group label[b-54zflb1lkh] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #374151);
    margin-bottom: 6px;
}

.form-group .form-control[b-54zflb1lkh] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group .form-control:focus[b-54zflb1lkh] {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-actions[b-54zflb1lkh] {
    margin-top: 20px;
}

.form-links[b-54zflb1lkh] {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
}

.form-links a[b-54zflb1lkh] {
    color: var(--primary-color, #3b82f6);
    text-decoration: none;
}

.form-links a:hover[b-54zflb1lkh] {
    text-decoration: underline;
}

.form-links .separator[b-54zflb1lkh] {
    color: var(--text-tertiary, #9ca3af);
    margin: 0 8px;
}

.login-footer[b-54zflb1lkh] {
    margin-top: 32px;
    text-align: center;
}

.login-footer p[b-54zflb1lkh] {
    color: var(--text-tertiary, #9ca3af);
    font-size: 12px;
    margin: 0;
}

/* Spinner */
.spinner-border-sm[b-54zflb1lkh] {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

/* Dark mode adjustments */
:root[data-theme="dark"] .login-btn-google[b-54zflb1lkh] {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .login-error[b-54zflb1lkh] {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.3);
}
/* /Pages/Auth/Unauthorized.razor.rz.scp.css */
.unauthorized-container[b-ro76540cfy] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg-app, #f8fafc);
    padding: 20px;
}

.unauthorized-card[b-ro76540cfy] {
    background: var(--bg-surface, white);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: 48px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    border: 1px solid var(--border-color, #e5e7eb);
}

.unauthorized-icon[b-ro76540cfy] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.unauthorized-icon i[b-ro76540cfy] {
    font-size: 36px;
    color: var(--primary-color, #3b82f6);
}

.unauthorized-card h1[b-ro76540cfy] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
    margin: 0 0 16px;
}

.unauthorized-message[b-ro76540cfy] {
    font-size: 16px;
    color: var(--text-secondary, #4b5563);
    margin: 0 0 8px;
}

.unauthorized-help[b-ro76540cfy] {
    font-size: 14px;
    color: var(--text-tertiary, #6b7280);
    margin: 0 0 32px;
    line-height: 1.6;
}

.unauthorized-actions .btn[b-ro76540cfy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.unauthorized-actions .btn-primary[b-ro76540cfy] {
    background: var(--primary-color, #3b82f6);
    color: white;
    border: none;
}

.unauthorized-actions .btn-primary:hover[b-ro76540cfy] {
    background: var(--primary-hover, #2563eb);
}
/* /Pages/People.razor.rz.scp.css */
/* Transparent overlay — closes dropdowns/panels on click-outside */
.people-overlay[b-t55f3csjcq] {
    position: fixed;
    inset: 0;
    z-index: 50;
}

/* People Page — flex column, only table body scrolls */
.people-page[b-t55f3csjcq] {
    display: flex;
    flex-direction: column;
    /* fill content-area: viewport minus topbar (56px) minus content-area padding (16+16) */
    height: calc(100vh - var(--topbar-height, 56px) - 32px);
    overflow: hidden;
    background: var(--bg-app);
}

/* ── Tab Bar ── */
.people-tabs-bar[b-t55f3csjcq] {
    flex-shrink: 0;
    display: flex;
    gap: 0;
    padding: 0 2rem;
    border-bottom: 1px solid var(--border-color);
}

.people-tab[b-t55f3csjcq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
    transition: color 0.15s ease;
}

.people-tab:hover[b-t55f3csjcq] {
    color: var(--text-primary);
}

.people-tab.active[b-t55f3csjcq] {
    color: var(--primary-color);
    font-weight: 600;
}

.people-tab.active[b-t55f3csjcq]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color);
}

.people-tab i[b-t55f3csjcq] {
    font-size: 0.875rem;
}

/* ── Toolbar ── */
.people-toolbar[b-t55f3csjcq] {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 2rem;
}

.people-toolbar-left[b-t55f3csjcq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.people-toolbar-right[b-t55f3csjcq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.people-showing-label[b-t55f3csjcq] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Settings Dropdown */
.people-settings-dropdown[b-t55f3csjcq] {
    position: relative;
}

.people-settings-btn[b-t55f3csjcq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full, 9999px);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.people-settings-btn:hover[b-t55f3csjcq] {
    background: var(--bg-surface-hover);
}

.people-settings-btn i:first-child[b-t55f3csjcq] {
    font-size: 0.875rem;
}

.people-settings-btn i:last-child[b-t55f3csjcq] {
    font-size: 0.5rem;
}

/* Status Dropdown */
.people-status-dropdown[b-t55f3csjcq] {
    position: relative;
}

.people-status-btn[b-t55f3csjcq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full, 9999px);
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.people-status-btn:hover[b-t55f3csjcq] {
    background: var(--bg-surface-hover);
}

.people-status-btn i[b-t55f3csjcq] {
    font-size: 0.5rem;
    color: var(--text-secondary);
}

/* Dropdown Menu (shared) */
.people-dropdown-menu[b-t55f3csjcq] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    min-width: 160px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    overflow: hidden;
}

.people-dropdown-right[b-t55f3csjcq] {
    left: auto;
    right: 0;
}

.people-dropdown-item[b-t55f3csjcq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.people-dropdown-item:hover[b-t55f3csjcq] {
    background: var(--bg-surface-hover);
}

.people-dropdown-item.selected[b-t55f3csjcq] {
    color: var(--primary-color);
    font-weight: 500;
}

.people-dropdown-item i[b-t55f3csjcq] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* ── Scrollable Table Area ── */
.people-table-container[b-t55f3csjcq] {
    flex: 1;
    min-height: 0; /* critical: allows flex child to shrink below content size */
    overflow-y: auto;
    overflow-x: auto;
    padding: 0 2rem;
}

/* Table */
.people-table[b-t55f3csjcq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    table-layout: fixed;
}

/* Photo column width via colgroup */
.pp-col-photo[b-t55f3csjcq] {
    width: 48px;
}

.people-table thead[b-t55f3csjcq] {
    position: sticky;
    top: 0;
    z-index: 10;
}

.people-table th[b-t55f3csjcq] {
    padding: 0.375rem 0.75rem;
    text-align: left;
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    background: var(--bg-app);
    overflow: hidden;
    text-overflow: ellipsis;
}

.people-table th.sortable[b-t55f3csjcq] {
    cursor: pointer;
    user-select: none;
}

.people-table th.sortable:hover[b-t55f3csjcq] {
    color: var(--text-primary);
}

.people-table th .sort-icon[b-t55f3csjcq] {
    margin-left: 0.25rem;
    font-size: 0.625rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.people-table th.sort-asc .sort-icon[b-t55f3csjcq],
.people-table th.sort-desc .sort-icon[b-t55f3csjcq] {
    opacity: 1;
}

.people-table th.sort-desc .sort-icon[b-t55f3csjcq] {
    transform: rotate(180deg);
}

/* Photo header */
.pp-photo-th[b-t55f3csjcq] {
    width: 48px;
    text-align: center;
    padding: 0.375rem 0 !important;
}

.pp-photo-th i[b-t55f3csjcq] {
    font-size: 0.75rem;
    opacity: 0.5;
}

/* Table Rows — fixed 48px height */
.people-row[b-t55f3csjcq] {
    cursor: pointer;
    transition: background 0.15s ease;
    height: 48px;
}

.people-row:hover[b-t55f3csjcq] {
    background: var(--bg-surface-hover);
}

.people-table td[b-t55f3csjcq] {
    height: 48px;
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
    font-size: 0.8125rem;
    line-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0; /* required for ellipsis with table-layout: fixed */
}

/* ── Photo Cell & Avatar ── */
.pp-photo-cell[b-t55f3csjcq] {
    width: 48px;
    max-width: 48px;
    padding: 0 !important;
    text-align: center;
    line-height: 48px !important;
    overflow: visible !important;
}

.pp-avatar-img[b-t55f3csjcq] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}

.pp-avatar-initials[b-t55f3csjcq] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    user-select: none;
    letter-spacing: 0.02em;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Skeleton avatar placeholder */
.pp-avatar-skeleton[b-t55f3csjcq] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-surface-hover) 50%, var(--bg-surface) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-t55f3csjcq 1.5s infinite;
}

/* Name Link */
.employee-name-link[b-t55f3csjcq] {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

.employee-name-link:hover[b-t55f3csjcq] {
    opacity: 0.8;
    text-decoration: underline;
}

/* ── Column Manage Panel ── */
.people-column-panel[b-t55f3csjcq] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    width: 240px;
    max-height: 420px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.people-column-panel-header[b-t55f3csjcq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.people-column-panel-close[b-t55f3csjcq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-sm, 4px);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.people-column-panel-close:hover[b-t55f3csjcq] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.people-column-panel-close i[b-t55f3csjcq] {
    font-size: 0.625rem;
}

.people-column-panel-body[b-t55f3csjcq] {
    overflow-y: auto;
    padding: 0.375rem 0;
}

.people-column-toggle[b-t55f3csjcq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}

.people-column-toggle:hover[b-t55f3csjcq] {
    background: var(--bg-surface-hover);
}

.people-column-toggle input[type="checkbox"][b-t55f3csjcq] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
}

/* Empty State */
.people-empty[b-t55f3csjcq] {
    text-align: center;
    padding: 3rem 2rem !important;
    color: var(--text-tertiary);
    white-space: normal !important;
    line-height: 1.4 !important;
    height: auto !important;
}

.people-empty i[b-t55f3csjcq] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
}

.people-empty p[b-t55f3csjcq] {
    margin: 0;
    font-size: 0.9375rem;
}

/* Skeleton Loading */
.people-row.skeleton td[b-t55f3csjcq] {
    padding: 0 0.75rem;
}

.skeleton-text[b-t55f3csjcq] {
    height: 12px;
    width: 100%;
    max-width: 120px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-surface-hover) 50%, var(--bg-surface) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-t55f3csjcq 1.5s infinite;
}

.skeleton-text.short[b-t55f3csjcq] {
    max-width: 80px;
}

@keyframes skeleton-loading-b-t55f3csjcq {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Pagination — pinned at bottom ── */
.people-pagination[b-t55f3csjcq] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 2rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface);
}

.pagination-btn[b-t55f3csjcq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 4px);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.pagination-btn:hover:not(:disabled)[b-t55f3csjcq] {
    background: var(--bg-surface-hover);
}

.pagination-btn:disabled[b-t55f3csjcq] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-btn i[b-t55f3csjcq] {
    font-size: 0.625rem;
}

.pagination-info[b-t55f3csjcq] {
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-weight: 500;
}

.pagination-showing[b-t55f3csjcq] {
    color: var(--text-secondary);
    font-weight: 400;
    margin-left: 0.25rem;
}

/* Page Size Selector */
.pagination-pagesize[b-t55f3csjcq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-right: auto;
}

.pagination-pagesize-label[b-t55f3csjcq] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.pagination-pagesize-select[b-t55f3csjcq] {
    padding: 0.1875rem 0.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 4px);
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease;
}

.pagination-pagesize-select:hover[b-t55f3csjcq] {
    border-color: var(--text-tertiary);
}

.pagination-pagesize-select:focus[b-t55f3csjcq] {
    border-color: var(--primary-color);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .people-tabs-bar[b-t55f3csjcq] {
        padding: 0 1rem;
    }

    .people-toolbar[b-t55f3csjcq] {
        flex-direction: column;
        gap: 0.375rem;
        padding: 0.375rem 1rem;
    }

    .people-table-container[b-t55f3csjcq] {
        padding: 0 1rem;
    }

    .people-pagination[b-t55f3csjcq] {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
    }

    .pagination-showing[b-t55f3csjcq] {
        display: none;
    }

    .pagination-pagesize-label[b-t55f3csjcq] {
        display: none;
    }
}
/* /Pages/PortalSelection.razor.rz.scp.css */
.portal-selection-container[b-kop3mgrgow] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bg-app);
}

.portal-selection-card[b-kop3mgrgow] {
    width: 100%;
    max-width: 480px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
}

.portal-selection-header[b-kop3mgrgow] {
    text-align: center;
    margin-bottom: 2rem;
}

.portal-logo[b-kop3mgrgow] {
    display: block;
    max-width: 300px;
    width: 100%;
    height: auto;
    margin: 0 auto 1.5rem auto;
}

/* Dark theme logo treatment for portal selection */
:host-context([data-theme="dark"]) .portal-logo[b-kop3mgrgow],
:host-context([data-theme="gunmetal"]) .portal-logo[b-kop3mgrgow] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 8px 12px;
}

.portal-selection-header h1[b-kop3mgrgow] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.portal-subtitle[b-kop3mgrgow] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin: 0;
}

.portal-options[b-kop3mgrgow] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.portal-option[b-kop3mgrgow] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.portal-option:hover[b-kop3mgrgow] {
    border-color: var(--primary-color);
    background: var(--bg-surface-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.portal-option:active[b-kop3mgrgow] {
    transform: translateY(0);
}

.portal-option-icon[b-kop3mgrgow] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.portal-option-icon i[b-kop3mgrgow] {
    font-size: 1.25rem;
    color: white;
}

.portal-option-content[b-kop3mgrgow] {
    flex: 1;
    min-width: 0;
}

.portal-option-content h2[b-kop3mgrgow] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.portal-option-content p[b-kop3mgrgow] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-option-arrow[b-kop3mgrgow] {
    color: var(--text-tertiary);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.portal-option:hover .portal-option-arrow[b-kop3mgrgow] {
    color: var(--primary-color);
    transform: translateX(4px);
}

.portal-selection-footer[b-kop3mgrgow] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.portal-selection-footer p[b-kop3mgrgow] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.portal-selection-footer strong[b-kop3mgrgow] {
    color: var(--text-primary);
}

.sign-out-link[b-kop3mgrgow] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.5rem;
    margin: -0.5rem;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.sign-out-link:hover[b-kop3mgrgow] {
    color: var(--color-danger);
    background: var(--color-danger-bg);
}

/* Responsive */
@media (max-width: 540px) {
    .portal-selection-container[b-kop3mgrgow] {
        padding: 1rem;
    }

    .portal-selection-card[b-kop3mgrgow] {
        padding: 1.5rem;
    }

    .portal-selection-header h1[b-kop3mgrgow] {
        font-size: 1.25rem;
    }

    .portal-option[b-kop3mgrgow] {
        padding: 0.875rem 1rem;
    }

    .portal-option-icon[b-kop3mgrgow] {
        width: 40px;
        height: 40px;
    }

    .portal-selection-footer[b-kop3mgrgow] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .portal-logo[b-kop3mgrgow] {
        max-width: 240px;
    }
}
/* /Pages/SelfService/MyInfo.razor.rz.scp.css */
/* =========================================
   MY INFO PAGE STYLES (BambooHR-inspired)
   Layout centering is handled by SelfServiceLayout
   ========================================= */

/* Page container - fills the centered content wrapper from layout */
.my-info-page[b-n0x0pvg9ie] {
    width: 100%;
}

/* Content wrapper - no need for centering (layout handles it) */
.my-info-wrapper[b-n0x0pvg9ie] {
    width: 100%;
}

/* Profile Banner Header */
.my-info-banner[b-n0x0pvg9ie] {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 2rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
}

/* Banner gradient - VERTICAL: Color at top fading to transparent at bottom */
.banner-gradient[b-n0x0pvg9ie] {
    height: 160px;
    /* Vertical gradient: purple at top, fades to transparent at bottom */
    background: linear-gradient(
        to bottom,
        rgba(124, 58, 237, 0.95) 0%,
        rgba(124, 58, 237, 0.7) 30%,
        rgba(124, 58, 237, 0.4) 60%,
        rgba(124, 58, 237, 0.1) 85%,
        transparent 100%
    );
    position: relative;
}

.banner-gradient[b-n0x0pvg9ie]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.banner-content[b-n0x0pvg9ie] {
    display: flex;
    align-items: flex-end;
    gap: 1.75rem;
    padding: 0 2.5rem 2rem 2.5rem;
    margin-top: -70px;
    position: relative;
    z-index: 1;
}

.my-info-photo[b-n0x0pvg9ie] {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 4px solid var(--bg-surface);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.my-info-photo img[b-n0x0pvg9ie] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-info-photo-placeholder[b-n0x0pvg9ie] {
    width: 100%;
    height: 100%;
    /* Match banner gradient - blue/purple */
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    font-weight: 600;
}

.my-info-identity[b-n0x0pvg9ie] {
    padding-bottom: 0.5rem;
}

.my-info-identity h1[b-n0x0pvg9ie] {
    margin: 0 0 0.375rem 0;
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.my-info-title[b-n0x0pvg9ie] {
    margin: 0 0 0.375rem 0;
    font-size: 1.0625rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.my-info-department[b-n0x0pvg9ie] {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.my-info-department i[b-n0x0pvg9ie] {
    font-size: 0.875rem;
}

/* Main Content Layout */
.my-info-content[b-n0x0pvg9ie] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
}

/* Vitals Sidebar */
.my-info-vitals[b-n0x0pvg9ie] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.vitals-section[b-n0x0pvg9ie] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
}

.vitals-section h4[b-n0x0pvg9ie] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vital-item[b-n0x0pvg9ie] {
    display: flex;
    gap: 0.875rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.vital-item:last-child[b-n0x0pvg9ie] {
    border-bottom: none;
    padding-bottom: 0;
}

.vital-item:first-child[b-n0x0pvg9ie] {
    padding-top: 0;
}

.vital-item i[b-n0x0pvg9ie] {
    color: var(--text-tertiary);
    font-size: 1.125rem;
    width: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.vital-details[b-n0x0pvg9ie] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.vital-label[b-n0x0pvg9ie] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.vital-value[b-n0x0pvg9ie] {
    font-size: 0.9375rem;
    color: var(--text-primary);
    word-break: break-word;
}

.vital-value.empty[b-n0x0pvg9ie] {
    color: var(--text-tertiary);
    font-style: italic;
}

.vital-subtext[b-n0x0pvg9ie] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Tabs Container */
.my-info-tabs-container[b-n0x0pvg9ie] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

/* Tab Bar */
.my-info-tab-bar[b-n0x0pvg9ie] {
    display: flex;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-app);
    overflow-x: auto;
}

.my-info-tab[b-n0x0pvg9ie] {
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.my-info-tab:hover[b-n0x0pvg9ie] {
    color: var(--text-primary);
    background: var(--bg-surface-hover);
}

.my-info-tab.active[b-n0x0pvg9ie] {
    color: var(--primary-gradient-start);
    background: var(--bg-surface);
}

.my-info-tab.active[b-n0x0pvg9ie]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-gradient-start), var(--primary-gradient-end));
    border-radius: 3px 3px 0 0;
}

/* Tab Content */
.my-info-tab-content[b-n0x0pvg9ie] {
    padding: 1.5rem;
    min-height: 400px;
}

.tab-section-content[b-n0x0pvg9ie] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Info Cards */
.info-card[b-n0x0pvg9ie] {
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem;
}

.info-card h3[b-n0x0pvg9ie] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-card h3 i[b-n0x0pvg9ie] {
    color: var(--primary-gradient-start);
    font-size: 1.125rem;
}

.info-grid[b-n0x0pvg9ie] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.info-field[b-n0x0pvg9ie] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-field label[b-n0x0pvg9ie] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.info-field span[b-n0x0pvg9ie] {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.info-field span.empty[b-n0x0pvg9ie] {
    color: var(--text-tertiary);
    font-style: italic;
}

.address-display[b-n0x0pvg9ie] {
    line-height: 1.6;
}

.address-display p[b-n0x0pvg9ie] {
    margin: 0;
    color: var(--text-primary);
}

/* Placeholder Tab */
.tab-placeholder[b-n0x0pvg9ie] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.tab-placeholder .placeholder-icon[b-n0x0pvg9ie] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-app);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.tab-placeholder .placeholder-icon i[b-n0x0pvg9ie] {
    font-size: 2rem;
    color: var(--text-tertiary);
}

.tab-placeholder h3[b-n0x0pvg9ie] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.tab-placeholder p[b-n0x0pvg9ie] {
    margin: 0;
    font-size: 0.9375rem;
    max-width: 300px;
}

/* Empty State */
p.empty[b-n0x0pvg9ie] {
    color: var(--text-tertiary);
    font-style: italic;
    margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .my-info-content[b-n0x0pvg9ie] {
        grid-template-columns: 1fr;
    }

    .my-info-vitals[b-n0x0pvg9ie] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .banner-content[b-n0x0pvg9ie] {
        padding: 0 1.5rem 1.5rem 1.5rem;
    }

    .my-info-photo[b-n0x0pvg9ie] {
        width: 120px;
        height: 120px;
    }

    .my-info-photo-placeholder[b-n0x0pvg9ie] {
        font-size: 2.5rem;
    }
}

@media (max-width: 600px) {
    .banner-gradient[b-n0x0pvg9ie] {
        height: 100px;
    }

    .banner-content[b-n0x0pvg9ie] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: -60px;
        padding: 0 1rem 1.5rem 1rem;
        gap: 1rem;
    }

    .my-info-photo[b-n0x0pvg9ie] {
        width: 110px;
        height: 110px;
    }

    .my-info-photo-placeholder[b-n0x0pvg9ie] {
        font-size: 2.25rem;
    }

    .my-info-identity h1[b-n0x0pvg9ie] {
        font-size: 1.5rem;
    }

    .my-info-department[b-n0x0pvg9ie] {
        justify-content: center;
    }

    .my-info-vitals[b-n0x0pvg9ie] {
        grid-template-columns: 1fr;
    }

    .info-grid[b-n0x0pvg9ie] {
        grid-template-columns: 1fr;
    }

    .my-info-tab-bar[b-n0x0pvg9ie] {
        gap: 0;
    }

    .my-info-tab[b-n0x0pvg9ie] {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }
}
/* /Pages/SelfService/SelfServiceSettings.razor.rz.scp.css */
/* =========================================
   SELF-SERVICE SETTINGS PAGE
   Centered, polished settings UI
   ========================================= */

.ss-settings-page[b-xh5nt2tabq] {
    display: flex;
    justify-content: center;
    width: 100%;
}

.ss-settings-wrapper[b-xh5nt2tabq] {
    max-width: 800px;
    width: 100%;
    padding: 0 24px;
}

/* Header */
.ss-settings-header[b-xh5nt2tabq] {
    margin-bottom: 32px;
}

.ss-settings-header h1[b-xh5nt2tabq] {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.ss-settings-subtitle[b-xh5nt2tabq] {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

/* Settings Card */
.ss-settings-card[b-xh5nt2tabq] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    margin-bottom: 24px;
    overflow: hidden;
}

.ss-settings-card-header[b-xh5nt2tabq] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-app);
}

.ss-settings-card-header i[b-xh5nt2tabq] {
    font-size: 1.25rem;
    color: var(--primary-color);
}

.ss-settings-card-header h2[b-xh5nt2tabq] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.ss-settings-card-body[b-xh5nt2tabq] {
    padding: 24px;
}

.ss-settings-description[b-xh5nt2tabq] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin: 0 0 20px 0;
}

/* Theme Grid */
.theme-grid[b-xh5nt2tabq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.theme-card[b-xh5nt2tabq] {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--bg-app);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.theme-card:hover[b-xh5nt2tabq] {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.theme-card.active[b-xh5nt2tabq] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-bg-light);
}

.theme-preview[b-xh5nt2tabq] {
    height: 60px;
    width: 100%;
    border-radius: 0;
}

.theme-card-content[b-xh5nt2tabq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
}

.theme-card-content i[b-xh5nt2tabq] {
    font-size: 1rem;
    color: var(--text-secondary);
}

.theme-card.active .theme-card-content i[b-xh5nt2tabq] {
    color: var(--primary-color);
}

.theme-card-content span[b-xh5nt2tabq] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
}

.theme-check[b-xh5nt2tabq] {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--primary-color);
    font-size: 1.25rem;
    background: var(--bg-surface);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

/* Settings Rows */
.ss-setting-row[b-xh5nt2tabq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
    gap: 24px;
}

.ss-setting-row:last-child[b-xh5nt2tabq] {
    border-bottom: none;
    padding-bottom: 0;
}

.ss-setting-row:first-child[b-xh5nt2tabq] {
    padding-top: 0;
}

.ss-setting-info[b-xh5nt2tabq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.ss-setting-label[b-xh5nt2tabq] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.ss-setting-description[b-xh5nt2tabq] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.ss-select[b-xh5nt2tabq] {
    padding: 10px 14px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9375rem;
    min-width: 160px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ss-select:hover[b-xh5nt2tabq] {
    border-color: var(--border-color-hover);
}

.ss-select:focus[b-xh5nt2tabq] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-bg-light);
}

/* Responsive */
@media (max-width: 768px) {
    .ss-settings-wrapper[b-xh5nt2tabq] {
        padding: 0 16px;
    }

    .ss-settings-header h1[b-xh5nt2tabq] {
        font-size: 1.5rem;
    }

    .theme-grid[b-xh5nt2tabq] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ss-setting-row[b-xh5nt2tabq] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .ss-select[b-xh5nt2tabq] {
        width: 100%;
    }
}

@media (max-width: 500px) {
    .theme-grid[b-xh5nt2tabq] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .theme-card-content[b-xh5nt2tabq] {
        padding: 10px 12px;
    }

    .theme-card-content span[b-xh5nt2tabq] {
        font-size: 0.875rem;
    }
}
/* /Portals/IT/MailFlow.razor.rz.scp.css */
.mailflow-page[b-oh232l2ulg] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Loading state */
.mailflow-loading[b-oh232l2ulg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
    color: var(--text-secondary);
}

.mailflow-spinner[b-oh232l2ulg] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-oh232l2ulg 1s linear infinite;
}

@keyframes spin-b-oh232l2ulg {
    to {
        transform: rotate(360deg);
    }
}

/* Toolbar */
.mailflow-toolbar[b-oh232l2ulg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.mailflow-toolbar-left[b-oh232l2ulg] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mailflow-title[b-oh232l2ulg] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mailflow-toolbar-right[b-oh232l2ulg] {
    display: flex;
    gap: 0.75rem;
}

/* Status Cards */
.mailflow-status-cards[b-oh232l2ulg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.status-card[b-oh232l2ulg] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
}

.status-card-header[b-oh232l2ulg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.status-card-header h3[b-oh232l2ulg] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.status-card-body[b-oh232l2ulg] {
    display: flex;
    gap: 1.5rem;
}

.status-metric[b-oh232l2ulg] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.metric-value[b-oh232l2ulg] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.metric-value-success[b-oh232l2ulg] {
    color: var(--success-color);
}

.metric-value-error[b-oh232l2ulg] {
    color: var(--danger-color);
}

.metric-label[b-oh232l2ulg] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.status-card-footer[b-oh232l2ulg] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Status Badges */
.status-badge[b-oh232l2ulg] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge-untested[b-oh232l2ulg] {
    background: var(--gray-100);
    color: var(--gray-700);
}

.status-badge-active[b-oh232l2ulg] {
    background: var(--success-bg);
    color: var(--success-color);
}

.status-badge-inactive[b-oh232l2ulg] {
    background: var(--gray-100);
    color: var(--gray-600);
}

.status-badge-error[b-oh232l2ulg] {
    background: var(--danger-bg);
    color: var(--danger-color);
}

.status-badge-pending[b-oh232l2ulg] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.status-badge-microsoft365[b-oh232l2ulg] {
    background: #0078d41a;
    color: #0078d4;
}

.status-badge-googleworkspace[b-oh232l2ulg] {
    background: #34a8531a;
    color: #34a853;
}

/* Empty State */
.mailflow-empty[b-oh232l2ulg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
    color: var(--text-secondary);
}

.mailflow-empty i[b-oh232l2ulg] {
    font-size: 4rem;
    color: var(--text-tertiary);
}

.mailflow-empty p[b-oh232l2ulg] {
    font-size: 1.125rem;
    margin: 0;
}

/* Provider Cards */
.mailflow-providers[b-oh232l2ulg] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.provider-card[b-oh232l2ulg] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.provider-card:hover[b-oh232l2ulg] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.provider-expanded[b-oh232l2ulg] {
    border-color: var(--primary-color);
}

.provider-header[b-oh232l2ulg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    cursor: pointer;
    user-select: none;
}

.provider-info[b-oh232l2ulg] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.provider-icon[b-oh232l2ulg] {
    font-size: 2rem;
    color: var(--primary-color);
}

.provider-name[b-oh232l2ulg] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.provider-type[b-oh232l2ulg] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.provider-actions[b-oh232l2ulg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.provider-toggle[b-oh232l2ulg] {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s;
}

.provider-toggle:hover[b-oh232l2ulg] {
    color: var(--primary-color);
}

/* Provider Configs */
.provider-configs[b-oh232l2ulg] {
    border-top: 1px solid var(--border-color);
    padding: 1.5rem;
    background: var(--background-secondary);
}

.provider-configs-header[b-oh232l2ulg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.provider-configs-header h4[b-oh232l2ulg] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.configs-empty[b-oh232l2ulg] {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.configs-table[b-oh232l2ulg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.config-row[b-oh232l2ulg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: background-color 0.2s;
}

.config-row:hover[b-oh232l2ulg] {
    background: var(--hover-bg);
}

.config-info[b-oh232l2ulg] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.config-info i[b-oh232l2ulg] {
    font-size: 1.25rem;
    color: var(--primary-color);
}

.config-address[b-oh232l2ulg] {
    font-weight: 600;
    color: var(--text-primary);
}

.config-meta[b-oh232l2ulg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.config-separator[b-oh232l2ulg] {
    color: var(--text-tertiary);
}

.config-actions[b-oh232l2ulg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* OOBE Wizard */
.oobe-wrapper[b-oh232l2ulg] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
    padding: 2rem;
}

.oobe-card[b-oh232l2ulg] {
    width: 100%;
    max-width: 600px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
}

.oobe-card--wide[b-oh232l2ulg] {
    max-width: 1100px;
}

/* OOBE Step 1 — two-column layout (form 40% | guide 60%) */
.oobe-step1-layout[b-oh232l2ulg] {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 2rem;
    align-items: start;
}

.oobe-step1-form[b-oh232l2ulg] {
    min-width: 0;
}

.oobe-header[b-oh232l2ulg] {
    text-align: center;
    margin-bottom: 2rem;
}

.oobe-header h1[b-oh232l2ulg] {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.oobe-header p[b-oh232l2ulg] {
    margin: 0;
    color: var(--text-secondary);
}

/* Stepper */
.oobe-stepper[b-oh232l2ulg] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    position: relative;
}

.oobe-stepper[b-oh232l2ulg]::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 50px;
    right: 50px;
    height: 2px;
    background: var(--border-color);
    z-index: 0;
}

.oobe-step[b-oh232l2ulg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.step-number[b-oh232l2ulg] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    font-weight: 700;
    color: var(--text-secondary);
    transition: all 0.3s;
}

.step-active .step-number[b-oh232l2ulg] {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: white;
}

.step-complete .step-number[b-oh232l2ulg] {
    border-color: var(--success-color);
    background: var(--success-color);
    color: white;
}

.step-label[b-oh232l2ulg] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.step-active .step-label[b-oh232l2ulg] {
    color: var(--primary-color);
    font-weight: 600;
}

.step-complete .step-label[b-oh232l2ulg] {
    color: var(--success-color);
}

/* OOBE Content */
.oobe-content[b-oh232l2ulg] {
    margin-bottom: 2rem;
}

.oobe-content h2[b-oh232l2ulg] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.oobe-hint[b-oh232l2ulg] {
    margin: 0 0 1.5rem 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.oobe-summary[b-oh232l2ulg] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.summary-section[b-oh232l2ulg] {
    padding: 1rem;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.summary-section h3[b-oh232l2ulg] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

.summary-item[b-oh232l2ulg] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.summary-item:last-child[b-oh232l2ulg] {
    border-bottom: none;
}

.summary-label[b-oh232l2ulg] {
    color: var(--text-secondary);
}

.summary-value[b-oh232l2ulg] {
    font-weight: 600;
    color: var(--text-primary);
}

.oobe-actions[b-oh232l2ulg] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Responsive — step 1 guide stacks below form on narrow screens */
@media (max-width: 900px) {
    .oobe-card--wide[b-oh232l2ulg] {
        max-width: 600px;
    }

    .oobe-step1-layout[b-oh232l2ulg] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .mailflow-page[b-oh232l2ulg] {
        padding: 1rem;
    }

    .mailflow-toolbar[b-oh232l2ulg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .mailflow-status-cards[b-oh232l2ulg] {
        grid-template-columns: 1fr;
    }

    .provider-header[b-oh232l2ulg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .provider-actions[b-oh232l2ulg] {
        width: 100%;
        justify-content: space-between;
    }

    .config-row[b-oh232l2ulg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .config-actions[b-oh232l2ulg] {
        width: 100%;
        justify-content: flex-end;
    }

    .oobe-stepper[b-oh232l2ulg]::before {
        display: none;
    }

    .oobe-stepper[b-oh232l2ulg] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .oobe-step[b-oh232l2ulg] {
        flex-direction: row;
        justify-content: flex-start;
        width: 100%;
    }
}
/* /Portals/IT/MailFlowSetupGuide.razor.rz.scp.css */
/* ── Setup Guide Container ── */
.setup-guide[b-u1o1yk1vv7] {
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-color);
    border-radius: 8px;
    padding: 1.25rem;
    position: sticky;
    top: 2rem;
}

.setup-guide--compact[b-u1o1yk1vv7] {
    position: static;
    margin-top: 1.5rem;
    border-left-width: 1px;
    border-top: 3px solid var(--primary-color);
}

/* ── Placeholder (no provider selected) ── */
.setup-guide__empty[b-u1o1yk1vv7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-tertiary);
    gap: 0.75rem;
}

.setup-guide__empty i[b-u1o1yk1vv7] {
    font-size: 2rem;
}

.setup-guide__empty p[b-u1o1yk1vv7] {
    margin: 0;
    font-size: 0.875rem;
}

/* ── Header ── */
.setup-guide__header[b-u1o1yk1vv7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.setup-guide__provider-icon[b-u1o1yk1vv7] {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.setup-guide__title[b-u1o1yk1vv7] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.setup-guide__provider[b-u1o1yk1vv7] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* ── Accordion Steps ── */
.guide-step[b-u1o1yk1vv7] {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: var(--card-bg);
    overflow: hidden;
}

.guide-step:last-child[b-u1o1yk1vv7] {
    margin-bottom: 0;
}

.guide-step__header[b-u1o1yk1vv7] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    transition: background-color 0.15s;
}

.guide-step__header:hover[b-u1o1yk1vv7] {
    background: var(--hover-bg);
}

.guide-step--expanded .guide-step__header[b-u1o1yk1vv7] {
    background: var(--hover-bg);
    font-weight: 600;
}

.guide-step__num[b-u1o1yk1vv7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--border-color);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.guide-step--expanded .guide-step__num[b-u1o1yk1vv7] {
    background: var(--primary-color);
    color: white;
}

.guide-step__title[b-u1o1yk1vv7] {
    flex: 1;
}

.guide-step__chevron[b-u1o1yk1vv7] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* ── Accordion Body (CSS transition) ── */
.guide-step__body[b-u1o1yk1vv7] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.guide-step--expanded .guide-step__body[b-u1o1yk1vv7] {
    max-height: 600px;
}

/* ── Step Content ── */
.guide-step__content[b-u1o1yk1vv7] {
    padding: 0 0.75rem 0.75rem 2.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.guide-step__content ol[b-u1o1yk1vv7],
.guide-step__content ul[b-u1o1yk1vv7] {
    margin: 0.25rem 0;
    padding-left: 1.25rem;
}

.guide-step__content li[b-u1o1yk1vv7] {
    margin-bottom: 0.375rem;
}

.guide-step__content p[b-u1o1yk1vv7] {
    margin: 0.5rem 0;
}

.guide-step__content p:first-child[b-u1o1yk1vv7] {
    margin-top: 0;
}

.guide-step__content strong[b-u1o1yk1vv7] {
    color: var(--text-primary);
    font-weight: 600;
}

.guide-step__content code[b-u1o1yk1vv7] {
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 0.1rem 0.35rem;
    font-size: 0.8rem;
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    color: var(--primary-color);
}

/* ── Permissions sub-list ── */
.guide-perms[b-u1o1yk1vv7] {
    list-style: none;
    padding-left: 0.5rem !important;
    margin: 0.25rem 0 !important;
}

.guide-perms li[b-u1o1yk1vv7] {
    margin-bottom: 0.125rem !important;
}

.guide-perms li[b-u1o1yk1vv7]::before {
    content: "\2022";
    margin-right: 0.5rem;
    color: var(--text-tertiary);
}

/* ── Warning Callout ── */
.guide-callout[b-u1o1yk1vv7] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    margin: 0.5rem 0;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.guide-callout--warning[b-u1o1yk1vv7] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.guide-callout--warning i[b-u1o1yk1vv7] {
    flex-shrink: 0;
    margin-top: 0.125rem;
}
/* /Portals/IT/Pages/Admin/SearchAdmin.razor.rz.scp.css */
.search-admin-page[b-m4ofuizfug] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-m4ofuizfug] {
    margin-bottom: 32px;
}

.page-header h1[b-m4ofuizfug] {
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px 0;
}

.page-header .text-muted[b-m4ofuizfug] {
    color: var(--color-text-secondary, #888);
    margin: 0;
}

.admin-grid[b-m4ofuizfug] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.admin-card[b-m4ofuizfug] {
    background: var(--color-surface, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 12px;
    overflow: hidden;
}

.admin-card.full-width[b-m4ofuizfug] {
    grid-column: 1 / -1;
}

.card-header[b-m4ofuizfug] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
    background: var(--color-bg, #13131a);
}

.card-header h3[b-m4ofuizfug] {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-body[b-m4ofuizfug] {
    padding: 20px;
}

.loading-state[b-m4ofuizfug],
.empty-state[b-m4ofuizfug] {
    text-align: center;
    padding: 32px;
    color: var(--color-text-tertiary, #888);
}

.empty-state i[b-m4ofuizfug] {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

.status-indicator[b-m4ofuizfug] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.status-ok[b-m4ofuizfug] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.status-warning[b-m4ofuizfug] {
    background: rgba(234, 179, 8, 0.1);
    color: #eab308;
}

.action-buttons[b-m4ofuizfug] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.btn[b-m4ofuizfug] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.btn-primary[b-m4ofuizfug] {
    background: var(--color-primary, #3b82f6);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-m4ofuizfug] {
    background: #2563eb;
}

.btn-secondary[b-m4ofuizfug] {
    background: var(--color-surface-hover, #2a2a3a);
    color: var(--color-text, #e0e0e0);
    border: 1px solid var(--color-border, #3a3a4a);
}

.btn-secondary:hover:not(:disabled)[b-m4ofuizfug] {
    background: var(--color-border, #3a3a4a);
}

.btn-warning[b-m4ofuizfug] {
    background: #f59e0b;
    color: #1a1a1a;
}

.btn-warning:hover:not(:disabled)[b-m4ofuizfug] {
    background: #d97706;
}

.btn-sm[b-m4ofuizfug] {
    padding: 6px 12px;
    font-size: 13px;
}

.btn:disabled[b-m4ofuizfug] {
    opacity: 0.5;
    cursor: not-allowed;
}

.alert[b-m4ofuizfug] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 16px;
}

.alert-success[b-m4ofuizfug] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.alert-danger[b-m4ofuizfug] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.stat-grid[b-m4ofuizfug] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-item[b-m4ofuizfug] {
    text-align: center;
    padding: 16px;
    background: var(--color-bg, #13131a);
    border-radius: 8px;
}

.stat-value[b-m4ofuizfug] {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-primary, #3b82f6);
}

.stat-label[b-m4ofuizfug] {
    font-size: 12px;
    color: var(--color-text-tertiary, #888);
    margin-top: 4px;
}

.collection-counts[b-m4ofuizfug] {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.collection-counts li[b-m4ofuizfug] {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.collection-counts li:last-child[b-m4ofuizfug] {
    border-bottom: none;
}

.collection-name[b-m4ofuizfug] {
    font-weight: 500;
}

.collection-count[b-m4ofuizfug] {
    color: var(--color-text-secondary, #aaa);
}

.config-preview[b-m4ofuizfug] {
    background: var(--color-bg, #13131a);
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.5;
    max-height: 400px;
    margin: 0;
    color: var(--color-text, #e0e0e0);
}

.search-test[b-m4ofuizfug] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.search-test input[b-m4ofuizfug] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 8px;
    background: var(--color-bg, #13131a);
    color: var(--color-text, #e0e0e0);
    font-size: 14px;
}

.search-test input:focus[b-m4ofuizfug] {
    outline: none;
    border-color: var(--color-primary, #3b82f6);
}

.test-results h4[b-m4ofuizfug] {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: var(--color-text-secondary, #aaa);
}

.results-table[b-m4ofuizfug] {
    width: 100%;
    border-collapse: collapse;
}

.results-table th[b-m4ofuizfug],
.results-table td[b-m4ofuizfug] {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.results-table th[b-m4ofuizfug] {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--color-text-tertiary, #888);
}

.results-table .badge[b-m4ofuizfug] {
    display: inline-block;
    padding: 4px 8px;
    background: var(--color-primary, #3b82f6);
    color: white;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.results-table code[b-m4ofuizfug] {
    font-size: 12px;
    color: var(--color-text-secondary, #aaa);
}

.no-results[b-m4ofuizfug] {
    text-align: center;
    color: var(--color-text-tertiary, #888);
    padding: 24px;
}

.spin[b-m4ofuizfug] {
    animation: spin-b-m4ofuizfug 1s linear infinite;
}

@keyframes spin-b-m4ofuizfug {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .admin-grid[b-m4ofuizfug] {
        grid-template-columns: 1fr;
    }

    .stat-grid[b-m4ofuizfug] {
        grid-template-columns: 1fr;
    }
}
/* /Portals/IT/Pages/ITAccountingV2.razor.rz.scp.css */
.smoke-test-container[b-eshma9p32m] {
    display: flex;
    flex-direction: column;
    /* Explicit height anchor for the CSS flex chain. Using calc(100vh - 56px)
       to account for the app shell topbar (~56px). This ensures the grid's
       height: 100% chain has a concrete pixel value to resolve against. */
    height: calc(100vh - 56px);
    min-height: 400px;
    min-width: 0;
    overflow: hidden;
    padding: 16px;
    gap: 16px;
    box-sizing: border-box;
    background: var(--bg-app);
    color: var(--text-primary);
}

.smoke-test-header[b-eshma9p32m] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 16px;
    background: var(--bg-surface-hover, var(--bg-secondary, #f8f9fa));
    border-radius: 8px;
    border: 1px solid var(--border-color, #dee2e6);
    color: var(--text-primary);
}

.smoke-test-header h1[b-eshma9p32m] {
    font-size: 1.25rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.controls[b-eshma9p32m] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.controls label[b-eshma9p32m] {
    color: var(--text-secondary);
}

.controls select[b-eshma9p32m] {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color, #dee2e6);
    background: var(--bg-surface, var(--input-bg, white));
    color: var(--text-primary);
}

.controls button[b-eshma9p32m] {
    background: var(--bg-surface, var(--input-bg, white));
    color: var(--text-primary);
    border-color: var(--border-color);
}

.controls button:hover[b-eshma9p32m] {
    background: var(--bg-surface-hover);
}

.metrics[b-eshma9p32m] {
    margin-left: auto;
    display: flex;
    gap: 16px;
    font-size: 0.875rem;
    color: var(--text-secondary, #6c757d);
}

.metrics strong[b-eshma9p32m] {
    color: var(--text-primary);
}

.grid-wrapper[b-eshma9p32m] {
    flex: 1;
    min-height: 0;
    min-width: 0;
    position: relative;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-surface);
}

.loading-overlay[b-eshma9p32m] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--bg-surface, var(--bg-primary, white));
    color: var(--text-primary);
}

.selection-info[b-eshma9p32m] {
    padding: 8px 16px;
    background: var(--bg-surface-hover, var(--bg-secondary, #f8f9fa));
    border-radius: 4px;
    font-size: 0.875rem;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* ── Empty state (no tables) ────────────────────────────────────────────── */

.acv2-empty-state[b-eshma9p32m] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 0;
    color: var(--text-secondary, #6c757d);
}

.acv2-empty-icon[b-eshma9p32m] {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 8px;
}

.acv2-empty-state h3[b-eshma9p32m] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.acv2-empty-state p[b-eshma9p32m] {
    margin: 0;
    font-size: 0.875rem;
}

.acv2-empty-btn[b-eshma9p32m] {
    margin-top: 12px;
    padding: 8px 20px;
    border: 1px dashed var(--border-color, #dee2e6);
    border-radius: 8px;
    background: transparent;
    color: var(--accent-primary, #4f46e5);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.acv2-empty-btn:hover[b-eshma9p32m] {
    border-color: var(--accent-primary, #4f46e5);
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
}
/* /Portals/IT/Pages/ITAssets.razor.rz.scp.css */
/* ITAssets page — flex column, only the asset table body scrolls */
.assets-page[b-vb6jxmlmdd] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-height, 56px) - 32px);
    overflow: hidden;
}

.assets-toolbar[b-vb6jxmlmdd] {
    flex: 0 0 auto;
}

.assets-layout[b-vb6jxmlmdd] {
    display: grid;
    grid-template-columns: 1fr 400px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.assets-list-panel[b-vb6jxmlmdd] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
/* /Portals/IT/Pages/ITCheckIn.razor.rz.scp.css */
/* =========================================
   CHECK-IN PAGE LAYOUT
   Side-by-side: Related Tickets | Wizard
   ========================================= */

.checkin-page-layout[b-wubk8y46cd] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 24px;
    min-height: calc(100vh - 120px);
}

/* Wizard wrapper - centered and constrained */
.checkin-wizard-wrapper[b-wubk8y46cd] {
    max-width: 900px;
    flex-shrink: 0;
}

/* =========================================
   RELATED TICKETS PANEL (External)
   ========================================= */
.related-tickets-panel[b-wubk8y46cd] {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    max-height: 720px;
}

.animate-in[b-wubk8y46cd] {
    animation: panel-slide-in-b-wubk8y46cd 0.25s ease-out;
}

@keyframes panel-slide-in-b-wubk8y46cd {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Panel Header */
.related-panel-header[b-wubk8y46cd] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(59, 130, 246, 0.1));
    border-bottom: 1px solid var(--border-color);
}

.related-panel-header > i[b-wubk8y46cd] {
    font-size: 1.1rem;
    color: #06b6d4;
    margin-top: 2px;
}

.related-panel-title[b-wubk8y46cd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.related-panel-title span[b-wubk8y46cd] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.related-panel-title small[b-wubk8y46cd] {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* Panel Body */
.related-panel-body[b-wubk8y46cd] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.related-panel-body[b-wubk8y46cd]::-webkit-scrollbar {
    width: 4px;
}

.related-panel-body[b-wubk8y46cd]::-webkit-scrollbar-track {
    background: transparent;
}

.related-panel-body[b-wubk8y46cd]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

/* =========================================
   TICKET LIST ITEMS
   ========================================= */
.ticket-list[b-wubk8y46cd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ticket-list-item[b-wubk8y46cd] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.ticket-list-item:hover[b-wubk8y46cd] {
    border-color: var(--border-color-hover);
    background: var(--bg-surface-hover);
}

.ticket-list-item.selected[b-wubk8y46cd] {
    border-color: var(--primary-color);
    background: var(--primary-bg-light);
}

.ticket-list-item .ticket-checkbox[b-wubk8y46cd] {
    color: var(--text-tertiary);
    font-size: 1rem;
    margin-top: 1px;
}

.ticket-list-item.selected .ticket-checkbox[b-wubk8y46cd] {
    color: var(--primary-color);
}

/* Ticket Details */
.ticket-details[b-wubk8y46cd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ticket-id-badge[b-wubk8y46cd] {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: #06b6d4;
}

.ticket-id-badge.none[b-wubk8y46cd] {
    color: var(--text-tertiary);
    font-style: italic;
}

.ticket-title[b-wubk8y46cd] {
    font-size: 0.8rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-subtitle[b-wubk8y46cd] {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    font-style: italic;
}

.ticket-meta[b-wubk8y46cd] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 3px;
}

/* Status Badges */
.ticket-status[b-wubk8y46cd] {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
}

.ticket-status.status-open[b-wubk8y46cd] {
    background: rgba(249, 115, 22, 0.15);
    color: #ea580c;
}

.ticket-status.status-inprogress[b-wubk8y46cd] {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.ticket-status.status-resolved[b-wubk8y46cd] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.ticket-status.status-closed[b-wubk8y46cd] {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.ticket-status.status-default[b-wubk8y46cd] {
    background: var(--bg-surface-hover);
    color: var(--text-secondary);
}

.ticket-date[b-wubk8y46cd] {
    font-size: 0.65rem;
    color: var(--text-tertiary);
}

/* Empty State */
.empty-tickets[b-wubk8y46cd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 12px;
    text-align: center;
}

.empty-tickets i[b-wubk8y46cd] {
    font-size: 2rem;
    color: var(--text-tertiary);
    opacity: 0.4;
}

.empty-tickets span[b-wubk8y46cd] {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

/* Divider */
.ticket-divider[b-wubk8y46cd] {
    height: 1px;
    background: var(--border-color);
    margin: 6px 0;
}

/* No Ticket Option */
.ticket-list-item.no-ticket-option[b-wubk8y46cd] {
    border-style: dashed;
    background: var(--bg-surface);
}

.ticket-list-item.no-ticket-option.selected[b-wubk8y46cd] {
    border-color: var(--color-success);
    background: var(--color-success-bg);
}

.ticket-list-item.no-ticket-option.selected .ticket-checkbox[b-wubk8y46cd] {
    color: var(--color-success);
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1200px) {
    .checkin-page-layout[b-wubk8y46cd] {
        flex-direction: column;
        align-items: center;
    }

    .related-tickets-panel[b-wubk8y46cd] {
        width: 100%;
        max-width: 900px;
        max-height: 200px;
    }

    .ticket-list[b-wubk8y46cd] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ticket-list-item[b-wubk8y46cd] {
        flex: 1;
        min-width: 200px;
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .checkin-page-layout[b-wubk8y46cd] {
        padding: 12px;
    }

    .related-tickets-panel[b-wubk8y46cd] {
        max-height: 180px;
    }

    .ticket-list-item[b-wubk8y46cd] {
        min-width: 100%;
    }
}
/* /Portals/IT/Pages/ITDashboard.razor.rz.scp.css */
/* Dashboard Page Layout */
.db-page[b-y92hywzvox] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem;
    gap: 1rem;
}

/* Loading State */
.db-loading[b-y92hywzvox] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    color: var(--text-secondary);
}

.db-loading-spinner[b-y92hywzvox] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-y92hywzvox 1s linear infinite;
}

@keyframes spin-b-y92hywzvox {
    to {
        transform: rotate(360deg);
    }
}

/* Empty State */
.db-empty-state[b-y92hywzvox] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    text-align: center;
}

.db-empty-icon[b-y92hywzvox] {
    font-size: 4rem;
    color: var(--text-tertiary);
}

.db-empty-state h2[b-y92hywzvox] {
    margin: 0;
    color: var(--text-primary);
}

.db-empty-state p[b-y92hywzvox] {
    margin: 0;
    color: var(--text-secondary);
    max-width: 400px;
}

/* Toolbar */
.db-toolbar[b-y92hywzvox] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    flex-shrink: 0;
}

.db-toolbar-left[b-y92hywzvox],
.db-toolbar-right[b-y92hywzvox] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Dashboard Selector */
.db-selector[b-y92hywzvox] {
    position: relative;
}

.db-selector-btn[b-y92hywzvox] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.db-selector-btn:hover[b-y92hywzvox] {
    background: var(--bg-surface-hover);
    border-color: var(--border-color-hover);
}

.db-selector-name[b-y92hywzvox] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dashboard Badges */
.db-badge[b-y92hywzvox] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: 1rem;
}

.db-badge i[b-y92hywzvox] {
    font-size: 0.625rem;
}

.db-badge-default[b-y92hywzvox] {
    background: var(--primary-bg-light);
    color: var(--primary-color);
}

.db-badge-shared[b-y92hywzvox] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.db-badge-sharing[b-y92hywzvox] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

/* Legacy badge - keep for dropdown */
.db-default-badge[b-y92hywzvox] {
    padding: 0.125rem 0.5rem;
    background: var(--primary-bg-light);
    color: var(--primary-color);
    font-size: 0.75rem;
    border-radius: 1rem;
}

.db-selector-backdrop[b-y92hywzvox] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.db-selector-dropdown[b-y92hywzvox] {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 250px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    overflow: hidden;
}

.db-selector-header[b-y92hywzvox] {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-surface-hover);
}

.db-selector-item[b-y92hywzvox] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.625rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.db-selector-item:hover[b-y92hywzvox] {
    background: var(--bg-surface-hover);
}

.db-selector-item.active[b-y92hywzvox] {
    background: var(--primary-bg-light);
    color: var(--primary-color);
}

.db-selector-divider[b-y92hywzvox] {
    height: 1px;
    background: var(--border-color);
    margin: 0.25rem 0;
}

.db-selector-action[b-y92hywzvox] {
    color: var(--primary-color);
}

.db-selector-action i[b-y92hywzvox] {
    margin-right: 0.5rem;
}

/* Dashboard Grid */
.db-grid[b-y92hywzvox] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(100px, auto);
    gap: 1rem;
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.db-grid.edit-mode[b-y92hywzvox] {
    background-image:
        linear-gradient(to right, var(--border-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--border-color) 1px, transparent 1px);
    background-size: calc(100% / 12) 100px;
    background-position: -1px -1px;
}

.db-grid-empty[b-y92hywzvox] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem;
    background: var(--bg-surface);
    border: 2px dashed var(--border-color);
    border-radius: 0.75rem;
    color: var(--text-tertiary);
}

.db-grid-empty i[b-y92hywzvox] {
    font-size: 3rem;
}

/* Edit mode active button state */
.tk-btn-ghost.active[b-y92hywzvox] {
    background: var(--primary-bg-light);
    color: var(--primary-color);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .db-grid[b-y92hywzvox] {
        grid-template-columns: repeat(6, 1fr);
    }

    .db-grid.edit-mode[b-y92hywzvox] {
        background-size: calc(100% / 6) 100px;
    }
}

@media (max-width: 768px) {
    .db-page[b-y92hywzvox] {
        padding: 0.75rem;
    }

    .db-toolbar[b-y92hywzvox] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .db-toolbar-left[b-y92hywzvox],
    .db-toolbar-right[b-y92hywzvox] {
        justify-content: center;
    }

    .db-grid[b-y92hywzvox] {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }

    .db-grid.edit-mode[b-y92hywzvox] {
        background-size: calc(100% / 4) 100px;
    }
}

@media (max-width: 480px) {
    .db-grid[b-y92hywzvox] {
        grid-template-columns: 1fr;
    }

    .db-grid.edit-mode[b-y92hywzvox] {
        background-size: 100% 100px;
    }
}
/* /Shared/Admin/GrantAccessModal.razor.rz.scp.css */
.gam-backdrop[b-0oo12vf3u5] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.gam-modal[b-0oo12vf3u5] {
    background: var(--bg-surface);
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transition: max-width 0.2s ease;
}

.gam-modal-expanded[b-0oo12vf3u5] {
    max-width: 720px;
}

.gam-header[b-0oo12vf3u5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-primary);
}

.gam-header-title[b-0oo12vf3u5] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gam-close[b-0oo12vf3u5] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    font-size: 1rem;
    border-radius: 4px;
    transition: all 0.15s;
}

.gam-close:hover[b-0oo12vf3u5] {
    color: var(--text-primary);
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}

.gam-body[b-0oo12vf3u5] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

/* Search */
.gam-search-section[b-0oo12vf3u5] {
    margin-bottom: 16px;
}

.gam-label[b-0oo12vf3u5] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.gam-search-wrapper[b-0oo12vf3u5] {
    position: relative;
    display: flex;
    align-items: center;
}

.gam-search-icon[b-0oo12vf3u5] {
    position: absolute;
    left: 10px;
    color: var(--text-tertiary);
    font-size: 0.875rem;
    pointer-events: none;
}

.gam-search[b-0oo12vf3u5] {
    width: 100%;
    padding: 9px 36px 9px 32px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.gam-search:focus[b-0oo12vf3u5] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-alpha, rgba(59, 130, 246, 0.15));
}

.gam-search-spinner[b-0oo12vf3u5] {
    position: absolute;
    right: 10px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-primary);
    border-top-color: var(--accent-primary, #3b82f6);
    border-radius: 50%;
    animation: gam-spin-b-0oo12vf3u5 0.6s linear infinite;
}

@keyframes gam-spin-b-0oo12vf3u5 {
    to { transform: rotate(360deg); }
}

.gam-hint[b-0oo12vf3u5] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* Results */
.gam-results[b-0oo12vf3u5] {
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

.gam-result-item[b-0oo12vf3u5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid var(--border-secondary, var(--border-primary));
}

.gam-result-item:last-child[b-0oo12vf3u5] {
    border-bottom: none;
}

.gam-result-item:hover[b-0oo12vf3u5] {
    background: var(--bg-hover, rgba(0, 0, 0, 0.03));
}

.gam-result-avatar[b-0oo12vf3u5] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

.gam-result-info[b-0oo12vf3u5] {
    flex: 1;
    min-width: 0;
}

.gam-result-name[b-0oo12vf3u5] {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.gam-result-detail[b-0oo12vf3u5] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gam-result-roles[b-0oo12vf3u5] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex-shrink: 0;
}

.gam-role-badge[b-0oo12vf3u5] {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 500;
    background: var(--bg-elevated, #f3f4f6);
    color: var(--text-secondary);
}

.gam-no-results[b-0oo12vf3u5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px;
    color: var(--text-tertiary);
    font-size: 0.875rem;
    justify-content: center;
}

.gam-no-results i[b-0oo12vf3u5] {
    font-size: 1.25rem;
}

/* Selected user */
.gam-selected[b-0oo12vf3u5] {
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    overflow: hidden;
}

.gam-selected-header[b-0oo12vf3u5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--bg-elevated, #f9fafb);
    border-bottom: 1px solid var(--border-primary);
}

.gam-selected-user[b-0oo12vf3u5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gam-change-btn[b-0oo12vf3u5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: none;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

.gam-change-btn:hover[b-0oo12vf3u5] {
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
    color: var(--text-primary);
}

/* Roles section */
.gam-roles-section[b-0oo12vf3u5] {
    padding: 16px 14px;
}

.gam-section-title[b-0oo12vf3u5] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.gam-required[b-0oo12vf3u5] {
    color: #ef4444;
}

.gam-error[b-0oo12vf3u5] {
    font-size: 0.75rem;
    color: #ef4444;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.gam-role-group[b-0oo12vf3u5] {
    margin-bottom: 12px;
}

.gam-role-group:last-child[b-0oo12vf3u5] {
    margin-bottom: 0;
}

.gam-role-group-title[b-0oo12vf3u5] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}

.gam-role-checkboxes[b-0oo12vf3u5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.gam-checkbox-label[b-0oo12vf3u5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.gam-checkbox-label input[type="checkbox"][b-0oo12vf3u5] {
    accent-color: var(--accent-primary, #3b82f6);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Footer */
.gam-footer[b-0oo12vf3u5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid var(--border-primary);
}

.gam-btn-primary[b-0oo12vf3u5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--accent-primary, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.gam-btn-primary:hover:not(:disabled)[b-0oo12vf3u5] {
    background: var(--accent-primary-hover, #2563eb);
}

.gam-btn-primary:disabled[b-0oo12vf3u5] {
    opacity: 0.6;
    cursor: not-allowed;
}

.gam-btn-ghost[b-0oo12vf3u5] {
    padding: 8px 18px;
    background: none;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s;
}

.gam-btn-ghost:hover:not(:disabled)[b-0oo12vf3u5] {
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
}

.gam-btn-spinner[b-0oo12vf3u5] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gam-spin-b-0oo12vf3u5 0.6s linear infinite;
}
/* /Shared/Admin/UserEditModal.razor.rz.scp.css */
.uem-backdrop[b-efh50i8175] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.uem-modal[b-efh50i8175] {
    background: var(--bg-surface);
    border-radius: 12px;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.uem-header[b-efh50i8175] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-primary);
}

.uem-header-title[b-efh50i8175] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.uem-header-hint[b-efh50i8175] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-left: auto;
    margin-right: 12px;
}

.uem-close[b-efh50i8175] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    font-size: 1rem;
    border-radius: 4px;
    transition: all 0.15s;
}

.uem-close:hover[b-efh50i8175] {
    color: var(--text-primary);
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}

.uem-body[b-efh50i8175] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.uem-section[b-efh50i8175] {
    margin-bottom: 24px;
}

.uem-section:last-child[b-efh50i8175] {
    margin-bottom: 0;
}

.uem-section-title[b-efh50i8175] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-secondary, var(--border-primary));
}

.uem-grid-2[b-efh50i8175] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.uem-grid-2:last-child[b-efh50i8175] {
    margin-bottom: 0;
}

.uem-field[b-efh50i8175] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.uem-label[b-efh50i8175] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.uem-required[b-efh50i8175] {
    color: #ef4444;
}

.uem-input[b-efh50i8175] {
    padding: 7px 10px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.uem-input:focus[b-efh50i8175] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-alpha, rgba(59, 130, 246, 0.15));
}

.uem-input-error[b-efh50i8175] {
    border-color: #ef4444;
}

.uem-input-error:focus[b-efh50i8175] {
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}

.uem-error[b-efh50i8175] {
    font-size: 0.75rem;
    color: #ef4444;
}

.uem-readonly[b-efh50i8175] {
    padding: 7px 0;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.uem-readonly code[b-efh50i8175] {
    background: var(--bg-elevated, #f3f4f6);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.uem-muted[b-efh50i8175] {
    color: var(--text-tertiary);
}

/* Role checkboxes */
.uem-role-group[b-efh50i8175] {
    margin-bottom: 12px;
}

.uem-role-group:last-child[b-efh50i8175] {
    margin-bottom: 0;
}

.uem-role-group-title[b-efh50i8175] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}

.uem-role-checkboxes[b-efh50i8175] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.uem-checkbox-label[b-efh50i8175] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.uem-checkbox-label input[type="checkbox"][b-efh50i8175] {
    accent-color: var(--accent-primary, #3b82f6);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Footer */
.uem-footer[b-efh50i8175] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 1px solid var(--border-primary);
}

.uem-footer-left[b-efh50i8175],
.uem-footer-right[b-efh50i8175] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.uem-btn-primary[b-efh50i8175] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--accent-primary, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.uem-btn-primary:hover:not(:disabled)[b-efh50i8175] {
    background: var(--accent-primary-hover, #2563eb);
}

.uem-btn-primary:disabled[b-efh50i8175] {
    opacity: 0.6;
    cursor: not-allowed;
}

.uem-btn-ghost[b-efh50i8175] {
    padding: 8px 18px;
    background: none;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s;
}

.uem-btn-ghost:hover:not(:disabled)[b-efh50i8175] {
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
}

.uem-btn-danger[b-efh50i8175] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: none;
    border: 1px solid #ef4444;
    border-radius: 6px;
    color: #ef4444;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s;
}

.uem-btn-danger:hover[b-efh50i8175] {
    background: rgba(239, 68, 68, 0.08);
}

.uem-btn-spinner[b-efh50i8175] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: uem-spin-b-efh50i8175 0.6s linear infinite;
}

@keyframes uem-spin-b-efh50i8175 {
    to { transform: rotate(360deg); }
}
/* /Shared/Assets/AssetTable.razor.rz.scp.css */
/* Card: fill parent flex container, clip overflow */
.asset-card[b-v5nyzavep4] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Scroll container: the ONLY element that scrolls */
.asset-scroll[b-v5nyzavep4] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Table: fixed layout for consistent column widths */
.asset-grid[b-v5nyzavep4] {
    table-layout: fixed;
    width: 100%;
}

/* Column headers need relative positioning for resize handles */
.asset-grid th[b-v5nyzavep4] {
    position: relative;
}

/* All table cells: truncate long text with ellipsis */
.asset-grid td[b-v5nyzavep4] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Override global right-alignment on last td */
.asset-grid tbody td:last-child[b-v5nyzavep4] {
    text-align: left;
    color: var(--text-primary);
}

/* Row styling */
.asset-row[b-v5nyzavep4] {
    cursor: pointer;
}

.asset-row.selected[b-v5nyzavep4] {
    background-color: #f0f9ff;
}

/* Asset Tag cell: monospace */
.asset-tag-cell[b-v5nyzavep4] {
    font-family: ui-monospace, SFMono-Regular, monospace;
    color: var(--text-secondary, #4b5563);
}

/* Name cell: slightly bolder */
.asset-name-cell[b-v5nyzavep4] {
    font-weight: 500;
}

/* Empty dash placeholder */
.empty-dash[b-v5nyzavep4] {
    color: #d1d5db;
}

/* Resize handle */
.resize-handle[b-v5nyzavep4] {
    position: absolute;
    right: -2px;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    z-index: 1;
}

.resize-handle:hover[b-v5nyzavep4],
.resize-handle:active[b-v5nyzavep4] {
    background-color: var(--primary-color, #3b82f6);
}
/* /Shared/CheckIn/CheckInForm.razor.rz.scp.css */
/* =========================================
   CHECK-IN WIZARD - ULTRA COMPACT LAYOUT
   Designed to fit on 1080p without scrolling
   ========================================= */

/* Wizard Container */
.wizard-container[b-qmehddf68x] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 90px);
    max-height: 720px;
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-app) 100%);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

/* =========================================
   HEADER - Ultra Compact
   ========================================= */
.wizard-header[b-qmehddf68x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: linear-gradient(90deg, var(--bg-surface), var(--bg-surface-hover));
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.wizard-header-left[b-qmehddf68x] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wizard-close-btn[b-qmehddf68x] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-size: 0.75rem;
}

.wizard-close-btn:hover[b-qmehddf68x] {
    background: var(--bg-app);
    color: var(--text-primary);
    border-color: var(--primary-color);
}

.wizard-title-section[b-qmehddf68x] {
    display: flex;
    flex-direction: column;
}

.wizard-title[b-qmehddf68x] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.wizard-subtitle[b-qmehddf68x] {
    font-size: 0.65rem;
    color: var(--text-tertiary);
}

/* Step Indicator - Compact pills */
.wizard-steps[b-qmehddf68x] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-app);
    padding: 4px 8px;
    border-radius: 50px;
    border: 1px solid var(--border-color);
}

.wizard-step[b-qmehddf68x] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 16px;
    transition: all 0.2s;
}

.wizard-step.clickable[b-qmehddf68x] {
    cursor: pointer;
}

.wizard-step.clickable:hover[b-qmehddf68x] {
    background: var(--bg-surface);
}

.step-indicator[b-qmehddf68x] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    background: var(--bg-surface);
    color: var(--text-tertiary);
    border: 2px solid var(--border-color);
    transition: all 0.25s;
}

.wizard-step.current .step-indicator[b-qmehddf68x] {
    background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
    border-color: transparent;
    color: white;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

.wizard-step.completed .step-indicator[b-qmehddf68x] {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: transparent;
    color: white;
}

.step-label[b-qmehddf68x] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-tertiary);
    display: none;
}

@media (min-width: 1200px) {
    .step-label[b-qmehddf68x] {
        display: inline;
    }
}

.wizard-step.current .step-label[b-qmehddf68x] {
    color: var(--primary-color);
    font-weight: 600;
}

.wizard-step.completed .step-label[b-qmehddf68x] {
    color: #10b981;
}

.step-connector[b-qmehddf68x] {
    width: 16px;
    height: 2px;
    background: var(--border-color);
    border-radius: 1px;
    transition: background 0.3s;
}

.step-connector.completed[b-qmehddf68x] {
    background: linear-gradient(90deg, #10b981, #06b6d4);
}

/* =========================================
   BODY - Three Column Layout (Left Panel + Main + Sidebar)
   ========================================= */
.wizard-body[b-qmehddf68x] {
    flex: 1;
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    overflow: hidden;
    min-height: 0;
}

.wizard-main[b-qmehddf68x] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-right: 4px;
}

.wizard-main[b-qmehddf68x]::-webkit-scrollbar {
    width: 4px;
}

.wizard-main[b-qmehddf68x]::-webkit-scrollbar-track {
    background: transparent;
}

.wizard-main[b-qmehddf68x]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

/* =========================================
   STEP CONTENT - Ultra Compact
   ========================================= */
.step-content[b-qmehddf68x] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.step-enter[b-qmehddf68x] {
    animation: step-slide-in-b-qmehddf68x 0.2s ease-out;
}

@keyframes step-slide-in-b-qmehddf68x {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
}

.step-header[b-qmehddf68x] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.step-icon[b-qmehddf68x] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.step-icon.asset-icon[b-qmehddf68x] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.25));
    color: #3b82f6;
}

.step-icon.condition-icon[b-qmehddf68x] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.25));
    color: #10b981;
}

.step-icon.details-icon[b-qmehddf68x] {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.25));
    color: #f97316;
}

.step-icon.confirm-icon[b-qmehddf68x] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.25));
    color: #8b5cf6;
}

.step-header-text h3[b-qmehddf68x] {
    margin: 0 0 1px 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.step-header-text p[b-qmehddf68x] {
    margin: 0;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* =========================================
   SEARCH - Compact
   ========================================= */
.search-container[b-qmehddf68x] {
    position: relative;
}

.search-input-wrapper[b-qmehddf68x] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-qmehddf68x] {
    position: absolute;
    left: 10px;
    color: var(--text-tertiary);
    font-size: 0.8rem;
}

.search-input[b-qmehddf68x] {
    width: 100%;
    padding: 8px 32px;
    font-size: 0.8rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: all 0.2s;
}

.search-input:focus[b-qmehddf68x] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.search-spinner[b-qmehddf68x] {
    position: absolute;
    right: 10px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-qmehddf68x 0.8s linear infinite;
}

.search-clear[b-qmehddf68x] {
    position: absolute;
    right: 10px;
    width: 18px;
    height: 18px;
    border: none;
    background: var(--bg-app);
    border-radius: 50%;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
}

@keyframes spin-b-qmehddf68x {
    to { transform: rotate(360deg); }
}

.search-dropdown[b-qmehddf68x] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

.search-result-item[b-qmehddf68x] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background-color 0.1s;
}

.search-result-item:hover[b-qmehddf68x] {
    background: var(--bg-app);
}

.result-icon[b-qmehddf68x] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--bg-app), var(--bg-surface-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.result-info[b-qmehddf68x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.result-tag[b-qmehddf68x] {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.result-name[b-qmehddf68x] {
    font-size: 0.65rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-status[b-qmehddf68x] {
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
}

.search-error[b-qmehddf68x] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--color-danger-bg);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 6px;
    color: var(--color-danger);
    font-size: 0.75rem;
}

/* =========================================
   SELECTED ASSET CARD - Compact
   ========================================= */
.selected-asset-card[b-qmehddf68x] {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-hover) 100%);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    border-left: 3px solid var(--primary-color);
}

.animate-in[b-qmehddf68x] {
    animation: fade-scale-in-b-qmehddf68x 0.2s ease-out;
}

@keyframes fade-scale-in-b-qmehddf68x {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.asset-card-header[b-qmehddf68x] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.asset-icon-box[b-qmehddf68x] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--bg-app), var(--bg-surface));
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.asset-info[b-qmehddf68x] {
    flex: 1;
}

.asset-info h4[b-qmehddf68x] {
    margin: 0 0 1px 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.asset-tag[b-qmehddf68x] {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.change-asset-btn[b-qmehddf68x] {
    padding: 4px 8px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: all 0.15s;
}

.change-asset-btn:hover[b-qmehddf68x] {
    background: var(--bg-app);
    color: var(--text-primary);
    border-color: var(--primary-color);
}

.asset-details-grid[b-qmehddf68x] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.detail-item[b-qmehddf68x] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.detail-item label[b-qmehddf68x] {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-tertiary);
}

.detail-item span[b-qmehddf68x] {
    font-size: 0.75rem;
    color: var(--text-primary);
}

.detail-item .monospace[b-qmehddf68x] {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.7rem;
}

.digital-warning[b-qmehddf68x] {
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--color-warning-bg);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 6px;
    color: var(--color-warning);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* =========================================
   CONDITION GRID - Single row of 6
   ========================================= */
.condition-grid[b-qmehddf68x] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.condition-btn[b-qmehddf68x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 4px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.condition-btn:hover[b-qmehddf68x] {
    border-color: var(--border-color-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.condition-btn i[b-qmehddf68x] {
    font-size: 1rem;
}

.condition-btn span[b-qmehddf68x] {
    font-size: 0.6rem;
    font-weight: 600;
    text-align: center;
}

.condition-btn.selected[b-qmehddf68x] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.condition-btn.selected.excellent-btn[b-qmehddf68x] {
    border-color: #16a34a;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.2));
    color: #16a34a;
}
.condition-btn.selected.good-btn[b-qmehddf68x] {
    border-color: #2563eb;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.2));
    color: #2563eb;
}
.condition-btn.selected.fair-btn[b-qmehddf68x] {
    border-color: #ca8a04;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.1), rgba(234, 179, 8, 0.2));
    color: #ca8a04;
}
.condition-btn.selected.poor-btn[b-qmehddf68x] {
    border-color: #ea580c;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(249, 115, 22, 0.2));
    color: #ea580c;
}
.condition-btn.selected.damaged-btn[b-qmehddf68x] {
    border-color: #dc2626;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.2));
    color: #dc2626;
}
.condition-btn.selected.nonfunctional-btn[b-qmehddf68x] {
    border-color: #4b5563;
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.1), rgba(107, 114, 128, 0.2));
    color: #4b5563;
}

/* =========================================
   DAMAGE SECTION - Very Compact
   ========================================= */
.damage-section[b-qmehddf68x] {
    padding: 10px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.03), rgba(239, 68, 68, 0.06));
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    border-left: 3px solid #dc2626;
}

.damage-header[b-qmehddf68x] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #dc2626;
}

.damage-field[b-qmehddf68x] {
    margin-bottom: 8px;
}

.damage-field:last-child[b-qmehddf68x] {
    margin-bottom: 0;
}

.field-label[b-qmehddf68x] {
    display: block;
    margin-bottom: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
}

.field-label.required[b-qmehddf68x]::after {
    content: " *";
    color: #dc2626;
}

.damage-type-grid[b-qmehddf68x] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.damage-type-btn[b-qmehddf68x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 6px 3px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s;
    font-size: 0.55rem;
}

.damage-type-btn i[b-qmehddf68x] {
    font-size: 0.75rem;
}

.damage-type-btn:hover[b-qmehddf68x] {
    border-color: var(--border-color-hover);
    background: var(--bg-app);
}

.damage-type-btn.selected[b-qmehddf68x] {
    border-color: #dc2626;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.15));
    color: #dc2626;
}

.severity-grid[b-qmehddf68x] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.severity-btn[b-qmehddf68x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 6px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s;
}

.severity-btn:hover[b-qmehddf68x] {
    border-color: var(--border-color-hover);
}

.severity-btn i[b-qmehddf68x] {
    font-size: 0.85rem;
}

.severity-btn span[b-qmehddf68x] {
    font-size: 0.6rem;
    font-weight: 600;
}

.severity-btn.selected.minor-severity[b-qmehddf68x] {
    border-color: #ca8a04;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.1), rgba(234, 179, 8, 0.15));
    color: #ca8a04;
}
.severity-btn.selected.moderate-severity[b-qmehddf68x] {
    border-color: #ea580c;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(249, 115, 22, 0.15));
    color: #ea580c;
}
.severity-btn.selected.severe-severity[b-qmehddf68x] {
    border-color: #dc2626;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.15));
    color: #dc2626;
}
.severity-btn.selected.critical-severity[b-qmehddf68x] {
    border-color: #7c2d12;
    background: linear-gradient(135deg, rgba(124, 45, 18, 0.1), rgba(124, 45, 18, 0.15));
    color: #7c2d12;
}

.no-ticket-option.selected .ticket-checkbox[b-qmehddf68x] {
    color: var(--color-success);
}

/* =========================================
   FORM FIELDS - Very Compact
   ========================================= */
.form-field[b-qmehddf68x] {
    margin-bottom: 8px;
}

.form-field:last-child[b-qmehddf68x] {
    margin-bottom: 0;
}

.optional[b-qmehddf68x] {
    font-weight: 400;
    color: var(--text-tertiary);
}

.form-textarea[b-qmehddf68x] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: inherit;
    background: var(--bg-surface);
    color: var(--text-primary);
    resize: vertical;
    min-height: 50px;
    max-height: 100px;
}

.form-textarea:focus[b-qmehddf68x] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* =========================================
   CONFIRMATION CARD - Compact
   ========================================= */
.confirm-card[b-qmehddf68x] {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-hover) 100%);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
}

.confirm-section[b-qmehddf68x] {
    margin-bottom: 8px;
}

.confirm-section h4[b-qmehddf68x] {
    margin: 0 0 6px 0;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.confirm-asset[b-qmehddf68x] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--bg-app);
    border-radius: 6px;
    border-left: 3px solid var(--primary-color);
}

.confirm-asset-icon[b-qmehddf68x] {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.confirm-asset-info[b-qmehddf68x] {
    display: flex;
    flex-direction: column;
}

.confirm-asset-name[b-qmehddf68x] {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.confirm-asset-tag[b-qmehddf68x] {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.confirm-grid[b-qmehddf68x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.confirm-item[b-qmehddf68x] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.confirm-item label[b-qmehddf68x] {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-tertiary);
}

.confirm-item span[b-qmehddf68x] {
    font-size: 0.75rem;
    color: var(--text-primary);
}

.confirm-notes[b-qmehddf68x] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.confirm-notes label[b-qmehddf68x] {
    display: block;
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-tertiary);
    margin-bottom: 3px;
}

.confirm-notes p[b-qmehddf68x] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-primary);
    white-space: pre-wrap;
}

.ticket-notice[b-qmehddf68x] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border-radius: 6px;
    margin-top: 8px;
}

.ticket-notice.normal[b-qmehddf68x] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-left: 3px solid #10b981;
}

.ticket-notice.normal i[b-qmehddf68x] {
    color: #10b981;
    font-size: 0.9rem;
}

.ticket-notice.damaged[b-qmehddf68x] {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(249, 115, 22, 0.15));
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-left: 3px solid #f97316;
}

.ticket-notice.damaged i[b-qmehddf68x] {
    color: #f97316;
    font-size: 0.9rem;
}

.notice-content[b-qmehddf68x] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.notice-title[b-qmehddf68x] {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.notice-desc[b-qmehddf68x] {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* =========================================
   SIDEBAR - Very Compact Panels
   ========================================= */
.wizard-sidebar[b-qmehddf68x] {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.sidebar-panel[b-qmehddf68x] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    opacity: 0.5;
    transition: all 0.25s ease;
}

.sidebar-panel.panel-visible[b-qmehddf68x] {
    opacity: 1;
}

.panel-header[b-qmehddf68x] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: linear-gradient(90deg, var(--bg-app), var(--bg-surface-hover));
    border-bottom: 1px solid var(--border-color);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.panel-body[b-qmehddf68x] {
    padding: 8px 10px;
}

.panel-item[b-qmehddf68x] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 6px;
}

.panel-item:last-child[b-qmehddf68x] {
    margin-bottom: 0;
}

.panel-item label[b-qmehddf68x] {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-tertiary);
}

.panel-item span[b-qmehddf68x] {
    font-size: 0.7rem;
    color: var(--text-primary);
}

.panel-item.highlight[b-qmehddf68x] {
    padding: 6px;
    background: var(--primary-bg-light);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 5px;
    margin-top: 4px;
}

.panel-empty[b-qmehddf68x] {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.7rem;
    padding: 3px 0;
}

/* =========================================
   READY PANEL - Animated Gradient Border
   ========================================= */
.ready-panel[b-qmehddf68x] {
    position: relative;
    border-radius: 8px;
    padding: 2px;
    background: linear-gradient(90deg, #06b6d4, #3b82f6, #8b5cf6, #3b82f6, #06b6d4);
    background-size: 300% 100%;
    animation: gradient-flow-b-qmehddf68x 3s linear infinite;
}

@keyframes gradient-flow-b-qmehddf68x {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.ready-content[b-qmehddf68x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: var(--bg-surface);
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.ready-content i[b-qmehddf68x] {
    font-size: 0.9rem;
    color: #10b981;
}

/* =========================================
   STATUS & CONDITION BADGES
   ========================================= */
.status-badge[b-qmehddf68x] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.status-inuse[b-qmehddf68x] { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.status-badge.status-instock[b-qmehddf68x] { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.status-badge.status-inrepair[b-qmehddf68x] { background: rgba(249, 115, 22, 0.15); color: #ea580c; }
.status-badge.status-retired[b-qmehddf68x] { background: rgba(107, 114, 128, 0.15); color: #4b5563; }

.condition-badge[b-qmehddf68x] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
}

.condition-badge.excellent-btn[b-qmehddf68x] { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.condition-badge.good-btn[b-qmehddf68x] { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.condition-badge.fair-btn[b-qmehddf68x] { background: rgba(234, 179, 8, 0.15); color: #ca8a04; }
.condition-badge.poor-btn[b-qmehddf68x] { background: rgba(249, 115, 22, 0.15); color: #ea580c; }
.condition-badge.damaged-btn[b-qmehddf68x] { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.condition-badge.nonfunctional-btn[b-qmehddf68x] { background: rgba(107, 114, 128, 0.15); color: #4b5563; }

.severity-badge[b-qmehddf68x] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
}

.severity-badge.minor-severity[b-qmehddf68x] { background: rgba(234, 179, 8, 0.15); color: #ca8a04; }
.severity-badge.moderate-severity[b-qmehddf68x] { background: rgba(249, 115, 22, 0.15); color: #ea580c; }
.severity-badge.severe-severity[b-qmehddf68x] { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.severity-badge.critical-severity[b-qmehddf68x] { background: rgba(124, 45, 18, 0.15); color: #7c2d12; }

/* =========================================
   FOOTER - Ultra Compact
   ========================================= */
.wizard-footer[b-qmehddf68x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: linear-gradient(90deg, var(--bg-surface), var(--bg-surface-hover));
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.footer-left[b-qmehddf68x], .footer-right[b-qmehddf68x] {
    flex: 1;
}

.footer-center[b-qmehddf68x] {
    flex: 1;
    text-align: center;
}

.footer-right[b-qmehddf68x] {
    display: flex;
    justify-content: flex-end;
}

.step-counter[b-qmehddf68x] {
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

.footer-btn[b-qmehddf68x] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-back[b-qmehddf68x] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-back:hover[b-qmehddf68x] {
    background: var(--bg-app);
    color: var(--text-primary);
    border-color: var(--border-color-hover);
}

.btn-continue[b-qmehddf68x] {
    background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
    border: none;
    color: white;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.btn-continue:hover[b-qmehddf68x] {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
}

.btn-submit[b-qmehddf68x] {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: white;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

.btn-submit:hover:not(:disabled)[b-qmehddf68x] {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
}

.btn-submit:disabled[b-qmehddf68x] {
    opacity: 0.7;
    cursor: not-allowed;
}

.submit-spinner[b-qmehddf68x] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-qmehddf68x 0.8s linear infinite;
}

/* =========================================
   VALIDATION MODAL
   ========================================= */
.validation-modal-backdrop[b-qmehddf68x] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: backdrop-fade-b-qmehddf68x 0.2s ease;
}

@keyframes backdrop-fade-b-qmehddf68x {
    from { opacity: 0; }
    to { opacity: 1; }
}

.validation-modal[b-qmehddf68x] {
    background: var(--bg-surface);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 320px;
    overflow: hidden;
    animation: modal-bounce-b-qmehddf68x 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modal-bounce-b-qmehddf68x {
    0% { opacity: 0; transform: scale(0.9) translateY(20px); }
    70% { transform: scale(1.02) translateY(-4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.validation-modal-header[b-qmehddf68x] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.15));
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

.validation-modal-header i[b-qmehddf68x] {
    font-size: 1rem;
    color: #dc2626;
}

.validation-modal-header span[b-qmehddf68x] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #dc2626;
}

.validation-modal-body[b-qmehddf68x] {
    padding: 12px 14px;
}

.validation-modal-body p[b-qmehddf68x] {
    margin: 0 0 8px 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.validation-list[b-qmehddf68x] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.validation-list li[b-qmehddf68x] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
}

.validation-list li:last-child[b-qmehddf68x] {
    border-bottom: none;
}

.validation-list li i[b-qmehddf68x] {
    color: #dc2626;
    font-size: 0.75rem;
}

.validation-list li span[b-qmehddf68x] {
    font-size: 0.75rem;
    color: var(--text-primary);
}

.validation-modal-footer[b-qmehddf68x] {
    padding: 10px 14px;
    background: var(--bg-app);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.validation-btn[b-qmehddf68x] {
    padding: 6px 16px;
    border-radius: 5px;
    border: none;
    background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.validation-btn:hover[b-qmehddf68x] {
    opacity: 0.9;
}

.monospace[b-qmehddf68x] {
    font-family: ui-monospace, SFMono-Regular, monospace;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1200px) {
    .wizard-sidebar[b-qmehddf68x] {
        width: 200px;
    }
}

@media (max-width: 1100px) {
    .wizard-body[b-qmehddf68x] {
        flex-direction: column;
    }

    .wizard-sidebar[b-qmehddf68x] {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sidebar-panel[b-qmehddf68x] {
        flex: 1;
        min-width: 180px;
    }

    .condition-grid[b-qmehddf68x] {
        grid-template-columns: repeat(3, 1fr);
    }

    .asset-details-grid[b-qmehddf68x] {
        grid-template-columns: repeat(2, 1fr);
    }

    .confirm-grid[b-qmehddf68x] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .wizard-steps[b-qmehddf68x] {
        display: none;
    }

    .condition-grid[b-qmehddf68x] {
        grid-template-columns: repeat(2, 1fr);
    }

    .damage-type-grid[b-qmehddf68x] {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* /Shared/Components/PersonDetailModal.razor.rz.scp.css */
/* ── Backdrop ── */
.pdm-backdrop[b-o9ngkjrhn6] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10100;
    animation: pdm-backdrop-in-b-o9ngkjrhn6 0.25s ease-out;
    outline: none;
}

@keyframes pdm-backdrop-in-b-o9ngkjrhn6 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Modal Container ── */
.pdm-modal[b-o9ngkjrhn6] {
    background: var(--bg-surface);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    width: 780px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    animation: pdm-modal-in-b-o9ngkjrhn6 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pdm-modal-in-b-o9ngkjrhn6 {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ── Header ── */
.pdm-header[b-o9ngkjrhn6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.pdm-header-content[b-o9ngkjrhn6] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.pdm-avatar[b-o9ngkjrhn6] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.pdm-header-info[b-o9ngkjrhn6] {
    min-width: 0;
}

.pdm-header-top-row[b-o9ngkjrhn6] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pdm-name[b-o9ngkjrhn6] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdm-badges[b-o9ngkjrhn6] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.pdm-badge[b-o9ngkjrhn6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pdm-badge-active[b-o9ngkjrhn6] {
    background-color: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.pdm-badge-inactive[b-o9ngkjrhn6] {
    background-color: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.pdm-badge-vip[b-o9ngkjrhn6] {
    background-color: rgba(234, 179, 8, 0.12);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.25);
}

.pdm-badge-vip i[b-o9ngkjrhn6] {
    font-size: 10px;
}

.pdm-subtitle[b-o9ngkjrhn6] {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.pdm-subtitle-sep[b-o9ngkjrhn6] {
    margin: 0 4px;
    color: var(--text-tertiary);
}

.pdm-close[b-o9ngkjrhn6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    margin-top: 2px;
}

.pdm-close:hover[b-o9ngkjrhn6] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

/* ── Tabs ── */
.pdm-tabs[b-o9ngkjrhn6] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    padding: 0 24px;
    flex-shrink: 0;
    overflow-x: auto;
}

.pdm-tab[b-o9ngkjrhn6] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
}

.pdm-tab:hover[b-o9ngkjrhn6] {
    color: var(--text-secondary);
}

.pdm-tab.active[b-o9ngkjrhn6] {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.pdm-tab i[b-o9ngkjrhn6] {
    font-size: 14px;
}

/* ── Body ── */
.pdm-body[b-o9ngkjrhn6] {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 200px;
}

/* ── Detail Grid ── */
.pdm-section-title[b-o9ngkjrhn6] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-tertiary);
    margin-bottom: 10px;
}

.pdm-detail-grid[b-o9ngkjrhn6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    margin-bottom: 4px;
}

.pdm-field[b-o9ngkjrhn6] {
    min-width: 0;
}

.pdm-field-label[b-o9ngkjrhn6] {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 2px;
}

.pdm-field-value[b-o9ngkjrhn6] {
    font-size: 13px;
    color: var(--text-primary);
    word-break: break-word;
}

.pdm-divider[b-o9ngkjrhn6] {
    height: 1px;
    background: var(--border-color);
    margin: 16px 0;
}

.pdm-link[b-o9ngkjrhn6] {
    color: var(--primary-color);
    text-decoration: none;
}

.pdm-link:hover[b-o9ngkjrhn6] {
    text-decoration: underline;
}

.pdm-bool-yes[b-o9ngkjrhn6] {
    color: #22c55e;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pdm-bool-no[b-o9ngkjrhn6] {
    color: var(--text-tertiary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pdm-bool-yes i[b-o9ngkjrhn6], .pdm-bool-no i[b-o9ngkjrhn6] {
    font-size: 12px;
}

.pdm-roles[b-o9ngkjrhn6] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pdm-role-tag[b-o9ngkjrhn6] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-surface-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.pdm-loading-text[b-o9ngkjrhn6] {
    color: var(--text-tertiary);
    font-style: italic;
}

/* ── Table styles ── */
.pdm-table[b-o9ngkjrhn6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.pdm-table thead th[b-o9ngkjrhn6] {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-tertiary);
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}

.pdm-table tbody td[b-o9ngkjrhn6] {
    padding: 10px 12px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.pdm-table tbody tr:last-child td[b-o9ngkjrhn6] {
    border-bottom: none;
}

.pdm-table tbody tr:hover[b-o9ngkjrhn6] {
    background: var(--bg-surface-hover);
}

.pdm-mono[b-o9ngkjrhn6] {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 12px;
}

.pdm-truncate[b-o9ngkjrhn6] {
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Status pills ── */
.pdm-status-pill[b-o9ngkjrhn6] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

.pdm-status-active[b-o9ngkjrhn6] {
    background-color: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.pdm-status-info[b-o9ngkjrhn6] {
    background-color: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.pdm-status-warning[b-o9ngkjrhn6] {
    background-color: rgba(234, 179, 8, 0.12);
    color: #eab308;
}

.pdm-status-inactive[b-o9ngkjrhn6] {
    background-color: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
}

/* ── Empty state ── */
.pdm-empty-state[b-o9ngkjrhn6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--text-tertiary);
    font-size: 13px;
}

.pdm-empty-state i[b-o9ngkjrhn6] {
    font-size: 28px;
    opacity: 0.5;
}

/* ── Spinner ── */
.pdm-spin[b-o9ngkjrhn6] {
    animation: pdm-spin-b-o9ngkjrhn6 1s linear infinite;
}

@keyframes pdm-spin-b-o9ngkjrhn6 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Footer ── */
.pdm-footer[b-o9ngkjrhn6] {
    padding: 12px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .pdm-modal[b-o9ngkjrhn6] {
        width: 100%;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    .pdm-detail-grid[b-o9ngkjrhn6] {
        grid-template-columns: 1fr;
    }

    .pdm-header-content[b-o9ngkjrhn6] {
        gap: 12px;
    }

    .pdm-avatar[b-o9ngkjrhn6] {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .pdm-name[b-o9ngkjrhn6] {
        font-size: 16px;
    }
}
/* /Shared/Conversation/AttachmentChips.razor.rz.scp.css */
.attachment-chips[b-n7afxydqhx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.attachment-chip[b-n7afxydqhx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    font-size: 12px;
    color: var(--text-primary);
    transition: border-color 0.15s;
    max-width: 280px;
    cursor: default;
}

.attachment-chip:hover[b-n7afxydqhx],
.attachment-chip:focus-visible[b-n7afxydqhx] {
    border-color: var(--border-color-hover);
    outline: none;
}

.attachment-chip:focus-visible[b-n7afxydqhx] {
    box-shadow: 0 0 0 2px var(--primary-bg-light);
}

.attachment-chip > i[b-n7afxydqhx] {
    color: var(--text-tertiary);
    font-size: 14px;
    flex-shrink: 0;
}

.chip-filename[b-n7afxydqhx] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-weight: 500;
}

.chip-filesize[b-n7afxydqhx] {
    color: var(--text-tertiary);
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
}

.chip-action[b-n7afxydqhx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: none;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    font-size: 14px;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}

.chip-action:hover[b-n7afxydqhx] {
    color: var(--text-primary);
    background: var(--bg-surface-hover);
}
/* /Shared/Conversation/ConversationComposer.razor.rz.scp.css */
.composer-panel[b-8or5q40p0s] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
}

.composer-note-mode[b-8or5q40p0s] {
    border-color: var(--internal-note-border);
    border-left: 3px solid var(--internal-note-border);
}

/* Header */
.composer-panel-header[b-8or5q40p0s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--bg-app);
    border-bottom: 1px solid var(--border-color);
}

.composer-note-mode .composer-panel-header[b-8or5q40p0s] {
    background: var(--internal-note-bg);
}

.composer-mode-label[b-8or5q40p0s] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.composer-note-mode .composer-mode-label[b-8or5q40p0s] {
    color: var(--internal-note-text);
}

.composer-close-btn[b-8or5q40p0s] {
    padding: 4px 8px;
    border: none;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    font-size: 14px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}

.composer-close-btn:hover[b-8or5q40p0s] {
    color: var(--text-primary);
    background: var(--bg-surface-hover);
}

/* Recipients */
.composer-recipients[b-8or5q40p0s] {
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.composer-field[b-8or5q40p0s] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.composer-field-label[b-8or5q40p0s] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    min-width: 28px;
    flex-shrink: 0;
}

.composer-field-input[b-8or5q40p0s] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 4px);
    background: var(--input-bg, var(--bg-surface));
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}

.composer-field-input:focus[b-8or5q40p0s] {
    border-color: var(--primary-color);
}

.composer-cc-toggle[b-8or5q40p0s] {
    align-self: flex-start;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 4px);
    background: none;
    color: var(--text-tertiary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.composer-cc-toggle:hover[b-8or5q40p0s] {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Editor */
.composer-editor[b-8or5q40p0s] {
    padding: 12px 16px;
}

.composer-note-mode .composer-editor[b-8or5q40p0s] {
    background: var(--internal-note-bg);
}

/* Quoted content */
.composer-quoted[b-8or5q40p0s] {
    padding: 0 16px 12px;
}

.composer-quoted-header[b-8or5q40p0s] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 6px 0;
    user-select: none;
}

.composer-quoted-header:hover[b-8or5q40p0s] {
    color: var(--text-secondary);
}

.composer-quoted-content[b-8or5q40p0s] {
    margin: 8px 0 0;
    padding: 12px 16px;
    border-left: 3px solid var(--border-color);
    background: var(--bg-app);
    border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-height: 200px;
    overflow-y: auto;
}

/* Attachments area */
.composer-attachments-area[b-8or5q40p0s] {
    padding: 8px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.composer-upload-label[b-8or5q40p0s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md, 8px);
    font-size: 12px;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}

.composer-upload-label:hover[b-8or5q40p0s] {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.composer-upload-hidden[b-8or5q40p0s] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

.composer-upload-status[b-8or5q40p0s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Footer */
.composer-panel-footer[b-8or5q40p0s] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-app);
}

.composer-note-mode .composer-panel-footer[b-8or5q40p0s] {
    background: var(--internal-note-bg);
}
/* /Shared/Conversation/ConversationDescription.razor.rz.scp.css */
/* ============================================================
   ConversationDescription — Card matching message card style
   ============================================================ */

.conv-description[b-zgv1j3wipr] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.conv-description-header[b-zgv1j3wipr] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-app);
    border-bottom: 1px solid var(--border-color);
}

.conv-description-header h3[b-zgv1j3wipr] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.conv-description-header i[b-zgv1j3wipr] {
    color: var(--text-tertiary);
}

.conv-description-content[b-zgv1j3wipr] {
    --tk-collapsible-bg: var(--bg-surface);
    padding: 16px 20px;
}

.conv-description-html[b-zgv1j3wipr] {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.conv-description-html img[b-zgv1j3wipr] {
    max-width: 100%;
    height: auto;
}

.conv-description-html a[b-zgv1j3wipr] {
    color: var(--primary-color);
    text-decoration: underline;
}

.conv-description-html table[b-zgv1j3wipr] {
    border-collapse: collapse;
    width: 100%;
}

.conv-description-html td[b-zgv1j3wipr],
.conv-description-html th[b-zgv1j3wipr] {
    border: 1px solid var(--border-color);
    padding: 8px;
}

.conv-description-text[b-zgv1j3wipr] {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
}

.conv-description-empty[b-zgv1j3wipr] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-tertiary);
    font-size: 13px;
    font-style: italic;
}

.conv-description-attachments[b-zgv1j3wipr] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}
/* /Shared/Conversation/ConversationLayout.razor.rz.scp.css */
.conv-layout[b-vs6re0jpl4] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.conv-layout-header[b-vs6re0jpl4] {
    flex-shrink: 0;
}

.conv-layout-tabbar[b-vs6re0jpl4] {
    flex-shrink: 0;
}

/* Two-column body */
.conv-layout-body[b-vs6re0jpl4] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 0;
    overflow: hidden;
    min-height: 0;
}

/* Left column — scrollable */
.conv-layout-main[b-vs6re0jpl4] {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.conv-layout-scroll[b-vs6re0jpl4] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    padding-right: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Right column — sticky sidebar */
.conv-layout-sidebar[b-vs6re0jpl4] {
    height: 100%;
    overflow-y: auto;
    padding: 24px;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-color);
}

/* Loading state */
.conv-layout-loading[b-vs6re0jpl4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 24px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Error state */
.conv-layout-error[b-vs6re0jpl4] {
    text-align: center;
    padding: 60px 24px;
    color: var(--color-danger);
}

.conv-layout-error i[b-vs6re0jpl4] {
    font-size: 32px;
    margin-bottom: 12px;
}

.conv-layout-error h3[b-vs6re0jpl4] {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
}

.conv-layout-error p[b-vs6re0jpl4] {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 16px;
}

/* Thread section spacing — removed flex:1 so QuickActionDock flows naturally below thread */
.conv-layout-thread-section[b-vs6re0jpl4] {
    /* flex: 1 removed — thread should only take natural content height */
}

/* Responsive: sidebar stacks below on narrow viewports */
@media (max-width: 900px) {
    .conv-layout-body[b-vs6re0jpl4] {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .conv-layout-main[b-vs6re0jpl4] {
        overflow: visible;
    }

    .conv-layout-scroll[b-vs6re0jpl4] {
        overflow: visible;
        padding: 16px;
    }

    .conv-layout-sidebar[b-vs6re0jpl4] {
        height: auto;
        overflow: visible;
        padding: 16px;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }
}
/* /Shared/Conversation/ConversationMessageCard.razor.rz.scp.css */
/* ============================================================
   ConversationMessageCard — Freshservice-style card design
   Each message is a visually distinct, bounded card.
   ============================================================ */

/* Base card container */
.conv-card[b-yc8digsih3] {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-surface);
    transition: border-color 0.15s;
}

.conv-card:hover[b-yc8digsih3] {
    border-color: var(--border-color-hover, var(--border-color));
}

/* Requester card — subtle tint */
.conv-card-requester[b-yc8digsih3] {
    --tk-collapsible-bg: var(--bg-surface);
}

/* Internal note card — amber left border + tinted background */
.conv-card-internal[b-yc8digsih3] {
    --tk-collapsible-bg: var(--internal-note-bg);
    border-left: 4px solid var(--internal-note-border);
    background: var(--internal-note-bg);
}

/* ---- Header band ---- */
.conv-card-header[b-yc8digsih3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-app);
    border-bottom: 1px solid var(--border-color);
}

.conv-card-internal .conv-card-header[b-yc8digsih3] {
    background: var(--internal-note-bg);
    border-bottom-color: var(--internal-note-border);
}

.conv-header-left[b-yc8digsih3] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.conv-header-info[b-yc8digsih3] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.conv-header-right[b-yc8digsih3] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.conv-author[b-yc8digsih3] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.conv-you[b-yc8digsih3] {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 400;
}

.conv-action-desc[b-yc8digsih3] {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 400;
    white-space: nowrap;
}

.conv-timestamp[b-yc8digsih3] {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* ---- Badges ---- */
.conv-badge[b-yc8digsih3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.conv-badge-requester[b-yc8digsih3] {
    background: var(--pill-blue, var(--primary-bg-light));
    color: var(--pill-blue-text, var(--primary-color));
}

.conv-badge-internal[b-yc8digsih3] {
    background: rgba(250, 204, 21, 0.15);
    color: var(--internal-note-text);
    border: 1px solid var(--internal-note-border);
}

.conv-badge-forward[b-yc8digsih3] {
    background: var(--pill-orange);
    color: var(--pill-orange-text);
}

/* ---- Hover actions (reply / forward) ---- */
.conv-hover-actions[b-yc8digsih3] {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}

.conv-card:hover .conv-hover-actions[b-yc8digsih3],
.conv-card:focus-within .conv-hover-actions[b-yc8digsih3] {
    opacity: 1;
}

.conv-action-btn[b-yc8digsih3] {
    padding: 4px 8px;
    border: none;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    font-size: 14px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}

.conv-action-btn:hover[b-yc8digsih3] {
    background: var(--bg-surface-hover);
    color: var(--primary-color);
}

.conv-action-btn:focus-visible[b-yc8digsih3] {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

/* ---- Email metadata (From / To / Cc) ---- */
.conv-metadata[b-yc8digsih3] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 8px 16px;
    background: var(--bg-app);
    border-bottom: 1px solid var(--border-color);
}

.conv-card-internal .conv-metadata[b-yc8digsih3] {
    background: var(--internal-note-bg);
    border-bottom-color: var(--internal-note-border);
}

.conv-meta-item[b-yc8digsih3] {
    font-size: 12px;
    color: var(--text-secondary);
}

.conv-meta-label[b-yc8digsih3] {
    font-weight: 600;
    color: var(--text-tertiary);
}

/* ---- Body content area ---- */
.conv-card-body[b-yc8digsih3] {
    padding: 16px 20px 12px;
}

.conv-body-html[b-yc8digsih3],
.conv-body-text[b-yc8digsih3] {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.conv-body-html img[b-yc8digsih3] {
    max-width: 100%;
    height: auto;
}

.conv-body-html a[b-yc8digsih3] {
    color: var(--primary-color);
    text-decoration: underline;
}

.conv-body-html table[b-yc8digsih3] {
    border-collapse: collapse;
    width: 100%;
}

.conv-body-html td[b-yc8digsih3],
.conv-body-html th[b-yc8digsih3] {
    border: 1px solid var(--border-color);
    padding: 8px;
}

/* ---- Attachments ---- */
.conv-attachments[b-yc8digsih3] {
    padding: 0 20px 16px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    margin-left: 20px;
    margin-right: 20px;
    padding-left: 0;
    padding-right: 0;
}

/* ============================================================
   System message — minimal timeline separator
   ============================================================ */
.conv-system-separator[b-yc8digsih3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.conv-system-line[b-yc8digsih3] {
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.conv-system-content[b-yc8digsih3] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.conv-system-content > i[b-yc8digsih3] {
    color: var(--text-tertiary);
    font-size: 12px;
}

.conv-system-body[b-yc8digsih3] {
    font-size: 12px;
    color: var(--text-tertiary);
    font-style: italic;
}

.conv-system-time[b-yc8digsih3] {
    font-size: 11px;
    color: var(--text-tertiary);
    opacity: 0.7;
}
/* /Shared/Conversation/ConversationThread.razor.rz.scp.css */
/* ============================================================
   ConversationThread — Card list with gaps between messages
   ============================================================ */

.conv-thread-container[b-63fieui5vx] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.conv-thread-header[b-63fieui5vx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 4px;
    margin-bottom: 4px;
}

.conv-thread-title[b-63fieui5vx] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.conv-thread-count[b-63fieui5vx] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--primary-bg-light);
    color: var(--primary-color);
    border-radius: 10px;
}

.conv-thread-list[b-63fieui5vx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.conv-thread-empty[b-63fieui5vx] {
    text-align: center;
    padding: 60px 40px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.conv-thread-empty-icon[b-63fieui5vx] {
    width: 64px;
    height: 64px;
    background: var(--bg-surface-hover);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.conv-thread-empty-icon i[b-63fieui5vx] {
    font-size: 24px;
    color: var(--text-tertiary);
}

.conv-thread-empty-title[b-63fieui5vx] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.conv-thread-empty-desc[b-63fieui5vx] {
    font-size: 13px;
    color: var(--text-secondary);
}
/* /Shared/Conversation/QuickActionDock.razor.rz.scp.css */
/* ============================================================
   QuickActionDock — Anchored action bar below conversation
   ============================================================ */

.quick-action-dock[b-vhuhk5bk0c] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-top: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.dock-actions[b-vhuhk5bk0c] {
    display: flex;
    gap: 8px;
    flex: 1;
}

.dock-btn[b-vhuhk5bk0c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
}

.dock-btn:disabled[b-vhuhk5bk0c] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dock-btn-primary[b-vhuhk5bk0c] {
    background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
    color: var(--primary-text-on-dark);
    border-color: var(--primary-gradient-start);
}

.dock-btn-primary:hover:not(:disabled)[b-vhuhk5bk0c] {
    filter: brightness(1.15);
}

.dock-btn-primary:focus-visible[b-vhuhk5bk0c] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.dock-btn-secondary[b-vhuhk5bk0c] {
    background: var(--bg-surface);
    color: var(--text-secondary);
}

.dock-btn-secondary:hover:not(:disabled)[b-vhuhk5bk0c] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    border-color: var(--border-color-hover);
}

.dock-btn-secondary:focus-visible[b-vhuhk5bk0c] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.dock-btn i[b-vhuhk5bk0c] {
    font-size: 14px;
}
/* /Shared/Dashboard/AddWidgetModal.razor.rz.scp.css */
/* ============================================================
   ADD WIDGET MODAL - PREMIUM UNIFIED DESIGN
   ============================================================ */

/* Modal Backdrop */
.awm-backdrop[b-3yl5ccfbex] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    animation: awm-fade-in-b-3yl5ccfbex 0.2s ease-out;
}

@keyframes awm-fade-in-b-3yl5ccfbex {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal Container - Responsive sizing */
.awm-modal[b-3yl5ccfbex] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 1200px);
    height: min(88vh, 800px);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: awm-slide-in-b-3yl5ccfbex 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes awm-slide-in-b-3yl5ccfbex {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Modal Header */
.awm-header[b-3yl5ccfbex] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.awm-header h2[b-3yl5ccfbex] {
    margin: 0;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 600;
    color: var(--text-primary);
}

.awm-close-btn[b-3yl5ccfbex] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.awm-close-btn:hover[b-3yl5ccfbex] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

/* Search Bar */
.awm-search[b-3yl5ccfbex] {
    position: relative;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.awm-search > i[b-3yl5ccfbex] {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 1rem;
    pointer-events: none;
}

.awm-search input[b-3yl5ccfbex] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    background: var(--input-bg, var(--bg-primary));
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    color: var(--text-primary);
    transition: all 0.15s ease;
}

.awm-search input[b-3yl5ccfbex]::placeholder {
    color: var(--text-tertiary);
}

.awm-search input:focus[b-3yl5ccfbex] {
    outline: none;
    border-color: var(--portal-accent, var(--primary-color));
    box-shadow: 0 0 0 3px rgba(var(--portal-accent-rgb, 59, 130, 246), 0.1);
}

.awm-search-clear[b-3yl5ccfbex] {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--bg-surface-hover);
    border: none;
    border-radius: 50%;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.awm-search-clear:hover[b-3yl5ccfbex] {
    background: var(--border-color);
    color: var(--text-primary);
}

/* Content Layout */
.awm-content[b-3yl5ccfbex] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Category Sidebar */
.awm-sidebar[b-3yl5ccfbex] {
    width: clamp(180px, 18vw, 220px);
    border-right: 1px solid var(--border-color);
    padding: 1rem;
    overflow-y: auto;
    flex-shrink: 0;
}

.awm-category-btn[b-3yl5ccfbex] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 0.25rem;
}

.awm-category-btn:hover[b-3yl5ccfbex] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.awm-category-btn.active[b-3yl5ccfbex] {
    background: var(--portal-accent, var(--primary-color));
    color: white;
}

.awm-category-btn i[b-3yl5ccfbex] {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.awm-category-btn span:first-of-type[b-3yl5ccfbex] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.awm-category-count[b-3yl5ccfbex] {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 1rem;
    flex-shrink: 0;
}

.awm-category-btn:not(.active) .awm-category-count[b-3yl5ccfbex] {
    background: var(--bg-surface-hover);
    color: var(--text-tertiary);
}

/* Main Grid Area */
.awm-main[b-3yl5ccfbex] {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    min-width: 0;
}

.awm-grid[b-3yl5ccfbex] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 0.75rem;
}

/* Widget Card */
.awm-widget-card[b-3yl5ccfbex] {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.awm-widget-card:hover[b-3yl5ccfbex] {
    border-color: var(--portal-accent, var(--primary-color));
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.15);
}

.awm-widget-card.selected[b-3yl5ccfbex] {
    border-color: var(--portal-accent, var(--primary-color));
    background: rgba(var(--portal-accent-rgb, 59, 130, 246), 0.08);
    box-shadow: 0 0 0 3px rgba(var(--portal-accent-rgb, 59, 130, 246), 0.15);
}

.awm-widget-icon[b-3yl5ccfbex] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--portal-accent, var(--primary-color));
    border-radius: 0.625rem;
    margin-bottom: 0.875rem;
    transition: transform 0.2s ease;
}

.awm-widget-card:hover .awm-widget-icon[b-3yl5ccfbex] {
    transform: scale(1.05);
}

.awm-widget-icon i[b-3yl5ccfbex] {
    font-size: 1.25rem;
    color: white;
}

.awm-widget-info[b-3yl5ccfbex] {
    flex: 1;
    min-height: 0;
    margin-bottom: 0.625rem;
}

.awm-widget-name[b-3yl5ccfbex] {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.awm-widget-desc[b-3yl5ccfbex] {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.awm-widget-meta[b-3yl5ccfbex] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.625rem;
    border-top: 1px solid var(--border-color);
}

.awm-widget-type[b-3yl5ccfbex] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.awm-widget-size[b-3yl5ccfbex] {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    padding: 0.125rem 0.5rem;
    background: var(--bg-surface-hover);
    border-radius: 0.25rem;
}

/* Empty State */
.awm-empty[b-3yl5ccfbex] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    gap: 1rem;
    color: var(--text-tertiary);
}

.awm-empty i[b-3yl5ccfbex] {
    font-size: 3rem;
    opacity: 0.5;
}

.awm-empty p[b-3yl5ccfbex] {
    margin: 0;
    font-size: 0.9375rem;
}

/* Preview Panel */
.awm-preview[b-3yl5ccfbex] {
    width: clamp(260px, 24vw, 320px);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    max-height: 100%;
    overflow: hidden;
}

.awm-preview-header[b-3yl5ccfbex] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.awm-preview-header h3[b-3yl5ccfbex] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.awm-preview-content[b-3yl5ccfbex] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.awm-preview-widget[b-3yl5ccfbex] {
    padding: 1.5rem 1.25rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.awm-preview-icon[b-3yl5ccfbex] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--portal-accent, var(--primary-color));
    border-radius: 0.875rem;
    margin-bottom: 1rem;
}

.awm-preview-icon i[b-3yl5ccfbex] {
    font-size: 1.5rem;
    color: white;
}

.awm-preview-widget h4[b-3yl5ccfbex] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.awm-preview-widget p[b-3yl5ccfbex] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.awm-preview-details[b-3yl5ccfbex] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.awm-detail-row[b-3yl5ccfbex] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.awm-detail-row:last-child[b-3yl5ccfbex] {
    border-bottom: none;
}

.awm-detail-label[b-3yl5ccfbex] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

.awm-detail-value[b-3yl5ccfbex] {
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* Size Selection - Grid Layout (Matching HR/Recruiting) */
.awm-size-section[b-3yl5ccfbex] {
    padding: 1rem 1.25rem;
}

.awm-size-label[b-3yl5ccfbex] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.awm-size-options[b-3yl5ccfbex] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.awm-size-btn[b-3yl5ccfbex] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.awm-size-btn:hover[b-3yl5ccfbex] {
    border-color: var(--portal-accent, var(--primary-color));
}

.awm-size-btn.active[b-3yl5ccfbex] {
    border-color: var(--portal-accent, var(--primary-color));
    background: var(--portal-accent, var(--primary-color));
    color: white;
}

.awm-size-name[b-3yl5ccfbex] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
}

.awm-size-btn.active .awm-size-name[b-3yl5ccfbex] {
    color: white;
}

.awm-size-dims[b-3yl5ccfbex] {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    margin-top: 0.125rem;
}

.awm-size-btn.active .awm-size-dims[b-3yl5ccfbex] {
    color: rgba(255, 255, 255, 0.8);
}

/* Add Button */
.awm-add-btn[b-3yl5ccfbex] {
    margin: 1rem 1.25rem;
    flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Large laptops and desktops */
@media (max-width: 1400px) {
    .awm-modal[b-3yl5ccfbex] {
        width: min(94vw, 1100px);
        height: min(90vh, 750px);
    }
}

/* Small laptops */
@media (max-width: 1200px) {
    .awm-modal[b-3yl5ccfbex] {
        width: 95vw;
        max-width: 1000px;
        height: 88vh;
    }

    .awm-sidebar[b-3yl5ccfbex] {
        width: 180px;
    }

    .awm-preview[b-3yl5ccfbex] {
        width: 260px;
    }

    .awm-grid[b-3yl5ccfbex] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* Tablets */
@media (max-width: 900px) {
    .awm-modal[b-3yl5ccfbex] {
        width: 96vw;
        height: 90vh;
        border-radius: 0.75rem;
    }

    .awm-sidebar[b-3yl5ccfbex] {
        width: 160px;
        padding: 0.75rem;
    }

    .awm-preview[b-3yl5ccfbex] {
        width: 240px;
    }

    .awm-header[b-3yl5ccfbex] {
        padding: 1rem 1.25rem;
    }

    .awm-search[b-3yl5ccfbex] {
        padding: 0.875rem 1.25rem;
    }

    .awm-grid[b-3yl5ccfbex] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.625rem;
    }

    .awm-widget-card[b-3yl5ccfbex] {
        padding: 0.875rem;
    }

    .awm-widget-icon[b-3yl5ccfbex] {
        width: 36px;
        height: 36px;
    }

    .awm-widget-icon i[b-3yl5ccfbex] {
        font-size: 1.125rem;
    }
}

/* Mobile / Small tablets */
@media (max-width: 700px) {
    .awm-modal[b-3yl5ccfbex] {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .awm-content[b-3yl5ccfbex] {
        flex-direction: column;
    }

    .awm-sidebar[b-3yl5ccfbex] {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .awm-category-btn[b-3yl5ccfbex] {
        white-space: nowrap;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .awm-preview[b-3yl5ccfbex] {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border-color);
        max-height: 40vh;
    }

    .awm-preview-widget[b-3yl5ccfbex] {
        display: flex;
        align-items: center;
        gap: 1rem;
        text-align: left;
        padding: 1rem;
    }

    .awm-preview-icon[b-3yl5ccfbex] {
        width: 48px;
        height: 48px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .awm-preview-icon i[b-3yl5ccfbex] {
        font-size: 1.25rem;
    }

    .awm-size-options[b-3yl5ccfbex] {
        grid-template-columns: repeat(3, 1fr);
    }

    .awm-size-btn[b-3yl5ccfbex] {
        padding: 0.5rem;
    }
}

/* Ensure text is readable on small screens */
@media (max-width: 400px) {
    .awm-widget-name[b-3yl5ccfbex] {
        font-size: 0.875rem;
    }

    .awm-widget-desc[b-3yl5ccfbex] {
        font-size: 0.75rem;
    }

    .awm-size-options[b-3yl5ccfbex] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Shared/Dashboard/CreateDashboardModal.razor.rz.scp.css */
.create-dashboard-form[b-ct3jh429ve] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-field[b-ct3jh429ve] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-field label[b-ct3jh429ve] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.tk-input[b-ct3jh429ve],
.tk-textarea[b-ct3jh429ve] {
    padding: 0.625rem 0.875rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.tk-input:focus[b-ct3jh429ve],
.tk-textarea:focus[b-ct3jh429ve] {
    outline: none;
    border-color: var(--primary);
}

.tk-textarea[b-ct3jh429ve] {
    resize: vertical;
    min-height: 60px;
}

.settings-checkbox[b-ct3jh429ve] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.settings-checkbox input[type="checkbox"][b-ct3jh429ve] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}
/* /Shared/Dashboard/DashboardSettingsModal.razor.rz.scp.css */
.settings-modal-body[b-6efoaqcyly] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.settings-section[b-6efoaqcyly] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.settings-section-title[b-6efoaqcyly] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.settings-label[b-6efoaqcyly] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.settings-hint[b-6efoaqcyly] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin: 0;
}

/* Inputs */
.tk-input[b-6efoaqcyly],
.tk-textarea[b-6efoaqcyly] {
    padding: 0.625rem 0.875rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.tk-input:focus[b-6efoaqcyly],
.tk-textarea:focus[b-6efoaqcyly] {
    outline: none;
    border-color: var(--primary);
}

.tk-textarea[b-6efoaqcyly] {
    resize: vertical;
    min-height: 80px;
}

/* Checkbox */
.settings-checkbox[b-6efoaqcyly] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.settings-checkbox input[type="checkbox"][b-6efoaqcyly] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* Action Buttons */
.settings-action-buttons[b-6efoaqcyly] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Info List */
.settings-info-list[b-6efoaqcyly] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
}

.settings-info-item[b-6efoaqcyly] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.settings-info-item:last-child[b-6efoaqcyly] {
    border-bottom: none;
}

.settings-info-item dt[b-6efoaqcyly] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.settings-info-item dd[b-6efoaqcyly] {
    font-size: 0.8125rem;
    color: var(--text-primary);
    margin: 0;
}

/* Danger Outline Button */
.tk-btn-danger-outline[b-6efoaqcyly] {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
}

.tk-btn-danger-outline:hover[b-6efoaqcyly] {
    background: rgba(239, 68, 68, 0.1);
}

/* Text utilities */
.text-danger[b-6efoaqcyly] {
    color: var(--danger);
}

.text-muted[b-6efoaqcyly] {
    color: var(--text-tertiary);
    font-size: 0.875rem;
}

/* Delete confirmation backdrop (higher z-index) */
.delete-confirm-backdrop[b-6efoaqcyly] {
    z-index: 1100;
}
/* /Shared/Dashboard/DraggableGrid.razor.rz.scp.css */
/* ============================================================
   4x4 DASHBOARD GRID WITH DRAG AND DROP
   - 4 columns, 4 rows
   - Widgets can be 1x1, 1x2, 2x1, or 2x2
   ============================================================ */

.db-grid-container[b-0dtxl7zmdb] {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: 1rem;
    overflow: auto;
}

/* ============================================================
   4x4 GRID LAYOUT
   ============================================================ */

.db-grid[b-0dtxl7zmdb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 1rem;
    height: 100%;
    min-height: 500px;
    position: relative;
}

/* ============================================================
   GRID CELLS (visible in edit mode)
   ============================================================ */

.db-grid-cell[b-0dtxl7zmdb] {
    background: rgba(255, 255, 255, 0.02);
    border: 2px dashed var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

.db-grid-cell.drop-target[b-0dtxl7zmdb] {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--portal-accent, #3b82f6);
    border-style: solid;
}

/* ============================================================
   WIDGETS
   ============================================================ */

.db-widget[b-0dtxl7zmdb] {
    position: relative;
    border-radius: 0.75rem;
    overflow: visible;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    z-index: 2;
    height: 100%;
}

.db-widget-content[b-0dtxl7zmdb] {
    height: 100%;
    width: 100%;
}

/* Edit mode styling */
.db-widget.edit-mode[b-0dtxl7zmdb] {
    cursor: grab;
}

.db-widget.edit-mode:hover[b-0dtxl7zmdb] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.db-widget.edit-mode:active[b-0dtxl7zmdb] {
    cursor: grabbing;
}

/* Dragging state */
.db-widget.dragging[b-0dtxl7zmdb] {
    opacity: 0.5;
    transform: scale(0.95);
    z-index: 100;
}

/* ============================================================
   DRAG HANDLE
   ============================================================ */

.db-drag-handle[b-0dtxl7zmdb] {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 24px;
    height: 24px;
    background: var(--bg-surface, #1e293b);
    border: 1px solid var(--border-color, #334155);
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary, #64748b);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.db-widget.edit-mode:hover .db-drag-handle[b-0dtxl7zmdb],
.db-widget.dragging .db-drag-handle[b-0dtxl7zmdb] {
    opacity: 1;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.db-empty[b-0dtxl7zmdb] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary, #64748b);
    gap: 1rem;
}

.db-empty i[b-0dtxl7zmdb] {
    font-size: 3rem;
    opacity: 0.5;
}

.db-empty p[b-0dtxl7zmdb] {
    font-size: 0.875rem;
    text-align: center;
    max-width: 300px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
    .db-grid[b-0dtxl7zmdb] {
        min-height: 400px;
        gap: 0.75rem;
    }

    .db-grid-container[b-0dtxl7zmdb] {
        padding: 0.75rem;
    }
}

@media (max-width: 600px) {
    .db-grid[b-0dtxl7zmdb] {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        min-height: 500px;
    }
}
/* /Shared/Dashboard/ShareDashboardModal.razor.rz.scp.css */
.share-modal-body[b-1jr8ux3z30] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.share-section[b-1jr8ux3z30] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.share-section-title[b-1jr8ux3z30] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.share-count[b-1jr8ux3z30] {
    padding: 0.125rem 0.5rem;
    background: var(--surface-alt);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    border-radius: 1rem;
}

/* Add People Row */
.share-add-row[b-1jr8ux3z30] {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.share-user-search[b-1jr8ux3z30] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

.share-user-search i[b-1jr8ux3z30] {
    color: var(--text-tertiary);
}

.share-user-search input[b-1jr8ux3z30] {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: 0.625rem 0;
    outline: none;
}

.share-user-search input[b-1jr8ux3z30]::placeholder {
    color: var(--text-tertiary);
}

.share-permission-select[b-1jr8ux3z30] {
    width: auto;
    min-width: 120px;
}

/* Select Styling */
.tk-select[b-1jr8ux3z30] {
    padding: 0.625rem 0.875rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

.tk-select:focus[b-1jr8ux3z30] {
    outline: none;
    border-color: var(--primary);
}

/* Search Results */
.share-search-results[b-1jr8ux3z30] {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    margin-top: -0.5rem;
}

.share-search-item[b-1jr8ux3z30] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.share-search-item:hover[b-1jr8ux3z30],
.share-search-item.selected[b-1jr8ux3z30] {
    background: var(--surface-hover);
}

/* Share List */
.share-list[b-1jr8ux3z30] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.share-list-item[b-1jr8ux3z30] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

.share-list-item.owner[b-1jr8ux3z30] {
    background: var(--surface-alt);
}

/* User Avatar */
.share-user-avatar[b-1jr8ux3z30] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-bg);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 50%;
    flex-shrink: 0;
}

/* User Info */
.share-user-info[b-1jr8ux3z30] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.share-user-name[b-1jr8ux3z30] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-user-email[b-1jr8ux3z30],
.share-user-role[b-1jr8ux3z30] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Permission Badge */
.share-permission-badge[b-1jr8ux3z30] {
    padding: 0.25rem 0.625rem;
    background: var(--surface-alt);
    color: var(--text-secondary);
    font-size: 0.75rem;
    border-radius: 0.25rem;
}

.share-permission-badge.owner[b-1jr8ux3z30] {
    background: var(--primary-bg);
    color: var(--primary);
}

/* Small Select */
.tk-select-sm[b-1jr8ux3z30] {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    min-width: 100px;
}

/* Remove Button */
.share-remove-btn[b-1jr8ux3z30] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.15s;
}

.share-remove-btn:hover[b-1jr8ux3z30] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* Empty State */
.share-empty[b-1jr8ux3z30] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--text-tertiary);
    text-align: center;
}

.share-empty i[b-1jr8ux3z30] {
    font-size: 1.5rem;
    opacity: 0.5;
}
/* /Shared/Dashboard/WidgetConfigModal.razor.rz.scp.css */
/* Modal Backdrop */
.wcm-backdrop[b-x5ppx7jltq] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wcm-fade-in-b-x5ppx7jltq 0.15s ease-out;
}

@keyframes wcm-fade-in-b-x5ppx7jltq {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal Container */
.wcm-modal[b-x5ppx7jltq] {
    width: 90vw;
    max-width: 560px;
    max-height: 85vh;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: wcm-slide-in-b-x5ppx7jltq 0.2s ease-out;
}

@keyframes wcm-slide-in-b-x5ppx7jltq {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal Header */
.wcm-header[b-x5ppx7jltq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.wcm-header h2[b-x5ppx7jltq] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wcm-header h2 i[b-x5ppx7jltq] {
    color: var(--text-secondary);
}

.wcm-close-btn[b-x5ppx7jltq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.wcm-close-btn:hover[b-x5ppx7jltq] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

/* Modal Body */
.wcm-body[b-x5ppx7jltq] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Section */
.wcm-section[b-x5ppx7jltq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wcm-label[b-x5ppx7jltq] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Input */
.wcm-input[b-x5ppx7jltq] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: all 0.15s;
}

.wcm-input:focus[b-x5ppx7jltq] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-bg-light);
}

.wcm-input[b-x5ppx7jltq]::placeholder {
    color: var(--text-tertiary);
}

.wcm-input-sm[b-x5ppx7jltq] {
    width: 100px;
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
}

/* Info Display (read-only) */
.wcm-info[b-x5ppx7jltq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

.wcm-info-badge[b-x5ppx7jltq] {
    padding: 0.25rem 0.625rem;
    background: var(--primary-bg-light);
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.25rem;
}

.wcm-info-text[b-x5ppx7jltq] {
    font-size: 0.875rem;
    color: var(--text-primary);
}

/* Button Group */
.wcm-button-group[b-x5ppx7jltq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.wcm-option-btn[b-x5ppx7jltq] {
    padding: 0.5rem 0.875rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s;
}

.wcm-option-btn:hover[b-x5ppx7jltq] {
    border-color: var(--border-color-hover);
    color: var(--text-primary);
}

.wcm-option-btn.selected[b-x5ppx7jltq] {
    background: var(--primary-bg-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Color Schemes */
.wcm-color-schemes[b-x5ppx7jltq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
}

.wcm-color-scheme[b-x5ppx7jltq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem;
    background: var(--bg-surface);
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
}

.wcm-color-scheme:hover[b-x5ppx7jltq] {
    border-color: var(--border-color-hover);
}

.wcm-color-scheme.selected[b-x5ppx7jltq] {
    border-color: var(--primary-color);
    background: var(--primary-bg-light);
}

.wcm-color-preview[b-x5ppx7jltq] {
    display: flex;
    gap: 2px;
}

.wcm-color-preview span[b-x5ppx7jltq] {
    width: 14px;
    height: 14px;
    border-radius: 2px;
}

.wcm-color-name[b-x5ppx7jltq] {
    font-size: 0.625rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.wcm-color-scheme.selected .wcm-color-name[b-x5ppx7jltq] {
    color: var(--primary-color);
}

/* Size Options */
.wcm-size-options[b-x5ppx7jltq] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.wcm-size-option[b-x5ppx7jltq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.875rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
}

.wcm-size-option:hover[b-x5ppx7jltq] {
    border-color: var(--border-color-hover);
}

.wcm-size-option.selected[b-x5ppx7jltq] {
    border-color: var(--primary-color);
    background: var(--primary-bg-light);
}

.wcm-size-option .size-name[b-x5ppx7jltq] {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.wcm-size-option .size-dimensions[b-x5ppx7jltq] {
    padding: 0.25rem 0.5rem;
    background: var(--bg-surface-hover);
    color: var(--text-secondary);
    font-size: 0.75rem;
    border-radius: 0.25rem;
}

.wcm-size-option.selected .size-dimensions[b-x5ppx7jltq] {
    background: var(--primary-color);
    color: white;
}

/* Toggle Options */
.wcm-toggles[b-x5ppx7jltq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wcm-toggle[b-x5ppx7jltq] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0;
    cursor: pointer;
}

.wcm-toggle input[type="checkbox"][b-x5ppx7jltq] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.wcm-toggle span[b-x5ppx7jltq] {
    font-size: 0.875rem;
    color: var(--text-primary);
}

/* Field with label */
.wcm-field[b-x5ppx7jltq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wcm-field label[b-x5ppx7jltq] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    min-width: 80px;
}

/* Modal Footer */
.wcm-footer[b-x5ppx7jltq] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface-hover);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 600px) {
    .wcm-modal[b-x5ppx7jltq] {
        width: 95vw;
        max-height: 90vh;
    }

    .wcm-color-schemes[b-x5ppx7jltq] {
        grid-template-columns: repeat(3, 1fr);
    }

    .wcm-button-group[b-x5ppx7jltq] {
        gap: 0.25rem;
    }

    .wcm-option-btn[b-x5ppx7jltq] {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
    }
}
/* /Shared/Dashboard/WidgetRenderer.razor.rz.scp.css */
.widget-renderer[b-9kdrnwnvq7] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.widget-renderer.loading[b-9kdrnwnvq7] {
    opacity: 0.7;
}

/* Loading State */
.widget-loading[b-9kdrnwnvq7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.75rem;
    color: var(--text-tertiary);
}

.loading-spinner[b-9kdrnwnvq7] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-9kdrnwnvq7 1s linear infinite;
}

@keyframes spin-b-9kdrnwnvq7 {
    to {
        transform: rotate(360deg);
    }
}

.widget-loading span[b-9kdrnwnvq7] {
    font-size: 0.8125rem;
}

/* Error State */
.widget-error[b-9kdrnwnvq7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.5rem;
    color: var(--color-danger);
    text-align: center;
    padding: 1rem;
}

.widget-error i[b-9kdrnwnvq7] {
    font-size: 1.5rem;
}

.widget-error span[b-9kdrnwnvq7] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.retry-btn[b-9kdrnwnvq7] {
    margin-top: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.retry-btn:hover[b-9kdrnwnvq7] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Placeholder State */
.widget-placeholder[b-9kdrnwnvq7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.5rem;
    color: var(--text-tertiary);
}

.widget-placeholder i[b-9kdrnwnvq7] {
    font-size: 2rem;
    opacity: 0.5;
}

.widget-placeholder span[b-9kdrnwnvq7] {
    font-size: 0.8125rem;
}
/* /Shared/Dashboard/Widgets/StatCardWidget.razor.rz.scp.css */
.stat-card[b-9rtu2us758] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    gap: 0.75rem;
}

.stat-card-content[b-9rtu2us758] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.stat-card-value[b-9rtu2us758] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.stat-card-prefix[b-9rtu2us758],
.stat-card-suffix[b-9rtu2us758] {
    font-size: 1rem;
    color: var(--text-secondary);
}

.stat-card-number[b-9rtu2us758] {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
}

.stat-card-trend[b-9rtu2us758] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
}

.stat-card.trend-up .stat-card-trend[b-9rtu2us758] {
    color: var(--color-success);
}

.stat-card.trend-down .stat-card-trend[b-9rtu2us758] {
    color: var(--color-danger);
}

.stat-card.trend-neutral .stat-card-trend[b-9rtu2us758] {
    color: var(--text-tertiary);
}

.stat-card-trend i[b-9rtu2us758] {
    font-size: 1rem;
}

.stat-card-trend-label[b-9rtu2us758] {
    color: var(--text-tertiary);
    margin-left: 0.25rem;
}

/* Sparkline */
.stat-card-sparkline[b-9rtu2us758] {
    height: 40px;
    margin-top: auto;
}

.sparkline[b-9rtu2us758] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 100%;
}

.sparkline-bar[b-9rtu2us758] {
    flex: 1;
    background: var(--primary-color);
    border-radius: 2px;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.sparkline-bar:last-child[b-9rtu2us758] {
    opacity: 1;
}

.sparkline:hover .sparkline-bar[b-9rtu2us758] {
    opacity: 0.4;
}

.sparkline:hover .sparkline-bar:hover[b-9rtu2us758] {
    opacity: 1;
}
/* /Shared/Dashboard/Widgets/TableWidget.razor.rz.scp.css */
.table-widget[b-dly3kwav3x] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.table-widget-scroll[b-dly3kwav3x] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.db-table[b-dly3kwav3x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.db-table thead[b-dly3kwav3x] {
    position: sticky;
    top: 0;
    background: var(--bg-surface-hover);
    z-index: 1;
}

.db-table th[b-dly3kwav3x] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.db-table td[b-dly3kwav3x] {
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.db-table tbody tr:hover[b-dly3kwav3x] {
    background: var(--bg-surface-hover);
}

.db-table tbody tr:last-child td[b-dly3kwav3x] {
    border-bottom: none;
}

/* Column alignments */
.db-table .text-right[b-dly3kwav3x] {
    text-align: right;
}

.db-table .text-center[b-dly3kwav3x] {
    text-align: center;
}

/* Truncate long text */
.db-table .truncate[b-dly3kwav3x] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Numeric columns */
.db-table .numeric[b-dly3kwav3x] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.table-widget-more[b-dly3kwav3x] {
    padding: 0.5rem 0.75rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface-hover);
    flex-shrink: 0;
}

.table-empty[b-dly3kwav3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.5rem;
    color: var(--text-tertiary);
}

.table-empty i[b-dly3kwav3x] {
    font-size: 1.5rem;
}

.table-empty span[b-dly3kwav3x] {
    font-size: 0.875rem;
}
/* /Shared/Dashboard/WidgetWrapper.razor.rz.scp.css */
/* Widget Wrapper - Grid Positioning */
.widget-wrapper[b-0cas9jq1zy] {
    min-height: 0;
    position: relative;
    height: 100%;
}

.widget-wrapper.edit-mode[b-0cas9jq1zy] {
    cursor: grab;
}

.widget-wrapper.edit-mode:active[b-0cas9jq1zy] {
    cursor: grabbing;
}

/* Widget Container */
.widget[b-0cas9jq1zy] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    overflow: visible;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    position: relative;
}

.widget:hover[b-0cas9jq1zy] {
    border-color: var(--border-color-hover);
}

.widget.selected[b-0cas9jq1zy] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-bg-light);
}

.edit-mode .widget[b-0cas9jq1zy] {
    border-style: dashed;
}

.edit-mode .widget:hover[b-0cas9jq1zy] {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

/* Widget Header */
.widget-header[b-0cas9jq1zy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface-hover);
    flex-shrink: 0;
}

.widget-title[b-0cas9jq1zy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    min-width: 0;
}

.widget-title i[b-0cas9jq1zy] {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.widget-title span[b-0cas9jq1zy] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widget-actions[b-0cas9jq1zy] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.widget-btn[b-0cas9jq1zy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.widget-btn:hover[b-0cas9jq1zy] {
    background: var(--bg-surface);
    color: var(--text-primary);
}

.widget-btn-danger:hover[b-0cas9jq1zy] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* Widget Menu (Dropdown) */
.widget-menu-backdrop[b-0cas9jq1zy] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.widget-menu[b-0cas9jq1zy] {
    position: absolute;
    top: 2.75rem;
    right: 0.5rem;
    min-width: 160px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    overflow: hidden;
}

.widget-menu-item[b-0cas9jq1zy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.widget-menu-item:hover[b-0cas9jq1zy] {
    background: var(--bg-surface-hover);
}

.widget-menu-item i[b-0cas9jq1zy] {
    width: 16px;
    color: var(--text-secondary);
}

.widget-menu-item-danger[b-0cas9jq1zy] {
    color: var(--color-danger);
}

.widget-menu-item-danger:hover[b-0cas9jq1zy] {
    background: var(--color-danger-bg);
}

.widget-menu-item-danger i[b-0cas9jq1zy] {
    color: var(--color-danger);
}

.widget-menu-divider[b-0cas9jq1zy] {
    height: 1px;
    background: var(--border-color);
    margin: 0.25rem 0;
}

/* Widget Body */
.widget-body[b-0cas9jq1zy] {
    flex: 1;
    padding: 1rem;
    overflow: auto;
    min-height: 0;
}

/* Widget Loading State */
.widget-loading[b-0cas9jq1zy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.75rem;
    color: var(--text-secondary);
}

.widget-loading-spinner[b-0cas9jq1zy] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: widget-spin-b-0cas9jq1zy 1s linear infinite;
}

@keyframes widget-spin-b-0cas9jq1zy {
    to {
        transform: rotate(360deg);
    }
}

.widget-loading span[b-0cas9jq1zy] {
    font-size: 0.75rem;
}

/* Widget Error State */
.widget-error[b-0cas9jq1zy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.75rem;
    color: var(--color-danger);
    text-align: center;
    padding: 1rem;
}

.widget-error i[b-0cas9jq1zy] {
    font-size: 2rem;
}

.widget-error span[b-0cas9jq1zy] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Widget Placeholder */
.widget-placeholder[b-0cas9jq1zy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.5rem;
    color: var(--text-tertiary);
}

.widget-placeholder i[b-0cas9jq1zy] {
    font-size: 2rem;
}

.widget-placeholder span[b-0cas9jq1zy] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================
   SIZE DROPDOWN
   ============================================================ */

.widget-size-dropdown[b-0cas9jq1zy] {
    position: relative;
}

.widget-size-dropdown-backdrop[b-0cas9jq1zy] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.widget-size-dropdown-menu[b-0cas9jq1zy] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: var(--bg-surface, #1e293b);
    border: 1px solid var(--border-color, #334155);
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    min-width: 140px;
    z-index: 100;
    overflow: hidden;
    animation: dropdown-appear-b-0cas9jq1zy 0.15s ease-out;
}

@keyframes dropdown-appear-b-0cas9jq1zy {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.widget-size-dropdown-header[b-0cas9jq1zy] {
    padding: 0.5rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary, #64748b);
    border-bottom: 1px solid var(--border-color, #334155);
}

.widget-size-option[b-0cas9jq1zy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-primary, #f1f5f9);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.widget-size-option:hover[b-0cas9jq1zy] {
    background: var(--bg-surface-hover, #334155);
}

.widget-size-option.active[b-0cas9jq1zy] {
    background: rgba(var(--portal-accent-rgb, 59, 130, 246), 0.15);
    color: var(--portal-accent, #3b82f6);
}

.widget-size-option .size-name[b-0cas9jq1zy] {
    font-weight: 500;
}

.widget-size-option .size-dims[b-0cas9jq1zy] {
    font-size: 0.75rem;
    color: var(--text-tertiary, #64748b);
    font-family: monospace;
}

.widget-size-option.active .size-dims[b-0cas9jq1zy] {
    color: var(--portal-accent, #3b82f6);
    opacity: 0.8;
}

/* Size Variants */
.widget-size-small .widget-body[b-0cas9jq1zy] {
    padding: 0.75rem;
}

.widget-size-small .widget-header[b-0cas9jq1zy] {
    padding: 0.5rem 0.75rem;
}

.widget-size-small .widget-title[b-0cas9jq1zy] {
    font-size: 0.8125rem;
}

.widget-size-large .widget-body[b-0cas9jq1zy] {
    padding: 1.25rem;
}
/* /Shared/DataGrid/Cells/TkCellCount.razor.rz.scp.css */
.tk-cell-count[b-iadqkccsbw] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary, #1f2937);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
/* /Shared/DataGrid/Cells/TkCellLinkedRecord.razor.rz.scp.css */
.tk-cell-linked-record[b-si9y5pzxkl] {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    flex-wrap: nowrap;
}

.tclr-chip[b-si9y5pzxkl] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 20px;
    background: var(--bg-surface-hover, rgba(59, 130, 246, 0.1));
    color: var(--text-link, #3b82f6);
    border: 1px solid var(--border-light, rgba(59, 130, 246, 0.2));
    cursor: pointer;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.tclr-chip:hover[b-si9y5pzxkl] {
    background: var(--bg-surface-active, rgba(59, 130, 246, 0.2));
}

.tclr-overflow[b-si9y5pzxkl] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 12px;
    font-size: 11px;
    line-height: 20px;
    background: var(--bg-tertiary, #e5e7eb);
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
}
/* /Shared/DataGrid/Cells/TkCellLookup.razor.rz.scp.css */
.tk-cell-lookup[b-7epqca041m] {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.tclk-values[b-7epqca041m] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary, #6b7280);
    font-size: 13px;
}
/* /Shared/DataGrid/Cells/TkCellRollup.razor.rz.scp.css */
.tk-cell-rollup[b-pc13gdg8y5] {
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary, #1f2937);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
/* /Shared/DataGrid/TkColumnHeader.razor.rz.scp.css */
/* =============================================================================
   TKCOLUMNHEADER.RAZOR.CSS
   =============================================================================
   Purpose:
     Scoped styles for individual column header component.

   Agent: 30 of 32 (CSS & Theming)
   Component: Grid Header System
   Last Updated: 2026-01-28

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================= */

/* ============================================================================
   COLUMN HEADER
   ============================================================================ */

.tk-column-header[b-fjaa37htsb] {
    display: flex;
    align-items: center;
    padding: 0;
    border-right: 1px solid var(--tk-grid-border-light);
    cursor: pointer;
    user-select: none;
    position: relative;
    background: var(--tk-grid-header-bg);
    transition: background-color var(--tk-grid-transition-fast);
    flex-shrink: 0;
    min-height: var(--tk-grid-header-height);
}

.tk-column-header:hover[b-fjaa37htsb] {
    background: var(--tk-grid-header-hover);
}

.tk-column-header.sorted[b-fjaa37htsb] {
    background: var(--tk-grid-accent-light);
}

.tk-column-header.sorted:hover[b-fjaa37htsb] {
    background: var(--tk-grid-header-hover);
}

/* ============================================================================
   FROZEN COLUMNS
   ============================================================================ */

.tk-column-header.frozen[b-fjaa37htsb] {
    position: sticky;
    left: 0;
    z-index: calc(var(--tk-grid-z-header) + 1);
    box-shadow: var(--tk-grid-shadow-frozen);
}

/* ============================================================================
   HEADER CONTENT
   ============================================================================ */

.tk-column-header-content[b-fjaa37htsb] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--tk-grid-cell-padding-x, 12px);
    flex: 1;
    min-width: 0;
    height: 100%;
}

.tk-column-icon[b-fjaa37htsb] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--tk-grid-text-muted);
    font-size: var(--tk-grid-font-size);
}

.tk-column-title[b-fjaa37htsb] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--tk-grid-font-size);
    font-weight: var(--tk-grid-header-font-weight);
    color: var(--tk-grid-header-text);
}

/* ============================================================================
   SORT INDICATOR
   ============================================================================ */

.tk-sort-indicator[b-fjaa37htsb] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--tk-grid-accent);
    font-size: var(--tk-grid-font-size-sm);
    gap: 2px;
}

.tk-sort-indicator .sort-order[b-fjaa37htsb] {
    font-size: 10px;
    font-weight: var(--tk-grid-header-font-weight);
    color: var(--tk-grid-text-muted);
}

/* ============================================================================
   COLUMN MENU BUTTON
   ============================================================================ */

.tk-column-menu-btn[b-fjaa37htsb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: var(--tk-grid-radius-sm);
    cursor: pointer;
    color: var(--tk-grid-text-muted);
    opacity: 0;
    transition: opacity var(--tk-grid-transition-fast),
                background-color var(--tk-grid-transition-fast);
    flex-shrink: 0;
    margin-right: 4px;
}

.tk-column-header:hover .tk-column-menu-btn[b-fjaa37htsb] {
    opacity: 1;
}

.tk-column-menu-btn:hover[b-fjaa37htsb] {
    background: var(--tk-grid-row-hover);
    color: var(--tk-grid-text-primary);
}

.tk-column-menu-btn:focus-visible[b-fjaa37htsb] {
    opacity: 1;
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: -2px;
}

.tk-column-menu-btn i[b-fjaa37htsb] {
    font-size: 10px;
}

/* ============================================================================
   FILTER INDICATOR
   ============================================================================ */

.tk-column-filter-indicator[b-fjaa37htsb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tk-grid-accent);
    color: var(--primary-text-on-dark);
    font-size: 9px;
    flex-shrink: 0;
}

/* ============================================================================
   REQUIRED INDICATOR
   ============================================================================ */

.tk-column-required[b-fjaa37htsb] {
    color: var(--tk-grid-danger);
    font-size: 10px;
    margin-left: 2px;
}

/* ============================================================================
   COLUMN TYPE ICON
   ============================================================================ */

.tk-column-type-icon[b-fjaa37htsb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--tk-grid-radius-sm);
    background: var(--tk-grid-accent-light);
    color: var(--tk-grid-accent);
    font-size: 10px;
    flex-shrink: 0;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .tk-column-header-content[b-fjaa37htsb] {
        padding: 0 8px;
    }

    .tk-column-menu-btn[b-fjaa37htsb] {
        opacity: 1;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-column-header[b-fjaa37htsb] {
        border-right-width: 2px;
    }

    .tk-column-header:focus-within[b-fjaa37htsb] {
        outline: 3px solid var(--tk-grid-accent);
        outline-offset: -3px;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-column-header[b-fjaa37htsb],
    .tk-column-menu-btn[b-fjaa37htsb] {
        transition: none !important;
    }
}
/* /Shared/DataGrid/TkColumnMenu.razor.rz.scp.css */
/* ============================================================================
   TKCOLUMNMENU.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the column context menu component.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   BACKDROP
   ============================================================================ */

.tk-menu-backdrop[b-lwdh7app8d] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--tk-grid-z-dropdown) - 1);
    background: transparent;
}

/* ============================================================================
   MENU CONTAINER
   ============================================================================ */

.tk-column-menu[b-lwdh7app8d] {
    position: fixed;
    z-index: var(--tk-grid-z-dropdown);
    min-width: 200px;
    max-width: 280px;
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: var(--tk-grid-radius);
    box-shadow: var(--tk-grid-shadow-lg);
    padding: 4px 0;
    animation: tk-menu-fade-in-b-lwdh7app8d 0.15s ease;
}

@keyframes tk-menu-fade-in-b-lwdh7app8d {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   MENU HEADER
   ============================================================================ */

.tk-menu-header[b-lwdh7app8d] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: var(--tk-grid-font-size-sm);
    font-weight: 600;
    color: var(--tk-grid-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.tk-menu-header i[b-lwdh7app8d] {
    font-size: var(--tk-grid-font-size);
}

/* ============================================================================
   MENU DIVIDER
   ============================================================================ */

.tk-menu-divider[b-lwdh7app8d] {
    height: 1px;
    background: var(--tk-grid-border-light);
    margin: 4px 0;
}

/* ============================================================================
   MENU ITEM
   ============================================================================ */

.tk-menu-item[b-lwdh7app8d] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    cursor: pointer;
    transition: background-color var(--tk-grid-transition-fast);
}

.tk-menu-item:hover[b-lwdh7app8d] {
    background: var(--tk-grid-row-hover);
}

.tk-menu-item:focus-visible[b-lwdh7app8d] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: -2px;
}

.tk-menu-item i[b-lwdh7app8d] {
    width: 16px;
    text-align: center;
    color: var(--tk-grid-text-muted);
    font-size: var(--tk-grid-font-size);
}

/* ============================================================================
   MENU ITEM VARIANTS
   ============================================================================ */

.tk-menu-item-danger[b-lwdh7app8d] {
    color: var(--tk-grid-danger);
}

.tk-menu-item-danger i[b-lwdh7app8d] {
    color: var(--tk-grid-danger);
}

.tk-menu-item-danger:hover[b-lwdh7app8d] {
    background: var(--tk-grid-danger-bg);
}

.tk-menu-item-active[b-lwdh7app8d] {
    background: var(--tk-grid-accent-light);
    color: var(--tk-grid-accent);
}

.tk-menu-item-active i[b-lwdh7app8d] {
    color: var(--tk-grid-accent);
}

.tk-menu-item-disabled[b-lwdh7app8d] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================================
   MENU ITEM WITH CHECKBOX
   ============================================================================ */

.tk-menu-checkbox[b-lwdh7app8d] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color var(--tk-grid-transition-fast);
}

.tk-menu-checkbox:hover[b-lwdh7app8d] {
    background: var(--tk-grid-row-hover);
}

.tk-menu-checkbox input[type="checkbox"][b-lwdh7app8d] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--tk-grid-accent);
    cursor: pointer;
}

.tk-menu-checkbox span[b-lwdh7app8d] {
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
}

/* ============================================================================
   SUBMENU INDICATOR
   ============================================================================ */

.tk-menu-item-submenu[b-lwdh7app8d]::after {
    content: '\203A';
    margin-left: auto;
    font-size: 16px;
    color: var(--tk-grid-text-muted);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .tk-column-menu[b-lwdh7app8d] {
        min-width: 180px;
    }

    .tk-menu-item[b-lwdh7app8d] {
        padding: 10px 12px;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-column-menu[b-lwdh7app8d] {
        border-width: 2px;
    }

    .tk-menu-item:focus-visible[b-lwdh7app8d] {
        outline-width: 3px;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-column-menu[b-lwdh7app8d] {
        animation: none;
    }

    .tk-menu-item[b-lwdh7app8d] {
        transition: none;
    }
}
/* /Shared/DataGrid/TkColumnResizer.razor.rz.scp.css */
/* ============================================================================
   TKCOLUMNRESIZER.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the column resize handle component.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   RESIZE HANDLE
   ============================================================================ */

.tk-column-resizer[b-a1dxsuu7r1] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    background: transparent;
    transition: background-color var(--tk-grid-transition-fast);
    z-index: 1;
}

.tk-column-resizer:hover[b-a1dxsuu7r1],
.tk-column-resizer.resizing[b-a1dxsuu7r1] {
    background: var(--tk-grid-accent);
}

/* ============================================================================
   RESIZE LINE
   ============================================================================ */

.tk-resize-line[b-a1dxsuu7r1] {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--tk-grid-accent);
    z-index: var(--tk-grid-z-dropdown);
    pointer-events: none;
    animation: tk-resize-line-pulse-b-a1dxsuu7r1 0.3s ease-in-out infinite alternate;
}

@keyframes tk-resize-line-pulse-b-a1dxsuu7r1 {
    from {
        opacity: 0.7;
    }
    to {
        opacity: 1;
    }
}

/* ============================================================================
   EXTENDED HIT AREA
   ============================================================================ */

.tk-column-resizer.resizing[b-a1dxsuu7r1]::before {
    content: '';
    position: absolute;
    left: -10px;
    right: -10px;
    top: 0;
    bottom: 0;
}

/* ============================================================================
   DOUBLE-CLICK INDICATOR
   ============================================================================ */

.tk-column-resizer[b-a1dxsuu7r1]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 16px;
    background: transparent;
    border-radius: 1px;
    opacity: 0;
    transition: opacity var(--tk-grid-transition-fast);
}

.tk-column-resizer:hover[b-a1dxsuu7r1]::after {
    background: var(--tk-grid-accent);
    opacity: 0.5;
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

.tk-column-resizer:focus-visible[b-a1dxsuu7r1] {
    background: var(--tk-grid-accent);
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: -2px;
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-column-resizer[b-a1dxsuu7r1] {
        transition: none;
    }

    .tk-resize-line[b-a1dxsuu7r1] {
        animation: none;
        opacity: 1;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-column-resizer:hover[b-a1dxsuu7r1],
    .tk-column-resizer.resizing[b-a1dxsuu7r1] {
        background: HighlightText;
    }

    .tk-resize-line[b-a1dxsuu7r1] {
        width: 3px;
        background: HighlightText;
    }
}
/* /Shared/DataGrid/TkDataGrid.razor.rz.scp.css */
/* ============================================================================
   TKDATAGRID.RAZOR.CSS
   ============================================================================
   Purpose: Core styles for the TkDataGrid component.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   MAIN CONTAINER
   ============================================================================ */

.tk-datagrid[b-ja4c03kixa] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    /* min-width: 0 overrides the flex default of min-width: auto, which prevents
       flex items from shrinking below their content size. Without this, wide rows
       (e.g. after column resize) push the grid wider instead of scrolling internally. */
    min-width: 0;
    max-width: 100%;
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: var(--tk-grid-border-radius);
    overflow: hidden;
    font-family: var(--tk-grid-font-family);
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    outline: none;
    position: relative;
    box-sizing: border-box;
}

.tk-datagrid:focus[b-ja4c03kixa] {
    border-color: var(--tk-grid-accent);
    box-shadow: var(--tk-grid-shadow-focus);
}

.tk-datagrid-focused[b-ja4c03kixa] {
    border-color: var(--tk-grid-accent);
}

/* ============================================================================
   HEADER GROUP WRAPPER
   ============================================================================ */

.tk-grid-header-group[b-ja4c03kixa] {
    /* overflow: hidden so (a) wide header rows don't push the grid wider, and
       (b) JS can programmatically set scrollLeft for horizontal scroll sync. */
    overflow: hidden;
    flex-shrink: 0;
    min-width: 0;
}

/* ============================================================================
   MAIN GRID AREA
   ============================================================================ */

.tk-datagrid-main[b-ja4c03kixa] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

/* ============================================================================
   BODY WRAPPER (Scrollable Area)
   ============================================================================ */

.tk-datagrid-body-wrapper[b-ja4c03kixa] {
    flex: 1;
    min-height: 0;
    min-width: 0;
    position: relative;
    /* overflow: hidden — the virtual scroller inside is the ONLY scroll container.
       Having overflow: auto here would create a competing scroll context that
       lets wide content push the grid layout instead of scrolling internally. */
    overflow: hidden;
}

/* Custom scrollbars using theme variables */
.tk-datagrid-body-wrapper[b-ja4c03kixa]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.tk-datagrid-body-wrapper[b-ja4c03kixa]::-webkit-scrollbar-track {
    background: var(--tk-grid-scrollbar-track);
}

.tk-datagrid-body-wrapper[b-ja4c03kixa]::-webkit-scrollbar-thumb {
    background: var(--tk-grid-scrollbar-thumb);
    border-radius: 4px;
}

.tk-datagrid-body-wrapper[b-ja4c03kixa]::-webkit-scrollbar-thumb:hover {
    background: var(--tk-grid-scrollbar-thumb-hover);
}

.tk-datagrid-body-wrapper[b-ja4c03kixa]::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox scrollbar */
.tk-datagrid-body-wrapper[b-ja4c03kixa] {
    scrollbar-width: thin;
    scrollbar-color: var(--tk-grid-scrollbar-thumb) var(--tk-grid-scrollbar-track);
}

/* ============================================================================
   LOADING STATE
   ============================================================================ */

.tk-datagrid-loading[b-ja4c03kixa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    gap: 16px;
    color: var(--tk-grid-text-secondary);
    padding: 40px;
}

.tk-datagrid-loading-spinner[b-ja4c03kixa] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--tk-grid-border);
    border-top-color: var(--tk-grid-accent);
    border-radius: 50%;
    animation: tk-grid-spin 0.8s linear infinite;
}

.tk-datagrid-loading-text[b-ja4c03kixa] {
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-secondary);
}

.tk-datagrid-loading-state[b-ja4c03kixa] {
    pointer-events: none;
    opacity: 0.6;
}

/* Skeleton loading shimmer effect */
.tk-datagrid-skeleton[b-ja4c03kixa] {
    background: linear-gradient(
        90deg,
        var(--tk-grid-bg-alt) 25%,
        var(--tk-grid-bg) 50%,
        var(--tk-grid-bg-alt) 75%
    );
    background-size: 200% 100%;
    animation: tk-grid-shimmer 1.5s infinite;
}

/* ============================================================================
   ERROR STATE
   ============================================================================ */

.tk-datagrid-error[b-ja4c03kixa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    gap: 16px;
    color: var(--tk-grid-danger);
    padding: 40px;
    text-align: center;
}

.tk-datagrid-error i[b-ja4c03kixa] {
    font-size: 40px;
    opacity: 0.8;
}

.tk-datagrid-error-message[b-ja4c03kixa] {
    font-size: var(--tk-grid-font-size);
    max-width: 400px;
    line-height: 1.5;
}

.tk-datagrid-retry-btn[b-ja4c03kixa] {
    margin-top: 8px;
    padding: 10px 20px;
    background: var(--tk-grid-accent);
    color: var(--primary-text-on-dark);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    transition: background var(--tk-grid-transition-normal);
}

.tk-datagrid-retry-btn:hover[b-ja4c03kixa] {
    background: var(--tk-grid-accent-hover);
}

.tk-datagrid-retry-btn:active[b-ja4c03kixa] {
    transform: scale(0.98);
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */

.tk-datagrid-empty[b-ja4c03kixa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    gap: 16px;
    color: var(--tk-grid-text-muted);
    padding: 60px 40px;
}

.tk-datagrid-empty i[b-ja4c03kixa] {
    font-size: 56px;
    opacity: 0.4;
}

.tk-datagrid-empty-title[b-ja4c03kixa] {
    font-size: 16px;
    font-weight: 500;
    color: var(--tk-grid-text-secondary);
    margin: 0;
}

.tk-datagrid-empty-subtitle[b-ja4c03kixa] {
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-muted);
    margin: 0;
}

.tk-datagrid-empty-action[b-ja4c03kixa] {
    margin-top: 8px;
    padding: 8px 16px;
    background: var(--tk-grid-accent);
    color: var(--primary-text-on-dark);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    transition: background var(--tk-grid-transition-normal);
}

.tk-datagrid-empty-action:hover[b-ja4c03kixa] {
    background: var(--tk-grid-accent-hover);
}

.tk-datagrid-empty-add-btn[b-ja4c03kixa] {
    margin-top: 8px;
    padding: 8px 16px;
    background: var(--tk-grid-accent);
    color: var(--primary-text-on-dark, #fff);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--tk-grid-transition-normal);
}

.tk-datagrid-empty-add-btn:hover[b-ja4c03kixa] {
    background: var(--tk-grid-accent-hover);
}

/* ============================================================================
   EDITING STATE
   ============================================================================ */

.tk-datagrid-editing .tk-datagrid-cell:not(.tk-datagrid-cell-editing)[b-ja4c03kixa] {
    pointer-events: none;
    opacity: 0.7;
}

/* ============================================================================
   SEARCHING STATE
   ============================================================================ */

.tk-datagrid-searching .tk-datagrid-cell-search-match[b-ja4c03kixa] {
    background-color: var(--tk-grid-search-match);
}

.tk-datagrid-cell-search-current[b-ja4c03kixa] {
    background-color: var(--tk-grid-search-current) !important;
    outline: 2px solid var(--tk-grid-warning);
    outline-offset: -2px;
}

/* ============================================================================
   SELECTION COLORS
   ============================================================================ */

.tk-datagrid-row-selected[b-ja4c03kixa] {
    background-color: var(--tk-grid-row-selected) !important;
}

.tk-datagrid-row:hover:not(.tk-datagrid-row-selected)[b-ja4c03kixa] {
    background-color: var(--tk-grid-row-hover);
}

/* ============================================================================
   CELL ACTIVE STATE
   ============================================================================ */

.tk-datagrid-cell-active[b-ja4c03kixa] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: -2px;
    z-index: var(--tk-grid-z-cell);
    position: relative;
    background: var(--tk-grid-cell-focus);
}

/* ============================================================================
   CELL EDITING STATE
   ============================================================================ */

.tk-datagrid-cell-editing[b-ja4c03kixa] {
    padding: 0;
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: -2px;
    z-index: calc(var(--tk-grid-z-cell) + 1);
    position: relative;
    background: var(--tk-grid-cell-editing-bg);
}

.tk-datagrid-cell-editing input[b-ja4c03kixa],
.tk-datagrid-cell-editing textarea[b-ja4c03kixa],
.tk-datagrid-cell-editing select[b-ja4c03kixa] {
    width: 100%;
    height: 100%;
    padding: 8px 12px;
    border: none;
    outline: none;
    background: var(--tk-grid-cell-editing-bg);
    color: var(--tk-grid-text-primary);
    font-size: inherit;
    font-family: inherit;
}

/* ============================================================================
   RANGE SELECTION
   ============================================================================ */

.tk-datagrid-cell-in-range[b-ja4c03kixa] {
    background-color: var(--tk-grid-accent-light);
}

.tk-datagrid-range-selection[b-ja4c03kixa] {
    position: absolute;
    border: 2px solid var(--tk-grid-accent);
    background: var(--tk-grid-accent-light);
    pointer-events: none;
    z-index: var(--tk-grid-z-cell);
}

/* ============================================================================
   FROZEN COLUMNS
   ============================================================================ */

.tk-datagrid-cell-frozen[b-ja4c03kixa] {
    position: sticky;
    left: 0;
    z-index: var(--tk-grid-z-frozen);
    background: var(--tk-grid-row-bg);
    box-shadow: var(--tk-grid-shadow-frozen);
}

.tk-datagrid-row:hover .tk-datagrid-cell-frozen[b-ja4c03kixa] {
    background: var(--tk-grid-row-hover);
}

.tk-datagrid-row-selected .tk-datagrid-cell-frozen[b-ja4c03kixa] {
    background: var(--tk-grid-row-selected);
}

.tk-datagrid-header-cell-frozen[b-ja4c03kixa] {
    position: sticky;
    left: 0;
    z-index: var(--tk-grid-z-header-frozen);
    background: var(--tk-grid-header-bg);
    box-shadow: var(--tk-grid-shadow-frozen);
}

/* ============================================================================
   RESIZE HANDLE
   ============================================================================ */

.tk-datagrid-resize-handle[b-ja4c03kixa] {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--tk-grid-resize-handle-width);
    height: 100%;
    cursor: col-resize;
    background: transparent;
    transition: background var(--tk-grid-transition-normal);
    z-index: var(--tk-grid-z-resizer);
}

.tk-datagrid-resize-handle:hover[b-ja4c03kixa],
.tk-datagrid-resize-handle-active[b-ja4c03kixa] {
    background: var(--tk-grid-accent);
}

/* ============================================================================
   SORT INDICATOR
   ============================================================================ */

.tk-datagrid-sort-indicator[b-ja4c03kixa] {
    margin-left: 6px;
    font-size: 10px;
    color: var(--tk-grid-accent);
}

.tk-datagrid-sort-indicator.asc[b-ja4c03kixa]::after {
    content: '\2191'; /* Up arrow */
}

.tk-datagrid-sort-indicator.desc[b-ja4c03kixa]::after {
    content: '\2193'; /* Down arrow */
}

/* ============================================================================
   FILTER INDICATOR
   ============================================================================ */

.tk-datagrid-filter-indicator[b-ja4c03kixa] {
    margin-left: 4px;
    font-size: 10px;
    color: var(--tk-grid-accent);
}

/* ============================================================================
   GROUP ROW
   ============================================================================ */

.tk-datagrid-group-row[b-ja4c03kixa] {
    background: var(--tk-grid-bg-alt);
    font-weight: 600;
    border-top: 1px solid var(--tk-grid-border);
    border-bottom: 1px solid var(--tk-grid-border);
}

.tk-datagrid-group-expander[b-ja4c03kixa] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--tk-grid-text-primary);
}

.tk-datagrid-group-expander i[b-ja4c03kixa] {
    transition: transform var(--tk-grid-transition-normal);
    color: var(--tk-grid-text-secondary);
}

.tk-datagrid-group-expander:hover i[b-ja4c03kixa] {
    color: var(--tk-grid-accent);
}

.tk-datagrid-group-collapsed .tk-datagrid-group-expander i[b-ja4c03kixa] {
    transform: rotate(-90deg);
}

.tk-datagrid-group-count[b-ja4c03kixa] {
    color: var(--tk-grid-text-secondary);
    font-weight: normal;
    font-size: var(--tk-grid-font-size-sm);
    margin-left: 8px;
}

/* ============================================================================
   CHECKBOX COLUMN
   ============================================================================ */

.tk-datagrid-checkbox-cell[b-ja4c03kixa] {
    width: var(--tk-grid-checkbox-width);
    min-width: var(--tk-grid-checkbox-width);
    max-width: var(--tk-grid-checkbox-width);
    text-align: center;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tk-datagrid-checkbox[b-ja4c03kixa] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--tk-grid-accent);
    border-radius: 3px;
}

.tk-datagrid-checkbox:disabled[b-ja4c03kixa] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================================
   ROW NUMBER COLUMN
   ============================================================================ */

.tk-datagrid-row-number-cell[b-ja4c03kixa] {
    width: var(--tk-grid-row-number-width);
    min-width: var(--tk-grid-row-number-width);
    max-width: var(--tk-grid-row-number-width);
    text-align: center;
    color: var(--tk-grid-text-muted);
    font-size: var(--tk-grid-font-size-sm);
    background: var(--tk-grid-bg-alt);
    border-right: 1px solid var(--tk-grid-border);
}

/* ============================================================================
   ROW ANIMATIONS
   ============================================================================ */

.tk-datagrid-row[b-ja4c03kixa] {
    animation: tk-grid-fadeIn var(--tk-grid-transition-normal);
}

.tk-datagrid-row-enter[b-ja4c03kixa] {
    animation: tk-grid-slideDown var(--tk-grid-transition-spring);
}

.tk-datagrid-row-exit[b-ja4c03kixa] {
    animation: tk-grid-fadeIn var(--tk-grid-transition-fast) reverse;
}

/* ============================================================================
   VIRTUAL SCROLL SPACER
   ============================================================================ */

.tk-virtual-spacer[b-ja4c03kixa] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

/* ============================================================================
   CONTEXT MENU
   ============================================================================ */

.tk-datagrid-context-menu[b-ja4c03kixa] {
    position: fixed;
    z-index: var(--tk-grid-z-dropdown);
    min-width: 180px;
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: 6px;
    box-shadow: var(--tk-grid-shadow-dropdown);
    padding: 4px 0;
    animation: tk-grid-scaleIn var(--tk-grid-transition-normal);
}

.tk-datagrid-context-menu-item[b-ja4c03kixa] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    cursor: pointer;
    transition: background var(--tk-grid-transition-fast);
}

.tk-datagrid-context-menu-item:hover[b-ja4c03kixa] {
    background: var(--tk-grid-row-hover);
}

.tk-datagrid-context-menu-item i[b-ja4c03kixa] {
    width: 16px;
    color: var(--tk-grid-text-secondary);
}

.tk-datagrid-context-menu-divider[b-ja4c03kixa] {
    height: 1px;
    background: var(--tk-grid-border);
    margin: 4px 0;
}

.tk-datagrid-context-menu-item-danger[b-ja4c03kixa] {
    color: var(--tk-grid-danger);
}

.tk-datagrid-context-menu-item-danger i[b-ja4c03kixa] {
    color: var(--tk-grid-danger);
}

.tk-datagrid-context-menu-item-danger:hover[b-ja4c03kixa] {
    background: var(--tk-grid-danger-bg);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .tk-datagrid[b-ja4c03kixa] {
        font-size: var(--tk-grid-font-size-sm);
        border-radius: 0;
    }

    .tk-datagrid-cell[b-ja4c03kixa] {
        padding: 6px 8px;
    }

    .tk-datagrid-checkbox-cell[b-ja4c03kixa] {
        width: 36px;
        min-width: 36px;
        max-width: 36px;
    }

    .tk-datagrid-row-number-cell[b-ja4c03kixa] {
        width: 40px;
        min-width: 40px;
        max-width: 40px;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .tk-datagrid[b-ja4c03kixa] {
        border: 1px solid #000;
        background: #fff !important;
        color: #000 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .tk-datagrid-main[b-ja4c03kixa] {
        overflow: visible !important;
        height: auto !important;
        flex: none;
    }

    .tk-datagrid-toolbar[b-ja4c03kixa],
    .tk-datagrid-footer[b-ja4c03kixa] {
        display: none;
    }

    .tk-datagrid-body-wrapper[b-ja4c03kixa] {
        overflow: visible !important;
        height: auto !important;
        flex: none;
    }

    .tk-datagrid-row[b-ja4c03kixa] {
        page-break-inside: avoid;
    }

    .tk-datagrid-group-row[b-ja4c03kixa] {
        page-break-before: auto;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-datagrid[b-ja4c03kixa] {
        border-width: 2px;
    }

    .tk-datagrid-row-selected[b-ja4c03kixa] {
        outline: 2px solid var(--tk-grid-accent);
        outline-offset: -2px;
    }

    .tk-datagrid-cell-active[b-ja4c03kixa] {
        outline-width: 3px;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-datagrid[b-ja4c03kixa],
    .tk-datagrid *[b-ja4c03kixa] {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Shared/DataGrid/TkDropdownPanel.razor.rz.scp.css */
/* ============================================================================
   TKDROPDOWNPANEL.RAZOR.CSS
   ============================================================================
   Purpose: Floating dropdown panel used by toolbar buttons (Filter/Sort/Group).
   Uses CSS-only positioning: parent must have position: relative.
   ============================================================================ */

.tk-dropdown-backdrop[b-89kvogu55c] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    /* Transparent — no visible overlay, just catches clicks outside */
}

.tk-dropdown-panel[b-89kvogu55c] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 999;
    background: var(--tk-grid-bg, #fff);
    border: 1px solid var(--tk-grid-border, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 4px 16px var(--tk-dropdown-shadow, rgba(0, 0, 0, 0.15));
    padding: 0;
    min-width: 320px;
    max-width: 520px;
    max-height: 420px;
    overflow-y: auto;
    animation: tk-dropdown-enter-b-89kvogu55c 0.15s ease-out;
    outline: none;
}

@keyframes tk-dropdown-enter-b-89kvogu55c {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-dropdown-panel[b-89kvogu55c] {
        animation: none !important;
    }
}
/* /Shared/DataGrid/TkExportModal.razor.rz.scp.css */
/* ============================================================================
   TKEXPORTMODAL.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the data grid export modal dialog.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   MODAL OVERLAY
   ============================================================================ */

.tk-modal-overlay[b-an7dxc33du] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tk-grid-overlay-bg);
    backdrop-filter: blur(2px);
    z-index: var(--tk-grid-z-modal);
    animation: tk-modal-fade-in-b-an7dxc33du 0.15s ease;
}

@keyframes tk-modal-fade-in-b-an7dxc33du {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================================================
   MODAL CONTAINER
   ============================================================================ */

.tk-export-modal[b-an7dxc33du] {
    background: var(--tk-grid-bg);
    border-radius: var(--tk-grid-radius-lg, 12px);
    box-shadow: var(--tk-grid-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: tk-modal-slide-in-b-an7dxc33du 0.2s ease;
}

@keyframes tk-modal-slide-in-b-an7dxc33du {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================================================
   MODAL HEADER
   ============================================================================ */

.tk-modal-header[b-an7dxc33du] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tk-grid-border-light);
    background: var(--tk-grid-row-bg-alt);
}

.tk-modal-header h3[b-an7dxc33du] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--tk-grid-text-primary);
}

.tk-modal-header h3 i[b-an7dxc33du] {
    font-size: 18px;
    color: var(--tk-grid-accent);
}

/* ============================================================================
   MODAL BODY
   ============================================================================ */

.tk-modal-body[b-an7dxc33du] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.tk-export-section[b-an7dxc33du] {
    margin-bottom: 20px;
}

.tk-export-section:last-child[b-an7dxc33du] {
    margin-bottom: 0;
}

.tk-export-label[b-an7dxc33du] {
    display: block;
    font-size: var(--tk-grid-font-size);
    font-weight: 600;
    color: var(--tk-grid-text-primary);
    margin-bottom: 10px;
}

.tk-export-label-row[b-an7dxc33du] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.tk-export-label-row .tk-export-label[b-an7dxc33du] {
    margin-bottom: 0;
}

/* ============================================================================
   FORMAT SELECTION CARDS
   ============================================================================ */

.tk-export-format-options[b-an7dxc33du] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.tk-radio-card[b-an7dxc33du] {
    position: relative;
    display: block;
    cursor: pointer;
}

.tk-radio-card input[type="radio"][b-an7dxc33du] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tk-radio-card-content[b-an7dxc33du] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    background: var(--tk-grid-bg);
    border: 2px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius);
    transition: all var(--tk-grid-transition-fast);
}

.tk-radio-card:hover .tk-radio-card-content[b-an7dxc33du] {
    border-color: var(--tk-grid-border);
    background: var(--tk-grid-row-bg-alt);
}

.tk-radio-card.selected .tk-radio-card-content[b-an7dxc33du] {
    border-color: var(--tk-grid-accent);
    background: var(--tk-grid-accent-light);
}

.tk-radio-card-content i[b-an7dxc33du] {
    font-size: 28px;
    color: var(--tk-grid-text-secondary);
    transition: color var(--tk-grid-transition-fast);
}

.tk-radio-card.selected .tk-radio-card-content i[b-an7dxc33du] {
    color: var(--tk-grid-accent);
}

.tk-radio-card-title[b-an7dxc33du] {
    font-size: 14px;
    font-weight: 600;
    color: var(--tk-grid-text-primary);
}

.tk-radio-card-desc[b-an7dxc33du] {
    font-size: 11px;
    color: var(--tk-grid-text-muted);
    text-align: center;
}

/* ============================================================================
   SELECT DROPDOWN
   ============================================================================ */

.tk-export-select[b-an7dxc33du] {
    width: 100%;
    padding: 10px 12px;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius);
    cursor: pointer;
    transition: border-color var(--tk-grid-transition-fast);
}

.tk-export-select:hover[b-an7dxc33du] {
    border-color: var(--tk-grid-border);
}

.tk-export-select:focus[b-an7dxc33du] {
    outline: none;
    border-color: var(--tk-grid-accent);
    box-shadow: 0 0 0 3px var(--tk-grid-accent-light);
}

/* ============================================================================
   COLUMN CHECKLIST
   ============================================================================ */

.tk-export-column-actions[b-an7dxc33du] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tk-btn-link[b-an7dxc33du] {
    padding: 0;
    font-size: var(--tk-grid-font-size-sm);
    font-weight: 500;
    color: var(--tk-grid-accent);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--tk-grid-transition-fast);
}

.tk-btn-link:hover[b-an7dxc33du] {
    color: var(--tk-grid-accent-hover, #2563eb);
    text-decoration: underline;
}

.tk-divider[b-an7dxc33du] {
    color: var(--tk-grid-border);
    font-size: var(--tk-grid-font-size-sm);
}

.tk-column-checklist[b-an7dxc33du] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
    padding: 12px;
    background: var(--tk-grid-row-bg-alt);
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius);
}

.tk-column-checklist[b-an7dxc33du]::-webkit-scrollbar {
    width: 6px;
}

.tk-column-checklist[b-an7dxc33du]::-webkit-scrollbar-track {
    background: transparent;
}

.tk-column-checklist[b-an7dxc33du]::-webkit-scrollbar-thumb {
    background: var(--tk-grid-scrollbar-thumb);
    border-radius: 3px;
}

/* ============================================================================
   CHECKBOX ITEMS
   ============================================================================ */

.tk-checkbox-item[b-an7dxc33du] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 0;
}

.tk-checkbox-item input[type="checkbox"][b-an7dxc33du] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--tk-grid-accent);
}

.tk-checkbox-label[b-an7dxc33du] {
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    line-height: 1.3;
}

.tk-column-type[b-an7dxc33du] {
    font-size: 11px;
    color: var(--tk-grid-text-muted);
    margin-left: 4px;
}

/* ============================================================================
   EXPORT OPTIONS
   ============================================================================ */

.tk-export-options[b-an7dxc33du] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--tk-grid-row-bg-alt);
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius);
}

/* ============================================================================
   MODAL FOOTER
   ============================================================================ */

.tk-modal-footer[b-an7dxc33du] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-top: 1px solid var(--tk-grid-border-light);
    background: var(--tk-grid-row-bg-alt);
}

.tk-export-summary[b-an7dxc33du] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-secondary);
}

.tk-export-summary i[b-an7dxc33du] {
    font-size: 14px;
}

.tk-modal-actions[b-an7dxc33du] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.tk-btn-primary[b-an7dxc33du] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    color: var(--primary-text-on-dark);
    background: var(--tk-grid-accent);
    border: none;
    border-radius: var(--tk-grid-radius);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-btn-primary:hover:not(:disabled)[b-an7dxc33du] {
    background: var(--tk-grid-accent-hover, #2563eb);
}

.tk-btn-primary:active:not(:disabled)[b-an7dxc33du] {
    transform: scale(0.98);
}

.tk-btn-primary:disabled[b-an7dxc33du] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tk-btn-primary:focus-visible[b-an7dxc33du] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

.tk-btn-secondary[b-an7dxc33du] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: var(--tk-grid-radius);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-btn-secondary:hover[b-an7dxc33du] {
    background: var(--tk-grid-row-bg-alt);
    border-color: var(--tk-grid-text-muted);
}

.tk-btn-secondary:focus-visible[b-an7dxc33du] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

.tk-btn-icon[b-an7dxc33du] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--tk-grid-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--tk-grid-radius);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-btn-icon:hover[b-an7dxc33du] {
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-row-hover);
}

.tk-btn-icon:focus-visible[b-an7dxc33du] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

.tk-btn-icon i[b-an7dxc33du] {
    font-size: 16px;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 640px) {
    .tk-export-modal[b-an7dxc33du] {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        margin: 0;
    }

    .tk-export-format-options[b-an7dxc33du] {
        grid-template-columns: 1fr;
    }

    .tk-radio-card-content[b-an7dxc33du] {
        flex-direction: row;
        gap: 12px;
        padding: 12px 16px;
    }

    .tk-radio-card-content i[b-an7dxc33du] {
        font-size: 24px;
    }

    .tk-radio-card-desc[b-an7dxc33du] {
        display: none;
    }

    .tk-column-checklist[b-an7dxc33du] {
        grid-template-columns: 1fr;
    }

    .tk-modal-footer[b-an7dxc33du] {
        flex-direction: column;
        gap: 12px;
    }

    .tk-export-summary[b-an7dxc33du] {
        order: 2;
    }

    .tk-modal-actions[b-an7dxc33du] {
        order: 1;
        width: 100%;
    }

    .tk-modal-actions button[b-an7dxc33du] {
        flex: 1;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-modal-overlay[b-an7dxc33du] {
        animation: none;
    }

    .tk-export-modal[b-an7dxc33du] {
        animation: none;
    }

    .tk-radio-card-content[b-an7dxc33du],
    .tk-export-select[b-an7dxc33du],
    .tk-btn-primary[b-an7dxc33du],
    .tk-btn-secondary[b-an7dxc33du],
    .tk-btn-icon[b-an7dxc33du],
    .tk-btn-link[b-an7dxc33du] {
        transition: none;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-export-modal[b-an7dxc33du] {
        border: 2px solid var(--tk-grid-border);
    }

    .tk-radio-card.selected .tk-radio-card-content[b-an7dxc33du] {
        border-width: 3px;
    }

    .tk-btn-primary:focus-visible[b-an7dxc33du],
    .tk-btn-secondary:focus-visible[b-an7dxc33du],
    .tk-btn-icon:focus-visible[b-an7dxc33du] {
        outline-width: 3px;
    }
}
/* /Shared/DataGrid/TkFieldEditor.razor.rz.scp.css */
/* ============================================================================
   TKFIELDEDITOR.RAZOR.CSS
   ============================================================================
   Purpose: Field editor dropdown panel for adding/editing/deleting fields.
   Supports all 4 themes via CSS custom properties.
   ============================================================================ */

/* ============================================================================
   BACKDROP
   ============================================================================ */

.tfe-backdrop[b-upvhgb93j4] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--tk-grid-z-dropdown, 100) - 1);
    background: rgba(0, 0, 0, 0.15);
}

/* ============================================================================
   PANEL
   ============================================================================ */

.tfe-panel[b-upvhgb93j4] {
    position: fixed;
    z-index: var(--tk-grid-z-dropdown, 100);
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 320px;
    max-height: 80vh;
    background: var(--tk-grid-bg, #fff);
    border: 1px solid var(--tk-grid-border, #e0e0e0);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: tfe-slide-in-b-upvhgb93j4 0.15s ease-out;
    outline: none;
}

@keyframes tfe-slide-in-b-upvhgb93j4 {
    from { opacity: 0; transform: translateY(-50%) translateX(8px); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* ============================================================================
   HEADER
   ============================================================================ */

.tfe-header[b-upvhgb93j4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--tk-grid-border-light, #f0f0f0);
    flex-shrink: 0;
}

.tfe-header-title[b-upvhgb93j4] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-grid-text-primary, #1a1a1a);
}

.tfe-back-btn[b-upvhgb93j4],
.tfe-close-btn[b-upvhgb93j4],
.tfe-delete-btn[b-upvhgb93j4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--tk-grid-text-muted, #888);
    transition: background-color 0.15s, color 0.15s;
}

.tfe-back-btn:hover[b-upvhgb93j4],
.tfe-close-btn:hover[b-upvhgb93j4] {
    background: var(--tk-grid-row-hover, #f5f5f5);
    color: var(--tk-grid-text-primary, #1a1a1a);
}

.tfe-delete-btn[b-upvhgb93j4] {
    color: var(--tk-grid-danger, #ef4444);
}

.tfe-delete-btn:hover[b-upvhgb93j4] {
    background: var(--tk-grid-danger-bg, #fef2f2);
}

/* ============================================================================
   SEARCH
   ============================================================================ */

.tfe-search[b-upvhgb93j4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--tk-grid-border-light, #f0f0f0);
    flex-shrink: 0;
}

.tfe-search-icon[b-upvhgb93j4] {
    color: var(--tk-grid-text-muted, #888);
    font-size: 13px;
    flex-shrink: 0;
}

.tfe-search-input[b-upvhgb93j4] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--tk-grid-text-primary, #1a1a1a);
}

.tfe-search-input[b-upvhgb93j4]::placeholder {
    color: var(--tk-grid-text-muted, #aaa);
}

.tfe-search-clear[b-upvhgb93j4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--tk-grid-text-muted, #888);
}

.tfe-search-clear:hover[b-upvhgb93j4] {
    background: var(--tk-grid-row-hover, #f5f5f5);
}

/* ============================================================================
   TYPE LIST
   ============================================================================ */

.tfe-type-list[b-upvhgb93j4] {
    overflow-y: auto;
    flex: 1;
    padding: 4px 0;
}

.tfe-category[b-upvhgb93j4] {
    margin-bottom: 2px;
}

.tfe-category-header[b-upvhgb93j4] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--tk-grid-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tfe-category-header i[b-upvhgb93j4] {
    font-size: 11px;
}

.tfe-type-row[b-upvhgb93j4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 26px;
    cursor: pointer;
    transition: background-color 0.1s;
}

.tfe-type-row:hover[b-upvhgb93j4] {
    background: var(--tk-grid-row-hover, #f5f5f5);
}

.tfe-type-icon[b-upvhgb93j4] {
    width: 16px;
    text-align: center;
    color: var(--tk-grid-text-muted, #888);
    font-size: 14px;
    flex-shrink: 0;
}

.tfe-type-name[b-upvhgb93j4] {
    flex: 1;
    font-size: 13px;
    color: var(--tk-grid-text-primary, #1a1a1a);
}

.tfe-type-badge[b-upvhgb93j4] {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--tk-grid-border-light, #f0f0f0);
    color: var(--tk-grid-text-muted, #888);
}

.tfe-type-badge-computed[b-upvhgb93j4] {
    background: var(--tk-grid-accent-light, #eff6ff);
    color: var(--tk-grid-accent, #3b82f6);
}

.tfe-empty[b-upvhgb93j4] {
    padding: 24px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--tk-grid-text-muted, #888);
}

/* ============================================================================
   CONFIG PANEL
   ============================================================================ */

.tfe-config[b-upvhgb93j4] {
    overflow-y: auto;
    flex: 1;
    padding: 12px 14px 14px;
}

.tfe-field-group[b-upvhgb93j4] {
    margin-bottom: 12px;
}

.tfe-label[b-upvhgb93j4] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--tk-grid-text-muted, #888);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.tfe-input[b-upvhgb93j4],
.tfe-select[b-upvhgb93j4],
.tfe-textarea[b-upvhgb93j4] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--tk-grid-border, #e0e0e0);
    border-radius: 6px;
    font-size: 13px;
    color: var(--tk-grid-text-primary, #1a1a1a);
    background: var(--tk-grid-bg, #fff);
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.tfe-input:focus[b-upvhgb93j4],
.tfe-select:focus[b-upvhgb93j4],
.tfe-textarea:focus[b-upvhgb93j4] {
    border-color: var(--tk-grid-accent, #3b82f6);
}

.tfe-textarea[b-upvhgb93j4] {
    min-height: 72px;
    resize: vertical;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 12px;
}

.tfe-color-input[b-upvhgb93j4] {
    width: 32px;
    height: 28px;
    border: 1px solid var(--tk-grid-border, #e0e0e0);
    border-radius: 4px;
    cursor: pointer;
    padding: 2px;
    background: var(--tk-grid-bg, #fff);
}

/* ============================================================================
   TYPE SELECTOR (clickable, opens type picker)
   ============================================================================ */

.tfe-type-selector[b-upvhgb93j4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--tk-grid-border, #e0e0e0);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--tk-grid-text-primary, #1a1a1a);
    transition: border-color 0.15s;
}

.tfe-type-selector:hover[b-upvhgb93j4] {
    border-color: var(--tk-grid-accent, #3b82f6);
}

.tfe-type-selector i:first-child[b-upvhgb93j4] {
    color: var(--tk-grid-text-muted, #888);
}

.tfe-type-selector span[b-upvhgb93j4] {
    flex: 1;
}

.tfe-type-selector-chevron[b-upvhgb93j4] {
    color: var(--tk-grid-text-muted, #888);
    font-size: 10px;
}

/* ============================================================================
   CHECKBOX GROUP
   ============================================================================ */

.tfe-checkbox-group[b-upvhgb93j4] {
    margin-bottom: 8px;
}

.tfe-checkbox-label[b-upvhgb93j4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--tk-grid-text-primary, #1a1a1a);
    cursor: pointer;
}

.tfe-checkbox-label input[type="checkbox"][b-upvhgb93j4] {
    width: 16px;
    height: 16px;
    accent-color: var(--tk-grid-accent, #3b82f6);
    cursor: pointer;
}

/* ============================================================================
   CHOICES (SELECT / MULTISELECT)
   ============================================================================ */

.tfe-choices-list[b-upvhgb93j4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.tfe-choice-row[b-upvhgb93j4] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tfe-choice-color[b-upvhgb93j4] {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.tfe-choice-input[b-upvhgb93j4] {
    flex: 1;
    padding: 5px 8px;
    font-size: 12px;
}

.tfe-choice-delete[b-upvhgb93j4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--tk-grid-text-muted, #888);
    flex-shrink: 0;
}

.tfe-choice-delete:hover[b-upvhgb93j4] {
    background: var(--tk-grid-danger-bg, #fef2f2);
    color: var(--tk-grid-danger, #ef4444);
}

.tfe-add-choice-btn[b-upvhgb93j4] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px dashed var(--tk-grid-border, #e0e0e0);
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--tk-grid-text-muted, #888);
    transition: border-color 0.15s, color 0.15s;
    width: 100%;
    justify-content: center;
}

.tfe-add-choice-btn:hover[b-upvhgb93j4] {
    border-color: var(--tk-grid-accent, #3b82f6);
    color: var(--tk-grid-accent, #3b82f6);
}

/* ============================================================================
   DIVIDER & OPTIONS HEADER
   ============================================================================ */

.tfe-divider[b-upvhgb93j4] {
    height: 1px;
    background: var(--tk-grid-border-light, #f0f0f0);
    margin: 12px 0;
}

.tfe-options-header[b-upvhgb93j4] {
    font-size: 11px;
    font-weight: 600;
    color: var(--tk-grid-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 10px;
}

/* ============================================================================
   DELETE CONFIRMATION
   ============================================================================ */

.tfe-delete-confirm[b-upvhgb93j4] {
    text-align: center;
}

.tfe-delete-warn[b-upvhgb93j4] {
    display: block;
    font-size: 13px;
    color: var(--tk-grid-danger, #ef4444);
    margin-bottom: 12px;
}

.tfe-delete-actions[b-upvhgb93j4] {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* ============================================================================
   ACTION BUTTONS
   ============================================================================ */

.tfe-actions[b-upvhgb93j4] {
    margin-top: 16px;
}

.tfe-btn[b-upvhgb93j4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, opacity 0.15s;
}

.tfe-btn:disabled[b-upvhgb93j4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tfe-btn-primary[b-upvhgb93j4] {
    width: 100%;
    background: var(--tk-grid-accent, #3b82f6);
    color: #fff;
}

.tfe-btn-primary:hover:not(:disabled)[b-upvhgb93j4] {
    opacity: 0.9;
}

.tfe-btn-secondary[b-upvhgb93j4] {
    background: var(--tk-grid-border-light, #f0f0f0);
    color: var(--tk-grid-text-primary, #1a1a1a);
}

.tfe-btn-secondary:hover[b-upvhgb93j4] {
    background: var(--tk-grid-row-hover, #e5e5e5);
}

.tfe-btn-danger[b-upvhgb93j4] {
    background: var(--tk-grid-danger, #ef4444);
    color: #fff;
}

.tfe-btn-danger:hover[b-upvhgb93j4] {
    opacity: 0.9;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .tfe-panel[b-upvhgb93j4] {
        right: 8px;
        width: calc(100vw - 16px);
        max-width: 360px;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tfe-panel[b-upvhgb93j4] {
        animation: none !important;
    }

    .tfe-type-row[b-upvhgb93j4],
    .tfe-btn[b-upvhgb93j4],
    .tfe-input[b-upvhgb93j4],
    .tfe-select[b-upvhgb93j4],
    .tfe-type-selector[b-upvhgb93j4] {
        transition: none !important;
    }
}
/* /Shared/DataGrid/TkFilterBuilder.razor.rz.scp.css */
/* ============================================================================
   TKFILTERBUILDER.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the Airtable-style filter builder UI.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   FILTER BUILDER CONTAINER
   ============================================================================ */

.tk-filter-builder[b-ty0dtsfyq4] {
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: 8px;
    box-shadow: var(--tk-grid-shadow-dropdown);
    min-width: 400px;
    max-width: 800px;
    animation: tk-filter-slide-down-b-ty0dtsfyq4 0.2s ease-out;
}

.tk-filter-builder--open[b-ty0dtsfyq4] {
    display: block;
}

@keyframes tk-filter-slide-down-b-ty0dtsfyq4 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   FILTER HEADER
   ============================================================================ */

.tk-filter-header[b-ty0dtsfyq4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tk-grid-border);
    background: var(--tk-grid-bg-alt);
    border-radius: 8px 8px 0 0;
}

.tk-filter-header-title[b-ty0dtsfyq4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--tk-grid-text-primary);
}

.tk-filter-header-title i[b-ty0dtsfyq4] {
    color: var(--tk-grid-text-secondary);
    font-size: 16px;
}

.tk-filter-header-actions[b-ty0dtsfyq4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tk-filter-badge[b-ty0dtsfyq4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-text-on-dark);
    background: var(--tk-grid-accent);
    border-radius: 10px;
}

/* ============================================================================
   FILTER BODY
   ============================================================================ */

.tk-filter-body[b-ty0dtsfyq4] {
    padding: 16px;
}

.tk-filter-empty[b-ty0dtsfyq4] {
    text-align: center;
    padding: 24px 16px;
    color: var(--tk-grid-text-muted);
    font-size: var(--tk-grid-font-size);
}

.tk-filter-empty p[b-ty0dtsfyq4] {
    margin: 0;
}

.tk-filter-description[b-ty0dtsfyq4] {
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-secondary);
    margin-bottom: 12px;
}

/* ============================================================================
   FILTER CONDITIONS
   ============================================================================ */

.tk-filter-conditions[b-ty0dtsfyq4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

[b-ty0dtsfyq4] .tk-filter-condition {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--tk-grid-bg-alt);
    border: 1px solid var(--tk-grid-border);
    border-radius: 6px;
    transition: border-color var(--tk-grid-transition-normal);
}

[b-ty0dtsfyq4] .tk-filter-condition:hover {
    border-color: var(--tk-grid-text-muted);
}

[b-ty0dtsfyq4] .tk-filter-condition:focus-within {
    border-color: var(--tk-grid-accent);
    box-shadow: 0 0 0 2px var(--tk-grid-accent-light);
}

/* Logic selector (And/Or) */
[b-ty0dtsfyq4] .tk-filter-logic {
    width: 56px;
    padding: 6px 8px;
    font-size: var(--tk-grid-font-size-sm);
    font-weight: 500;
    color: var(--tk-grid-text-secondary);
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}

[b-ty0dtsfyq4] .tk-filter-logic:focus {
    outline: none;
    border-color: var(--tk-grid-accent);
}

/* "Where" label */
[b-ty0dtsfyq4] .tk-filter-where {
    width: 56px;
    padding: 6px 8px;
    font-size: var(--tk-grid-font-size-sm);
    font-weight: 500;
    color: var(--tk-grid-text-secondary);
    text-align: center;
}

/* Field selector */
[b-ty0dtsfyq4] .tk-filter-field {
    min-width: 140px;
    padding: 6px 12px;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: 4px;
    cursor: pointer;
}

[b-ty0dtsfyq4] .tk-filter-field:focus {
    outline: none;
    border-color: var(--tk-grid-accent);
}

/* Operator selector */
[b-ty0dtsfyq4] .tk-filter-operator {
    min-width: 120px;
    padding: 6px 12px;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: 4px;
    cursor: pointer;
}

[b-ty0dtsfyq4] .tk-filter-operator:focus {
    outline: none;
    border-color: var(--tk-grid-accent);
}

/* Value input */
[b-ty0dtsfyq4] .tk-filter-value {
    flex: 1;
    min-width: 120px;
    padding: 6px 12px;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: 4px;
}

[b-ty0dtsfyq4] .tk-filter-value:focus {
    outline: none;
    border-color: var(--tk-grid-accent);
}

[b-ty0dtsfyq4] .tk-filter-value::placeholder {
    color: var(--tk-grid-text-placeholder);
}

/* "And" text between range inputs */
[b-ty0dtsfyq4] .tk-filter-and {
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-secondary);
    padding: 0 4px;
}

/* Remove button */
[b-ty0dtsfyq4] .tk-filter-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--tk-grid-text-muted);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--tk-grid-transition-normal);
}

[b-ty0dtsfyq4] .tk-filter-remove:hover {
    color: var(--tk-grid-danger);
    background: var(--tk-grid-danger-bg);
}

[b-ty0dtsfyq4] .tk-filter-remove i {
    font-size: 14px;
}

/* ============================================================================
   FILTER ACTIONS
   ============================================================================ */

.tk-filter-actions[b-ty0dtsfyq4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
}

/* ============================================================================
   FILTER FOOTER
   ============================================================================ */

.tk-filter-footer[b-ty0dtsfyq4] {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
    border-top: 1px solid var(--tk-grid-border);
    background: var(--tk-grid-bg-alt);
    border-radius: 0 0 8px 8px;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.tk-btn-primary[b-ty0dtsfyq4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    color: var(--primary-text-on-dark);
    background: var(--tk-grid-accent);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--tk-grid-transition-normal);
}

.tk-btn-primary:hover[b-ty0dtsfyq4] {
    background: var(--tk-grid-accent-hover);
}

.tk-btn-primary:active[b-ty0dtsfyq4] {
    transform: scale(0.98);
}

.tk-btn-secondary[b-ty0dtsfyq4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--tk-grid-transition-normal);
}

.tk-btn-secondary:hover[b-ty0dtsfyq4] {
    background: var(--tk-grid-bg-alt);
    border-color: var(--tk-grid-text-muted);
}

.tk-btn-text[b-ty0dtsfyq4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    color: var(--tk-grid-text-secondary);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--tk-grid-transition-normal);
}

.tk-btn-text:hover[b-ty0dtsfyq4] {
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-bg-alt);
}

.tk-btn-icon[b-ty0dtsfyq4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--tk-grid-text-secondary);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--tk-grid-transition-normal);
}

.tk-btn-icon:hover[b-ty0dtsfyq4] {
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-bg-alt);
}

.tk-btn-sm[b-ty0dtsfyq4] {
    padding: 6px 12px;
    font-size: var(--tk-grid-font-size-sm);
}

.tk-btn-sm.tk-btn-icon[b-ty0dtsfyq4] {
    width: 28px;
    height: 28px;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 640px) {
    .tk-filter-builder[b-ty0dtsfyq4] {
        min-width: 100%;
        max-width: 100%;
        border-radius: 0;
    }

    [b-ty0dtsfyq4] .tk-filter-condition {
        flex-wrap: wrap;
        position: relative;
        padding-right: 40px;
    }

    [b-ty0dtsfyq4] .tk-filter-where,
    [b-ty0dtsfyq4] .tk-filter-logic {
        width: 100%;
        text-align: left;
    }

    [b-ty0dtsfyq4] .tk-filter-field,
    [b-ty0dtsfyq4] .tk-filter-operator,
    [b-ty0dtsfyq4] .tk-filter-value {
        width: 100%;
        min-width: 100%;
    }

    [b-ty0dtsfyq4] .tk-filter-remove {
        position: absolute;
        top: 8px;
        right: 8px;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-filter-builder[b-ty0dtsfyq4] {
        border-width: 2px;
    }

    [b-ty0dtsfyq4] .tk-filter-condition {
        border-width: 2px;
    }

    [b-ty0dtsfyq4] .tk-filter-condition:focus-within {
        outline: 3px solid var(--tk-grid-accent);
        outline-offset: -3px;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-filter-builder[b-ty0dtsfyq4] {
        animation: none;
    }

    .tk-filter-builder *[b-ty0dtsfyq4],
    [b-ty0dtsfyq4] .tk-filter-condition,
    .tk-btn-primary[b-ty0dtsfyq4],
    .tk-btn-secondary[b-ty0dtsfyq4],
    .tk-btn-text[b-ty0dtsfyq4],
    .tk-btn-icon[b-ty0dtsfyq4],
    [b-ty0dtsfyq4] .tk-filter-remove {
        transition: none !important;
    }
}
/* /Shared/DataGrid/TkFilterCondition.razor.rz.scp.css */
/* ============================================================================
   TKFILTERCONDITION.RAZOR.CSS
   ============================================================================
   Purpose: Styles for individual filter condition rows.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   FILTER CONDITION ROW
   ============================================================================ */

.tk-filter-condition[b-xrmp0kjlte] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--tk-grid-row-bg-alt);
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius);
    transition: border-color var(--tk-grid-transition-fast);
}

.tk-filter-condition:hover[b-xrmp0kjlte] {
    border-color: var(--tk-grid-border);
}

.tk-filter-condition:focus-within[b-xrmp0kjlte] {
    border-color: var(--tk-grid-accent);
    box-shadow: 0 0 0 2px var(--tk-grid-accent-light);
}

/* ============================================================================
   LOGIC SELECTOR (And/Or)
   ============================================================================ */

.tk-filter-logic[b-xrmp0kjlte] {
    width: 56px;
    padding: 6px 8px;
    font-size: var(--tk-grid-font-size-sm);
    font-weight: 500;
    color: var(--tk-grid-text-secondary);
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius-sm);
    cursor: pointer;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--tk-grid-select-chevron);
    background-position: right 4px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-right: 24px;
}

.tk-filter-logic:focus[b-xrmp0kjlte] {
    outline: none;
    border-color: var(--tk-grid-accent);
}

/* ============================================================================
   "WHERE" LABEL
   ============================================================================ */

.tk-filter-where[b-xrmp0kjlte] {
    width: 56px;
    padding: 6px 8px;
    font-size: var(--tk-grid-font-size-sm);
    font-weight: 500;
    color: var(--tk-grid-text-secondary);
    text-align: center;
}

/* ============================================================================
   FIELD SELECTOR
   ============================================================================ */

.tk-filter-field[b-xrmp0kjlte] {
    min-width: 140px;
    padding: 6px 12px;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius-sm);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--tk-grid-select-chevron);
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-right: 32px;
}

.tk-filter-field:focus[b-xrmp0kjlte] {
    outline: none;
    border-color: var(--tk-grid-accent);
}

/* ============================================================================
   OPERATOR SELECTOR
   ============================================================================ */

.tk-filter-operator[b-xrmp0kjlte] {
    min-width: 120px;
    padding: 6px 12px;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius-sm);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--tk-grid-select-chevron);
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-right: 32px;
}

.tk-filter-operator:focus[b-xrmp0kjlte] {
    outline: none;
    border-color: var(--tk-grid-accent);
}

/* ============================================================================
   VALUE INPUT
   ============================================================================ */

.tk-filter-value[b-xrmp0kjlte] {
    flex: 1;
    min-width: 120px;
    padding: 6px 12px;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius-sm);
}

.tk-filter-value:focus[b-xrmp0kjlte] {
    outline: none;
    border-color: var(--tk-grid-accent);
}

.tk-filter-value[b-xrmp0kjlte]::placeholder {
    color: var(--tk-grid-text-muted);
}

/* Select dropdowns in value position */
select.tk-filter-value[b-xrmp0kjlte] {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--tk-grid-select-chevron);
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-right: 32px;
}

/* Number inputs */
input[type="number"].tk-filter-value[b-xrmp0kjlte] {
    -moz-appearance: textfield;
}

input[type="number"].tk-filter-value[b-xrmp0kjlte]::-webkit-outer-spin-button,
input[type="number"].tk-filter-value[b-xrmp0kjlte]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Date inputs */
input[type="date"].tk-filter-value[b-xrmp0kjlte] {
    min-width: 140px;
}

/* ============================================================================
   "AND" TEXT BETWEEN RANGE INPUTS
   ============================================================================ */

.tk-filter-and[b-xrmp0kjlte] {
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-secondary);
    padding: 0 4px;
    flex-shrink: 0;
}

/* ============================================================================
   REMOVE BUTTON
   ============================================================================ */

.tk-filter-remove[b-xrmp0kjlte] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--tk-grid-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--tk-grid-radius-sm);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
    flex-shrink: 0;
}

.tk-filter-remove:hover[b-xrmp0kjlte] {
    color: var(--tk-grid-danger);
    background: var(--tk-grid-danger-bg);
}

.tk-filter-remove:focus-visible[b-xrmp0kjlte] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

.tk-filter-remove i[b-xrmp0kjlte] {
    font-size: 14px;
}

/* ============================================================================
   BUTTON STYLES
   ============================================================================ */

.tk-btn-icon[b-xrmp0kjlte] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--tk-grid-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--tk-grid-radius-sm);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-btn-icon:hover[b-xrmp0kjlte] {
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-row-hover);
}

.tk-btn-icon:focus-visible[b-xrmp0kjlte] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 640px) {
    .tk-filter-condition[b-xrmp0kjlte] {
        flex-wrap: wrap;
        position: relative;
        padding-right: 40px;
    }

    .tk-filter-where[b-xrmp0kjlte],
    .tk-filter-logic[b-xrmp0kjlte] {
        width: 100%;
        text-align: left;
    }

    .tk-filter-field[b-xrmp0kjlte],
    .tk-filter-operator[b-xrmp0kjlte],
    .tk-filter-value[b-xrmp0kjlte] {
        width: 100%;
        min-width: 100%;
    }

    .tk-filter-and[b-xrmp0kjlte] {
        width: 100%;
        text-align: center;
        padding: 4px 0;
    }

    .tk-filter-remove[b-xrmp0kjlte] {
        position: absolute;
        top: 8px;
        right: 8px;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-filter-condition[b-xrmp0kjlte],
    .tk-filter-remove[b-xrmp0kjlte],
    .tk-btn-icon[b-xrmp0kjlte] {
        transition: none;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-filter-condition:focus-within[b-xrmp0kjlte] {
        outline: 3px solid var(--tk-grid-accent);
    }

    .tk-filter-field:focus[b-xrmp0kjlte],
    .tk-filter-operator:focus[b-xrmp0kjlte],
    .tk-filter-value:focus[b-xrmp0kjlte] {
        outline: 2px solid var(--tk-grid-accent);
        outline-offset: -2px;
    }
}
/* /Shared/DataGrid/TkGridBody.razor.rz.scp.css */
/* ============================================================================
   TKGRIDBODY.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the grid body container and rows.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   BODY CONTAINER
   ============================================================================ */

.tk-datagrid-body[b-w22rkj2zui] {
    /* Fill the body-wrapper (which is flex-constrained by tk-datagrid-main).
       overflow: auto so this element scrolls for non-virtualized rendering (≤50 rows).
       For virtualized rendering, TkVirtualScroller (height: 100%, overflow: auto) handles
       scrolling internally and this container won't overflow. */
    height: 100%;
    min-width: 0;
    overflow: auto;
    /* Page bg so empty space below/around rows shows the page background,
       creating visual contrast with the data rows (which paint their own bg). */
    background: var(--bg-app);
    /* Themed scrollbar (matches TkDataGrid body-wrapper scrollbar) */
    scrollbar-width: thin;
    scrollbar-color: var(--tk-grid-scrollbar-thumb) var(--tk-grid-scrollbar-track);
}

.tk-datagrid-body[b-w22rkj2zui]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.tk-datagrid-body[b-w22rkj2zui]::-webkit-scrollbar-track {
    background: var(--tk-grid-scrollbar-track);
}

.tk-datagrid-body[b-w22rkj2zui]::-webkit-scrollbar-thumb {
    background: var(--tk-grid-scrollbar-thumb);
    border-radius: 4px;
}

.tk-datagrid-body[b-w22rkj2zui]::-webkit-scrollbar-thumb:hover {
    background: var(--tk-grid-scrollbar-thumb-hover);
}

.tk-datagrid-body[b-w22rkj2zui]::-webkit-scrollbar-corner {
    background: transparent;
}

/* ============================================================================
   ROWS CONTAINER
   ============================================================================ */

.tk-datagrid-rows[b-w22rkj2zui] {
    display: flex;
    flex-direction: column;
    min-width: fit-content;
}

/* ============================================================================
   ROW - Airtable-style compact rows with grid lines
   ============================================================================ */

.tk-datagrid-row[b-w22rkj2zui] {
    display: flex;
    align-items: stretch;
    /* Horizontal grid line between rows */
    border-bottom: 1px solid var(--tk-grid-line-color, rgba(255, 255, 255, 0.08));
    background: var(--tk-grid-row-bg);
    transition: background-color var(--tk-grid-transition-fast);
    min-height: var(--tk-grid-row-height, 32px);
    height: var(--tk-grid-row-height, 32px);
    /* Performance optimization: skip rendering off-screen rows */
    content-visibility: auto;
    contain-intrinsic-size: auto var(--tk-grid-row-height, 32px);
}

/* No border on last row - grid lines only where data exists */
.tk-datagrid-row:last-child[b-w22rkj2zui] {
    border-bottom: none;
}

/* Row filler — fills remaining horizontal space after last cell.
   Collapses when columns exceed viewport width. */
.tk-row-filler[b-w22rkj2zui] {
    flex: 1;
    min-width: 0;
    /* Page bg so the filler area is visually distinct from the data columns */
    background: var(--bg-app);
}

/* Row hover - subtle highlight */
.tk-datagrid-row:hover[b-w22rkj2zui] {
    background: var(--tk-grid-row-hover);
}

/* Selected row with left accent border */
.tk-datagrid-row-selected[b-w22rkj2zui] {
    background: var(--tk-grid-row-selected) !important;
    box-shadow: inset 3px 0 0 var(--tk-grid-accent);
}

.tk-datagrid-row-selected:hover[b-w22rkj2zui] {
    background: var(--tk-grid-row-selected) !important;
    filter: brightness(0.97);
}

/* NO zebra striping - use grid lines for row separation instead */

/* ============================================================================
   CELL - Compact padding with vertical grid lines
   ============================================================================ */

.tk-datagrid-cell[b-w22rkj2zui] {
    display: flex;
    align-items: center;
    padding: var(--tk-grid-cell-padding-y, 4px) var(--tk-grid-cell-padding-x, 8px);
    /* Vertical grid line between columns */
    border-right: 1px solid var(--tk-grid-line-color, rgba(255, 255, 255, 0.08));
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
    font-size: var(--tk-grid-font-size, 13px);
    line-height: 1.2;
    color: var(--tk-grid-text-primary);
}

/* No border on last column - only internal grid lines */
.tk-datagrid-cell:last-child[b-w22rkj2zui] {
    border-right: none;
}

/* ============================================================================
   CELL CONTENT
   ============================================================================ */

.tk-datagrid-cell-content[b-w22rkj2zui] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    line-height: 1.4;
}

/* ============================================================================
   LONG TEXT CELLS
   ============================================================================ */

.tk-cell-longtext[b-w22rkj2zui] {
    cursor: pointer;
}

.tk-cell-longtext:hover[b-w22rkj2zui] {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.tk-cell-longtext:focus-visible[b-w22rkj2zui] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: -1px;
    border-radius: 2px;
}

/* ============================================================================
   LONG TEXT POPOVER
   ============================================================================ */

.tk-cell-longtext-backdrop[b-w22rkj2zui] {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}

.tk-cell-longtext-popover[b-w22rkj2zui] {
    position: fixed;
    background: var(--tk-grid-row-bg);
    border: 1px solid var(--tk-grid-border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 12px;
    max-width: 400px;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    z-index: 1000;
    font-size: var(--tk-grid-font-size, 13px);
    line-height: 1.6;
    color: var(--tk-grid-text-primary);
}

.tk-cell-longtext-popover--centered[b-w22rkj2zui] {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
}

.tk-cell-longtext-popover:focus[b-w22rkj2zui] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

/* ============================================================================
   CELL STATES
   ============================================================================ */

.tk-datagrid-cell-active[b-w22rkj2zui] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: -2px;
    z-index: var(--tk-grid-z-cell);
    position: relative;
    background: var(--tk-grid-cell-focus);
}

.tk-datagrid-cell-editing[b-w22rkj2zui] {
    padding: 0 !important;
    z-index: calc(var(--tk-grid-z-cell) + 1);
    position: relative;
}

.tk-datagrid-cell-editing input[b-w22rkj2zui],
.tk-datagrid-cell-editing textarea[b-w22rkj2zui] {
    width: 100%;
    height: 100%;
    padding: var(--tk-grid-cell-padding-y, 8px) var(--tk-grid-cell-padding-x, 12px);
    border: none;
    outline: none;
    background: var(--tk-grid-cell-editing-bg);
    color: var(--tk-grid-text-primary);
    font-size: inherit;
    font-family: inherit;
    box-sizing: border-box;
}

.tk-datagrid-cell-editing input:focus[b-w22rkj2zui],
.tk-datagrid-cell-editing textarea:focus[b-w22rkj2zui] {
    box-shadow: var(--tk-grid-cell-editing-shadow);
}

/* ============================================================================
   FROZEN CELLS
   ============================================================================ */

.tk-datagrid-cell-frozen[b-w22rkj2zui] {
    position: sticky;
    left: 0;
    z-index: var(--tk-grid-z-frozen);
    background: var(--tk-grid-row-bg);
    box-shadow: var(--tk-grid-shadow-frozen);
}

.tk-datagrid-row:hover .tk-datagrid-cell-frozen[b-w22rkj2zui] {
    background: var(--tk-grid-row-hover);
}

.tk-datagrid-row-selected .tk-datagrid-cell-frozen[b-w22rkj2zui] {
    background: var(--tk-grid-row-selected);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .tk-datagrid-cell[b-w22rkj2zui] {
        padding: 6px 8px;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .tk-datagrid-body[b-w22rkj2zui] {
        overflow: visible !important;
        height: auto !important;
        flex: none;
    }

    .tk-datagrid-rows[b-w22rkj2zui] {
        min-width: 0;
    }

    .tk-datagrid-row[b-w22rkj2zui] {
        page-break-inside: avoid;
        height: auto !important;
        min-height: auto !important;
        content-visibility: visible;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-datagrid-cell-active[b-w22rkj2zui] {
        outline-width: 3px;
    }

    .tk-datagrid-row[b-w22rkj2zui] {
        border-bottom-width: 2px;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-datagrid-row[b-w22rkj2zui] {
        transition: none !important;
    }
}

/* ============================================================================
   CONTEXT MENU
   ============================================================================ */

.tk-ctx-backdrop[b-w22rkj2zui] {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}

.tk-ctx-menu[b-w22rkj2zui] {
    position: fixed;
    z-index: 1000;
    min-width: 160px;
    background: var(--tk-grid-row-bg);
    border: 1px solid var(--tk-grid-border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    padding: 4px 0;
    font-size: var(--tk-grid-font-size, 13px);
}

.tk-ctx-item[b-w22rkj2zui] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: none;
    color: var(--tk-grid-text-primary);
    cursor: pointer;
    text-align: left;
    font-size: inherit;
}

.tk-ctx-item:hover[b-w22rkj2zui] {
    background: var(--tk-grid-row-hover);
}

.tk-ctx-item--danger[b-w22rkj2zui] {
    color: var(--tk-grid-danger, #dc3545);
}

.tk-ctx-item--danger:hover[b-w22rkj2zui] {
    background: rgba(220, 53, 69, 0.1);
}

.tk-ctx-item i[b-w22rkj2zui] {
    font-size: 14px;
    width: 16px;
    text-align: center;
}

/* ============================================================================
   CHECKBOX CELL — single-click toggle
   ============================================================================ */

.tk-cell-checkbox-label[b-w22rkj2zui] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}

.tk-cell-checkbox[b-w22rkj2zui] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--tk-grid-accent);
}

/* ============================================================================
   TYPE-SPECIFIC EDITORS
   ============================================================================ */

.tk-datagrid-cell-editing select[b-w22rkj2zui] {
    width: 100%;
    height: 100%;
    padding: var(--tk-grid-cell-padding-y, 4px) var(--tk-grid-cell-padding-x, 8px);
    border: none;
    outline: none;
    background: var(--tk-grid-cell-editing-bg);
    color: var(--tk-grid-text-primary);
    font-size: inherit;
    font-family: inherit;
    box-sizing: border-box;
}

.tk-datagrid-cell-editing select:focus[b-w22rkj2zui] {
    box-shadow: var(--tk-grid-cell-editing-shadow);
}

.tk-datagrid-cell-editing input[type="number"][b-w22rkj2zui] {
    text-align: right;
}

.tk-datagrid-cell-editing input[type="date"][b-w22rkj2zui],
.tk-datagrid-cell-editing input[type="datetime-local"][b-w22rkj2zui],
.tk-datagrid-cell-editing input[type="time"][b-w22rkj2zui] {
    color-scheme: dark;
}

/* Light theme override */
:global(.tk-theme-light) .tk-datagrid-cell-editing input[type="date"][b-w22rkj2zui],
:global(.tk-theme-light) .tk-datagrid-cell-editing input[type="datetime-local"][b-w22rkj2zui],
:global(.tk-theme-light) .tk-datagrid-cell-editing input[type="time"][b-w22rkj2zui] {
    color-scheme: light;
}
/* /Shared/DataGrid/TkGridCell.razor.rz.scp.css */
/* ============================================================================
   TKGRIDCELL.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the TkGridCell component and all cell type renderers.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   BASE CELL STYLES
   ============================================================================ */

.tk-grid-cell[b-vasdg74wsc] {
    padding: 0 var(--tk-grid-cell-padding-x, 12px);
    display: flex;
    align-items: center;
    overflow: hidden;
    border-right: 1px solid var(--tk-grid-border-light);
    height: 100%;
    box-sizing: border-box;
    transition: background-color var(--tk-grid-transition-fast);
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
}

.tk-grid-cell:focus[b-vasdg74wsc] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: -2px;
    z-index: var(--tk-grid-z-cell);
}

.tk-grid-cell:focus-visible[b-vasdg74wsc] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: -2px;
}

/* ============================================================================
   CELL STATES
   ============================================================================ */

.tk-grid-cell.active[b-vasdg74wsc] {
    background: var(--tk-grid-cell-focus);
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: -2px;
}

.tk-grid-cell.selected[b-vasdg74wsc] {
    background: var(--tk-grid-row-selected);
}

.tk-grid-cell.editing[b-vasdg74wsc] {
    padding: 0;
    background: var(--tk-grid-cell-editing-bg);
    z-index: calc(var(--tk-grid-z-cell) + 1);
    position: relative;
}

.tk-grid-cell.frozen[b-vasdg74wsc] {
    position: sticky;
    left: 0;
    background: var(--tk-grid-row-bg);
    z-index: var(--tk-grid-z-frozen);
    box-shadow: var(--tk-grid-shadow-frozen);
}

/* ============================================================================
   TEXT CELL
   ============================================================================ */

.tk-cell-text[b-vasdg74wsc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    line-height: var(--tk-grid-line-height);
}

.tk-cell-text.multiline[b-vasdg74wsc] {
    white-space: pre-wrap;
    overflow-y: auto;
    max-height: 100%;
}

/* ============================================================================
   NUMBER & CURRENCY CELLS
   ============================================================================ */

.tk-cell-number[b-vasdg74wsc],
.tk-cell-currency[b-vasdg74wsc] {
    font-variant-numeric: tabular-nums;
    font-family: var(--tk-grid-font-mono);
    text-align: right;
    width: 100%;
    justify-content: flex-end;
}

.tk-cell-currency.negative[b-vasdg74wsc] {
    color: var(--tk-grid-danger);
}

.tk-cell-currency.positive[b-vasdg74wsc] {
    color: var(--tk-grid-success);
}

/* Percent cell */
.tk-cell-percent[b-vasdg74wsc] {
    font-variant-numeric: tabular-nums;
    text-align: right;
    width: 100%;
    justify-content: flex-end;
}

/* ============================================================================
   DATE CELL
   ============================================================================ */

.tk-cell-date[b-vasdg74wsc] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tk-cell-date .date-relative[b-vasdg74wsc] {
    color: var(--tk-grid-text-secondary);
    font-size: var(--tk-grid-font-size-sm);
    margin-left: 6px;
}

/* ============================================================================
   CHECKBOX CELL
   ============================================================================ */

.tk-cell-checkbox[b-vasdg74wsc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.tk-cell-checkbox input[type="checkbox"][b-vasdg74wsc] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--tk-grid-accent);
    border-radius: 4px;
}

.tk-cell-checkbox input[type="checkbox"]:disabled[b-vasdg74wsc] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Custom styled checkbox */
.tk-checkbox-custom[b-vasdg74wsc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid var(--tk-grid-border);
    border-radius: 4px;
    background: var(--tk-grid-bg);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-checkbox-custom.checked[b-vasdg74wsc] {
    background: var(--tk-grid-accent);
    border-color: var(--tk-grid-accent);
    color: var(--primary-text-on-dark);
}

.tk-checkbox-custom.checked i[b-vasdg74wsc] {
    font-size: 12px;
}

.tk-checkbox-custom:hover[b-vasdg74wsc] {
    border-color: var(--tk-grid-accent);
}

/* ============================================================================
   SELECT & MULTI-SELECT CELLS
   ============================================================================ */

.tk-cell-select[b-vasdg74wsc],
.tk-cell-multiselect[b-vasdg74wsc] {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    width: 100%;
}

.tk-pill[b-vasdg74wsc] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--tk-grid-pill-radius);
    font-size: var(--tk-grid-font-size-sm);
    font-weight: 500;
    background: var(--tk-grid-pill-bg);
    color: var(--tk-grid-pill-text);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(--tk-grid-line-height);
}

/* Colored pills — theme-responsive via definitions.css variables */
.tk-pill[data-color="red"][b-vasdg74wsc] { background: var(--pill-red); color: var(--pill-red-text); }
.tk-pill[data-color="orange"][b-vasdg74wsc] { background: var(--pill-orange); color: var(--pill-orange-text); }
.tk-pill[data-color="yellow"][b-vasdg74wsc] { background: var(--pill-yellow); color: var(--pill-yellow-text); }
.tk-pill[data-color="green"][b-vasdg74wsc] { background: var(--pill-green); color: var(--pill-green-text); }
.tk-pill[data-color="blue"][b-vasdg74wsc] { background: var(--pill-blue); color: var(--pill-blue-text); }
.tk-pill[data-color="purple"][b-vasdg74wsc] { background: var(--pill-purple); color: var(--pill-purple-text); }
.tk-pill[data-color="pink"][b-vasdg74wsc] { background: var(--pill-pink); color: var(--pill-pink-text); }
.tk-pill[data-color="gray"][b-vasdg74wsc] { background: var(--pill-gray); color: var(--pill-gray-text); }

.tk-pill-more[b-vasdg74wsc] {
    background: var(--tk-grid-bg-alt);
    color: var(--tk-grid-text-muted);
    font-size: var(--tk-grid-font-size-xs);
}

/* ============================================================================
   USER CELL
   ============================================================================ */

.tk-cell-user[b-vasdg74wsc] {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.tk-avatar-sm[b-vasdg74wsc] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.tk-avatar-placeholder[b-vasdg74wsc] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tk-grid-accent);
    color: var(--primary-text-on-dark);
    font-size: 10px;
    font-weight: 600;
}

.tk-user-name[b-vasdg74wsc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Multiple users */
.tk-cell-users[b-vasdg74wsc] {
    display: flex;
    align-items: center;
}

.tk-avatar-stack[b-vasdg74wsc] {
    display: flex;
}

.tk-avatar-stack .tk-avatar-sm[b-vasdg74wsc] {
    margin-left: -8px;
    border: 2px solid var(--tk-grid-bg);
}

.tk-avatar-stack .tk-avatar-sm:first-child[b-vasdg74wsc] {
    margin-left: 0;
}

.tk-users-more[b-vasdg74wsc] {
    margin-left: 4px;
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-secondary);
}

/* ============================================================================
   RATING CELL
   ============================================================================ */

.tk-cell-rating[b-vasdg74wsc] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.tk-cell-rating i[b-vasdg74wsc] {
    font-size: 14px;
    transition: transform var(--tk-grid-transition-fast), color var(--tk-grid-transition-fast);
}

.tk-cell-rating i.filled[b-vasdg74wsc] {
    color: var(--tk-grid-warning);
}

.tk-cell-rating i.empty[b-vasdg74wsc] {
    color: var(--tk-grid-text-muted);
}

.tk-cell-rating.editable i[b-vasdg74wsc] {
    cursor: pointer;
}

.tk-cell-rating.editable i:hover[b-vasdg74wsc] {
    transform: scale(1.2);
}

/* ============================================================================
   LINK CELL
   ============================================================================ */

.tk-cell-link[b-vasdg74wsc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--tk-grid-accent);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.tk-cell-link:hover[b-vasdg74wsc] {
    text-decoration: underline;
    color: var(--tk-grid-accent-hover);
}

.tk-cell-link i[b-vasdg74wsc] {
    flex-shrink: 0;
    font-size: 12px;
}

.tk-cell-link span[b-vasdg74wsc] {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================================
   EMAIL CELL
   ============================================================================ */

.tk-cell-email[b-vasdg74wsc] {
    color: var(--tk-grid-accent);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-cell-email:hover[b-vasdg74wsc] {
    text-decoration: underline;
    color: var(--tk-grid-accent-hover);
}

/* ============================================================================
   PHONE CELL
   ============================================================================ */

.tk-cell-phone[b-vasdg74wsc] {
    font-variant-numeric: tabular-nums;
}

.tk-cell-phone a[b-vasdg74wsc] {
    color: var(--tk-grid-accent);
    text-decoration: none;
}

.tk-cell-phone a:hover[b-vasdg74wsc] {
    text-decoration: underline;
}

/* ============================================================================
   ATTACHMENT CELL
   ============================================================================ */

.tk-cell-attachment[b-vasdg74wsc] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tk-attachment-thumb[b-vasdg74wsc] {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: var(--tk-grid-bg-alt);
    border: 1px solid var(--tk-grid-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    transition: border-color var(--tk-grid-transition-fast);
}

.tk-attachment-thumb:hover[b-vasdg74wsc] {
    border-color: var(--tk-grid-accent);
}

.tk-attachment-thumb img[b-vasdg74wsc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tk-attachment-thumb i[b-vasdg74wsc] {
    font-size: 14px;
    color: var(--tk-grid-text-muted);
}

.tk-attachment-more[b-vasdg74wsc] {
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-muted);
    font-weight: 500;
}

/* ============================================================================
   PROGRESS CELL
   ============================================================================ */

.tk-cell-progress[b-vasdg74wsc] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.tk-progress-bar[b-vasdg74wsc] {
    flex: 1;
    height: 6px;
    background: var(--tk-grid-border);
    border-radius: 3px;
    overflow: hidden;
}

.tk-progress-fill[b-vasdg74wsc] {
    height: 100%;
    background: var(--tk-grid-accent);
    border-radius: 3px;
    transition: width var(--tk-grid-transition-normal);
}

.tk-progress-fill.complete[b-vasdg74wsc] {
    background: var(--tk-grid-success);
}

.tk-progress-value[b-vasdg74wsc] {
    font-size: var(--tk-grid-font-size-sm);
    font-variant-numeric: tabular-nums;
    color: var(--tk-grid-text-secondary);
    min-width: 32px;
    text-align: right;
}

/* ============================================================================
   FORMULA CELL
   ============================================================================ */

.tk-cell-formula[b-vasdg74wsc] {
    font-style: italic;
    color: var(--tk-grid-text-secondary);
}

.tk-cell-formula-error[b-vasdg74wsc] {
    color: var(--tk-grid-danger);
    font-size: var(--tk-grid-font-size-sm);
}

/* ============================================================================
   CELL EDITOR (INLINE EDIT MODE)
   ============================================================================ */

.tk-cell-editor[b-vasdg74wsc] {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 var(--tk-grid-cell-padding-x, 12px);
    font-family: inherit;
    font-size: inherit;
    background: var(--tk-grid-cell-editing-bg);
    color: var(--tk-grid-text-primary);
    box-shadow: var(--tk-grid-cell-editing-shadow);
}

.tk-cell-editor:focus[b-vasdg74wsc] {
    outline: none;
}

.tk-cell-editor[b-vasdg74wsc]::placeholder {
    color: var(--tk-grid-text-placeholder);
}

/* ============================================================================
   TYPE-SPECIFIC CELL VARIATIONS
   ============================================================================ */

.tk-cell-type-number[b-vasdg74wsc],
.tk-cell-type-currency[b-vasdg74wsc],
.tk-cell-type-percent[b-vasdg74wsc] {
    justify-content: flex-end;
    text-align: right;
}

.tk-cell-type-checkbox[b-vasdg74wsc],
.tk-cell-type-rating[b-vasdg74wsc] {
    justify-content: center;
}

/* ============================================================================
   CELL VALIDATION STATES
   ============================================================================ */

.tk-grid-cell.invalid[b-vasdg74wsc] {
    background: var(--tk-grid-danger-bg);
}

.tk-grid-cell.invalid[b-vasdg74wsc]::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-top: 6px solid var(--tk-grid-danger);
}

.tk-cell-validation-error[b-vasdg74wsc] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 4px 8px;
    background: var(--tk-grid-danger);
    color: var(--primary-text-on-dark);
    font-size: var(--tk-grid-font-size-xs);
    z-index: var(--tk-grid-z-dropdown);
    border-radius: 0 0 4px 4px;
    box-shadow: var(--tk-grid-shadow-dropdown);
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) {
    .tk-grid-cell[b-vasdg74wsc] {
        padding: 0 8px;
    }

    .tk-pill[b-vasdg74wsc] {
        padding: 1px 6px;
        font-size: var(--tk-grid-font-size-xs);
    }

    .tk-avatar-sm[b-vasdg74wsc] {
        width: 20px;
        height: 20px;
    }

    .tk-attachment-thumb[b-vasdg74wsc] {
        width: 24px;
        height: 24px;
    }

    .tk-cell-rating i[b-vasdg74wsc] {
        font-size: 12px;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-grid-cell:focus[b-vasdg74wsc],
    .tk-grid-cell.active[b-vasdg74wsc] {
        outline-width: 3px;
    }

    .tk-pill[b-vasdg74wsc] {
        border: 1px solid currentColor;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-grid-cell[b-vasdg74wsc],
    .tk-cell-rating i[b-vasdg74wsc],
    .tk-attachment-thumb[b-vasdg74wsc],
    .tk-progress-fill[b-vasdg74wsc],
    .tk-checkbox-custom[b-vasdg74wsc] {
        transition: none !important;
    }
}

/* ============================================================================
   RTL SUPPORT
   ============================================================================ */

[dir="rtl"] .tk-grid-cell[b-vasdg74wsc] {
    border-right: none;
    border-left: 1px solid var(--tk-grid-border-light);
}

[dir="rtl"] .tk-cell-number[b-vasdg74wsc],
[dir="rtl"] .tk-cell-currency[b-vasdg74wsc],
[dir="rtl"] .tk-cell-percent[b-vasdg74wsc] {
    text-align: left;
    justify-content: flex-start;
}

[dir="rtl"] .tk-cell-user[b-vasdg74wsc] {
    flex-direction: row-reverse;
}

[dir="rtl"] .tk-cell-date .date-relative[b-vasdg74wsc] {
    margin-left: 0;
    margin-right: 6px;
}

[dir="rtl"] .tk-avatar-stack .tk-avatar-sm[b-vasdg74wsc] {
    margin-left: 0;
    margin-right: -8px;
}

[dir="rtl"] .tk-avatar-stack .tk-avatar-sm:first-child[b-vasdg74wsc] {
    margin-right: 0;
}
/* /Shared/DataGrid/TkGridFooter.razor.rz.scp.css */
/* ============================================================================
   TKGRIDFOOTER.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the grid footer component including summary row.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   FOOTER CONTAINER
   ============================================================================ */

.tk-datagrid-footer[b-6d9gmbt63e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: var(--tk-grid-bg);
    border-top: 1px solid var(--tk-grid-border);
    font-size: var(--tk-grid-font-size-sm, 12px);
    color: var(--tk-grid-text-secondary);
    flex-shrink: 0;
    min-height: var(--tk-grid-footer-height, 28px);
}

.tk-datagrid-footer-left[b-6d9gmbt63e],
.tk-datagrid-footer-center[b-6d9gmbt63e],
.tk-datagrid-footer-right[b-6d9gmbt63e] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tk-datagrid-footer-left[b-6d9gmbt63e] {
    flex: 0 0 auto;
}

.tk-datagrid-footer-center[b-6d9gmbt63e] {
    flex: 1;
    overflow: hidden;
}

.tk-datagrid-footer-right[b-6d9gmbt63e] {
    flex: 0 0 auto;
}

/* ============================================================================
   SELECTION COUNT
   ============================================================================ */

.tk-datagrid-footer-selection[b-6d9gmbt63e] {
    color: var(--tk-grid-accent);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tk-datagrid-footer-selection i[b-6d9gmbt63e] {
    font-size: 14px;
}

/* ============================================================================
   RECORD COUNT
   ============================================================================ */

.tk-datagrid-footer-count[b-6d9gmbt63e] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tk-datagrid-footer-count strong[b-6d9gmbt63e] {
    color: var(--tk-grid-text-primary);
    font-weight: 600;
}

/* ============================================================================
   SUMMARY ROW
   ============================================================================ */

.tk-datagrid-summary-row[b-6d9gmbt63e] {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.tk-datagrid-summary-row[b-6d9gmbt63e]::-webkit-scrollbar {
    display: none;
}

.tk-datagrid-summary-cell[b-6d9gmbt63e] {
    padding: 4px 12px;
    font-weight: 600;
    text-align: right;
    border-right: 1px solid var(--tk-grid-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    color: var(--tk-grid-text-primary);
}

.tk-datagrid-summary-cell:last-child[b-6d9gmbt63e] {
    border-right: none;
}

.tk-datagrid-summary-label[b-6d9gmbt63e] {
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-muted);
    font-weight: 400;
    margin-right: 4px;
}

/* ============================================================================
   QUICK CALCULATIONS
   ============================================================================ */

.tk-quick-calc[b-6d9gmbt63e] {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: var(--tk-grid-font-size-sm);
}

.tk-quick-calc-item[b-6d9gmbt63e] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--tk-grid-text-secondary);
}

.tk-quick-calc-label[b-6d9gmbt63e] {
    color: var(--tk-grid-text-muted);
}

.tk-quick-calc-value[b-6d9gmbt63e] {
    color: var(--tk-grid-text-primary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   PAGINATION
   ============================================================================ */

.tk-pagination[b-6d9gmbt63e] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tk-pagination-info[b-6d9gmbt63e] {
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-secondary);
    font-variant-numeric: tabular-nums;
}

.tk-pagination-btn[b-6d9gmbt63e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--tk-grid-border);
    border-radius: 4px;
    background: transparent;
    color: var(--tk-grid-text-secondary);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-pagination-btn:hover:not(:disabled)[b-6d9gmbt63e] {
    background: var(--tk-grid-row-hover);
    border-color: var(--tk-grid-text-muted);
    color: var(--tk-grid-text-primary);
}

.tk-pagination-btn:disabled[b-6d9gmbt63e] {
    opacity: 0.4;
    cursor: not-allowed;
}

.tk-pagination-btn i[b-6d9gmbt63e] {
    font-size: 12px;
}

.tk-pagination-select[b-6d9gmbt63e] {
    padding: 4px 8px;
    border: 1px solid var(--tk-grid-border);
    border-radius: 4px;
    background: var(--tk-grid-bg);
    color: var(--tk-grid-text-primary);
    font-size: var(--tk-grid-font-size-sm);
    cursor: pointer;
}

.tk-pagination-select:focus[b-6d9gmbt63e] {
    outline: none;
    border-color: var(--tk-grid-accent);
}

/* ============================================================================
   STATUS INDICATORS
   ============================================================================ */

.tk-footer-status[b-6d9gmbt63e] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-muted);
}

.tk-footer-status-dot[b-6d9gmbt63e] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tk-grid-success);
}

.tk-footer-status-dot.loading[b-6d9gmbt63e] {
    background: var(--tk-grid-warning);
    animation: tk-grid-pulse 1s infinite;
}

.tk-footer-status-dot.error[b-6d9gmbt63e] {
    background: var(--tk-grid-danger);
}

/* ============================================================================
   ADD ROW BUTTON
   ============================================================================ */

.tk-footer-add-row[b-6d9gmbt63e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: transparent;
    border: 1px dashed var(--tk-grid-border);
    border-radius: 4px;
    color: var(--tk-grid-text-muted);
    font-size: var(--tk-grid-font-size-sm);
    cursor: pointer;
    transition: all var(--tk-grid-transition-normal);
}

.tk-footer-add-row:hover[b-6d9gmbt63e] {
    border-color: var(--tk-grid-accent);
    color: var(--tk-grid-accent);
    background: var(--tk-grid-accent-light);
}

.tk-footer-add-row i[b-6d9gmbt63e] {
    font-size: 12px;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .tk-datagrid-footer[b-6d9gmbt63e] {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px;
    }

    .tk-datagrid-footer-center[b-6d9gmbt63e] {
        display: none;
    }

    .tk-quick-calc[b-6d9gmbt63e] {
        display: none;
    }

    .tk-pagination-info[b-6d9gmbt63e] {
        display: none;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-datagrid-footer[b-6d9gmbt63e] {
        border-top-width: 2px;
    }

    .tk-pagination-btn:focus-visible[b-6d9gmbt63e] {
        outline: 3px solid var(--tk-grid-accent);
        outline-offset: -3px;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-pagination-btn[b-6d9gmbt63e],
    .tk-footer-add-row[b-6d9gmbt63e],
    .tk-footer-status-dot[b-6d9gmbt63e] {
        transition: none !important;
        animation: none !important;
    }
}
/* /Shared/DataGrid/TkGridHeader.razor.rz.scp.css */
/* ============================================================================
   TKGRIDHEADER.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the grid header component including sticky positioning,
            column headers, resize handles, and the column menu.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   GRID HEADER CONTAINER
   ============================================================================ */

.tk-grid-header[b-ji3qegjmz6] {
    position: sticky;
    top: 0;
    z-index: var(--tk-grid-z-header, 10);
    background: var(--tk-grid-header-bg);
    border-bottom: 1px solid var(--tk-grid-header-border);
    flex-shrink: 0;
}

.tk-grid-header-row[b-ji3qegjmz6] {
    display: flex;
    height: var(--tk-grid-header-height, 32px);
    align-items: stretch;
    min-width: fit-content;
}

/* ============================================================================
   ADD COLUMN BUTTON
   ============================================================================ */

.tk-add-column-btn[b-ji3qegjmz6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    border-left: 1px solid var(--tk-grid-border);
    cursor: pointer;
    color: var(--tk-grid-text-muted);
    background: var(--tk-grid-header-bg);
    transition: background-color var(--tk-grid-transition-normal),
                color var(--tk-grid-transition-normal);
}

.tk-add-column-btn:hover[b-ji3qegjmz6] {
    background: var(--tk-grid-header-hover);
    color: var(--tk-grid-accent);
}

.tk-add-column-btn i[b-ji3qegjmz6] {
    font-size: 18px;
}

/* ============================================================================
   HEADER FILLER — fills remaining horizontal space after last column
   ============================================================================ */

.tk-header-filler[b-ji3qegjmz6] {
    flex: 1;
    min-width: 0;
    /* Page bg so the filler area is visually distinct from the data columns */
    background: var(--bg-app);
}

/* ============================================================================
   COLUMN HEADER
   ============================================================================ */

[b-ji3qegjmz6] .tk-column-header {
    display: flex;
    align-items: center;
    padding: 0;
    border-right: 1px solid var(--tk-grid-border);
    cursor: pointer;
    user-select: none;
    position: relative;
    background: var(--tk-grid-header-bg);
    transition: background-color var(--tk-grid-transition-normal);
    flex-shrink: 0;
}

[b-ji3qegjmz6] .tk-column-header:hover {
    background: var(--tk-grid-header-hover);
}

[b-ji3qegjmz6] .tk-column-header.sorted {
    background: var(--tk-grid-accent-light);
}

[b-ji3qegjmz6] .tk-column-header.sorted:hover {
    background: var(--tk-grid-header-hover);
}

[b-ji3qegjmz6] .tk-column-header.frozen {
    position: sticky;
    left: 0;
    z-index: calc(var(--tk-grid-z-header, 10) + 1);
    box-shadow: var(--tk-grid-shadow-frozen);
}

[b-ji3qegjmz6] .tk-column-header-content {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    flex: 1;
    min-width: 0;
    height: 100%;
}

/* Column icon */
[b-ji3qegjmz6] .tk-column-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--tk-grid-text-muted);
    font-size: 14px;
}

/* Column title - compact 12px, muted color */
[b-ji3qegjmz6] .tk-column-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--tk-grid-header-font-size, 12px);
    font-weight: var(--tk-grid-header-font-weight, 500);
    color: var(--tk-grid-header-text);
    text-transform: none;
}

/* Sort indicator */
[b-ji3qegjmz6] .tk-sort-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--tk-grid-accent);
    font-size: 12px;
}

/* Sort order badge (for multi-column sorting) */
[b-ji3qegjmz6] .tk-sort-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    font-weight: 600;
    background: var(--tk-grid-accent);
    color: var(--primary-text-on-dark);
    border-radius: 8px;
    padding: 0 4px;
}

/* Menu button */
[b-ji3qegjmz6] .tk-column-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    border-radius: 3px;
    cursor: pointer;
    color: var(--tk-grid-text-muted);
    opacity: 0;
    transition: opacity var(--tk-grid-transition-normal),
                background-color var(--tk-grid-transition-normal);
    flex-shrink: 0;
}

[b-ji3qegjmz6] .tk-column-header:hover .tk-column-menu-btn {
    opacity: 1;
}

[b-ji3qegjmz6] .tk-column-menu-btn:hover {
    background: var(--tk-grid-border);
}

[b-ji3qegjmz6] .tk-column-menu-btn i {
    font-size: 10px;
}

/* ============================================================================
   COLUMN RESIZER
   ============================================================================ */

[b-ji3qegjmz6] .tk-column-resizer {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--tk-grid-resize-handle-width, 5px);
    cursor: col-resize;
    background: transparent;
    transition: background-color var(--tk-grid-transition-normal);
    z-index: var(--tk-grid-z-resizer, 15);
}

[b-ji3qegjmz6] .tk-column-resizer:hover,
[b-ji3qegjmz6] .tk-column-resizer.resizing {
    background: var(--tk-grid-accent);
}

/* Resize line shown during drag */
[b-ji3qegjmz6] .tk-resize-line {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--tk-grid-accent);
    z-index: var(--tk-grid-z-modal, 1000);
    pointer-events: none;
}

/* ============================================================================
   COLUMN MENU
   ============================================================================ */

[b-ji3qegjmz6] .tk-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--tk-grid-z-dropdown, 100) - 1);
    background: transparent;
}

[b-ji3qegjmz6] .tk-column-menu {
    position: fixed;
    z-index: var(--tk-grid-z-dropdown, 100);
    min-width: 200px;
    max-width: 280px;
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: 6px;
    box-shadow: var(--tk-grid-shadow-dropdown);
    padding: 4px 0;
    animation: tk-grid-slideDown var(--tk-grid-transition-normal);
}

[b-ji3qegjmz6] .tk-menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: var(--tk-grid-font-size-xs, 11px);
    font-weight: 600;
    color: var(--tk-grid-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

[b-ji3qegjmz6] .tk-menu-header i {
    font-size: 14px;
}

[b-ji3qegjmz6] .tk-menu-divider {
    height: 1px;
    background: var(--tk-grid-border);
    margin: 4px 0;
}

[b-ji3qegjmz6] .tk-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: var(--tk-grid-font-size, 13px);
    color: var(--tk-grid-text-primary);
    cursor: pointer;
    transition: background-color var(--tk-grid-transition-fast);
}

[b-ji3qegjmz6] .tk-menu-item:hover {
    background: var(--tk-grid-row-hover);
}

[b-ji3qegjmz6] .tk-menu-item i {
    width: 16px;
    text-align: center;
    color: var(--tk-grid-text-muted);
    font-size: 14px;
}

[b-ji3qegjmz6] .tk-menu-item-danger {
    color: var(--tk-grid-danger);
}

[b-ji3qegjmz6] .tk-menu-item-danger i {
    color: var(--tk-grid-danger);
}

[b-ji3qegjmz6] .tk-menu-item-danger:hover {
    background: var(--tk-grid-danger-bg);
}

[b-ji3qegjmz6] .tk-menu-item-selected {
    background: var(--tk-grid-accent-light);
}

[b-ji3qegjmz6] .tk-menu-item-selected i {
    color: var(--tk-grid-accent);
}

/* ============================================================================
   FILTER INDICATOR IN HEADER
   ============================================================================ */

[b-ji3qegjmz6] .tk-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 600;
    background: var(--tk-grid-info-bg);
    color: var(--tk-grid-info);
    border-radius: 8px;
    margin-left: 4px;
}

/* ============================================================================
   HEADER SELECT ALL CHECKBOX
   ============================================================================ */

.tk-header-checkbox-cell[b-ji3qegjmz6] {
    width: var(--tk-grid-checkbox-width, 40px);
    min-width: var(--tk-grid-checkbox-width, 40px);
    max-width: var(--tk-grid-checkbox-width, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--tk-grid-border);
}

.tk-header-checkbox[b-ji3qegjmz6] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--tk-grid-accent);
}

.tk-header-checkbox:disabled[b-ji3qegjmz6] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Indeterminate state */
.tk-header-checkbox:indeterminate[b-ji3qegjmz6] {
    accent-color: var(--tk-grid-accent);
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) {
    .tk-grid-header-row[b-ji3qegjmz6] {
        height: 40px;
    }

    [b-ji3qegjmz6] .tk-column-header-content {
        padding: 0 6px;
        gap: 4px;
    }

    [b-ji3qegjmz6] .tk-column-title {
        font-size: var(--tk-grid-font-size-sm, 12px);
    }

    [b-ji3qegjmz6] .tk-column-menu {
        min-width: 180px;
    }

    .tk-add-column-btn[b-ji3qegjmz6] {
        width: 36px;
        min-width: 36px;
        max-width: 36px;
    }
}

/* ============================================================================
   DRAG AND DROP REORDERING
   ============================================================================ */

[b-ji3qegjmz6] .tk-column-header.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

[b-ji3qegjmz6] .tk-column-header.drag-over-left {
    box-shadow: inset 3px 0 0 var(--tk-grid-accent);
}

[b-ji3qegjmz6] .tk-column-header.drag-over-right {
    box-shadow: inset -3px 0 0 var(--tk-grid-accent);
}

[b-ji3qegjmz6] .tk-column-drag-preview {
    position: fixed;
    z-index: var(--tk-grid-z-modal);
    padding: 8px 12px;
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-accent);
    border-radius: 4px;
    box-shadow: var(--tk-grid-shadow-dropdown);
    pointer-events: none;
    opacity: 0.9;
    font-size: var(--tk-grid-font-size);
    font-weight: var(--tk-grid-header-font-weight);
    color: var(--tk-grid-text-primary);
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-grid-header[b-ji3qegjmz6] {
        border-bottom-width: 2px;
    }

    [b-ji3qegjmz6] .tk-column-header:focus-visible {
        outline: 3px solid var(--tk-grid-accent);
        outline-offset: -3px;
    }

    [b-ji3qegjmz6] .tk-column-resizer:hover,
    [b-ji3qegjmz6] .tk-column-resizer.resizing {
        width: 6px;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-grid-header *[b-ji3qegjmz6],
    [b-ji3qegjmz6] .tk-column-header,
    [b-ji3qegjmz6] .tk-column-menu-btn,
    [b-ji3qegjmz6] .tk-column-resizer,
    [b-ji3qegjmz6] .tk-column-menu {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================================
   RTL SUPPORT
   ============================================================================ */

[dir="rtl"] .tk-grid-header-row[b-ji3qegjmz6] {
    direction: rtl;
}

[dir="rtl"][b-ji3qegjmz6]  .tk-column-header {
    border-right: none;
    border-left: 1px solid var(--tk-grid-border);
}

[dir="rtl"][b-ji3qegjmz6]  .tk-column-resizer {
    right: auto;
    left: 0;
}

[dir="rtl"] .tk-add-column-btn[b-ji3qegjmz6] {
    border-left: none;
    border-right: 1px solid var(--tk-grid-border);
}

[dir="rtl"][b-ji3qegjmz6]  .tk-column-header.frozen {
    left: auto;
    right: 0;
    box-shadow: -2px 0 4px var(--tk-grid-shadow-frozen-color, rgba(0, 0, 0, 0.08));
}
/* /Shared/DataGrid/TkGridSearch.razor.rz.scp.css */
/* ============================================================================
   TKGRIDSEARCH.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the in-grid search component.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   SEARCH PANEL
   ============================================================================ */

.tk-grid-search[b-v7k3to54dg] {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: var(--tk-grid-radius);
    box-shadow: var(--tk-grid-shadow-lg);
    padding: 12px;
    z-index: var(--tk-grid-z-toolbar);
    min-width: 320px;
}

.tk-grid-search.open[b-v7k3to54dg] {
    display: block;
    animation: tk-search-slide-in-b-v7k3to54dg 0.2s ease-out;
}

@keyframes tk-search-slide-in-b-v7k3to54dg {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   SEARCH INPUT WRAPPER
   ============================================================================ */

.tk-search-input-wrapper[b-v7k3to54dg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--tk-grid-row-bg-alt);
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius);
    transition: border-color var(--tk-grid-transition-fast), box-shadow var(--tk-grid-transition-fast);
}

.tk-search-input-wrapper:focus-within[b-v7k3to54dg] {
    border-color: var(--tk-grid-accent);
    box-shadow: 0 0 0 3px var(--tk-grid-accent-light);
}

.tk-search-input-wrapper i.bi-search[b-v7k3to54dg] {
    color: var(--tk-grid-text-muted);
    font-size: var(--tk-grid-font-size);
    flex-shrink: 0;
}

.tk-search-input-wrapper input[b-v7k3to54dg] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    min-width: 200px;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
}

.tk-search-input-wrapper input[b-v7k3to54dg]::placeholder {
    color: var(--tk-grid-text-muted);
}

/* ============================================================================
   SEARCH COUNT
   ============================================================================ */

.tk-search-count[b-v7k3to54dg] {
    color: var(--tk-grid-text-secondary);
    font-size: var(--tk-grid-font-size-sm);
    white-space: nowrap;
    padding: 2px 6px;
    background: var(--tk-grid-row-bg-alt);
    border-radius: var(--tk-grid-radius-sm);
    flex-shrink: 0;
}

/* ============================================================================
   ICON BUTTON
   ============================================================================ */

.tk-btn-icon[b-v7k3to54dg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--tk-grid-text-secondary);
    border-radius: var(--tk-grid-radius-sm);
    cursor: pointer;
    transition: background-color var(--tk-grid-transition-fast), color var(--tk-grid-transition-fast);
    flex-shrink: 0;
}

.tk-btn-icon:hover:not(:disabled)[b-v7k3to54dg] {
    background: var(--tk-grid-row-hover);
    color: var(--tk-grid-text-primary);
}

.tk-btn-icon:disabled[b-v7k3to54dg] {
    opacity: 0.4;
    cursor: not-allowed;
}

.tk-btn-icon:focus-visible[b-v7k3to54dg] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

.tk-btn-icon i[b-v7k3to54dg] {
    font-size: var(--tk-grid-font-size);
}

/* ============================================================================
   SEARCH OPTIONS
   ============================================================================ */

.tk-search-options[b-v7k3to54dg] {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--tk-grid-border-light);
}

/* ============================================================================
   CHECKBOX
   ============================================================================ */

.tk-checkbox-sm[b-v7k3to54dg] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-secondary);
    cursor: pointer;
    user-select: none;
    transition: color var(--tk-grid-transition-fast);
}

.tk-checkbox-sm:hover[b-v7k3to54dg] {
    color: var(--tk-grid-text-primary);
}

.tk-checkbox-sm input[type="checkbox"][b-v7k3to54dg] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--tk-grid-accent);
}

/* ============================================================================
   SEARCH HIGHLIGHT
   ============================================================================ */

[b-v7k3to54dg] .tk-search-highlight {
    background: var(--tk-grid-warning, #fef08a);
    color: var(--tk-grid-text-primary);
    border-radius: 2px;
    padding: 0 2px;
    box-shadow: 0 0 0 1px var(--tk-grid-warning-light, rgba(250, 204, 21, 0.4));
}

[b-v7k3to54dg] .tk-search-highlight.current {
    background: var(--tk-grid-accent);
    color: var(--primary-text-on-dark);
    box-shadow: 0 0 0 2px var(--tk-grid-accent-light);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 480px) {
    .tk-grid-search[b-v7k3to54dg] {
        min-width: auto;
        left: 8px;
        right: 8px;
    }

    .tk-search-input-wrapper input[b-v7k3to54dg] {
        min-width: 120px;
    }

    .tk-search-options[b-v7k3to54dg] {
        flex-wrap: wrap;
        gap: 8px 12px;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-grid-search.open[b-v7k3to54dg] {
        animation: none;
    }

    .tk-search-input-wrapper[b-v7k3to54dg],
    .tk-btn-icon[b-v7k3to54dg],
    .tk-checkbox-sm[b-v7k3to54dg] {
        transition: none;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-search-input-wrapper:focus-within[b-v7k3to54dg] {
        outline: 3px solid var(--tk-grid-accent);
    }

    [b-v7k3to54dg] .tk-search-highlight {
        background: Highlight;
        color: HighlightText;
    }
}
/* /Shared/DataGrid/TkGridToolbar.razor.rz.scp.css */
/* ============================================================================
   TKGRIDTOOLBAR.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the grid toolbar component.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   TOOLBAR CONTAINER
   ============================================================================ */

.tk-datagrid-toolbar[b-ui8qeuu6re] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--tk-grid-bg);
    border-bottom: 1px solid var(--tk-grid-border);
    gap: 12px;
    flex-shrink: 0;
    min-height: var(--tk-grid-toolbar-height, 48px);
}

.tk-datagrid-toolbar-left[b-ui8qeuu6re],
.tk-datagrid-toolbar-center[b-ui8qeuu6re],
.tk-datagrid-toolbar-right[b-ui8qeuu6re] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tk-datagrid-toolbar-left[b-ui8qeuu6re] {
    flex: 0 0 auto;
}

.tk-datagrid-toolbar-center[b-ui8qeuu6re] {
    flex: 1;
    justify-content: flex-start;
}

.tk-datagrid-toolbar-right[b-ui8qeuu6re] {
    flex: 0 0 auto;
}

/* ============================================================================
   TOOLBAR BUTTONS
   ============================================================================ */

.tk-datagrid-toolbar-btn[b-ui8qeuu6re] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--tk-grid-border);
    border-radius: 6px;
    color: var(--tk-grid-text-primary);
    font-size: var(--tk-grid-font-size);
    cursor: pointer;
    transition: all var(--tk-grid-transition-normal);
    white-space: nowrap;
}

.tk-datagrid-toolbar-btn:hover[b-ui8qeuu6re] {
    background: var(--tk-grid-row-hover);
    border-color: var(--tk-grid-text-muted);
}

.tk-datagrid-toolbar-btn:active[b-ui8qeuu6re] {
    background: var(--tk-grid-row-active);
}

.tk-datagrid-toolbar-btn i[b-ui8qeuu6re] {
    font-size: 14px;
    color: var(--tk-grid-text-secondary);
}

.tk-datagrid-toolbar-btn.active[b-ui8qeuu6re] {
    background: var(--tk-grid-accent-light);
    border-color: var(--tk-grid-accent);
    color: var(--tk-grid-accent);
}

.tk-datagrid-toolbar-btn.active i[b-ui8qeuu6re] {
    color: var(--tk-grid-accent);
}

/* Icon-only button */
.tk-datagrid-toolbar-btn.icon-only[b-ui8qeuu6re] {
    padding: 6px 8px;
}

.tk-datagrid-toolbar-btn.icon-only span[b-ui8qeuu6re] {
    display: none;
}

/* ============================================================================
   VIEW SELECTOR
   ============================================================================ */

.tk-datagrid-view-selector .tk-datagrid-toolbar-btn[b-ui8qeuu6re] {
    font-weight: 500;
}

.tk-datagrid-view-selector .bi-chevron-down[b-ui8qeuu6re] {
    font-size: 10px;
    margin-left: 2px;
}

/* ============================================================================
   SEARCH BOX
   ============================================================================ */

.tk-datagrid-search-box[b-ui8qeuu6re] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: 6px;
    min-width: 200px;
    transition: border-color var(--tk-grid-transition-normal),
                box-shadow var(--tk-grid-transition-normal);
}

.tk-datagrid-search-box:focus-within[b-ui8qeuu6re] {
    border-color: var(--tk-grid-accent);
    box-shadow: 0 0 0 2px var(--tk-grid-accent-light);
}

.tk-datagrid-search-box i[b-ui8qeuu6re] {
    color: var(--tk-grid-text-muted);
    font-size: 14px;
}

.tk-datagrid-search-box input[b-ui8qeuu6re] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--tk-grid-text-primary);
    font-size: var(--tk-grid-font-size);
}

.tk-datagrid-search-box input[b-ui8qeuu6re]::placeholder {
    color: var(--tk-grid-text-placeholder);
}

.tk-datagrid-search-clear[b-ui8qeuu6re] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: var(--tk-grid-bg-alt);
    border: none;
    border-radius: 50%;
    color: var(--tk-grid-text-secondary);
    cursor: pointer;
    transition: all var(--tk-grid-transition-normal);
}

.tk-datagrid-search-clear:hover[b-ui8qeuu6re] {
    background: var(--tk-grid-border);
    color: var(--tk-grid-text-primary);
}

/* ============================================================================
   FILTER/SORT INDICATORS
   ============================================================================ */

.tk-toolbar-badge[b-ui8qeuu6re] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 600;
    background: var(--tk-grid-accent);
    color: var(--primary-text-on-dark);
    border-radius: 9px;
    margin-left: 4px;
}

/* ============================================================================
   DROPDOWN ANCHOR (wraps button + floating panel)
   ============================================================================ */

.tk-toolbar-dropdown-anchor[b-ui8qeuu6re] {
    position: relative;
    display: inline-flex;
}

/* ============================================================================
   TOOLBAR DROPDOWN
   ============================================================================ */

.tk-toolbar-dropdown[b-ui8qeuu6re] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 200px;
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: 6px;
    box-shadow: var(--tk-grid-shadow-dropdown);
    z-index: var(--tk-grid-z-dropdown);
    animation: tk-grid-slideDown var(--tk-grid-transition-normal);
}

.tk-toolbar-dropdown-item[b-ui8qeuu6re] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    cursor: pointer;
    transition: background-color var(--tk-grid-transition-fast);
}

.tk-toolbar-dropdown-item:hover[b-ui8qeuu6re] {
    background: var(--tk-grid-row-hover);
}

.tk-toolbar-dropdown-item i[b-ui8qeuu6re] {
    width: 16px;
    color: var(--tk-grid-text-muted);
}

.tk-toolbar-dropdown-item.selected[b-ui8qeuu6re] {
    background: var(--tk-grid-accent-light);
}

.tk-toolbar-dropdown-item.selected i[b-ui8qeuu6re] {
    color: var(--tk-grid-accent);
}

.tk-toolbar-dropdown-divider[b-ui8qeuu6re] {
    height: 1px;
    background: var(--tk-grid-border);
    margin: 4px 0;
}

.tk-toolbar-dropdown-item.disabled[b-ui8qeuu6re] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.tk-toolbar-dropdown-item .tk-vt-check[b-ui8qeuu6re] {
    margin-left: auto;
    color: var(--tk-grid-accent);
    font-size: 14px;
}

.tk-toolbar-dropdown-item .tk-vt-soon[b-ui8qeuu6re] {
    margin-left: auto;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tk-grid-text-muted);
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--tk-grid-bg-alt);
}

/* ============================================================================
   TOOLBAR SEPARATOR
   ============================================================================ */

.tk-toolbar-separator[b-ui8qeuu6re] {
    width: 1px;
    height: 24px;
    background: var(--tk-grid-border);
    margin: 0 4px;
}

/* ============================================================================
   PAGINATION CONTROLS
   ============================================================================ */

.tk-pagination[b-ui8qeuu6re] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-secondary);
}

.tk-pagination-info[b-ui8qeuu6re] {
    font-variant-numeric: tabular-nums;
}

.tk-pagination-btn[b-ui8qeuu6re] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--tk-grid-border);
    border-radius: 4px;
    background: transparent;
    color: var(--tk-grid-text-secondary);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-pagination-btn:hover:not(:disabled)[b-ui8qeuu6re] {
    background: var(--tk-grid-row-hover);
    border-color: var(--tk-grid-text-muted);
    color: var(--tk-grid-text-primary);
}

.tk-pagination-btn:disabled[b-ui8qeuu6re] {
    opacity: 0.4;
    cursor: not-allowed;
}

.tk-pagination-select[b-ui8qeuu6re] {
    padding: 4px 8px;
    border: 1px solid var(--tk-grid-border);
    border-radius: 4px;
    background: var(--tk-grid-bg);
    color: var(--tk-grid-text-primary);
    font-size: var(--tk-grid-font-size-sm);
    cursor: pointer;
}

.tk-pagination-select:focus[b-ui8qeuu6re] {
    outline: none;
    border-color: var(--tk-grid-accent);
}

/* ============================================================================
   SELECTION INFO
   ============================================================================ */

.tk-selection-info[b-ui8qeuu6re] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: var(--tk-grid-accent-light);
    border-radius: 4px;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-accent);
}

.tk-selection-info strong[b-ui8qeuu6re] {
    font-weight: 600;
}

.tk-selection-clear[b-ui8qeuu6re] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--tk-grid-accent);
    cursor: pointer;
    transition: background-color var(--tk-grid-transition-fast);
}

.tk-selection-clear:hover[b-ui8qeuu6re] {
    background: var(--tk-grid-border-light);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .tk-datagrid-toolbar[b-ui8qeuu6re] {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px;
    }

    .tk-datagrid-toolbar-btn span[b-ui8qeuu6re] {
        display: none;
    }

    .tk-datagrid-toolbar-btn[b-ui8qeuu6re] {
        padding: 6px 8px;
    }

    .tk-datagrid-search-box[b-ui8qeuu6re] {
        min-width: 150px;
        flex: 1;
    }

    .tk-toolbar-separator[b-ui8qeuu6re] {
        display: none;
    }

    .tk-pagination-info[b-ui8qeuu6re] {
        display: none;
    }
}

@media (max-width: 480px) {
    .tk-datagrid-toolbar-center[b-ui8qeuu6re] {
        order: 3;
        flex-basis: 100%;
    }

    .tk-datagrid-search-box[b-ui8qeuu6re] {
        width: 100%;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-datagrid-toolbar-btn:focus-visible[b-ui8qeuu6re] {
        outline: 3px solid var(--tk-grid-accent);
        outline-offset: -3px;
    }

    .tk-datagrid-search-box:focus-within[b-ui8qeuu6re] {
        outline: 3px solid var(--tk-grid-accent);
        outline-offset: -3px;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-datagrid-toolbar-btn[b-ui8qeuu6re],
    .tk-datagrid-search-box[b-ui8qeuu6re],
    .tk-datagrid-search-clear[b-ui8qeuu6re],
    .tk-toolbar-dropdown[b-ui8qeuu6re],
    .tk-pagination-btn[b-ui8qeuu6re] {
        transition: none !important;
        animation: none !important;
    }
}
/* /Shared/DataGrid/TkGroupBuilder.razor.rz.scp.css */
/* ============================================================================
   TKGROUPBUILDER.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the TkGroupBuilder component.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   CONTAINER
   ============================================================================ */

.tk-group-builder[b-f0huwv7bsb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background-color: var(--tk-grid-bg);
    border-radius: var(--tk-grid-radius);
    border: 1px solid var(--tk-grid-border);
    min-width: 450px;
    font-family: var(--tk-grid-font-family, system-ui, -apple-system, sans-serif);
    font-size: var(--tk-grid-font-size);
}

.tk-group-builder--compact[b-f0huwv7bsb] {
    padding: 12px;
    gap: 8px;
    min-width: 350px;
}

/* ============================================================================
   HEADER
   ============================================================================ */

.tk-group-header[b-f0huwv7bsb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tk-grid-border-light);
    flex-wrap: wrap;
    gap: 8px;
}

.tk-group-title[b-f0huwv7bsb] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--tk-grid-text-primary);
}

.tk-group-title i[b-f0huwv7bsb] {
    font-size: 16px;
    color: var(--tk-grid-accent);
}

.tk-group-actions[b-f0huwv7bsb] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================================
   GROUP LEVELS
   ============================================================================ */

.tk-group-levels[b-f0huwv7bsb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tk-group-level[b-f0huwv7bsb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--tk-grid-row-bg-alt);
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius);
    transition: all var(--tk-grid-transition-fast);
    position: relative;
}

.tk-group-level:hover[b-f0huwv7bsb] {
    border-color: var(--tk-grid-border);
    background-color: var(--tk-grid-row-hover);
}

/* Visual hierarchy indicator */
.tk-group-level[b-f0huwv7bsb]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--tk-grid-accent);
    border-radius: var(--tk-grid-radius) 0 0 var(--tk-grid-radius);
    opacity: calc(1 - var(--level, 0) * 0.25);
}

/* ============================================================================
   LEVEL INDICATOR
   ============================================================================ */

.tk-group-level-indicator[b-f0huwv7bsb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: var(--tk-grid-accent-light);
    color: var(--tk-grid-accent);
    border-radius: var(--tk-grid-radius-sm);
    font-size: var(--tk-grid-font-size-sm);
}

/* ============================================================================
   ORDER LABEL
   ============================================================================ */

.tk-group-order-label[b-f0huwv7bsb] {
    min-width: 65px;
    color: var(--tk-grid-text-secondary);
    font-size: var(--tk-grid-font-size);
    white-space: nowrap;
}

/* ============================================================================
   SELECTS
   ============================================================================ */

.tk-select[b-f0huwv7bsb] {
    padding: 6px 10px;
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius-sm);
    background-color: var(--tk-grid-bg);
    color: var(--tk-grid-text-primary);
    font-size: var(--tk-grid-font-size);
    cursor: pointer;
    transition: border-color var(--tk-grid-transition-fast), box-shadow var(--tk-grid-transition-fast);
}

.tk-select:hover[b-f0huwv7bsb] {
    border-color: var(--tk-grid-border);
}

.tk-select:focus[b-f0huwv7bsb] {
    outline: none;
    border-color: var(--tk-grid-accent);
    box-shadow: 0 0 0 3px var(--tk-grid-accent-light);
}

.tk-select--field[b-f0huwv7bsb] {
    flex: 1;
    min-width: 120px;
}

.tk-select--direction[b-f0huwv7bsb] {
    min-width: 100px;
}

.tk-select option:disabled[b-f0huwv7bsb] {
    color: var(--tk-grid-text-muted);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.tk-btn-text[b-f0huwv7bsb] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: none;
    border: none;
    color: var(--tk-grid-accent);
    font-size: var(--tk-grid-font-size-sm);
    cursor: pointer;
    border-radius: var(--tk-grid-radius-sm);
    transition: background-color var(--tk-grid-transition-fast), color var(--tk-grid-transition-fast);
}

.tk-btn-text:hover[b-f0huwv7bsb] {
    background-color: var(--tk-grid-accent-light);
}

.tk-btn-text:focus-visible[b-f0huwv7bsb] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

.tk-btn-text--danger[b-f0huwv7bsb] {
    color: var(--tk-grid-danger);
}

.tk-btn-text--danger:hover[b-f0huwv7bsb] {
    background-color: var(--tk-grid-danger-bg);
}

.tk-btn-icon[b-f0huwv7bsb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--tk-grid-radius-sm);
    color: var(--tk-grid-text-muted);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-btn-icon:hover[b-f0huwv7bsb] {
    background-color: var(--tk-grid-row-hover);
    color: var(--tk-grid-text-secondary);
    border-color: var(--tk-grid-border-light);
}

.tk-btn-icon:focus-visible[b-f0huwv7bsb] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

.tk-btn-icon--active[b-f0huwv7bsb] {
    color: var(--tk-grid-accent);
    background-color: var(--tk-grid-accent-light);
}

.tk-btn-icon--danger:hover[b-f0huwv7bsb] {
    background-color: var(--tk-grid-danger-bg);
    color: var(--tk-grid-danger);
    border-color: var(--tk-grid-danger);
}

.tk-btn-secondary[b-f0huwv7bsb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background-color: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius);
    color: var(--tk-grid-text-primary);
    font-size: var(--tk-grid-font-size);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-btn-secondary:hover[b-f0huwv7bsb] {
    background-color: var(--tk-grid-row-hover);
    border-color: var(--tk-grid-border);
}

.tk-btn-secondary:focus-visible[b-f0huwv7bsb] {
    outline: none;
    border-color: var(--tk-grid-accent);
    box-shadow: 0 0 0 3px var(--tk-grid-accent-light);
}

.tk-btn-sm[b-f0huwv7bsb] {
    padding: 6px 10px;
    font-size: var(--tk-grid-font-size);
}

/* ============================================================================
   EMPTY STATE & LIMIT MESSAGE
   ============================================================================ */

.tk-group-empty[b-f0huwv7bsb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: var(--tk-grid-text-muted);
    font-size: var(--tk-grid-font-size);
    font-style: italic;
}

.tk-group-limit-message[b-f0huwv7bsb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    color: var(--tk-grid-text-muted);
    font-size: var(--tk-grid-font-size-sm);
    background-color: var(--tk-grid-warning-light, rgba(245, 158, 11, 0.1));
    border-radius: var(--tk-grid-radius-sm);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 550px) {
    .tk-group-builder[b-f0huwv7bsb] {
        min-width: 280px;
    }

    .tk-group-header[b-f0huwv7bsb] {
        flex-direction: column;
        align-items: flex-start;
    }

    .tk-group-actions[b-f0huwv7bsb] {
        width: 100%;
        justify-content: flex-end;
    }

    .tk-group-level[b-f0huwv7bsb] {
        flex-wrap: wrap;
    }

    .tk-group-order-label[b-f0huwv7bsb] {
        display: none;
    }

    .tk-select--field[b-f0huwv7bsb] {
        min-width: 100%;
        order: 1;
    }

    .tk-select--direction[b-f0huwv7bsb] {
        flex: 1;
        order: 2;
    }

    .tk-group-level-indicator[b-f0huwv7bsb] {
        order: 0;
    }

    .tk-btn-icon[b-f0huwv7bsb] {
        order: 3;
    }
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes tk-group-fade-in-b-f0huwv7bsb {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tk-group-level[b-f0huwv7bsb] {
    animation: tk-group-fade-in-b-f0huwv7bsb 0.2s ease;
}

/* ============================================================================
   NESTING VISUALIZATION
   ============================================================================ */

/* Create visual indentation for nested groups */
.tk-group-level[style*="--level: 1"][b-f0huwv7bsb] {
    margin-left: 20px;
}

.tk-group-level[style*="--level: 2"][b-f0huwv7bsb] {
    margin-left: 40px;
}

/* Color coding for different levels */
.tk-group-level[style*="--level: 0"] .tk-group-level-indicator[b-f0huwv7bsb] {
    background-color: var(--tk-grid-accent-light);
    color: var(--tk-grid-accent);
}

.tk-group-level[style*="--level: 1"] .tk-group-level-indicator[b-f0huwv7bsb] {
    background-color: var(--tk-grid-accent-light);
    color: var(--tk-grid-accent);
}

.tk-group-level[style*="--level: 2"] .tk-group-level-indicator[b-f0huwv7bsb] {
    background-color: var(--tk-grid-accent-light);
    color: var(--tk-grid-accent);
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-group-level[b-f0huwv7bsb] {
        animation: none;
        transition: none;
    }

    .tk-btn-text[b-f0huwv7bsb],
    .tk-btn-icon[b-f0huwv7bsb],
    .tk-btn-secondary[b-f0huwv7bsb],
    .tk-select[b-f0huwv7bsb] {
        transition: none;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-group-level[b-f0huwv7bsb] {
        border-width: 2px;
    }

    .tk-select:focus[b-f0huwv7bsb],
    .tk-btn-secondary:focus-visible[b-f0huwv7bsb] {
        outline: 3px solid var(--tk-grid-accent);
    }
}
/* /Shared/DataGrid/TkGroupRow.razor.rz.scp.css */
/* ============================================================================
   TKGROUPROW.RAZOR.CSS
   ============================================================================
   Purpose: Isolated styles for the TkGroupRow component.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   BASE GROUP ROW LAYOUT
   ============================================================================ */

.tk-group-row[b-gszwzmnyie] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--tk-grid-bg-alt);
    border-bottom: 1px solid var(--tk-grid-border);
    cursor: pointer;
    font-weight: 500;
    transition: background-color var(--tk-grid-transition-normal);
    min-width: fit-content;
    user-select: none;
    height: var(--tk-grid-row-height, 40px);
}

.tk-group-row:hover[b-gszwzmnyie] {
    background: var(--tk-grid-row-hover);
}

.tk-group-row.collapsed[b-gszwzmnyie] {
    border-bottom-style: dashed;
}

/* ============================================================================
   GROUP TOGGLE
   ============================================================================ */

.tk-group-toggle[b-gszwzmnyie] {
    width: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tk-grid-text-secondary);
    transition: color var(--tk-grid-transition-normal);
}

.tk-group-row:hover .tk-group-toggle[b-gszwzmnyie] {
    color: var(--tk-grid-accent);
}

.tk-group-toggle i[b-gszwzmnyie] {
    font-size: 12px;
    transition: transform var(--tk-grid-transition-normal);
}

.tk-group-row.collapsed .tk-group-toggle i[b-gszwzmnyie] {
    transform: rotate(-90deg);
}

/* ============================================================================
   GROUP LABEL
   ============================================================================ */

.tk-group-label[b-gszwzmnyie] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    margin-left: 4px;
}

.tk-group-empty[b-gszwzmnyie] {
    color: var(--tk-grid-text-muted);
    font-style: italic;
    font-weight: 400;
}

/* ============================================================================
   GROUP COUNT
   ============================================================================ */

.tk-group-count[b-gszwzmnyie] {
    color: var(--tk-grid-text-secondary);
    margin-left: 8px;
    font-size: var(--tk-grid-font-size-sm);
    font-weight: 400;
}

/* ============================================================================
   GROUP AGGREGATES
   ============================================================================ */

.tk-group-aggregates[b-gszwzmnyie] {
    display: flex;
    gap: 16px;
    margin-left: 16px;
    color: var(--tk-grid-text-secondary);
    font-size: var(--tk-grid-font-size-sm);
    font-weight: 400;
}

.tk-aggregate[b-gszwzmnyie] {
    display: flex;
    gap: 4px;
}

.tk-aggregate-label[b-gszwzmnyie] {
    color: var(--tk-grid-text-muted);
}

.tk-aggregate-value[b-gszwzmnyie] {
    color: var(--tk-grid-text-primary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   GROUP ACTIONS
   ============================================================================ */

.tk-group-actions[b-gszwzmnyie] {
    display: flex;
    gap: 4px;
    margin-left: 12px;
    opacity: 0;
    transition: opacity var(--tk-grid-transition-normal);
}

.tk-group-row:hover .tk-group-actions[b-gszwzmnyie] {
    opacity: 1;
}

/* ============================================================================
   COMPONENT VARIABLES
   ============================================================================ */

[b-gszwzmnyie] {
    --tkgroup-indent-size: 24px;
    --tkgroup-icon-size: 0.75rem;
}

/* ============================================================================
   ROW FILLER — matches TkGridBody filler for consistent width
   ============================================================================ */

.tk-row-filler[b-gszwzmnyie] {
    flex: 1;
    min-width: 0;
}

/* ============================================================================
   NESTED GROUP INDENTATION
   ============================================================================ */

.tk-group-row[data-level="1"][b-gszwzmnyie] {
    padding-left: calc(12px + var(--tkgroup-indent-size));
}

.tk-group-row[data-level="2"][b-gszwzmnyie] {
    padding-left: calc(12px + var(--tkgroup-indent-size) * 2);
}

.tk-group-row[data-level="3"][b-gszwzmnyie] {
    padding-left: calc(12px + var(--tkgroup-indent-size) * 3);
}

/* ============================================================================
   FOCUS STATE
   ============================================================================ */

.tk-group-row:focus[b-gszwzmnyie] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: -2px;
}

.tk-group-row:focus:not(:focus-visible)[b-gszwzmnyie] {
    outline: none;
}

/* ============================================================================
   DRAG HANDLE
   ============================================================================ */

.tk-group-drag-handle[b-gszwzmnyie] {
    width: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    opacity: 0;
    color: var(--tk-grid-text-muted);
    margin-right: 4px;
    transition: opacity var(--tk-grid-transition-fast);
}

.tk-group-row:hover .tk-group-drag-handle[b-gszwzmnyie] {
    opacity: 0.6;
}

.tk-group-drag-handle:hover[b-gszwzmnyie] {
    opacity: 1 !important;
}

.tk-group-drag-handle:active[b-gszwzmnyie] {
    cursor: grabbing;
}

/* ============================================================================
   SELECTION INDICATOR
   ============================================================================ */

.tk-group-row.selected[b-gszwzmnyie]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--tk-grid-accent);
}

/* ============================================================================
   LOADING STATE
   ============================================================================ */

.tk-group-row.loading .tk-group-toggle i[b-gszwzmnyie] {
    animation: tk-group-spin-b-gszwzmnyie 1s linear infinite;
}

@keyframes tk-group-spin-b-gszwzmnyie {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================================
   EMPTY GROUP
   ============================================================================ */

.tk-group-row.empty[b-gszwzmnyie] {
    opacity: 0.7;
}

.tk-group-row.empty .tk-group-count[b-gszwzmnyie] {
    font-style: italic;
}

/* ============================================================================
   COLOR INDICATOR
   ============================================================================ */

.tk-group-color-indicator[b-gszwzmnyie] {
    width: 12px;
    height: 12px;
    border-radius: var(--tk-grid-radius-sm);
    margin-right: 8px;
    flex-shrink: 0;
}

/* ============================================================================
   STICKY GROUP HEADERS
   ============================================================================ */

.tk-group-row.sticky[b-gszwzmnyie] {
    position: sticky;
    top: 0;
    z-index: var(--tk-grid-z-frozen);
    box-shadow: var(--tk-grid-shadow-sm);
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .tk-group-row[b-gszwzmnyie] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .tk-group-actions[b-gszwzmnyie] {
        display: none;
    }

    .tk-group-row.collapsed[b-gszwzmnyie] {
        display: none;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-group-row.loading .tk-group-toggle i[b-gszwzmnyie] {
        animation: none;
    }

    .tk-group-drag-handle[b-gszwzmnyie] {
        transition: none;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-group-row:focus[b-gszwzmnyie] {
        outline-width: 3px;
    }

    .tk-group-row.selected[b-gszwzmnyie]::before {
        width: 4px;
    }
}
/* /Shared/DataGrid/TkImportModal.razor.rz.scp.css */
/* ============================================================================
   TKIMPORTMODAL.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the CSV import modal dialog.
   Uses CSS custom properties from tk-datagrid-themes.css for theming.
   ============================================================================ */

/* ============================================================================
   MODAL OVERLAY (shared with export modal pattern)
   ============================================================================ */

.tk-modal-overlay[b-wucwlacd3g] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tk-grid-overlay-bg);
    backdrop-filter: blur(2px);
    z-index: var(--tk-grid-z-modal);
    animation: tk-import-fade-in-b-wucwlacd3g 0.15s ease;
}

@keyframes tk-import-fade-in-b-wucwlacd3g {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================================================
   MODAL CONTAINER
   ============================================================================ */

.tk-import-modal[b-wucwlacd3g] {
    background: var(--tk-grid-bg);
    border-radius: var(--tk-grid-radius-lg, 12px);
    box-shadow: var(--tk-grid-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: tk-import-slide-in-b-wucwlacd3g 0.2s ease;
}

@keyframes tk-import-slide-in-b-wucwlacd3g {
    from { opacity: 0; transform: scale(0.95) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================================
   HEADER / FOOTER (reuse export modal pattern)
   ============================================================================ */

.tk-modal-header[b-wucwlacd3g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tk-grid-border-light);
    background: var(--tk-grid-row-bg-alt);
}

.tk-modal-header h3[b-wucwlacd3g] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--tk-grid-text-primary);
}

.tk-modal-header h3 i[b-wucwlacd3g] {
    font-size: 18px;
    color: var(--tk-grid-accent);
}

.tk-modal-body[b-wucwlacd3g] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.tk-modal-footer[b-wucwlacd3g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-top: 1px solid var(--tk-grid-border-light);
    background: var(--tk-grid-row-bg-alt);
}

.tk-modal-actions[b-wucwlacd3g] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tk-import-summary[b-wucwlacd3g] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-secondary);
}

.tk-import-summary i[b-wucwlacd3g] {
    font-size: 14px;
}

/* ============================================================================
   SECTIONS
   ============================================================================ */

.tk-import-section[b-wucwlacd3g] {
    margin-bottom: 20px;
}

.tk-import-section:last-child[b-wucwlacd3g] {
    margin-bottom: 0;
}

.tk-import-label[b-wucwlacd3g] {
    display: block;
    font-size: var(--tk-grid-font-size);
    font-weight: 600;
    color: var(--tk-grid-text-primary);
    margin-bottom: 8px;
}

.tk-import-label-row[b-wucwlacd3g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.tk-import-label-row .tk-import-label[b-wucwlacd3g] {
    margin-bottom: 0;
}

.tk-import-label-hint[b-wucwlacd3g] {
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-muted);
}

/* ============================================================================
   FILE UPLOAD AREA
   ============================================================================ */

.tk-import-file-area[b-wucwlacd3g] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 20px;
    border: 2px dashed var(--tk-grid-border);
    border-radius: var(--tk-grid-radius);
    background: var(--tk-grid-row-bg-alt);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
    text-align: center;
}

.tk-import-file-area:hover[b-wucwlacd3g] {
    border-color: var(--tk-grid-accent);
    background: var(--tk-grid-accent-light);
}

.tk-import-file-area.drag-over[b-wucwlacd3g] {
    border-color: var(--tk-grid-accent);
    background: var(--tk-grid-accent-light);
    box-shadow: 0 0 0 3px var(--tk-grid-accent-light);
}

.tk-import-file-area > i[b-wucwlacd3g] {
    font-size: 32px;
    color: var(--tk-grid-text-muted);
}

.tk-import-file-area > p[b-wucwlacd3g] {
    margin: 0;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-secondary);
}

.tk-import-file-input[b-wucwlacd3g] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* File info display */
.tk-import-file-info[b-wucwlacd3g] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0;
}

.tk-import-file-info > i[b-wucwlacd3g] {
    font-size: 28px;
    color: var(--tk-grid-accent);
}

.tk-import-file-info > div[b-wucwlacd3g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tk-import-file-name[b-wucwlacd3g] {
    font-size: var(--tk-grid-font-size);
    font-weight: 600;
    color: var(--tk-grid-text-primary);
}

.tk-import-file-size[b-wucwlacd3g] {
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-muted);
}

/* ============================================================================
   PARSE ERRORS
   ============================================================================ */

.tk-import-parse-errors[b-wucwlacd3g] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--tk-grid-radius);
    color: #ef4444;
    font-size: var(--tk-grid-font-size-sm);
}

.tk-import-parse-errors i[b-wucwlacd3g] {
    margin-top: 1px;
}

.tk-import-parse-errors span[b-wucwlacd3g] {
    display: block;
}

/* ============================================================================
   TABLE NAME INPUT
   ============================================================================ */

.tk-import-input[b-wucwlacd3g] {
    width: 100%;
    padding: 10px 12px;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius);
    transition: border-color var(--tk-grid-transition-fast);
}

.tk-import-input:focus[b-wucwlacd3g] {
    outline: none;
    border-color: var(--tk-grid-accent);
    box-shadow: 0 0 0 3px var(--tk-grid-accent-light);
}

.tk-import-validation-error[b-wucwlacd3g] {
    display: block;
    margin-top: 4px;
    font-size: var(--tk-grid-font-size-sm);
    color: #ef4444;
}

/* ============================================================================
   COLUMN MAPPING TABLE
   ============================================================================ */

.tk-import-mapping-table[b-wucwlacd3g] {
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius);
    overflow: hidden;
    max-height: 260px;
    overflow-y: auto;
}

.tk-import-mapping-header[b-wucwlacd3g] {
    display: grid;
    grid-template-columns: 1fr 100px 1fr 50px;
    gap: 8px;
    padding: 8px 12px;
    background: var(--tk-grid-row-bg-alt);
    border-bottom: 1px solid var(--tk-grid-border-light);
    font-size: var(--tk-grid-font-size-sm);
    font-weight: 600;
    color: var(--tk-grid-text-secondary);
}

.tk-import-mapping-row[b-wucwlacd3g] {
    display: grid;
    grid-template-columns: 1fr 100px 1fr 50px;
    gap: 8px;
    align-items: center;
    padding: 6px 12px;
    border-bottom: 1px solid var(--tk-grid-border-light);
    font-size: var(--tk-grid-font-size);
}

.tk-import-mapping-row:last-child[b-wucwlacd3g] {
    border-bottom: none;
}

.tk-import-csv-col[b-wucwlacd3g] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tk-grid-text-primary);
    font-weight: 500;
}

.tk-import-auto-map[b-wucwlacd3g] {
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-muted);
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-import-field-select[b-wucwlacd3g] {
    width: 100%;
    padding: 4px 6px;
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border-light);
    border-radius: 4px;
}

.tk-import-checkbox[b-wucwlacd3g] {
    display: flex;
    justify-content: center;
}

.tk-import-checkbox input[type="checkbox"][b-wucwlacd3g] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--tk-grid-accent);
}

/* ============================================================================
   TYPE BADGES
   ============================================================================ */

.tk-import-type-badge[b-wucwlacd3g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.type-text[b-wucwlacd3g] {
    background: rgba(100, 116, 139, 0.12);
    color: #64748b;
}

.type-numeric[b-wucwlacd3g] {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.type-date[b-wucwlacd3g] {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
}

.type-boolean[b-wucwlacd3g] {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.type-email[b-wucwlacd3g] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.type-phone[b-wucwlacd3g] {
    background: rgba(6, 182, 212, 0.12);
    color: #06b6d4;
}

.type-link[b-wucwlacd3g] {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

/* ============================================================================
   PREVIEW TABLE
   ============================================================================ */

.tk-import-preview-wrapper[b-wucwlacd3g] {
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius);
    overflow: auto;
    max-height: 200px;
}

.tk-import-preview-table[b-wucwlacd3g] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tk-grid-font-size-sm);
}

.tk-import-preview-table th[b-wucwlacd3g] {
    position: sticky;
    top: 0;
    padding: 6px 10px;
    background: var(--tk-grid-row-bg-alt);
    border-bottom: 1px solid var(--tk-grid-border-light);
    font-weight: 600;
    color: var(--tk-grid-text-secondary);
    text-align: left;
    white-space: nowrap;
}

.tk-import-preview-table td[b-wucwlacd3g] {
    padding: 5px 10px;
    border-bottom: 1px solid var(--tk-grid-border-light);
    color: var(--tk-grid-text-primary);
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tk-import-preview-table tbody tr:hover[b-wucwlacd3g] {
    background: var(--tk-grid-row-hover);
}

/* ============================================================================
   VALIDATION WARNINGS
   ============================================================================ */

.tk-import-warnings[b-wucwlacd3g] {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--tk-grid-radius);
    color: #f59e0b;
    font-size: var(--tk-grid-font-size-sm);
}

.tk-import-warnings > i[b-wucwlacd3g] {
    margin-top: 1px;
    flex-shrink: 0;
}

.tk-import-warnings span[b-wucwlacd3g] {
    display: block;
}

/* ============================================================================
   IMPORT PROGRESS
   ============================================================================ */

.tk-import-progress[b-wucwlacd3g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 20px;
}

.tk-import-spinner[b-wucwlacd3g] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--tk-grid-border-light);
    border-top-color: var(--tk-grid-accent);
    border-radius: 50%;
    animation: tk-import-spin-b-wucwlacd3g 0.8s linear infinite;
}

@keyframes tk-import-spin-b-wucwlacd3g {
    to { transform: rotate(360deg); }
}

.tk-import-progress p[b-wucwlacd3g] {
    margin: 0;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
}

.tk-import-progress-bar[b-wucwlacd3g] {
    width: 100%;
    max-width: 300px;
    height: 6px;
    background: var(--tk-grid-border-light);
    border-radius: 3px;
    overflow: hidden;
}

.tk-import-progress-fill[b-wucwlacd3g] {
    height: 100%;
    background: var(--tk-grid-accent);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.tk-import-progress-text[b-wucwlacd3g] {
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-muted);
}

/* ============================================================================
   IMPORT SUCCESS
   ============================================================================ */

.tk-import-success[b-wucwlacd3g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
}

.tk-import-success > i[b-wucwlacd3g] {
    font-size: 48px;
    color: #22c55e;
}

.tk-import-success h4[b-wucwlacd3g] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--tk-grid-text-primary);
}

.tk-import-success p[b-wucwlacd3g] {
    margin: 0;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-secondary);
}

/* ============================================================================
   BUTTONS (shared with export modal)
   ============================================================================ */

.tk-btn-primary[b-wucwlacd3g] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    color: var(--primary-text-on-dark);
    background: var(--tk-grid-accent);
    border: none;
    border-radius: var(--tk-grid-radius);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-btn-primary:hover:not(:disabled)[b-wucwlacd3g] {
    background: var(--tk-grid-accent-hover, #2563eb);
}

.tk-btn-primary:disabled[b-wucwlacd3g] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tk-btn-secondary[b-wucwlacd3g] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: var(--tk-grid-radius);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-btn-secondary:hover:not(:disabled)[b-wucwlacd3g] {
    background: var(--tk-grid-row-bg-alt);
}

.tk-btn-secondary:disabled[b-wucwlacd3g] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tk-btn-icon[b-wucwlacd3g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--tk-grid-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--tk-grid-radius);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-btn-icon:hover:not(:disabled)[b-wucwlacd3g] {
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-row-hover);
}

.tk-btn-icon:disabled[b-wucwlacd3g] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tk-btn-icon i[b-wucwlacd3g] {
    font-size: 16px;
}

/* ============================================================================
   MODE TOGGLE
   ============================================================================ */

.tk-import-mode-toggle[b-wucwlacd3g] {
    display: flex;
    gap: 0;
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius);
    overflow: hidden;
}

.tk-import-mode-btn[b-wucwlacd3g] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    color: var(--tk-grid-text-secondary);
    background: var(--tk-grid-bg);
    border: none;
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-import-mode-btn:not(:last-child)[b-wucwlacd3g] {
    border-right: 1px solid var(--tk-grid-border-light);
}

.tk-import-mode-btn:hover:not(:disabled):not(.active)[b-wucwlacd3g] {
    background: var(--tk-grid-row-bg-alt);
    color: var(--tk-grid-text-primary);
}

.tk-import-mode-btn.active[b-wucwlacd3g] {
    background: var(--tk-grid-accent);
    color: var(--primary-text-on-dark);
    font-weight: 600;
}

.tk-import-mode-btn:disabled[b-wucwlacd3g] {
    opacity: 0.45;
    cursor: not-allowed;
}

.tk-import-mode-btn i[b-wucwlacd3g] {
    font-size: 14px;
}

/* ============================================================================
   NEW TABLE MODE — 5-COLUMN MAPPING GRID
   ============================================================================ */

.tk-import-mapping-header--new[b-wucwlacd3g] {
    grid-template-columns: 1fr 100px 1fr 1fr 50px;
}

.tk-import-mapping-row--new[b-wucwlacd3g] {
    grid-template-columns: 1fr 100px 1fr 1fr 50px;
}

.tk-import-type-select[b-wucwlacd3g] {
    width: 100%;
    padding: 4px 6px;
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border-light);
    border-radius: 4px;
}

.tk-import-field-name-input[b-wucwlacd3g] {
    width: 100%;
    padding: 4px 6px;
    font-size: var(--tk-grid-font-size-sm);
    font-family: monospace;
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border-light);
    border-radius: 4px;
    transition: border-color var(--tk-grid-transition-fast);
}

.tk-import-field-name-input:focus[b-wucwlacd3g] {
    outline: none;
    border-color: var(--tk-grid-accent);
    box-shadow: 0 0 0 2px var(--tk-grid-accent-light);
}

.tk-import-sample-values[b-wucwlacd3g] {
    font-size: 11px;
    color: var(--tk-grid-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================================
   EXISTING TABLE MODE — UNMATCHED ROW HIGHLIGHT
   ============================================================================ */

.tk-import-mapping-row--unmatched[b-wucwlacd3g] {
    background: rgba(245, 158, 11, 0.06);
}

.tk-import-field-select--unmatched[b-wucwlacd3g] {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

/* ============================================================================
   EXISTING TABLE MODE — CREATE NEW FIELD ROW
   ============================================================================ */

.tk-import-mapping-row--create[b-wucwlacd3g] {
    background: rgba(34, 197, 94, 0.06);
    border-left: 3px solid #22c55e;
}

.tk-import-field-select--create[b-wucwlacd3g] {
    border-color: #22c55e;
}

.tk-import-maps-to-cell[b-wucwlacd3g] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tk-import-new-field-row[b-wucwlacd3g] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tk-import-new-badge[b-wucwlacd3g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    background: #22c55e;
    white-space: nowrap;
    flex-shrink: 0;
}

.tk-import-new-field-row .tk-import-field-name-input[b-wucwlacd3g] {
    flex: 1;
    min-width: 0;
}

.tk-import-new-field-row .tk-import-type-select[b-wucwlacd3g] {
    width: auto;
    flex-shrink: 0;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 640px) {
    .tk-import-modal[b-wucwlacd3g] {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .tk-import-mapping-header[b-wucwlacd3g],
    .tk-import-mapping-row[b-wucwlacd3g] {
        grid-template-columns: 1fr 80px 1fr 40px;
        gap: 4px;
        font-size: 12px;
    }

    .tk-import-mapping-header--new[b-wucwlacd3g],
    .tk-import-mapping-row--new[b-wucwlacd3g] {
        grid-template-columns: 1fr 80px 1fr 80px 40px;
    }

    .tk-import-mode-toggle[b-wucwlacd3g] {
        flex-direction: column;
    }

    .tk-import-mode-btn:not(:last-child)[b-wucwlacd3g] {
        border-right: none;
        border-bottom: 1px solid var(--tk-grid-border-light);
    }

    .tk-modal-footer[b-wucwlacd3g] {
        flex-direction: column;
        gap: 12px;
    }

    .tk-modal-actions[b-wucwlacd3g] {
        width: 100%;
    }

    .tk-modal-actions button[b-wucwlacd3g] {
        flex: 1;
    }
}

/* ============================================================================
   REDUCED MOTION / HIGH CONTRAST
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-modal-overlay[b-wucwlacd3g] { animation: none; }
    .tk-import-modal[b-wucwlacd3g] { animation: none; }
    .tk-import-spinner[b-wucwlacd3g] { animation-duration: 1.5s; }
    .tk-import-progress-fill[b-wucwlacd3g] { transition: none; }
}

@media (prefers-contrast: high) {
    .tk-import-modal[b-wucwlacd3g] { border: 2px solid var(--tk-grid-border); }
}
/* /Shared/DataGrid/TkKeyboardHelp.razor.rz.scp.css */
/* ============================================================================
   TKKEYBOARDHELP.RAZOR.CSS
   ============================================================================
   Purpose: Scoped styles for the keyboard help component.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   KEYBOARD HELP CONTAINER
   ============================================================================ */

.tk-keyboard-help[b-wr1gel8zmx] {
    outline: none;
}

.tk-keyboard-help:focus-visible[b-wr1gel8zmx] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 4px;
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-keyboard-help:focus-visible[b-wr1gel8zmx] {
        outline-width: 3px;
    }
}
/* /Shared/DataGrid/TkKeyboardShortcuts.razor.rz.scp.css */
/* ============================================================================
   TKKEYBOARDSHORTCUTS.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the keyboard shortcuts help component.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   CONTAINER
   ============================================================================ */

.tk-keyboard-shortcuts[b-tx8t80pado] {
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: var(--tk-grid-radius);
    padding: 16px;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    max-width: 600px;
}

.tk-keyboard-shortcuts--compact[b-tx8t80pado] {
    padding: 12px;
    font-size: var(--tk-grid-font-size-sm);
}

/* ============================================================================
   TITLE
   ============================================================================ */

.tk-shortcuts-title[b-tx8t80pado] {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--tk-grid-text-primary);
}

/* ============================================================================
   SHORTCUT LIST
   ============================================================================ */

.tk-shortcut-list[b-tx8t80pado] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.tk-keyboard-shortcuts--compact .tk-shortcut-list[b-tx8t80pado] {
    gap: 12px;
}

/* ============================================================================
   SHORTCUT GROUP
   ============================================================================ */

.tk-shortcut-group[b-tx8t80pado] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tk-shortcut-group h5[b-tx8t80pado] {
    margin: 0 0 4px 0;
    font-size: var(--tk-grid-font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tk-grid-text-muted);
}

/* ============================================================================
   INDIVIDUAL SHORTCUT
   ============================================================================ */

.tk-shortcut[b-tx8t80pado] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    line-height: 1.5;
    color: var(--tk-grid-text-primary);
}

/* ============================================================================
   KEYBOARD KEY
   ============================================================================ */

kbd[b-tx8t80pado] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 22px;
    padding: 0 6px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-row-bg-alt);
    border: 1px solid var(--tk-grid-border);
    border-radius: var(--tk-grid-radius-sm);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    white-space: nowrap;
}

.tk-keyboard-shortcuts--compact kbd[b-tx8t80pado] {
    min-width: 18px;
    height: 20px;
    padding: 0 5px;
    font-size: 10px;
}

/* Arrow keys get special styling */
kbd:only-of-type:first-child[b-tx8t80pado] {
    font-family: system-ui, -apple-system, sans-serif;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 480px) {
    .tk-keyboard-shortcuts[b-tx8t80pado] {
        padding: 12px;
    }

    .tk-shortcut-list[b-tx8t80pado] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .tk-shortcut[b-tx8t80pado] {
        font-size: var(--tk-grid-font-size-sm);
    }

    kbd[b-tx8t80pado] {
        min-width: 18px;
        height: 20px;
        padding: 0 5px;
        font-size: 10px;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    kbd[b-tx8t80pado] {
        border-width: 2px;
        box-shadow: none;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    kbd[b-tx8t80pado] {
        transition: none;
    }
}
/* /Shared/DataGrid/TkRecordExpander.razor.rz.scp.css */
/* ============================================================================
   TKRECORDEXPANDER.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the record expander modal (detail view).
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   OVERLAY
   ============================================================================ */

.tk-record-expander-overlay[b-idtb7f3caz] {
    position: fixed;
    inset: 0;
    background: var(--tk-grid-overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--tk-grid-z-overlay, 1001);
    backdrop-filter: blur(2px);
    animation: tk-grid-fadeIn var(--tk-grid-transition-normal);
}

/* ============================================================================
   MODAL CONTAINER
   ============================================================================ */

.tk-record-expander[b-idtb7f3caz] {
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    background: var(--tk-grid-bg);
    border-radius: var(--tk-grid-border-radius);
    display: flex;
    flex-direction: column;
    box-shadow: var(--tk-grid-shadow-modal);
    animation: tk-grid-scaleIn var(--tk-grid-transition-spring);
}

/* ============================================================================
   HEADER
   ============================================================================ */

.tk-record-expander-header[b-idtb7f3caz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tk-grid-border);
    background: var(--tk-grid-bg-alt);
    border-radius: var(--tk-grid-border-radius) var(--tk-grid-border-radius) 0 0;
}

.tk-record-navigation[b-idtb7f3caz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tk-record-position[b-idtb7f3caz] {
    color: var(--tk-grid-text-secondary);
    font-size: var(--tk-grid-font-size);
    margin-left: 8px;
    font-variant-numeric: tabular-nums;
}

.tk-record-actions[b-idtb7f3caz] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tk-btn-icon[b-idtb7f3caz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--tk-grid-radius-sm);
    cursor: pointer;
    color: var(--tk-grid-text-secondary);
    transition: all var(--tk-grid-transition-normal);
}

.tk-btn-icon:hover:not(:disabled)[b-idtb7f3caz] {
    background: var(--tk-grid-row-hover);
    color: var(--tk-grid-text-primary);
}

.tk-btn-icon:disabled[b-idtb7f3caz] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================================
   BODY
   ============================================================================ */

.tk-record-expander-body[b-idtb7f3caz] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
}

.tk-record-fields[b-idtb7f3caz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tk-record-field[b-idtb7f3caz] {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 12px;
    align-items: start;
}

/* ============================================================================
   FIELD LABEL
   ============================================================================ */

.tk-field-label[b-idtb7f3caz] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tk-grid-text-secondary);
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    padding-top: 6px;
}

.tk-field-icon[b-idtb7f3caz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    color: var(--tk-grid-text-muted);
    font-size: 14px;
}

.tk-field-info[b-idtb7f3caz] {
    color: var(--tk-grid-text-muted);
    cursor: help;
    font-size: 12px;
    margin-left: auto;
}

/* ============================================================================
   FIELD VALUE
   ============================================================================ */

.tk-field-value[b-idtb7f3caz] {
    min-height: 32px;
}

.tk-field-editor[b-idtb7f3caz] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--tk-grid-border);
    border-radius: var(--tk-grid-radius-sm);
    font-size: var(--tk-grid-font-size);
    background: var(--tk-grid-bg);
    color: var(--tk-grid-text-primary);
    transition: border-color var(--tk-grid-transition-normal),
                box-shadow var(--tk-grid-transition-normal);
}

.tk-field-editor:focus[b-idtb7f3caz] {
    outline: none;
    border-color: var(--tk-grid-accent);
    box-shadow: 0 0 0 3px var(--tk-grid-accent-light);
}

.tk-field-editor[b-idtb7f3caz]::placeholder {
    color: var(--tk-grid-text-placeholder);
}

textarea.tk-field-editor[b-idtb7f3caz] {
    min-height: 80px;
    resize: vertical;
}

select.tk-field-editor[b-idtb7f3caz] {
    cursor: pointer;
}

.tk-field-checkbox[b-idtb7f3caz] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--tk-grid-accent);
}

.tk-field-display[b-idtb7f3caz] {
    display: inline-block;
    padding: 6px 0;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
}

/* ============================================================================
   ACTIVITY PANEL
   ============================================================================ */

.tk-record-activity[b-idtb7f3caz] {
    border-left: 1px solid var(--tk-grid-border);
    padding-left: 24px;
}

.tk-record-activity h4[b-idtb7f3caz] {
    margin: 0 0 16px 0;
    font-size: var(--tk-grid-font-size);
    font-weight: 600;
    color: var(--tk-grid-text-primary);
}

.tk-activity-list[b-idtb7f3caz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tk-activity-item[b-idtb7f3caz] {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--tk-grid-border-light);
}

.tk-activity-item:last-child[b-idtb7f3caz] {
    border-bottom: none;
}

.tk-avatar-sm[b-idtb7f3caz] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.tk-avatar-placeholder[b-idtb7f3caz] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tk-grid-accent);
    color: var(--primary-text-on-dark);
    font-size: 11px;
    font-weight: 600;
}

.tk-activity-content[b-idtb7f3caz] {
    font-size: var(--tk-grid-font-size);
    line-height: 1.5;
}

.tk-activity-user[b-idtb7f3caz] {
    font-weight: 500;
    color: var(--tk-grid-text-primary);
}

.tk-activity-action[b-idtb7f3caz] {
    color: var(--tk-grid-text-secondary);
    margin-left: 4px;
}

.tk-activity-time[b-idtb7f3caz] {
    color: var(--tk-grid-text-muted);
    font-size: var(--tk-grid-font-size-sm);
    margin-left: 8px;
}

.tk-activity-empty[b-idtb7f3caz] {
    color: var(--tk-grid-text-muted);
    font-size: var(--tk-grid-font-size);
    font-style: italic;
    margin: 0;
}

/* ============================================================================
   COMMENTS SECTION
   ============================================================================ */

.tk-comments-section[b-idtb7f3caz] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--tk-grid-border);
}

.tk-comments-section h5[b-idtb7f3caz] {
    margin: 0 0 12px 0;
    font-size: var(--tk-grid-font-size-sm);
    font-weight: 600;
    color: var(--tk-grid-text-primary);
}

.tk-comment-input[b-idtb7f3caz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tk-comment-input textarea[b-idtb7f3caz] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--tk-grid-border);
    border-radius: var(--tk-grid-radius-sm);
    resize: none;
    min-height: 60px;
    font-size: var(--tk-grid-font-size);
    font-family: inherit;
    background: var(--tk-grid-bg);
    color: var(--tk-grid-text-primary);
    transition: border-color var(--tk-grid-transition-normal),
                box-shadow var(--tk-grid-transition-normal);
}

.tk-comment-input textarea:focus[b-idtb7f3caz] {
    outline: none;
    border-color: var(--tk-grid-accent);
    box-shadow: 0 0 0 3px var(--tk-grid-accent-light);
}

.tk-comment-input textarea[b-idtb7f3caz]::placeholder {
    color: var(--tk-grid-text-placeholder);
}

.tk-btn-primary[b-idtb7f3caz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: var(--tk-grid-accent);
    color: var(--primary-text-on-dark);
    border: none;
    border-radius: var(--tk-grid-radius-sm);
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--tk-grid-transition-normal);
    align-self: flex-end;
}

.tk-btn-primary:hover:not(:disabled)[b-idtb7f3caz] {
    background: var(--tk-grid-accent-hover);
}

.tk-btn-primary:disabled[b-idtb7f3caz] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tk-btn-sm[b-idtb7f3caz] {
    padding: 6px 12px;
    font-size: var(--tk-grid-font-size-sm);
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.tk-record-expander-footer[b-idtb7f3caz] {
    padding: 12px 20px;
    border-top: 1px solid var(--tk-grid-border);
    background: var(--tk-grid-bg-alt);
    border-radius: 0 0 var(--tk-grid-border-radius) var(--tk-grid-border-radius);
}

.tk-record-meta[b-idtb7f3caz] {
    color: var(--tk-grid-text-muted);
    font-size: var(--tk-grid-font-size-sm);
}

/* ============================================================================
   SCROLLBAR
   ============================================================================ */

.tk-record-expander-body[b-idtb7f3caz]::-webkit-scrollbar {
    width: 8px;
}

.tk-record-expander-body[b-idtb7f3caz]::-webkit-scrollbar-track {
    background: transparent;
}

.tk-record-expander-body[b-idtb7f3caz]::-webkit-scrollbar-thumb {
    background: var(--tk-grid-scrollbar-thumb);
    border-radius: 4px;
}

.tk-record-expander-body[b-idtb7f3caz]::-webkit-scrollbar-thumb:hover {
    background: var(--tk-grid-scrollbar-thumb-hover);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .tk-record-expander[b-idtb7f3caz] {
        width: 95%;
        max-height: 95vh;
        margin: 10px;
    }

    .tk-record-expander-body[b-idtb7f3caz] {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .tk-record-activity[b-idtb7f3caz] {
        border-left: none;
        border-top: 1px solid var(--tk-grid-border);
        padding-left: 0;
        padding-top: 24px;
        margin-top: 24px;
    }

    .tk-record-field[b-idtb7f3caz] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .tk-field-label[b-idtb7f3caz] {
        padding-top: 0;
    }

    .tk-record-expander-header[b-idtb7f3caz] {
        padding: 12px 16px;
    }

    .tk-record-expander-footer[b-idtb7f3caz] {
        padding: 10px 16px;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-record-expander[b-idtb7f3caz] {
        border: 2px solid var(--tk-grid-border);
    }

    .tk-field-editor:focus[b-idtb7f3caz] {
        outline: 3px solid var(--tk-grid-accent);
        outline-offset: -3px;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-record-expander-overlay[b-idtb7f3caz],
    .tk-record-expander[b-idtb7f3caz],
    .tk-btn-icon[b-idtb7f3caz],
    .tk-btn-primary[b-idtb7f3caz],
    .tk-field-editor[b-idtb7f3caz] {
        animation: none !important;
        transition: none !important;
    }
}
/* /Shared/DataGrid/TkRecordPicker.razor.rz.scp.css */
.trp-backdrop[b-7sxgcd0uww] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
}

.trp-panel[b-7sxgcd0uww] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: 400px;
    max-height: 500px;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-default, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.trp-header[b-7sxgcd0uww] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-default, #e5e7eb);
}

.trp-title[b-7sxgcd0uww] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.trp-close[b-7sxgcd0uww] {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.trp-close:hover[b-7sxgcd0uww] {
    background: var(--bg-surface-hover, #f3f4f6);
}

.trp-search[b-7sxgcd0uww] {
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-default, #e5e7eb);
}

.trp-search-input[b-7sxgcd0uww] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-default, #d1d5db);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary, #1f2937);
    outline: none;
}

.trp-search-input:focus[b-7sxgcd0uww] {
    border-color: var(--accent-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.trp-list[b-7sxgcd0uww] {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    max-height: 340px;
}

.trp-row[b-7sxgcd0uww] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.trp-row:hover[b-7sxgcd0uww] {
    background: var(--bg-surface-hover, #f3f4f6);
}

.trp-row--selected[b-7sxgcd0uww] {
    background: rgba(59, 130, 246, 0.06);
}

.trp-checkbox[b-7sxgcd0uww] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary, #3b82f6);
    cursor: pointer;
    flex-shrink: 0;
}

.trp-display-value[b-7sxgcd0uww] {
    font-size: 13px;
    color: var(--text-primary, #1f2937);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trp-loading[b-7sxgcd0uww],
.trp-empty[b-7sxgcd0uww] {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-secondary, #6b7280);
    font-size: 13px;
}

.trp-footer[b-7sxgcd0uww] {
    padding: 8px 16px;
    border-top: 1px solid var(--border-default, #e5e7eb);
}

.trp-create-btn[b-7sxgcd0uww] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    background: none;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-link, #3b82f6);
    cursor: pointer;
    transition: background 0.1s ease;
}

.trp-create-btn:hover[b-7sxgcd0uww] {
    background: var(--bg-surface-hover, #f3f4f6);
}
/* /Shared/DataGrid/TkSelectionOverlay.razor.rz.scp.css */
/* ============================================================================
   TKSELECTIONOVERLAY.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the selection toolbar and overlay component.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   SELECTION TOOLBAR
   ============================================================================ */

.tk-selection-toolbar[b-axprb6b0xl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 16px;
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: var(--tk-grid-radius);
    box-shadow: var(--tk-grid-shadow-md);
}

.tk-selection-toolbar.floating[b-axprb6b0xl] {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--tk-grid-z-toolbar);
    min-width: 300px;
    animation: tk-selection-slide-up-b-axprb6b0xl 0.2s ease-out;
}

@keyframes tk-selection-slide-up-b-axprb6b0xl {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ============================================================================
   SELECTION COUNT
   ============================================================================ */

.tk-selection-count[b-axprb6b0xl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: var(--tk-grid-accent);
    color: var(--primary-text-on-dark);
    border-radius: var(--tk-grid-radius-sm);
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    white-space: nowrap;
}

.tk-selection-count i[b-axprb6b0xl] {
    font-size: 1rem;
}

/* ============================================================================
   SELECTION ACTIONS
   ============================================================================ */

.tk-selection-actions[b-axprb6b0xl] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================================================================
   SMALL BUTTON
   ============================================================================ */

.tk-btn-sm[b-axprb6b0xl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    border: 1px solid var(--tk-grid-border);
    border-radius: var(--tk-grid-radius);
    background: var(--tk-grid-bg);
    color: var(--tk-grid-text-primary);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-btn-sm:hover:not(:disabled)[b-axprb6b0xl] {
    background: var(--tk-grid-row-hover);
    border-color: var(--tk-grid-text-muted);
}

.tk-btn-sm:active:not(:disabled)[b-axprb6b0xl] {
    transform: scale(0.97);
}

.tk-btn-sm:disabled[b-axprb6b0xl] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tk-btn-sm:focus-visible[b-axprb6b0xl] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

/* ============================================================================
   ICON BUTTON
   ============================================================================ */

.tk-btn-icon[b-axprb6b0xl] {
    padding: 6px 8px;
}

.tk-btn-icon i[b-axprb6b0xl] {
    font-size: 1rem;
}

/* ============================================================================
   DANGER BUTTON
   ============================================================================ */

.tk-btn-danger[b-axprb6b0xl] {
    color: var(--tk-grid-danger);
    border-color: var(--tk-grid-danger);
}

.tk-btn-danger:hover:not(:disabled)[b-axprb6b0xl] {
    background: var(--tk-grid-danger-bg);
    border-color: var(--tk-grid-danger);
    color: var(--tk-grid-danger);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .tk-selection-toolbar.floating[b-axprb6b0xl] {
        left: 16px;
        right: 16px;
        transform: none;
        min-width: auto;
    }

    @keyframes tk-selection-slide-up-b-axprb6b0xl {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-selection-toolbar.floating[b-axprb6b0xl] {
        animation: none;
    }

    .tk-btn-sm[b-axprb6b0xl] {
        transition: none;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-selection-toolbar[b-axprb6b0xl] {
        border-width: 2px;
    }

    .tk-btn-sm:focus-visible[b-axprb6b0xl] {
        outline-width: 3px;
    }
}
/* /Shared/DataGrid/TkSortBuilder.razor.rz.scp.css */
/* ============================================================================
   TKSORTBUILDER.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the TkSortBuilder component.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   CONTAINER
   ============================================================================ */

.tk-sort-builder[b-ex169v67sq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background-color: var(--tk-grid-bg);
    border-radius: var(--tk-grid-radius);
    border: 1px solid var(--tk-grid-border);
    min-width: 400px;
    font-family: var(--tk-grid-font-family, system-ui, -apple-system, sans-serif);
    font-size: var(--tk-grid-font-size);
}

.tk-sort-builder--compact[b-ex169v67sq] {
    padding: 12px;
    gap: 8px;
    min-width: 320px;
}

/* ============================================================================
   HEADER
   ============================================================================ */

.tk-sort-header[b-ex169v67sq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tk-grid-border-light);
}

.tk-sort-title[b-ex169v67sq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--tk-grid-text-primary);
}

.tk-sort-title i[b-ex169v67sq] {
    font-size: 16px;
    color: var(--tk-grid-accent);
}

/* ============================================================================
   SORT LEVELS
   ============================================================================ */

.tk-sort-levels[b-ex169v67sq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tk-sort-level[b-ex169v67sq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--tk-grid-row-bg-alt);
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius);
    transition: all var(--tk-grid-transition-fast);
}

.tk-sort-level:hover[b-ex169v67sq] {
    border-color: var(--tk-grid-border);
    background-color: var(--tk-grid-row-hover);
}

.tk-sort-level[draggable="true"][b-ex169v67sq] {
    cursor: grab;
}

.tk-sort-level:active[b-ex169v67sq] {
    cursor: grabbing;
}

/* ============================================================================
   DRAG HANDLE
   ============================================================================ */

.tk-drag-handle[b-ex169v67sq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--tk-grid-text-muted);
    cursor: grab;
    transition: color var(--tk-grid-transition-fast);
}

.tk-drag-handle:hover[b-ex169v67sq] {
    color: var(--tk-grid-text-secondary);
}

.tk-drag-handle:active[b-ex169v67sq] {
    cursor: grabbing;
}

/* ============================================================================
   ORDER LABEL
   ============================================================================ */

.tk-sort-order-label[b-ex169v67sq] {
    min-width: 60px;
    color: var(--tk-grid-text-secondary);
    font-size: var(--tk-grid-font-size);
    white-space: nowrap;
}

/* ============================================================================
   SELECTS
   ============================================================================ */

.tk-select[b-ex169v67sq] {
    padding: 6px 10px;
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius-sm);
    background-color: var(--tk-grid-bg);
    color: var(--tk-grid-text-primary);
    font-size: var(--tk-grid-font-size);
    cursor: pointer;
    transition: border-color var(--tk-grid-transition-fast), box-shadow var(--tk-grid-transition-fast);
}

.tk-select:hover[b-ex169v67sq] {
    border-color: var(--tk-grid-border);
}

.tk-select:focus[b-ex169v67sq] {
    outline: none;
    border-color: var(--tk-grid-accent);
    box-shadow: 0 0 0 3px var(--tk-grid-accent-light);
}

.tk-select--field[b-ex169v67sq] {
    flex: 1;
    min-width: 120px;
}

.tk-select--direction[b-ex169v67sq] {
    min-width: 100px;
}

.tk-select option:disabled[b-ex169v67sq] {
    color: var(--tk-grid-text-muted);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.tk-btn-text[b-ex169v67sq] {
    padding: 4px 8px;
    background: none;
    border: none;
    color: var(--tk-grid-accent);
    font-size: var(--tk-grid-font-size);
    cursor: pointer;
    border-radius: var(--tk-grid-radius-sm);
    transition: background-color var(--tk-grid-transition-fast), color var(--tk-grid-transition-fast);
}

.tk-btn-text:hover[b-ex169v67sq] {
    background-color: var(--tk-grid-accent-light);
}

.tk-btn-text:focus-visible[b-ex169v67sq] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

.tk-btn-icon[b-ex169v67sq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--tk-grid-radius-sm);
    color: var(--tk-grid-text-muted);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-btn-icon:hover[b-ex169v67sq] {
    background-color: var(--tk-grid-row-hover);
    color: var(--tk-grid-text-secondary);
    border-color: var(--tk-grid-border-light);
}

.tk-btn-icon:focus-visible[b-ex169v67sq] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

.tk-btn-icon--danger:hover[b-ex169v67sq] {
    background-color: var(--tk-grid-danger-bg);
    color: var(--tk-grid-danger);
    border-color: var(--tk-grid-danger);
}

.tk-btn-secondary[b-ex169v67sq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background-color: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border-light);
    border-radius: var(--tk-grid-radius);
    color: var(--tk-grid-text-primary);
    font-size: var(--tk-grid-font-size);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-btn-secondary:hover[b-ex169v67sq] {
    background-color: var(--tk-grid-row-hover);
    border-color: var(--tk-grid-border);
}

.tk-btn-secondary:focus-visible[b-ex169v67sq] {
    outline: none;
    border-color: var(--tk-grid-accent);
    box-shadow: 0 0 0 3px var(--tk-grid-accent-light);
}

.tk-btn-sm[b-ex169v67sq] {
    padding: 6px 10px;
    font-size: var(--tk-grid-font-size);
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */

.tk-sort-empty[b-ex169v67sq] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: var(--tk-grid-text-muted);
    font-size: var(--tk-grid-font-size);
    font-style: italic;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 500px) {
    .tk-sort-builder[b-ex169v67sq] {
        min-width: 280px;
    }

    .tk-sort-level[b-ex169v67sq] {
        flex-wrap: wrap;
    }

    .tk-sort-order-label[b-ex169v67sq] {
        display: none;
    }

    .tk-select--field[b-ex169v67sq] {
        min-width: 100%;
        order: 1;
    }

    .tk-select--direction[b-ex169v67sq] {
        flex: 1;
        order: 2;
    }

    .tk-drag-handle[b-ex169v67sq] {
        order: 0;
    }

    .tk-btn-icon[b-ex169v67sq] {
        order: 3;
    }
}

/* ============================================================================
   DRAG STATES
   ============================================================================ */

.tk-sort-level.dragging[b-ex169v67sq] {
    opacity: 0.5;
    background-color: var(--tk-grid-accent-light);
}

.tk-sort-level.drag-over[b-ex169v67sq] {
    border-color: var(--tk-grid-accent);
    border-style: dashed;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes tk-sort-fade-in-b-ex169v67sq {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tk-sort-level[b-ex169v67sq] {
    animation: tk-sort-fade-in-b-ex169v67sq 0.2s ease;
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-sort-level[b-ex169v67sq] {
        animation: none;
        transition: none;
    }

    .tk-btn-text[b-ex169v67sq],
    .tk-btn-icon[b-ex169v67sq],
    .tk-btn-secondary[b-ex169v67sq],
    .tk-select[b-ex169v67sq],
    .tk-drag-handle[b-ex169v67sq] {
        transition: none;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-sort-level[b-ex169v67sq] {
        border-width: 2px;
    }

    .tk-select:focus[b-ex169v67sq],
    .tk-btn-secondary:focus-visible[b-ex169v67sq] {
        outline: 3px solid var(--tk-grid-accent);
    }
}
/* /Shared/DataGrid/TkTableTabBar.razor.rz.scp.css */
/* ============================================================================
   TKTABLETABBAR.RAZOR.CSS
   ============================================================================
   Purpose: Table tab bar for switching between portal tables (Airtable-style).
   Prefix: ttb- (Table Tab Bar)
   ============================================================================ */

/* ── Bar layout ─────────────────────────────────────────────────────────── */

.ttb-bar[b-wzeeq90s20] {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--border-color, #dee2e6);
    background: var(--bg-app, #fff);
    padding: 0 8px;
    height: 36px;
    flex-shrink: 0;
}

.ttb-scroll[b-wzeeq90s20] {
    display: flex;
    align-items: center;
    overflow-x: auto;
    flex: 1;
    gap: 0;
    scrollbar-width: none;
}

.ttb-scroll[b-wzeeq90s20]::-webkit-scrollbar {
    display: none;
}

/* ── Individual tab ─────────────────────────────────────────────────────── */

.ttb-tab[b-wzeeq90s20] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 13px;
    color: var(--text-secondary, #6c757d);
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    user-select: none;
    position: relative;
}

.ttb-tab:hover[b-wzeeq90s20] {
    color: var(--text-primary, #212529);
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
}

.ttb-tab.active[b-wzeeq90s20] {
    color: var(--text-primary, #212529);
    font-weight: 600;
    border-bottom-color: var(--accent-primary, #4f46e5);
}

.ttb-tab-icon[b-wzeeq90s20] {
    font-size: 14px;
    opacity: 0.7;
}

.ttb-tab-name[b-wzeeq90s20] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Inline rename input ────────────────────────────────────────────────── */

.ttb-rename-input[b-wzeeq90s20] {
    background: transparent;
    border: 1px solid var(--accent-primary, #4f46e5);
    border-radius: 4px;
    color: var(--text-primary, #212529);
    font-size: 13px;
    font-weight: 600;
    padding: 2px 6px;
    width: 140px;
    outline: none;
}

/* ── Add button ─────────────────────────────────────────────────────────── */

.ttb-add-wrapper[b-wzeeq90s20] {
    position: relative;
    flex-shrink: 0;
    margin-left: 4px;
}

.ttb-add-btn[b-wzeeq90s20] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px dashed var(--border-color, #dee2e6);
    background: transparent;
    color: var(--text-secondary, #6c757d);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: all 0.15s;
}

.ttb-add-btn:hover[b-wzeeq90s20] {
    border-color: var(--accent-primary, #4f46e5);
    color: var(--accent-primary, #4f46e5);
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
}

/* ── Add popover ────────────────────────────────────────────────────────── */

.ttb-add-backdrop[b-wzeeq90s20] {
    position: fixed;
    inset: 0;
    z-index: 998;
}

.ttb-add-popover[b-wzeeq90s20] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 999;
    display: flex;
    gap: 6px;
    padding: 8px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    animation: ttb-popover-enter-b-wzeeq90s20 0.12s ease-out;
}

.ttb-add-input[b-wzeeq90s20] {
    width: 180px;
    padding: 6px 10px;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 6px;
    background: var(--bg-app, #fff);
    color: var(--text-primary, #212529);
    font-size: 13px;
    outline: none;
}

.ttb-add-input:focus[b-wzeeq90s20] {
    border-color: var(--accent-primary, #4f46e5);
}

.ttb-add-submit[b-wzeeq90s20] {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: var(--accent-primary, #4f46e5);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.ttb-add-submit:hover:not(:disabled)[b-wzeeq90s20] {
    opacity: 0.9;
}

.ttb-add-submit:disabled[b-wzeeq90s20] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Context menu ───────────────────────────────────────────────────────── */

.ttb-ctx-backdrop[b-wzeeq90s20] {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.ttb-ctx-menu[b-wzeeq90s20] {
    position: fixed;
    z-index: 1001;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    padding: 4px 0;
    min-width: 160px;
    outline: none;
    animation: ttb-popover-enter-b-wzeeq90s20 0.1s ease-out;
}

.ttb-ctx-item[b-wzeeq90s20] {
    display: block;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary, #212529);
    text-align: left;
    transition: background 0.1s;
}

.ttb-ctx-item:hover[b-wzeeq90s20] {
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
}

.ttb-ctx-item.danger[b-wzeeq90s20] {
    color: #dc3545;
}

.ttb-ctx-item.danger:hover[b-wzeeq90s20] {
    background: rgba(220, 53, 69, 0.08);
}

.ttb-ctx-separator[b-wzeeq90s20] {
    height: 1px;
    margin: 4px 0;
    background: var(--border-color, #dee2e6);
}

/* ── Delete confirmation (inline in context menu) ───────────────────────── */

.ttb-ctx-confirm[b-wzeeq90s20] {
    padding: 12px 16px;
}

.ttb-ctx-confirm-title[b-wzeeq90s20] {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--text-primary, #212529);
}

.ttb-ctx-confirm-warn[b-wzeeq90s20] {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--text-secondary, #6c757d);
}

.ttb-ctx-confirm-actions[b-wzeeq90s20] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.ttb-ctx-confirm-actions .ttb-ctx-item[b-wzeeq90s20] {
    width: auto;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.ttb-ctx-confirm-actions .ttb-ctx-item.danger[b-wzeeq90s20] {
    background: #dc3545;
    color: #fff;
}

.ttb-ctx-confirm-actions .ttb-ctx-item.danger:hover[b-wzeeq90s20] {
    background: #c82333;
}

/* ── Animation ──────────────────────────────────────────────────────────── */

@keyframes ttb-popover-enter-b-wzeeq90s20 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ttb-add-popover[b-wzeeq90s20],
    .ttb-ctx-menu[b-wzeeq90s20] {
        animation: none !important;
    }
}
/* /Shared/DataGrid/TkUndoRedo.razor.rz.scp.css */
/* ============================================================================
   TKUNDOREDO.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the undo/redo control buttons.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   CONTAINER
   ============================================================================ */

.tk-undo-redo[b-gh3b2386qa] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tk-undo-redo--compact[b-gh3b2386qa] {
    gap: 2px;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.tk-undo-redo-btn[b-gh3b2386qa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--tk-grid-border);
    border-radius: var(--tk-grid-radius);
    color: var(--tk-grid-text-primary);
    font-size: var(--tk-grid-font-size);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
    white-space: nowrap;
}

.tk-undo-redo-btn:hover:not(:disabled)[b-gh3b2386qa] {
    background: var(--tk-grid-row-hover);
    border-color: var(--tk-grid-text-muted);
}

.tk-undo-redo-btn:active:not(:disabled)[b-gh3b2386qa] {
    background: var(--tk-grid-row-bg-alt);
}

.tk-undo-redo-btn:focus-visible[b-gh3b2386qa] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

.tk-undo-redo-btn:disabled[b-gh3b2386qa] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tk-undo-redo-btn i[b-gh3b2386qa] {
    font-size: 14px;
    color: var(--tk-grid-text-secondary);
}

.tk-undo-redo-btn:hover:not(:disabled) i[b-gh3b2386qa] {
    color: var(--tk-grid-text-primary);
}

/* ============================================================================
   ICON-ONLY BUTTONS
   ============================================================================ */

.tk-undo-redo-btn--icon-only[b-gh3b2386qa] {
    padding: 6px;
    min-width: 32px;
    min-height: 32px;
    position: relative;
}

.tk-undo-redo--compact .tk-undo-redo-btn--icon-only[b-gh3b2386qa] {
    padding: 4px;
    min-width: 28px;
    min-height: 28px;
}

.tk-undo-redo--compact .tk-undo-redo-btn--icon-only i[b-gh3b2386qa] {
    font-size: 12px;
}

/* ============================================================================
   COUNT BADGE
   ============================================================================ */

.tk-undo-redo-count[b-gh3b2386qa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    height: 18px;
    min-width: 18px;
    background: var(--tk-grid-row-hover);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 500;
    color: var(--tk-grid-text-secondary);
}

/* ============================================================================
   BADGE (FOR ICON-ONLY)
   ============================================================================ */

.tk-undo-redo-badge[b-gh3b2386qa] {
    position: absolute;
    top: -4px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    height: 16px;
    min-width: 16px;
    background: var(--tk-grid-accent);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--primary-text-on-dark);
}

.tk-undo-redo--compact .tk-undo-redo-badge[b-gh3b2386qa] {
    top: -3px;
    right: -3px;
    height: 14px;
    min-width: 14px;
    font-size: 9px;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .tk-undo-redo-btn span:not(.tk-undo-redo-count):not(.tk-undo-redo-badge)[b-gh3b2386qa] {
        display: none;
    }

    .tk-undo-redo-btn[b-gh3b2386qa] {
        padding: 6px;
    }
}

/* ============================================================================
   KEYBOARD SHORTCUT HINT
   ============================================================================ */

.tk-undo-redo-btn[title][b-gh3b2386qa]::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: var(--tk-grid-tooltip-bg, rgba(0, 0, 0, 0.8));
    color: var(--primary-text-on-dark);
    font-size: 11px;
    border-radius: var(--tk-grid-radius-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tk-grid-transition-fast), visibility var(--tk-grid-transition-fast);
    pointer-events: none;
    z-index: var(--tk-grid-z-tooltip);
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-undo-redo-btn[b-gh3b2386qa] {
        transition: none;
    }

    .tk-undo-redo-btn[title][b-gh3b2386qa]::after {
        transition: none;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-undo-redo-btn[b-gh3b2386qa] {
        border-width: 2px;
    }

    .tk-undo-redo-btn:focus-visible[b-gh3b2386qa] {
        outline-width: 3px;
    }
}
/* /Shared/DataGrid/TkViewEditModal.razor.rz.scp.css */
/* ============================================================================
   TKVIEWEDITMODAL.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the view edit modal component.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   MODAL OVERLAY
   ============================================================================ */

.tk-modal-overlay[b-it7px87n62] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--tk-grid-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tk-grid-overlay-bg);
    animation: tk-overlay-enter-b-it7px87n62 0.15s ease-out;
    padding: 16px;
}

@keyframes tk-overlay-enter-b-it7px87n62 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================================================
   MODAL CONTAINER
   ============================================================================ */

.tk-view-edit-modal[b-it7px87n62] {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--tk-grid-bg);
    border-radius: var(--tk-grid-radius-lg, 12px);
    box-shadow: var(--tk-grid-shadow-xl, 0 8px 32px rgba(0, 0, 0, 0.2));
    animation: tk-modal-enter-b-it7px87n62 0.2s ease-out;
}

@keyframes tk-modal-enter-b-it7px87n62 {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================================================
   MODAL HEADER
   ============================================================================ */

.tk-modal-header[b-it7px87n62] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--tk-grid-border-light);
}

.tk-modal-header h3[b-it7px87n62] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--tk-grid-text-primary);
}

.tk-btn-icon[b-it7px87n62] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--tk-grid-radius);
    color: var(--tk-grid-text-secondary);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-btn-icon:hover[b-it7px87n62] {
    background: var(--tk-grid-row-hover);
    color: var(--tk-grid-text-primary);
}

.tk-btn-icon:focus-visible[b-it7px87n62] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

.tk-btn-icon i[b-it7px87n62] {
    font-size: 18px;
}

/* ============================================================================
   MODAL BODY
   ============================================================================ */

.tk-modal-body[b-it7px87n62] {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

/* Custom scrollbar for modal body */
.tk-modal-body[b-it7px87n62]::-webkit-scrollbar {
    width: 8px;
}

.tk-modal-body[b-it7px87n62]::-webkit-scrollbar-track {
    background: transparent;
}

.tk-modal-body[b-it7px87n62]::-webkit-scrollbar-thumb {
    background: var(--tk-grid-scrollbar-thumb);
    border-radius: 4px;
}

.tk-modal-body[b-it7px87n62]::-webkit-scrollbar-thumb:hover {
    background: var(--tk-grid-scrollbar-thumb-hover);
}

/* ============================================================================
   FORM SECTIONS
   ============================================================================ */

.tk-form-section[b-it7px87n62] {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--tk-grid-border-light);
}

.tk-form-section h4[b-it7px87n62] {
    margin: 0 0 16px 0;
    font-size: var(--tk-grid-font-size);
    font-weight: 600;
    color: var(--tk-grid-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================================================
   FORM GROUPS
   ============================================================================ */

.tk-form-group[b-it7px87n62] {
    margin-bottom: 20px;
}

.tk-form-group:last-child[b-it7px87n62] {
    margin-bottom: 0;
}

.tk-form-group > label[b-it7px87n62] {
    display: block;
    margin-bottom: 8px;
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    color: var(--tk-grid-text-primary);
}

.tk-required[b-it7px87n62] {
    color: var(--tk-grid-danger);
}

.tk-optional[b-it7px87n62] {
    font-weight: 400;
    color: var(--tk-grid-text-muted);
}

/* ============================================================================
   INPUT FIELDS
   ============================================================================ */

.tk-form-group input[type="text"][b-it7px87n62],
.tk-form-group textarea[b-it7px87n62],
.tk-form-group select[b-it7px87n62] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--tk-grid-border);
    border-radius: var(--tk-grid-radius);
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-bg);
    transition: all var(--tk-grid-transition-fast);
    box-sizing: border-box;
}

.tk-form-group input[type="text"]:hover[b-it7px87n62],
.tk-form-group textarea:hover[b-it7px87n62],
.tk-form-group select:hover[b-it7px87n62] {
    border-color: var(--tk-grid-text-muted);
}

.tk-form-group input[type="text"]:focus[b-it7px87n62],
.tk-form-group textarea:focus[b-it7px87n62],
.tk-form-group select:focus[b-it7px87n62] {
    outline: none;
    border-color: var(--tk-grid-accent);
    box-shadow: 0 0 0 3px var(--tk-grid-accent-light);
}

.tk-form-group input[type="text"][b-it7px87n62]::placeholder,
.tk-form-group textarea[b-it7px87n62]::placeholder {
    color: var(--tk-grid-text-muted);
}

.tk-input-error[b-it7px87n62] {
    border-color: var(--tk-grid-danger) !important;
}

.tk-input-error:focus[b-it7px87n62] {
    box-shadow: 0 0 0 3px var(--tk-grid-danger-bg) !important;
}

.tk-error-message[b-it7px87n62] {
    display: block;
    margin-top: 6px;
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-danger);
}

/* Textarea specific */
.tk-form-group textarea[b-it7px87n62] {
    min-height: 80px;
    resize: vertical;
    line-height: 1.5;
}

/* Select specific */
.tk-form-group select[b-it7px87n62] {
    appearance: none;
    background-image: var(--tk-grid-select-chevron);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    padding-right: 40px;
    cursor: pointer;
}

/* ============================================================================
   VIEW TYPE OPTIONS
   ============================================================================ */

.tk-view-type-options[b-it7px87n62] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.tk-radio-card[b-it7px87n62] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border: 2px solid var(--tk-grid-border);
    border-radius: var(--tk-grid-radius);
    background: var(--tk-grid-bg);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-radio-card:hover[b-it7px87n62] {
    border-color: var(--tk-grid-text-muted);
    background: var(--tk-grid-row-hover);
}

.tk-radio-card.selected[b-it7px87n62] {
    border-color: var(--tk-grid-accent);
    background: var(--tk-grid-accent-light);
}

.tk-radio-card input[type="radio"][b-it7px87n62] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tk-radio-card i[b-it7px87n62] {
    font-size: 24px;
    color: var(--tk-grid-text-secondary);
    transition: color var(--tk-grid-transition-fast);
}

.tk-radio-card.selected i[b-it7px87n62] {
    color: var(--tk-grid-accent);
}

.tk-radio-card span[b-it7px87n62] {
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    color: var(--tk-grid-text-primary);
}

.tk-radio-card small[b-it7px87n62] {
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-muted);
    text-align: center;
}

/* ============================================================================
   CHECKBOX GROUP
   ============================================================================ */

.tk-checkbox-group[b-it7px87n62] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tk-checkbox-item[b-it7px87n62] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.tk-checkbox-item input[type="checkbox"][b-it7px87n62] {
    width: 18px;
    height: 18px;
    margin: 0;
    border: 2px solid var(--tk-grid-border);
    border-radius: var(--tk-grid-radius-sm);
    background: var(--tk-grid-bg);
    cursor: pointer;
    accent-color: var(--tk-grid-accent);
}

.tk-checkbox-label[b-it7px87n62] {
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
}

/* ============================================================================
   SHARE TOGGLE
   ============================================================================ */

.tk-share-toggle[b-it7px87n62] {
    padding: 12px 16px;
    border: 1px solid var(--tk-grid-border);
    border-radius: var(--tk-grid-radius);
    background: var(--tk-grid-row-bg-alt);
    transition: all var(--tk-grid-transition-fast);
}

.tk-share-toggle:hover[b-it7px87n62] {
    background: var(--tk-grid-row-hover);
}

.tk-share-content[b-it7px87n62] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tk-share-content i[b-it7px87n62] {
    font-size: 20px;
    color: var(--tk-grid-text-secondary);
    margin-top: 2px;
}

.tk-share-content div[b-it7px87n62] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tk-share-content small[b-it7px87n62] {
    font-size: var(--tk-grid-font-size-sm);
    color: var(--tk-grid-text-muted);
    line-height: 1.4;
}

/* ============================================================================
   MODAL FOOTER
   ============================================================================ */

.tk-modal-footer[b-it7px87n62] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--tk-grid-border-light);
    background: var(--tk-grid-row-bg-alt);
    border-radius: 0 0 var(--tk-grid-radius-lg, 12px) var(--tk-grid-radius-lg, 12px);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.tk-btn-secondary[b-it7px87n62] {
    padding: 10px 20px;
    border: 1px solid var(--tk-grid-border);
    background: var(--tk-grid-bg);
    border-radius: var(--tk-grid-radius);
    color: var(--tk-grid-text-primary);
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-btn-secondary:hover[b-it7px87n62] {
    background: var(--tk-grid-row-hover);
    border-color: var(--tk-grid-text-muted);
}

.tk-btn-secondary:focus-visible[b-it7px87n62] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

.tk-btn-primary[b-it7px87n62] {
    padding: 10px 20px;
    border: none;
    background: var(--tk-grid-accent);
    border-radius: var(--tk-grid-radius);
    color: var(--primary-text-on-dark);
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-btn-primary:hover[b-it7px87n62] {
    background: var(--tk-grid-accent-hover, #2563eb);
}

.tk-btn-primary:disabled[b-it7px87n62] {
    background: var(--tk-grid-border);
    color: var(--tk-grid-text-muted);
    cursor: not-allowed;
}

.tk-btn-primary:focus-visible[b-it7px87n62] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 560px) {
    .tk-view-edit-modal[b-it7px87n62] {
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }

    .tk-modal-footer[b-it7px87n62] {
        border-radius: 0;
    }

    .tk-view-type-options[b-it7px87n62] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .tk-radio-card[b-it7px87n62] {
        padding: 12px;
    }

    .tk-radio-card i[b-it7px87n62] {
        font-size: 20px;
    }

    .tk-radio-card small[b-it7px87n62] {
        display: none;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-modal-overlay[b-it7px87n62],
    .tk-view-edit-modal[b-it7px87n62] {
        animation: none;
    }

    .tk-form-group input[type="text"][b-it7px87n62],
    .tk-form-group textarea[b-it7px87n62],
    .tk-form-group select[b-it7px87n62],
    .tk-radio-card[b-it7px87n62],
    .tk-share-toggle[b-it7px87n62],
    .tk-btn-secondary[b-it7px87n62],
    .tk-btn-primary[b-it7px87n62],
    .tk-btn-icon[b-it7px87n62] {
        transition: none;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-view-edit-modal[b-it7px87n62] {
        border: 2px solid var(--tk-grid-border);
    }

    .tk-radio-card.selected[b-it7px87n62] {
        border-width: 3px;
    }

    .tk-form-group input[type="text"]:focus[b-it7px87n62],
    .tk-form-group textarea:focus[b-it7px87n62],
    .tk-form-group select:focus[b-it7px87n62] {
        outline: 3px solid var(--tk-grid-accent);
    }

    .tk-btn-secondary:focus-visible[b-it7px87n62],
    .tk-btn-primary:focus-visible[b-it7px87n62],
    .tk-btn-icon:focus-visible[b-it7px87n62] {
        outline-width: 3px;
    }
}
/* /Shared/DataGrid/TkViewSelector.razor.rz.scp.css */
/* ============================================================================
   TKVIEWSELECTOR.RAZOR.CSS
   ============================================================================
   Purpose: Styles for the view selector dropdown component.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   VIEW SELECTOR CONTAINER
   ============================================================================ */

.tk-view-selector[b-xbutcpx59b] {
    position: relative;
    display: inline-block;
}

/* ============================================================================
   DROPDOWN TRIGGER BUTTON
   ============================================================================ */

.tk-view-dropdown-trigger[b-xbutcpx59b] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: var(--tk-grid-radius);
    color: var(--tk-grid-text-primary);
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
    min-width: 160px;
    max-width: 240px;
}

.tk-view-dropdown-trigger:hover[b-xbutcpx59b] {
    background: var(--tk-grid-row-hover);
    border-color: var(--tk-grid-text-muted);
}

.tk-view-dropdown-trigger:focus[b-xbutcpx59b] {
    outline: none;
    border-color: var(--tk-grid-accent);
    box-shadow: 0 0 0 3px var(--tk-grid-accent-light);
}

.tk-view-selector.open .tk-view-dropdown-trigger[b-xbutcpx59b] {
    border-color: var(--tk-grid-accent);
    background: var(--tk-grid-accent-light);
}

.tk-view-name[b-xbutcpx59b] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.tk-chevron[b-xbutcpx59b] {
    font-size: 12px;
    color: var(--tk-grid-text-secondary);
    transition: transform 0.2s ease;
}

.tk-view-selector.open .tk-chevron[b-xbutcpx59b] {
    transform: rotate(180deg);
}

/* ============================================================================
   DROPDOWN PANEL
   ============================================================================ */

.tk-view-dropdown[b-xbutcpx59b] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--tk-grid-z-dropdown);
    min-width: 280px;
    max-width: 360px;
    margin-top: 4px;
    background: var(--tk-grid-bg);
    border: 1px solid var(--tk-grid-border);
    border-radius: var(--tk-grid-radius);
    box-shadow: var(--tk-grid-shadow-lg);
    overflow: hidden;
    animation: tk-dropdown-enter-b-xbutcpx59b 0.15s ease-out;
}

@keyframes tk-dropdown-enter-b-xbutcpx59b {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   SEARCH INPUT
   ============================================================================ */

.tk-view-search[b-xbutcpx59b] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--tk-grid-border-light);
    background: var(--tk-grid-row-bg-alt);
}

.tk-view-search i.bi-search[b-xbutcpx59b] {
    color: var(--tk-grid-text-muted);
    font-size: 14px;
}

.tk-view-search input[b-xbutcpx59b] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    outline: none;
}

.tk-view-search input[b-xbutcpx59b]::placeholder {
    color: var(--tk-grid-text-muted);
}

/* ============================================================================
   VIEW LIST
   ============================================================================ */

.tk-view-list[b-xbutcpx59b] {
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0;
}

/* Custom scrollbar */
.tk-view-list[b-xbutcpx59b]::-webkit-scrollbar {
    width: 6px;
}

.tk-view-list[b-xbutcpx59b]::-webkit-scrollbar-track {
    background: transparent;
}

.tk-view-list[b-xbutcpx59b]::-webkit-scrollbar-thumb {
    background: var(--tk-grid-scrollbar-thumb);
    border-radius: 3px;
}

.tk-view-list[b-xbutcpx59b]::-webkit-scrollbar-thumb:hover {
    background: var(--tk-grid-scrollbar-thumb-hover);
}

/* ============================================================================
   VIEW ITEM
   ============================================================================ */

.tk-view-item[b-xbutcpx59b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    transition: background var(--tk-grid-transition-fast);
}

.tk-view-item:hover[b-xbutcpx59b] {
    background: var(--tk-grid-row-hover);
}

.tk-view-item.active[b-xbutcpx59b] {
    background: var(--tk-grid-accent-light);
}

.tk-view-item.active:hover[b-xbutcpx59b] {
    background: var(--tk-grid-accent-light);
}

.tk-view-item-content[b-xbutcpx59b] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.tk-view-icon[b-xbutcpx59b] {
    font-size: 16px;
    color: var(--tk-grid-text-secondary);
    flex-shrink: 0;
}

.tk-view-item.active .tk-view-icon[b-xbutcpx59b] {
    color: var(--tk-grid-accent);
}

.tk-view-item-name[b-xbutcpx59b] {
    flex: 1;
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    color: var(--tk-grid-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================================
   BADGES
   ============================================================================ */

.tk-default-badge[b-xbutcpx59b] {
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tk-grid-accent);
    background: var(--tk-grid-accent-light);
    border-radius: var(--tk-grid-radius-sm);
    flex-shrink: 0;
}

.tk-shared-badge[b-xbutcpx59b] {
    font-size: 14px;
    color: var(--tk-grid-success);
    flex-shrink: 0;
}

/* ============================================================================
   VIEW ACTIONS
   ============================================================================ */

.tk-view-actions[b-xbutcpx59b] {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--tk-grid-transition-fast);
}

.tk-view-item:hover .tk-view-actions[b-xbutcpx59b] {
    opacity: 1;
}

.tk-btn-icon-sm[b-xbutcpx59b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--tk-grid-radius-sm);
    color: var(--tk-grid-text-secondary);
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-btn-icon-sm:hover[b-xbutcpx59b] {
    background: var(--tk-grid-row-hover);
    color: var(--tk-grid-text-primary);
}

.tk-btn-icon-sm.tk-btn-danger:hover[b-xbutcpx59b] {
    background: var(--tk-grid-danger-bg);
    color: var(--tk-grid-danger);
}

.tk-btn-icon-sm:focus-visible[b-xbutcpx59b] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */

.tk-view-empty[b-xbutcpx59b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    color: var(--tk-grid-text-muted);
}

.tk-view-empty i[b-xbutcpx59b] {
    font-size: 24px;
    opacity: 0.5;
}

.tk-view-empty span[b-xbutcpx59b] {
    font-size: var(--tk-grid-font-size);
}

/* ============================================================================
   ADD VIEW BUTTON
   ============================================================================ */

.tk-view-add[b-xbutcpx59b] {
    padding: 8px 12px;
    border-top: 1px solid var(--tk-grid-border-light);
}

.tk-btn-text[b-xbutcpx59b] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: var(--tk-grid-radius);
    color: var(--tk-grid-accent);
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--tk-grid-transition-fast);
}

.tk-btn-text:hover[b-xbutcpx59b] {
    background: var(--tk-grid-accent-light);
}

.tk-btn-text:focus-visible[b-xbutcpx59b] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

.tk-btn-text i[b-xbutcpx59b] {
    font-size: 16px;
}

/* ============================================================================
   DELETE CONFIRMATION DIALOG
   ============================================================================ */

.tk-modal-overlay[b-xbutcpx59b] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--tk-grid-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tk-grid-overlay-bg);
    animation: tk-overlay-enter-b-xbutcpx59b 0.15s ease-out;
}

@keyframes tk-overlay-enter-b-xbutcpx59b {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.tk-confirm-dialog[b-xbutcpx59b] {
    width: 400px;
    background: var(--tk-grid-bg);
    border-radius: var(--tk-grid-radius-lg, 12px);
    box-shadow: var(--tk-grid-shadow-xl, 0 8px 32px rgba(0, 0, 0, 0.2));
    animation: tk-dialog-enter-b-xbutcpx59b 0.2s ease-out;
}

@keyframes tk-dialog-enter-b-xbutcpx59b {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.tk-confirm-header[b-xbutcpx59b] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--tk-grid-border-light);
}

.tk-warning-icon[b-xbutcpx59b] {
    font-size: 24px;
    color: var(--tk-grid-warning);
}

.tk-confirm-header h4[b-xbutcpx59b] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--tk-grid-text-primary);
}

.tk-confirm-body[b-xbutcpx59b] {
    padding: 20px 24px;
}

.tk-confirm-body p[b-xbutcpx59b] {
    margin: 0 0 8px 0;
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    line-height: 1.5;
}

.tk-confirm-warning[b-xbutcpx59b] {
    color: var(--tk-grid-text-secondary) !important;
    font-size: var(--tk-grid-font-size) !important;
}

.tk-confirm-footer[b-xbutcpx59b] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--tk-grid-border-light);
    background: var(--tk-grid-row-bg-alt);
    border-radius: 0 0 var(--tk-grid-radius-lg, 12px) var(--tk-grid-radius-lg, 12px);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.tk-btn-secondary[b-xbutcpx59b] {
    padding: 8px 16px;
    border: 1px solid var(--tk-grid-border);
    background: var(--tk-grid-bg);
    border-radius: var(--tk-grid-radius);
    color: var(--tk-grid-text-primary);
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-btn-secondary:hover[b-xbutcpx59b] {
    background: var(--tk-grid-row-hover);
    border-color: var(--tk-grid-text-muted);
}

.tk-btn-secondary:focus-visible[b-xbutcpx59b] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: 2px;
}

.tk-btn-danger[b-xbutcpx59b] {
    padding: 8px 16px;
    border: none;
    background: var(--tk-grid-danger);
    border-radius: var(--tk-grid-radius);
    color: var(--primary-text-on-dark);
    font-size: var(--tk-grid-font-size);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--tk-grid-transition-fast);
}

.tk-btn-danger:hover[b-xbutcpx59b] {
    background: var(--tk-grid-danger-hover);
}

.tk-btn-danger:focus-visible[b-xbutcpx59b] {
    outline: 2px solid var(--tk-grid-danger);
    outline-offset: 2px;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 480px) {
    .tk-view-dropdown[b-xbutcpx59b] {
        position: fixed;
        top: auto;
        left: 16px;
        right: 16px;
        bottom: 16px;
        min-width: auto;
        max-width: none;
        margin-top: 0;
        border-radius: var(--tk-grid-radius-lg, 12px);
    }

    .tk-confirm-dialog[b-xbutcpx59b] {
        width: calc(100% - 32px);
        margin: 16px;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-view-dropdown[b-xbutcpx59b],
    .tk-modal-overlay[b-xbutcpx59b],
    .tk-confirm-dialog[b-xbutcpx59b] {
        animation: none;
    }

    .tk-view-dropdown-trigger[b-xbutcpx59b],
    .tk-chevron[b-xbutcpx59b],
    .tk-view-item[b-xbutcpx59b],
    .tk-view-actions[b-xbutcpx59b],
    .tk-btn-icon-sm[b-xbutcpx59b],
    .tk-btn-text[b-xbutcpx59b],
    .tk-btn-secondary[b-xbutcpx59b],
    .tk-btn-danger[b-xbutcpx59b] {
        transition: none;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-view-dropdown[b-xbutcpx59b] {
        border-width: 2px;
    }

    .tk-confirm-dialog[b-xbutcpx59b] {
        border: 2px solid var(--tk-grid-border);
    }

    .tk-btn-secondary:focus-visible[b-xbutcpx59b],
    .tk-btn-danger:focus-visible[b-xbutcpx59b],
    .tk-btn-icon-sm:focus-visible[b-xbutcpx59b],
    .tk-btn-text:focus-visible[b-xbutcpx59b] {
        outline-width: 3px;
    }
}
/* /Shared/DataGrid/TkVirtualScroller.razor.rz.scp.css */
/* ============================================================================
   TKVIRTUALSCROLLER.RAZOR.CSS
   ============================================================================
   Purpose: High-performance virtual scroller styles with theme integration.
   Agent: 30 of 32 (CSS & Theming)

   This file uses CSS custom properties from tk-datagrid-themes.css for
   consistent theming across light, dark, blue, and gunmetal themes.
   ============================================================================ */

/* ============================================================================
   VIRTUAL SCROLLER CONTAINER
   ============================================================================ */

.tk-virtual-scroller[b-dinlblr0om] {
    /* Height comes from CSS flex chain — NOT from inline style or JS measurement.
       The scroller fills its parent (.tk-datagrid-body with height:100%) which is
       constrained by the flex layout. This avoids the ResizeObserver feedback loop. */
    height: 100%;
    overflow: auto;
    will-change: transform;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* Style containment only — layout/paint containment clips overflow
       and breaks horizontal scroll + frozen-column sticky positioning. */
    contain: style;

    /* Custom scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--tk-grid-scrollbar-thumb) var(--tk-grid-scrollbar-track);
}

/* ============================================================================
   WEBKIT SCROLLBAR
   ============================================================================ */

.tk-virtual-scroller[b-dinlblr0om]::-webkit-scrollbar {
    width: 8px;
}

.tk-virtual-scroller[b-dinlblr0om]::-webkit-scrollbar-track {
    background: var(--tk-grid-scrollbar-track);
    border-radius: 4px;
}

.tk-virtual-scroller[b-dinlblr0om]::-webkit-scrollbar-thumb {
    background: var(--tk-grid-scrollbar-thumb);
    border-radius: 4px;
}

.tk-virtual-scroller[b-dinlblr0om]::-webkit-scrollbar-thumb:hover {
    background: var(--tk-grid-scrollbar-thumb-hover);
}

/* ============================================================================
   SPACER & CONTENT
   ============================================================================ */

/* Spacer creates the full scrollable height (and width for horizontal scroll) */
.tk-virtual-scroller-spacer[b-dinlblr0om] {
    position: relative;
    min-width: fit-content;
}

/* Content container - positioned via CSS transforms for GPU acceleration.
   No right: 0 — content expands to fit rows for horizontal scroll. */
.tk-virtual-scroller-content[b-dinlblr0om] {
    position: absolute;
    left: 0;
    min-width: 100%;
    will-change: transform;
    contain: layout style;
}

/* ============================================================================
   ROW STYLING
   ============================================================================ */

.tk-virtual-scroller-row[b-dinlblr0om] {
    box-sizing: border-box;
    contain: layout style;
    will-change: contents;
    /* Allow rows to expand beyond viewport for horizontal scroll */
    min-width: fit-content;
}

/* Optimize painting during scroll */
.tk-virtual-scroller.scrolling .tk-virtual-scroller-content[b-dinlblr0om] {
    pointer-events: none;
}

/* Reduce paint during fast scrolling */
.tk-virtual-scroller.scrolling .tk-virtual-scroller-row[b-dinlblr0om] {
    will-change: transform;
}

/* ============================================================================
   FOCUS STYLES
   ============================================================================ */

.tk-virtual-scroller:focus[b-dinlblr0om] {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: -2px;
}

.tk-virtual-scroller:focus:not(:focus-visible)[b-dinlblr0om] {
    outline: none;
}

/* ============================================================================
   LOADING STATE
   ============================================================================ */

.tk-virtual-scroller.loading .tk-virtual-scroller-content[b-dinlblr0om] {
    opacity: 0.5;
    pointer-events: none;
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */

.tk-virtual-scroller-empty[b-dinlblr0om] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--tk-grid-text-muted);
    font-style: italic;
    font-size: var(--tk-grid-font-size);
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes tk-row-fade-in-b-dinlblr0om {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.tk-virtual-scroller-row.new[b-dinlblr0om] {
    animation: tk-row-fade-in-b-dinlblr0om 0.15s ease-out;
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .tk-virtual-scroller[b-dinlblr0om] {
        height: auto !important;
        overflow: visible !important;
    }

    .tk-virtual-scroller-spacer[b-dinlblr0om] {
        height: auto !important;
    }

    .tk-virtual-scroller-content[b-dinlblr0om] {
        position: static !important;
        transform: none !important;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .tk-virtual-scroller[b-dinlblr0om] {
        scroll-behavior: auto;
    }

    .tk-virtual-scroller-row.new[b-dinlblr0om] {
        animation: none;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .tk-virtual-scroller:focus[b-dinlblr0om] {
        outline-width: 3px;
    }

    .tk-virtual-scroller[b-dinlblr0om]::-webkit-scrollbar-thumb {
        background: currentColor;
    }
}
/* /Shared/EmailComposePanel.razor.rz.scp.css */
.email-compose-panel[b-xe0ra3s5kc] {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

/* Tab Bar */
.compose-tabs[b-xe0ra3s5kc] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem;
    background: var(--background-secondary);
}

.compose-tabs[b-xe0ra3s5kc]  .compose-tab-btn {
    flex: 1;
    border-radius: 6px;
}

/* Compose Form */
.compose-form[b-xe0ra3s5kc] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.compose-form-note[b-xe0ra3s5kc] {
    background: #fffbeb; /* Subtle yellow/amber hint for internal notes */
}

/* Note Header */
.compose-note-header[b-xe0ra3s5kc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #92400e;
}

.compose-note-header i[b-xe0ra3s5kc] {
    font-size: 1rem;
}

/* Form Fields */
.compose-field[b-xe0ra3s5kc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.compose-label[b-xe0ra3s5kc] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.compose-required[b-xe0ra3s5kc] {
    color: #dc2626;
}

.compose-input[b-xe0ra3s5kc] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9375rem;
    color: var(--text-primary);
    background: var(--card-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.compose-input:focus[b-xe0ra3s5kc] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.compose-subject-readonly[b-xe0ra3s5kc] {
    padding: 0.625rem 0.875rem;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.compose-textarea[b-xe0ra3s5kc] {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9375rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-primary);
    background: var(--card-bg);
    resize: vertical;
    min-height: 120px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.compose-textarea:focus[b-xe0ra3s5kc] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Link Button (Add CC) */
.compose-link-btn[b-xe0ra3s5kc] {
    background: none;
    border: none;
    padding: 0.5rem 0;
    color: var(--primary-color);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: opacity 0.2s;
}

.compose-link-btn:hover[b-xe0ra3s5kc] {
    opacity: 0.8;
}

.compose-link-btn i[b-xe0ra3s5kc] {
    font-size: 0.875rem;
}

/* Signature */
.compose-signature[b-xe0ra3s5kc] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.signature-divider[b-xe0ra3s5kc] {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.signature-content[b-xe0ra3s5kc] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Quoted Message (Forward) */
.compose-quoted[b-xe0ra3s5kc] {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--background-secondary);
    border-left: 3px solid var(--border-color);
    border-radius: 4px;
}

.quoted-header[b-xe0ra3s5kc] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.quoted-content[b-xe0ra3s5kc] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.quoted-content em[b-xe0ra3s5kc] {
    font-style: italic;
}

/* Error Message */
.compose-error[b-xe0ra3s5kc] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background: #fee2e2;
    border: 1px solid #f87171;
    border-radius: 6px;
    color: #991b1b;
    font-size: 0.875rem;
}

.compose-error i[b-xe0ra3s5kc] {
    font-size: 1rem;
    flex-shrink: 0;
}

/* Actions */
.compose-actions[b-xe0ra3s5kc] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Responsive */
@media (max-width: 768px) {
    .compose-form[b-xe0ra3s5kc] {
        padding: 1rem;
    }

    .compose-tabs[b-xe0ra3s5kc] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .compose-tabs[b-xe0ra3s5kc]  .compose-tab-btn {
        width: 100%;
    }

    .compose-actions[b-xe0ra3s5kc] {
        flex-direction: column;
    }

    .compose-actions[b-xe0ra3s5kc]  .tk-btn {
        width: 100%;
    }
}
/* /Shared/EmailConversation.razor.rz.scp.css */
.email-conversation[b-ewbx023krw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Loading State */
.conversation-loading[b-ewbx023krw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
    color: var(--text-secondary);
}

.loading-spinner[b-ewbx023krw] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-ewbx023krw 1s linear infinite;
}

@keyframes spin-b-ewbx023krw {
    to {
        transform: rotate(360deg);
    }
}

/* Empty State */
.conversation-empty[b-ewbx023krw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
}

.conversation-empty i[b-ewbx023krw] {
    font-size: 3rem;
    color: var(--text-tertiary);
    opacity: 0.5;
}

.conversation-empty p[b-ewbx023krw] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
}

.empty-hint[b-ewbx023krw] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

/* Conversation Thread */
.conversation-thread[b-ewbx023krw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Message Card */
.message-card[b-ewbx023krw] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

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

/* Message Type Styling */
.message-inbound[b-ewbx023krw] {
    background: var(--card-bg);
}

.message-outbound[b-ewbx023krw] {
    background: #f0fdf4; /* Very subtle green tint */
}

.message-note[b-ewbx023krw] {
    background: #fffbeb; /* Subtle amber/yellow background */
    border: 1px dashed #f59e0b; /* Dashed amber border */
}

/* Message Header */
.message-header[b-ewbx023krw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid transparent;
}

.message-card:hover .message-header[b-ewbx023krw] {
    border-bottom-color: var(--border-color);
}

.message-header-left[b-ewbx023krw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.message-sender[b-ewbx023krw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
}

.message-sender strong[b-ewbx023krw] {
    color: var(--text-primary);
    font-weight: 600;
}

.message-email[b-ewbx023krw] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.message-meta[b-ewbx023krw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.message-badge[b-ewbx023krw] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-inbound[b-ewbx023krw] {
    background: #dbeafe;
    color: #1e40af;
}

.badge-reply[b-ewbx023krw] {
    background: #dcfce7;
    color: #166534;
}

.badge-forward[b-ewbx023krw] {
    background: #fed7aa;
    color: #c2410c;
}

.badge-note[b-ewbx023krw] {
    background: #fef3c7;
    color: #92400e;
}

.message-timestamp[b-ewbx023krw] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

.message-header-right[b-ewbx023krw] {
    display: flex;
    align-items: center;
}

.message-toggle-btn[b-ewbx023krw] {
    background: none;
    border: none;
    padding: 0.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.125rem;
    transition: color 0.2s;
}

.message-toggle-btn:hover[b-ewbx023krw] {
    color: var(--primary-color);
}

/* Message Preview (Collapsed) */
.message-preview[b-ewbx023krw] {
    padding: 0 1rem 1rem 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Message Body (Expanded) */
.message-body[b-ewbx023krw] {
    padding: 0 1rem 1rem 1rem;
    border-top: 1px solid var(--border-color);
}

.message-subject[b-ewbx023krw] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

.message-recipients[b-ewbx023krw] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.recipients-label[b-ewbx023krw] {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 30px;
}

.recipients-list[b-ewbx023krw] {
    color: var(--text-primary);
    flex: 1;
    word-break: break-word;
}

.message-content[b-ewbx023krw] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    line-height: 1.6;
    color: var(--text-primary);
}

/* Reset some common email HTML styles */
.message-content p[b-ewbx023krw] {
    margin: 0 0 1rem 0;
}

.message-content p:last-child[b-ewbx023krw] {
    margin-bottom: 0;
}

.message-content a[b-ewbx023krw] {
    color: var(--primary-color);
    text-decoration: underline;
}

.message-content img[b-ewbx023krw] {
    max-width: 100%;
    height: auto;
}

/* Message Attachments */
.message-attachments[b-ewbx023krw] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.attachments-header[b-ewbx023krw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.attachments-header i[b-ewbx023krw] {
    font-size: 1rem;
}

.attachments-list[b-ewbx023krw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.attachment-item[b-ewbx023krw] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.875rem;
}

.attachment-item i[b-ewbx023krw] {
    color: var(--text-secondary);
    font-size: 1.125rem;
}

.attachment-name[b-ewbx023krw] {
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
}

.attachment-size[b-ewbx023krw] {
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.attachment-download[b-ewbx023krw] {
    background: none;
    border: none;
    padding: 0.375rem;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    transition: color 0.2s;
}

.attachment-download:not(:disabled):hover[b-ewbx023krw] {
    color: var(--primary-color);
}

.attachment-download:disabled[b-ewbx023krw] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
    .message-header[b-ewbx023krw] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .message-header-right[b-ewbx023krw] {
        align-self: flex-end;
    }

    .message-sender[b-ewbx023krw] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .attachment-item[b-ewbx023krw] {
        flex-wrap: wrap;
    }

    .attachment-size[b-ewbx023krw] {
        order: 3;
        width: 100%;
        margin-left: 2rem;
    }
}
/* /Shared/MainLayout.razor.rz.scp.css */
/* App Loading State */
.app-loading[b-d3mszlnq1x] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-app);
}

.app-loading-spinner[b-d3mszlnq1x] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-d3mszlnq1x 0.8s linear infinite;
}

@keyframes spin-b-d3mszlnq1x {
    to {
        transform: rotate(360deg);
    }
}

/* Portal Indicator */
.portal-indicator[b-d3mszlnq1x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--bg-surface-hover);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.portal-indicator i[b-d3mszlnq1x] {
    font-size: 1rem;
    color: var(--indicator-color, var(--primary-color));
}

/* Topbar Buttons */
.topbar-btn[b-d3mszlnq1x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.topbar-btn:hover[b-d3mszlnq1x] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.topbar-btn i[b-d3mszlnq1x] {
    font-size: 1.125rem;
}

/* =========================================
   RESPONSIVE BREAKPOINTS
   ========================================= */

/* Medium screens: Auto-collapse sidebar to icon-only mode */
@media (max-width: 900px) {
    .sidebar[b-d3mszlnq1x] {
        width: var(--sidebar-width-collapsed);
        min-width: var(--sidebar-width-collapsed);
    }

    /* Hide all text elements */
    .sidebar .sidebar-app[b-d3mszlnq1x],
    .sidebar .sidebar-section-title[b-d3mszlnq1x],
    .sidebar .sidebar-link-label[b-d3mszlnq1x],
    .sidebar .sidebar-chevron[b-d3mszlnq1x],
    .sidebar .sidebar-submenu[b-d3mszlnq1x],
    .sidebar .sidebar-sublink span:last-child[b-d3mszlnq1x],
    .sidebar .nav-logo-text[b-d3mszlnq1x],
    .sidebar .cs-logo[b-d3mszlnq1x] {
        display: none !important;
        opacity: 0;
        visibility: hidden;
        width: 0;
        overflow: hidden;
        white-space: nowrap;
    }

    .sidebar .sidebar-header[b-d3mszlnq1x] {
        padding: 8px 0 16px 0;
        justify-content: center;
    }

    .sidebar .sidebar-logo[b-d3mszlnq1x] {
        margin: 0 auto;
    }

    /* Handle image logos in responsive mode */
    .sidebar .nav-logo[b-d3mszlnq1x] {
        max-width: 36px;
        width: 36px;
        height: 36px;
        object-fit: contain;
        margin: 0 auto;
        display: block;
    }

    .sidebar .nav-logo-link[b-d3mszlnq1x] {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    /* Show icon-only logo for Customer Service */
    .sidebar .cs-logo-icon[b-d3mszlnq1x] {
        display: flex !important;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
        border-radius: 8px;
        color: white;
        font-size: 1.25rem;
    }

    /* Center nav links */
    .sidebar .sidebar-link[b-d3mszlnq1x],
    .sidebar .sidebar-link-parent[b-d3mszlnq1x] {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 40px;
        padding: 0;
        gap: 0;
    }

    /* Consistent icon sizing */
    .sidebar .sidebar-link-icon[b-d3mszlnq1x],
    .sidebar .sidebar-sublink-icon[b-d3mszlnq1x] {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 0;
    }

    .sidebar .sidebar-link-icon i[b-d3mszlnq1x],
    .sidebar .sidebar-sublink-icon i[b-d3mszlnq1x] {
        font-size: 1.25rem;
    }

    .sidebar .sidebar-toggle[b-d3mszlnq1x] {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        top: 60px;
    }

    /* Show flyout panels on hover in responsive collapsed mode */
    .sidebar .nav-item.has-children[b-d3mszlnq1x] {
        position: relative;
    }

    .sidebar .nav-item.has-children:hover .flyout-panel[b-d3mszlnq1x] {
        display: block;
    }

    .sidebar .nav-item.has-children:hover[b-d3mszlnq1x] {
        z-index: 1001;
    }

    /* Tooltips for single links in responsive mode */
    .sidebar .nav-item:not(.has-children) .sidebar-link[b-d3mszlnq1x]::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 8px;
        padding: 6px 12px;
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        border-radius: 6px;
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s, visibility 0.15s;
        z-index: 1000;
    }

    .sidebar .nav-item:not(.has-children) .sidebar-link:hover[b-d3mszlnq1x]::after {
        opacity: 1;
        visibility: visible;
    }

    /* Hide tooltip on parent items that have flyouts */
    .sidebar .nav-item.has-children .sidebar-link-parent[b-d3mszlnq1x]::after {
        display: none !important;
    }

    /* Hide portal indicator text on smaller screens */
    .portal-indicator span[b-d3mszlnq1x] {
        display: none;
    }
}

/* Small screens: Hide sidebar, show hamburger toggle */
@media (max-width: 600px) {
    .sidebar[b-d3mszlnq1x] {
        position: fixed;
        left: -100%;
        top: 0;
        height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease;
    }

    .sidebar.mobile-open[b-d3mszlnq1x] {
        left: 0;
        width: var(--sidebar-width-expanded);
    }

    /* Reset collapsed styles when mobile sidebar is open */
    .sidebar.mobile-open .sidebar-app[b-d3mszlnq1x],
    .sidebar.mobile-open .sidebar-section-title[b-d3mszlnq1x],
    .sidebar.mobile-open .sidebar-link-label[b-d3mszlnq1x],
    .sidebar.mobile-open .sidebar-chevron[b-d3mszlnq1x],
    .sidebar.mobile-open .sidebar-submenu[b-d3mszlnq1x],
    .sidebar.mobile-open .sidebar-sublink span:last-child[b-d3mszlnq1x],
    .sidebar.mobile-open .nav-logo-text[b-d3mszlnq1x],
    .sidebar.mobile-open .cs-logo[b-d3mszlnq1x] {
        display: flex !important;
        opacity: 1;
        visibility: visible;
        width: auto;
    }

    .sidebar.mobile-open .sidebar-header[b-d3mszlnq1x] {
        padding: 0 20px 16px 20px;
        justify-content: flex-start;
    }

    /* Hide icon-only logo when mobile sidebar is open */
    .sidebar.mobile-open .cs-logo-icon[b-d3mszlnq1x] {
        display: none !important;
    }

    /* Reset logo sizing when mobile sidebar is open */
    .sidebar.mobile-open .nav-logo[b-d3mszlnq1x] {
        max-width: 180px;
        width: 100%;
        height: auto;
    }

    .sidebar.mobile-open .nav-logo-link[b-d3mszlnq1x] {
        display: block;
        justify-content: flex-start;
    }

    .sidebar.mobile-open .sidebar-link[b-d3mszlnq1x],
    .sidebar.mobile-open .sidebar-link-parent[b-d3mszlnq1x] {
        display: flex;
        padding: 8px 20px;
        justify-content: flex-start;
        gap: 12px;
        height: auto;
        width: auto;
    }

    /* Reset icon container sizing */
    .sidebar.mobile-open .sidebar-link-icon[b-d3mszlnq1x],
    .sidebar.mobile-open .sidebar-sublink-icon[b-d3mszlnq1x] {
        width: auto;
        display: inline-flex;
    }

    .sidebar.mobile-open .sidebar-toggle[b-d3mszlnq1x] {
        right: 8px;
        left: auto;
        transform: none;
        top: 16px;
    }

    /* Hide flyouts when mobile sidebar is open (show accordion instead) */
    .sidebar.mobile-open .flyout-panel[b-d3mszlnq1x] {
        display: none !important;
    }

    /* Hide tooltips when mobile sidebar is open */
    .sidebar.mobile-open .sidebar-link[b-d3mszlnq1x]::after,
    .sidebar.mobile-open .sidebar-link-parent[b-d3mszlnq1x]::after {
        display: none !important;
    }

    .app-main[b-d3mszlnq1x] {
        margin-left: 0;
    }

    .topbar[b-d3mszlnq1x] {
        padding: 0 1rem;
    }

    .content-area[b-d3mszlnq1x] {
        padding: 1rem;
    }

    /* Mobile hamburger toggle button */
    .mobile-menu-toggle[b-d3mszlnq1x] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        background: transparent;
        border-radius: 8px;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .mobile-menu-toggle:hover[b-d3mszlnq1x] {
        background: var(--bg-surface-hover);
        color: var(--text-primary);
    }

    .mobile-menu-toggle i[b-d3mszlnq1x] {
        font-size: 1.25rem;
    }

    /* Backdrop when mobile menu is open */
    .mobile-backdrop[b-d3mszlnq1x] {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .mobile-backdrop.visible[b-d3mszlnq1x] {
        opacity: 1;
        visibility: visible;
    }
}

/* Ensure hamburger toggle is hidden on larger screens */
@media (min-width: 601px) {
    .mobile-menu-toggle[b-d3mszlnq1x],
    .mobile-backdrop[b-d3mszlnq1x] {
        display: none;
    }
}
/* /Shared/Primitives/TkAvatar.razor.rz.scp.css */
.tk-avatar[b-humhlr52j2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full, 9999px);
    overflow: hidden;
    flex-shrink: 0;
    user-select: none;
    color: var(--primary-text-on-dark);
    font-weight: 600;
    line-height: 1;
}

/* Sizes */
.tk-avatar-sm[b-humhlr52j2] {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

.tk-avatar-md[b-humhlr52j2] {
    width: 36px;
    height: 36px;
    font-size: 13px;
}

.tk-avatar-lg[b-humhlr52j2] {
    width: 48px;
    height: 48px;
    font-size: 17px;
}

/* Image */
.tk-avatar-img[b-humhlr52j2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Initials */
.tk-avatar-initials[b-humhlr52j2] {
    letter-spacing: 0.02em;
}
/* /Shared/Primitives/TkCollapsibleContent.razor.rz.scp.css */
.tk-collapsible[b-t4kf36q5ay] {
    position: relative;
}

.tk-collapsible-content[b-t4kf36q5ay] {
    overflow: hidden;
    transition: max-height 0.25s ease;
}

/* collapsed/expanded state classes removed — base .tk-collapsible-content
   handles overflow:hidden; expanded-after-transition uses inline overflow:visible */

/* Gradient fade overlay when collapsed */
.tk-collapsible-fade[b-t4kf36q5ay] {
    position: absolute;
    bottom: 28px; /* above toggle button */
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--tk-collapsible-bg, var(--bg-surface))
    );
    pointer-events: none;
}

/* Toggle button */
.tk-collapsible-toggle[b-t4kf36q5ay] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.tk-collapsible-toggle:hover[b-t4kf36q5ay] {
    text-decoration: underline;
}

.tk-collapsible-toggle i[b-t4kf36q5ay] {
    font-size: 11px;
}
/* /Shared/Search/GlobalSearch.razor.rz.scp.css */
/* Global Search Component Styles */

.global-search[b-xvdr6xyx9x] {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.search-input-wrapper[b-xvdr6xyx9x] {
    display: flex;
    align-items: center;
    background: var(--color-surface, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 8px;
    padding: 0 12px;
    gap: 8px;
    transition: all 0.2s ease;
}

.search-input-wrapper:focus-within[b-xvdr6xyx9x] {
    border-color: var(--color-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.search-icon[b-xvdr6xyx9x] {
    color: var(--color-text-tertiary, #888);
    font-size: 14px;
}

.search-input-wrapper input[b-xvdr6xyx9x] {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 14px;
    color: var(--color-text, #e0e0e0);
    outline: none;
    min-width: 0;
}

.search-input-wrapper input[b-xvdr6xyx9x]::placeholder {
    color: var(--color-text-tertiary, #888);
}

.clear-btn[b-xvdr6xyx9x] {
    background: none;
    border: none;
    color: var(--color-text-tertiary, #888);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clear-btn:hover[b-xvdr6xyx9x] {
    background: var(--color-surface-hover, #2a2a3a);
    color: var(--color-text, #e0e0e0);
}

.shortcut-hint[b-xvdr6xyx9x] {
    background: var(--color-bg, #13131a);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    color: var(--color-text-tertiary, #888);
    font-family: inherit;
    white-space: nowrap;
}

/* Results Dropdown */
.search-results[b-xvdr6xyx9x] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--color-surface, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1000;
}

.search-loading[b-xvdr6xyx9x],
.search-empty[b-xvdr6xyx9x] {
    padding: 32px;
    text-align: center;
    color: var(--color-text-tertiary, #888);
}

.search-empty i[b-xvdr6xyx9x] {
    font-size: 32px;
    display: block;
    margin-bottom: 12px;
}

.search-empty p[b-xvdr6xyx9x] {
    margin: 0;
}

.search-empty strong[b-xvdr6xyx9x] {
    color: var(--color-text, #e0e0e0);
}

/* Result Groups */
.result-group[b-xvdr6xyx9x] {
    padding: 8px;
}

.result-group:not(:last-of-type)[b-xvdr6xyx9x] {
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.group-header[b-xvdr6xyx9x] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-tertiary, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.group-header .count[b-xvdr6xyx9x] {
    background: var(--color-bg, #13131a);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    margin-left: auto;
}

/* Result Items */
.result-item[b-xvdr6xyx9x] {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.result-item:hover[b-xvdr6xyx9x],
.result-item.selected[b-xvdr6xyx9x] {
    background: var(--color-surface-hover, #2a2a3a);
}

.result-content[b-xvdr6xyx9x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.result-title[b-xvdr6xyx9x] {
    font-weight: 500;
    color: var(--color-text, #e0e0e0);
    font-size: 14px;
}

.result-snippet[b-xvdr6xyx9x] {
    font-size: 13px;
    color: var(--color-text-secondary, #aaa);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Highlight matched text */
.result-title[b-xvdr6xyx9x]  mark,
.result-snippet[b-xvdr6xyx9x]  mark {
    background: rgba(59, 130, 246, 0.25);
    color: var(--color-primary, #3b82f6);
    padding: 0 2px;
    border-radius: 2px;
}

/* Footer with keyboard hints */
.search-footer[b-xvdr6xyx9x] {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 10px;
    border-top: 1px solid var(--color-border, #3a3a4a);
    font-size: 12px;
    color: var(--color-text-tertiary, #888);
}

.search-footer kbd[b-xvdr6xyx9x] {
    background: var(--color-bg, #13131a);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 11px;
    font-family: inherit;
}

/* Loading spinner */
.spin[b-xvdr6xyx9x] {
    animation: spin-b-xvdr6xyx9x 1s linear infinite;
}

@keyframes spin-b-xvdr6xyx9x {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Scrollbar styling */
.search-results[b-xvdr6xyx9x]::-webkit-scrollbar {
    width: 8px;
}

.search-results[b-xvdr6xyx9x]::-webkit-scrollbar-track {
    background: transparent;
}

.search-results[b-xvdr6xyx9x]::-webkit-scrollbar-thumb {
    background: var(--color-border, #3a3a4a);
    border-radius: 4px;
}

.search-results[b-xvdr6xyx9x]::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary, #888);
}
/* /Shared/SelfServiceLayout.razor.rz.scp.css */
/* =========================================
   SELF-SERVICE LAYOUT
   Matches other portal layouts (sidebar + main area)
   ========================================= */

.self-service-shell[b-95ibgzbum1] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    background: var(--bg-app);
}

/* Main Area (right of sidebar) */
.self-service-main-area[b-95ibgzbum1] {
    flex: 1;
    margin-left: var(--sidebar-width-expanded); /* Sidebar width */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.3s ease, margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Topbar (matches other portal topbars) */
.self-service-topbar[b-95ibgzbum1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    height: 60px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* Portal indicator in topbar */
.portal-indicator[b-95ibgzbum1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
}

.portal-indicator i[b-95ibgzbum1] {
    color: var(--indicator-color, var(--primary-color));
    font-size: 1rem;
}

.topbar-left[b-95ibgzbum1] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.topbar-right[b-95ibgzbum1] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* User avatar in topbar */
.topbar-avatar[b-95ibgzbum1] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
    color: var(--primary-text-on-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.topbar-avatar:hover[b-95ibgzbum1] {
    transform: scale(1.05);
}

/* User dropdown menu */
.user-menu-dropdown[b-95ibgzbum1] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 240px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    overflow: hidden;
}

.user-menu-header[b-95ibgzbum1] {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.user-menu-name[b-95ibgzbum1] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.user-menu-email[b-95ibgzbum1] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.user-menu-divider[b-95ibgzbum1] {
    height: 1px;
    background: var(--border-color);
}

.user-menu-item[b-95ibgzbum1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease;
}

.user-menu-item:hover[b-95ibgzbum1] {
    background: var(--bg-surface-hover);
}

.user-menu-item i[b-95ibgzbum1] {
    font-size: 1rem;
    width: 20px;
    color: var(--text-secondary);
}

/* Content Area */
.self-service-content[b-95ibgzbum1] {
    flex: 1;
    padding: 2rem;
    transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* CENTER THE CONTENT */
    display: flex;
    justify-content: center;
}

/* Content wrapper - limits width and enables centering */
.self-service-content-wrapper[b-95ibgzbum1] {
    width: 100%;
    max-width: 950px;
}

/* Panel open state - compress content area */
.self-service-content.panel-open[b-95ibgzbum1] {
    margin-right: 450px; /* Panel width */
}

/* Also adjust main area when panel is open */
.self-service-shell.panel-open .self-service-main-area[b-95ibgzbum1] {
    margin-right: 450px;
}

/* Responsive - Smaller side menu */
@media (max-width: 900px) {
    .self-service-main-area[b-95ibgzbum1] {
        margin-left: var(--sidebar-width-collapsed); /* Collapsed side menu width */
    }

    .portal-indicator span[b-95ibgzbum1] {
        display: none;
    }
}

/* Responsive - No side menu on mobile */
@media (max-width: 600px) {
    .self-service-main-area[b-95ibgzbum1] {
        margin-left: 0;
    }

    .self-service-content[b-95ibgzbum1] {
        padding: 1rem;
    }

    .self-service-topbar[b-95ibgzbum1] {
        padding: 0 1rem;
    }
}

@media (max-width: 768px) {
    .self-service-content.panel-open[b-95ibgzbum1],
    .self-service-shell.panel-open .self-service-main-area[b-95ibgzbum1] {
        margin-right: 0; /* Panel goes full-width on mobile */
    }
}
/* /Shared/Tickets/TicketPropertiesPanel.razor.rz.scp.css */
.properties-panel[b-ruc3c978bc] {
    display: flex;
    flex-direction: column;
}

/* Sidebar Card */
.sidebar-card[b-ruc3c978bc] {
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
    animation: tk-slideUp 0.3s ease backwards;
}

.sidebar-card:nth-child(1)[b-ruc3c978bc] { animation-delay: 0.10s; }
.sidebar-card:nth-child(2)[b-ruc3c978bc] { animation-delay: 0.15s; }
.sidebar-card:nth-child(3)[b-ruc3c978bc] { animation-delay: 0.20s; }

.sidebar-header[b-ruc3c978bc] {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-surface-hover);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-header i[b-ruc3c978bc] {
    font-size: 14px;
    color: var(--text-tertiary);
}

.sidebar-content[b-ruc3c978bc] {
    padding: 16px;
}

.sidebar-field[b-ruc3c978bc] {
    margin-bottom: 12px;
}

.sidebar-field:last-child[b-ruc3c978bc] {
    margin-bottom: 0;
}

.sidebar-field.half[b-ruc3c978bc] {
    flex: 1;
}

.sidebar-row[b-ruc3c978bc] {
    display: flex;
    gap: 16px;
}

.sidebar-field label[b-ruc3c978bc] {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}

.field-value[b-ruc3c978bc] {
    font-size: 13px;
    color: var(--text-primary);
}

.field-value.datetime[b-ruc3c978bc] {
    font-size: 12px;
    color: var(--text-secondary);
}

.sidebar-divider[b-ruc3c978bc] {
    height: 1px;
    background: var(--border-color);
    margin: 14px 0;
}

.person-row[b-ruc3c978bc] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.person-row.unassigned[b-ruc3c978bc] {
    opacity: 0.6;
}

.person-info[b-ruc3c978bc] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.person-name[b-ruc3c978bc] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.person-name.unassigned[b-ruc3c978bc] {
    font-style: italic;
    color: var(--text-tertiary);
}

.person-org[b-ruc3c978bc] {
    font-size: 11px;
    color: var(--text-tertiary);
}
/* /Shared/Ui/ToastContainer.razor.rz.scp.css */
.toast-container[b-8a005u60d7] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
    z-index: 9999;
    pointer-events: none;
}

.toast[b-8a005u60d7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    min-width: 300px;
    max-width: 450px;
    pointer-events: auto;
    animation: slideIn-b-8a005u60d7 0.3s ease;
}

@keyframes slideIn-b-8a005u60d7 {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast-icon[b-8a005u60d7] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.toast-success .toast-icon[b-8a005u60d7] { color: var(--success); }
.toast-error .toast-icon[b-8a005u60d7] { color: var(--danger); }
.toast-warning .toast-icon[b-8a005u60d7] { color: var(--warning); }
.toast-info .toast-icon[b-8a005u60d7] { color: var(--primary); }

.toast-content[b-8a005u60d7] {
    flex: 1;
    min-width: 0;
}

.toast-message[b-8a005u60d7] {
    font-size: 0.875rem;
    color: var(--text-primary);
}