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

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout Scoped Styles - Transferred from app.css */

.app-bar[b-j65y7q72mt],
.sidebar[b-j65y7q72mt] {
    /* Prevent font zoom scaling from affecting the header/sidebar layout and typography */
    --text-2xs: 10px !important;
    --text-xs: 12px !important;
    --text-sm: 13px !important;
    --text-base: 14px !important;
    --text-md: 16px !important;
    --text-lg: 18px !important;
    --text-xl: 20px !important;
    --text-2xl: 24px !important;
    --text-3xl: 30px !important;
    --text-4xl: 36px !important;

    /* Neutralize MudBlazor's relative rem typography scales inside header and sidebar */
    --mud-typography-default-size: 14px !important;
    --mud-typography-body1-size: 14px !important;
    --mud-typography-body2-size: 12px !important;
    --mud-typography-button-size: 14px !important;
    --mud-typography-input-size: 14px !important;
    --mud-typography-caption-size: 12px !important;
    --mud-typography-overline-size: 12px !important;
    --mud-typography-subtitle1-size: 16px !important;
    --mud-typography-subtitle2-size: 14px !important;
    --mud-typography-h1-size: 96px !important;
    --mud-typography-h2-size: 60px !important;
    --mud-typography-h3-size: 48px !important;
    --mud-typography-h4-size: 34px !important;
    --mud-typography-h5-size: 24px !important;
    --mud-typography-h6-size: 20px !important;
}

.app-layout[b-j65y7q72mt] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background-color: var(--slate-50);
    background-image:
        radial-gradient(at 0% 0%, hsla(217, 100%, 94%, 1) 0px, transparent 50%),
        radial-gradient(at 100% 0%, hsla(280, 100%, 95%, 1) 0px, transparent 50%),
        radial-gradient(at 100% 100%, hsla(200, 100%, 93%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(240, 100%, 96%, 1) 0px, transparent 50%);
    background-attachment: fixed;
    isolation: isolate;
    overflow: hidden;
}

.appbar-hover-trigger[b-j65y7q72mt] {
    display: none;
}

.app-body[b-j65y7q72mt] {
    display: flex;
    flex: 1;
    min-height: 0;
    padding-top: var(--appbar-height);
}

/* ── App Bar ── */
.app-bar[b-j65y7q72mt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--appbar-height);
    padding-top: var(--safe-top);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(24px) saturate(220%);
    -webkit-backdrop-filter: blur(24px) saturate(220%);
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    display: flex;
    align-items: center;
    padding-left: max(var(--page-pad), var(--safe-left));
    padding-right: max(var(--page-pad), var(--safe-right));
    z-index: var(--z-appbar);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 24px rgba(0, 0, 0, 0.02);
    animation: fadeInDown 0.7s var(--ease-ultra) forwards;
}

.app-bar[b-j65y7q72mt]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%, var(--primary-500) 15%, var(--primary-400) 35%,
            var(--indigo-400) 50%, var(--primary-400) 65%, var(--primary-500) 85%, transparent 100%);
    opacity: 0.3;
    background-size: 200% 100%;
    animation: gradientShift 10s ease-in-out infinite;
}

.menu-btn[b-j65y7q72mt] {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        background var(--duration-normal) var(--ease-ultra),
        color var(--duration-normal) var(--ease-ultra),
        transform var(--duration-normal) var(--ease-butter),
        box-shadow var(--duration-smooth) var(--ease-ultra);
}

.menu-btn:hover[b-j65y7q72mt] {
    background: var(--color-brand-surface);
    color: var(--color-brand);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

.menu-btn:active[b-j65y7q72mt] {
    transform: scale(0.88) rotate(-12deg);
    transition-duration: var(--duration-instant);
}

.app-title[b-j65y7q72mt] {
    font-family: var(--font-display);
    font-size: clamp(var(--text-base), 3vw, var(--text-xl));
    font-weight: 800;
    margin-left: var(--space-2);
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--slate-900) 0%, var(--slate-700) 40%, var(--primary-700) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    user-select: none;
    animation: gradientShift 8s ease infinite;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.spacer[b-j65y7q72mt] {
    flex: 1;
    min-width: 0;
}

.app-bar-top-row[b-j65y7q72mt],
.header-actions-top-right[b-j65y7q72mt],
.header-actions-bottom-row[b-j65y7q72mt] {
    display: contents !important;
}

.header-workspace-pill-container[b-j65y7q72mt] {
    display: none !important;
}

.menu-btn[b-j65y7q72mt] {
    order: 1 !important;
}
.app-title[b-j65y7q72mt] {
    order: 2 !important;
    display: block !important;
}
.spacer[b-j65y7q72mt] {
    order: 3 !important;
    display: block !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.header-actions-system[b-j65y7q72mt] {
    order: 4 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    flex-shrink: 0 !important;
}
.header-actions-context[b-j65y7q72mt] {
    order: 5 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    flex-shrink: 0 !important;
}
.header-actions-avatar[b-j65y7q72mt] {
    order: 6 !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-left: var(--space-2) !important;
}


/* ── Unit & Company Selectors ── */
[b-j65y7q72mt] .unit-selector,
[b-j65y7q72mt] .company-selector {
    background: var(--slate-50) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-1) var(--space-2) !important;
    border: 1.5px solid var(--color-border-default) !important;
    min-width: 0 !important;
    width: clamp(120px, 20vw, 220px) !important;
    height: 38px !important;
    transition:
        border-color var(--duration-normal) var(--ease-ultra),
        box-shadow var(--duration-smooth) var(--ease-ultra),
        background var(--duration-normal) var(--ease-ultra),
        transform var(--duration-normal) var(--ease-ultra) !important;
}

[b-j65y7q72mt] .unit-selector:hover,
[b-j65y7q72mt] .company-selector:hover {
    border-color: var(--primary-300) !important;
    background: var(--color-bg-surface) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06);
}

[b-j65y7q72mt] .unit-selector:focus-within,
[b-j65y7q72mt] .company-selector:focus-within {
    border-color: var(--primary-400) !important;
    box-shadow: var(--shadow-brand), 0 0 0 4px rgba(37, 99, 235, 0.06) !important;
    transform: translateY(-1px);
}

[b-j65y7q72mt] .unit-selector .mud-input-slot,
[b-j65y7q72mt] .company-selector .mud-input-slot {
    font-family: inherit !important;
    width: 100% !important;
    font-weight: 600 !important;
    color: var(--slate-900) !important;
    font-size: var(--text-sm) !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    /* Enable horizontal scrolling */
    overflow-y: hidden !important;
    padding-right: 32px !important;
    scrollbar-width: none !important;
    /* Hide scrollbar for Firefox */
    -ms-overflow-style: none !important;
    /* Hide scrollbar for IE/Edge */
}

/* Hide scrollbar for Chrome/Safari */
[b-j65y7q72mt] .unit-selector .mud-input-slot::-webkit-scrollbar,
[b-j65y7q72mt] .company-selector .mud-input-slot::-webkit-scrollbar {
    display: none !important;
}

[b-j65y7q72mt] .unit-selector .mud-input,
[b-j65y7q72mt] .company-selector .mud-input {
    width: 100% !important;
    overflow: hidden !important;
}

/* Popover styles moved to global app.css to handle teleportation */

/* ── Avatar ── */
[b-j65y7q72mt] .mud-avatar {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700)) !important;
    color: white !important;
    font-weight: 700 !important;
    cursor: pointer;
    border: 2.5px solid white !important;
    box-shadow: var(--shadow-brand);
    flex-shrink: 0;
    transition:
        transform var(--duration-normal) var(--ease-butter),
        box-shadow var(--duration-smooth) var(--ease-ultra) !important;
}

[b-j65y7q72mt] .mud-avatar:hover {
    transform: scale(1.14) rotate(3deg) !important;
    box-shadow: var(--shadow-brand-lg), 0 0 0 4px rgba(37, 99, 235, 0.1);
}

[b-j65y7q72mt] .mud-avatar:active {
    transform: scale(1.02) rotate(0deg) !important;
    transition-duration: var(--duration-instant);
}

/* ── Sidebar ── */
.sidebar[b-j65y7q72mt] {
    position: fixed;
    top: var(--appbar-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: linear-gradient(180deg, var(--slate-950) 0%, #0b1220 35%, #0d1628 65%, var(--slate-900) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    z-index: var(--z-sidebar);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 4px 0 40px rgba(0, 0, 0, 0.18);
    padding-bottom: var(--safe-bottom);
    transform: translateX(calc(-1 * var(--sidebar-width)));
}

.sidebar.open[b-j65y7q72mt] {
    transform: translateX(0);
}

.sidebar.closed[b-j65y7q72mt] {
    transform: translateX(calc(-1 * var(--sidebar-width)));
}

.sidebar[b-j65y7q72mt] {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.sidebar[b-j65y7q72mt]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.sidebar[b-j65y7q72mt]::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar[b-j65y7q72mt]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}

.sidebar[b-j65y7q72mt]::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.25);
}

.sidebar[b-j65y7q72mt]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 240px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, rgba(99, 102, 241, 0.04) 0%, transparent 50%);
    pointer-events: none;
    animation: ambientGlow 8s ease-in-out infinite;
}


/* Navigation styles moved to NavMenu.razor.css */

/* ── Main Content Area ── */
.main-content[b-j65y7q72mt] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    margin-left: 0;
    transition: margin-left var(--duration-slow) var(--ease-ultra);
    background: transparent;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: hidden;
}

.page-content[b-j65y7q72mt] {
    flex: 1;
    min-height: 0;
    padding: var(--page-pad);
    padding-bottom: max(var(--page-pad), var(--safe-bottom));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Mobile Overlay ── */
.overlay[b-j65y7q72mt] {
    display: none;
    position: fixed;
    top: var(--appbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-overlay);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    z-index: var(--z-overlay);
    opacity: 0;
    transition: opacity var(--duration-smooth) var(--ease-ultra);
    -webkit-tap-highlight-color: transparent;
}

.overlay.show[b-j65y7q72mt] {
    opacity: 1;
    display: block;
    animation: fadeIn 0.4s var(--ease-ultra) forwards;
}

@media (min-width: 1024px) {
    .appbar-hover-trigger[b-j65y7q72mt] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 8px;
        z-index: 999;
        background: transparent;
    }

    .app-bar[b-j65y7q72mt] {
        transform: translateY(-100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
        animation: none !important;
        cursor: pointer;
    }

    .app-bar.pinned[b-j65y7q72mt] {
        transform: translateY(0) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 24px rgba(0, 0, 0, 0.02) !important;
    }

    .app-bar-actions[b-j65y7q72mt],
    .menu-btn[b-j65y7q72mt],
    .app-title[b-j65y7q72mt] {
        cursor: default;
    }

    .appbar-hover-trigger:hover+.app-bar[b-j65y7q72mt],
    .app-bar:hover[b-j65y7q72mt] {
        transform: translateY(0);
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(37, 99, 235, 0.05);
    }

    .app-body[b-j65y7q72mt] {
        padding-top: 0 !important;
        transition: padding-top 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* Push layout down dynamically on hover/reveal or when pinned */
    .appbar-hover-trigger:hover+.app-bar~.app-body[b-j65y7q72mt],
    .app-bar:hover~.app-body[b-j65y7q72mt],
    .app-bar.pinned~.app-body[b-j65y7q72mt] {
        padding-top: var(--appbar-height) !important;
    }

    .sidebar[b-j65y7q72mt] {
        transform: translateX(0);
        top: 0 !important;
        padding-top: 0 !important;
        transition: transform var(--duration-slow) var(--ease-ultra), padding-top 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* Push sidebar down dynamically on hover/reveal or when pinned */
    .appbar-hover-trigger:hover+.app-bar~.app-body .sidebar[b-j65y7q72mt],
    .app-bar:hover~.app-body .sidebar[b-j65y7q72mt],
    .app-bar.pinned~.app-body .sidebar[b-j65y7q72mt] {
        padding-top: var(--appbar-height) !important;
    }

    /* Clean up double branding: collapse sidebar brand and divider when header is visible */
    [b-j65y7q72mt] .sidebar-brand {
        opacity: 1;
        height: 94px;
        box-sizing: border-box !important;
        padding: 28px 22px 22px !important;
        overflow: hidden;
        transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
            height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
            padding 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    [b-j65y7q72mt] .sidebar-brand+.sidebar-divider {
        opacity: 0.7;
        margin: 6px 20px !important;
        transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
            margin 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .appbar-hover-trigger:hover+.app-bar~.app-body[b-j65y7q72mt]  .sidebar-brand,
    .app-bar:hover~.app-body[b-j65y7q72mt]  .sidebar-brand,
    .app-bar.pinned~.app-body[b-j65y7q72mt]  .sidebar-brand {
        opacity: 0 !important;
        height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        pointer-events: none;
    }

    .appbar-hover-trigger:hover+.app-bar~.app-body[b-j65y7q72mt]  .sidebar-brand+.sidebar-divider,
    .app-bar:hover~.app-body[b-j65y7q72mt]  .sidebar-brand+.sidebar-divider,
    .app-bar.pinned~.app-body[b-j65y7q72mt]  .sidebar-brand+.sidebar-divider {
        opacity: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        height: 0 !important;
        border: none !important;
    }

    .sidebar.closed[b-j65y7q72mt] {
        transform: translateX(calc(-1 * var(--sidebar-width)));
    }

    .main-content[b-j65y7q72mt] {
        margin-left: var(--sidebar-width);
    }

    .main-content.full-width[b-j65y7q72mt] {
        margin-left: 0;
    }

    .overlay[b-j65y7q72mt] {
        display: none !important;
    }
}

/* Year-Month Input */
.yearmonth-input[b-j65y7q72mt] {
    width: 80px !important;
    min-width: 80px !important;
    margin-right: 8px;
}

[b-j65y7q72mt] .yearmonth-input .mud-input {
    background: var(--slate-50) !important;
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--color-border-default) !important;
    height: 38px !important;
    padding: 0 8px !important;
}

[b-j65y7q72mt] .yearmonth-input .mud-input-outlined-border {
    border: none !important;
}

[b-j65y7q72mt] .yearmonth-input .mud-input-slot {
    font-weight: 600 !important;
    color: var(--slate-900) !important;
    font-size: var(--text-base) !important;
    padding: 0 !important;
    text-align: center;
}

[b-j65y7q72mt] .yearmonth-input .mud-input:hover {
    border-color: var(--primary-300) !important;
    background: white !important;
}

@media (max-width: 768px) {
    .yearmonth-input[b-j65y7q72mt] {
        width: 70px !important;
        min-width: 70px !important;
    }
}

/* ── Dynamic Text Zoom Controls ── */
.zoom-controls-wrapper[b-j65y7q72mt] {
    background: var(--slate-50);
    border: 1.5px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0 4px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    transition:
        border-color var(--duration-normal) var(--ease-ultra),
        box-shadow var(--duration-smooth) var(--ease-ultra),
        background var(--duration-normal) var(--ease-ultra),
        transform var(--duration-normal) var(--ease-ultra) !important;
}

.zoom-controls-wrapper:hover[b-j65y7q72mt] {
    border-color: var(--primary-300) !important;
    background: var(--color-bg-surface) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06);
}

.zoom-controls-wrapper:focus-within[b-j65y7q72mt] {
    border-color: var(--primary-400) !important;
    box-shadow: var(--shadow-brand), 0 0 0 4px rgba(37, 99, 235, 0.06) !important;
}

.zoom-percentage-text[b-j65y7q72mt] {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--slate-700);
    min-width: 42px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: color var(--duration-normal) var(--ease-ultra);
    padding: 0 4px;
}

.zoom-percentage-text:hover[b-j65y7q72mt] {
    color: var(--color-brand);
}

[b-j65y7q72mt] .zoom-btn {
    padding: 6px !important;
    color: var(--slate-500) !important;
    transition:
        color var(--duration-normal) var(--ease-ultra),
        transform var(--duration-normal) var(--ease-butter) !important;
}

[b-j65y7q72mt] .zoom-btn:hover {
    color: var(--color-brand) !important;
    background: var(--color-brand-surface) !important;
    transform: scale(1.1) !important;
}

[b-j65y7q72mt] .zoom-btn:active {
    transform: scale(0.9) !important;
}

/* ── Responsive Header Layout for Mobile & Tablet ── */
@media (max-width: 1023.98px) {
    .app-layout[b-j65y7q72mt] {
        --appbar-height: 56px !important;
    }

    .app-bar[b-j65y7q72mt] {
        display: flex !important;
        flex-direction: row !important;
        height: var(--appbar-height) !important;
        padding: 0 16px !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .app-bar-top-row[b-j65y7q72mt] {
        display: contents !important;
    }

    .menu-btn[b-j65y7q72mt] {
        order: 1 !important;
    }

    .app-title[b-j65y7q72mt] {
        display: none !important;
    }

    .spacer[b-j65y7q72mt] {
        display: none !important;
    }

    .header-workspace-pill-container[b-j65y7q72mt] {
        display: flex !important;
        order: 2 !important;
        justify-content: center;
        align-items: center;
        flex: 1;
        min-width: 0;
        margin: 0 8px;
    }

    .header-workspace-pill[b-j65y7q72mt] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1.5px solid var(--color-border-default);
        border-radius: 20px;
        padding: 6px 12px;
        max-width: 100%;
        height: 34px;
        color: var(--slate-700);
        font-weight: 600;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .header-workspace-pill:hover[b-j65y7q72mt] {
        background: rgba(255, 255, 255, 0.9);
        border-color: var(--primary-300);
        color: var(--primary-600);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    .header-workspace-pill:active[b-j65y7q72mt] {
        transform: scale(0.95);
        background: rgba(241, 245, 249, 0.9);
    }

    .header-workspace-pill .pill-text[b-j65y7q72mt] {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        max-width: 180px;
    }

    .header-actions-top-right[b-j65y7q72mt] {
        display: contents !important;
    }

    .header-actions-system[b-j65y7q72mt] {
        display: none !important;
    }

    .header-actions-avatar[b-j65y7q72mt] {
        order: 3 !important;
        display: flex !important;
        align-items: center;
        margin-left: 0 !important;
    }

    [b-j65y7q72mt] .mud-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    .header-actions-bottom-row[b-j65y7q72mt] {
        display: none !important;
    }
}

/* ── Workspace Drawer Bottom Sheet ── */
.workspace-drawer-overlay[b-j65y7q72mt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fadeIn 0.3s ease-out forwards;
}

.workspace-drawer-sheet[b-j65y7q72mt] {
    width: 100%;
    max-width: 500px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(30px) saturate(190%);
    -webkit-backdrop-filter: blur(30px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px 24px 0 0;
    box-shadow: 
        0 -10px 40px rgba(0, 0, 0, 0.1),
        0 10px 50px rgba(37, 99, 235, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: max(20px, var(--safe-bottom));
    animation: slideUp-b-j65y7q72mt 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform: translateY(100%);
}

.drawer-header-bar[b-j65y7q72mt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid rgba(226, 232, 240, 0.4);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.5), rgba(241, 245, 249, 0.3));
}

.drawer-notch[b-j65y7q72mt] {
    width: 36px;
    height: 4px;
    background: rgba(148, 163, 184, 0.4);
    border-radius: 2px;
    margin-top: 8px;
    margin-bottom: 4px;
}

.drawer-title-text[b-j65y7q72mt] {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    color: var(--slate-900);
}

.drawer-close-btn[b-j65y7q72mt] {
    color: var(--slate-500) !important;
}

.drawer-body-content[b-j65y7q72mt] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 80vh;
    overflow-y: auto;
}

.drawer-field-group[b-j65y7q72mt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.drawer-field-label[b-j65y7q72mt] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-500);
}

.drawer-select-wrapper[b-j65y7q72mt] {
    position: relative;
    width: 100%;
}

[b-j65y7q72mt] .drawer-company-select,
[b-j65y7q72mt] .drawer-unit-select {
    background: var(--slate-50) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-2) var(--space-3) !important;
    border: 1.5px solid var(--color-border-default) !important;
    width: 100% !important;
    height: 44px !important;
    transition: all 0.2s ease !important;
}

[b-j65y7q72mt] .drawer-company-select:hover,
[b-j65y7q72mt] .drawer-unit-select:hover {
    border-color: var(--primary-300) !important;
    background: white !important;
}

[b-j65y7q72mt] .drawer-company-select .mud-input,
[b-j65y7q72mt] .drawer-unit-select .mud-input {
    width: 100% !important;
}

[b-j65y7q72mt] .drawer-company-select .mud-input-slot,
[b-j65y7q72mt] .drawer-unit-select .mud-input-slot {
    font-family: inherit !important;
    width: 100% !important;
    font-weight: 600 !important;
    color: var(--slate-900) !important;
    font-size: 13px !important;
}

.drawer-yearmonth-wrapper[b-j65y7q72mt] {
    width: 100%;
}

.drawer-yearmonth-input[b-j65y7q72mt] {
    width: 100% !important;
}

[b-j65y7q72mt] .drawer-yearmonth-input .mud-input {
    background: var(--slate-50) !important;
    border-radius: var(--radius-lg) !important;
    border: 1.5px solid var(--color-border-default) !important;
    height: 44px !important;
    padding: 0 12px !important;
}

[b-j65y7q72mt] .drawer-yearmonth-input .mud-input-outlined-border {
    border: none !important;
}

[b-j65y7q72mt] .drawer-yearmonth-input .mud-input-slot {
    font-weight: 600 !important;
    color: var(--slate-900) !important;
    font-size: 14px !important;
    text-align: left !important;
}

[b-j65y7q72mt] .drawer-yearmonth-input .mud-input:hover {
    border-color: var(--primary-300) !important;
    background: white !important;
}

/* Drawer Zoom controls */
.drawer-zoom-row[b-j65y7q72mt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--slate-50);
    border: 1.5px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: 4px;
    height: 44px;
}

.drawer-zoom-btn[b-j65y7q72mt] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    color: var(--slate-600);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.drawer-zoom-btn:hover[b-j65y7q72mt] {
    background: rgba(37, 99, 235, 0.08);
    color: var(--color-brand);
}

.drawer-zoom-btn:active[b-j65y7q72mt] {
    transform: scale(0.95);
}

.drawer-zoom-value[b-j65y7q72mt] {
    font-size: 13px;
    font-weight: 700;
    color: var(--slate-800);
    cursor: pointer;
}

.drawer-zoom-value:hover[b-j65y7q72mt] {
    color: var(--color-brand);
}

/* Actions Grid (Support & Bug Report) */
.drawer-actions-grid[b-j65y7q72mt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.drawer-utility-btn[b-j65y7q72mt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(226, 232, 240, 0.8);
    background: white;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.drawer-utility-btn:active[b-j65y7q72mt] {
    transform: scale(0.96);
}

.drawer-utility-btn.support-btn[b-j65y7q72mt] {
    border-color: rgba(34, 197, 94, 0.2);
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.02);
}

.drawer-utility-btn.support-btn:hover[b-j65y7q72mt] {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.05);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.08);
}

.drawer-utility-btn.support-btn .mud-icon-root[b-j65y7q72mt] {
    color: #22c55e !important;
}

.drawer-utility-btn.bug-btn[b-j65y7q72mt] {
    border-color: rgba(239, 68, 68, 0.2);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.02);
}

.drawer-utility-btn.bug-btn:hover[b-j65y7q72mt] {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.05);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.08);
}

.drawer-utility-btn.bug-btn .mud-icon-root[b-j65y7q72mt] {
    color: #ef4444 !important;
}

.btn-text-content[b-j65y7q72mt] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.btn-main-txt[b-j65y7q72mt] {
    font-size: 13px;
    font-weight: 700;
    color: var(--slate-800);
}

.btn-sub-txt[b-j65y7q72mt] {
    font-size: 10px;
    color: var(--slate-400);
}

@keyframes slideUp-b-j65y7q72mt {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@media (max-width: 599.98px) {
    .app-title[b-j65y7q72mt] {
        display: none !important;
    }
}

/* Glassmorphic Bug Report Dialog */
.bug-report-overlay[b-j65y7q72mt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
    animation: fadeInModal-b-j65y7q72mt 0.4s var(--ease-ultra) forwards;
}

.bug-report-modal[b-j65y7q72mt] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(30px) saturate(190%);
    -webkit-backdrop-filter: blur(30px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.1),
        0 10px 50px rgba(37, 99, 235, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: scaleInModal-b-j65y7q72mt 0.4s var(--ease-butter) forwards;
    color: var(--slate-900);
}

.bug-report-header[b-j65y7q72mt] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, rgba(248, 250, 252, 0.5), rgba(241, 245, 249, 0.5));
}

.bug-report-title[b-j65y7q72mt] {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-lg);
    background: linear-gradient(135deg, var(--slate-900) 0%, var(--primary-700) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bug-report-content[b-j65y7q72mt] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.screenshot-preview-container[b-j65y7q72mt] {
    width: 100%;
    height: 240px;
    border-radius: var(--radius-lg);
    background: rgba(15, 23, 42, 0.03);
    border: 1.5px dashed rgba(148, 163, 184, 0.4);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.screenshot-preview-container:hover[b-j65y7q72mt] {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.06);
}

.screenshot-img[b-j65y7q72mt] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.screenshot-img:hover[b-j65y7q72mt] {
    transform: scale(1.02);
}

.screenshot-loading-placeholder[b-j65y7q72mt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--slate-500);
}

.screenshot-loading-placeholder p[b-j65y7q72mt] {
    font-size: var(--text-sm);
    font-weight: 500;
}

.bug-description-area[b-j65y7q72mt] {
    width: 100%;
    min-height: 120px;
    border-radius: var(--radius-lg);
    border: 1.5px solid rgba(148, 163, 184, 0.3);
    background: rgba(255, 255, 255, 0.6);
    padding: 12px 16px;
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--slate-900);
    outline: none;
    resize: vertical;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.bug-description-area:focus[b-j65y7q72mt] {
    border-color: var(--primary-400);
    background: white;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08), inset 0 2px 4px rgba(0, 0, 0, 0.01);
}

.bug-report-footer[b-j65y7q72mt] {
    padding: 16px 24px;
    border-top: 1px solid rgba(226, 232, 240, 0.4);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: linear-gradient(90deg, rgba(241, 245, 249, 0.5), rgba(248, 250, 252, 0.5));
}

.bug-report-btn[b-j65y7q72mt] {
    margin-right: 4px;
}

.bug-report-btn:hover[b-j65y7q72mt] {
    background: rgba(239, 68, 68, 0.08) !important;
    color: var(--color-error) !important;
}

@keyframes fadeInModal-b-j65y7q72mt {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleInModal-b-j65y7q72mt {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ═══════════════════════════════════════
   SUPPORT PANEL — Channel Cards & Form
   ═══════════════════════════════════════ */

/* Notification badge on support button */
.support-badge[b-j65y7q72mt] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 999px;
    pointer-events: none;
}

/* Wider modal for support panel */
.support-modal[b-j65y7q72mt] {
    max-width: 520px !important;
}

/* Grid of 3 channel cards */
.support-channels-grid[b-j65y7q72mt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.support-channel-card[b-j65y7q72mt] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: var(--radius-lg);
    background: rgba(248, 250, 252, 0.6);
    border: 1.5px solid rgba(226, 232, 240, 0.5);
    cursor: pointer;
    transition: all 0.18s var(--ease-default);
    user-select: none;
}

.support-channel-card:hover[b-j65y7q72mt] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
    border-color: rgba(99, 102, 241, 0.3);
}

.support-channel-card:active[b-j65y7q72mt] {
    transform: translateY(0);
}

.channel-card-icon[b-j65y7q72mt] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.channel-card-body[b-j65y7q72mt] {
    flex: 1;
}

.channel-card-title[b-j65y7q72mt] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--slate-800);
    margin-bottom: 2px;
}

.channel-card-sub[b-j65y7q72mt] {
    font-size: 0.78rem;
    color: var(--slate-500);
}

/* Back button in form view */
.support-back-btn[b-j65y7q72mt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--slate-500);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 0;
    margin-bottom: 4px;
    transition: color 0.15s;
}

.support-back-btn:hover[b-j65y7q72mt] {
    color: var(--slate-800);
}

/* 2-column form grid */
.support-form-grid[b-j65y7q72mt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

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

/* Field label */
.field-label[b-j65y7q72mt] {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-500);
    margin-bottom: 4px;
}

/* ── Mobile/Tablet Snappy Transitions & Instant Close ── */
@media (max-width: 1023.98px) {
    .sidebar[b-j65y7q72mt] {
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .sidebar.open[b-j65y7q72mt] {
        transform: translateX(0);
        visibility: visible !important;
        box-shadow: 4px 0 40px rgba(0, 0, 0, 0.18) !important;
    }
    .sidebar.closed[b-j65y7q72mt] {
        transform: translateX(calc(-1 * var(--sidebar-width)));
        box-shadow: none !important;
        visibility: hidden !important;
    }
    .overlay[b-j65y7q72mt] {
        transition: opacity 0.22s ease, visibility 0.22s ease !important;
        visibility: hidden;
        opacity: 0;
        display: block !important;
    }
    .overlay.show[b-j65y7q72mt] {
        opacity: 1;
        visibility: visible;
    }
    .page-content[b-j65y7q72mt] {
        padding-bottom: calc(var(--page-pad) + 68px + var(--safe-bottom)) !important;
    }
}

/* ── Bottom Navigation Bar ── */
.bottom-nav-bar[b-j65y7q72mt] {
    display: none !important;
}

@media (max-width: 1023.98px) {
    .bottom-nav-bar[b-j65y7q72mt] {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: calc(60px + var(--safe-bottom)) !important;
        padding-bottom: var(--safe-bottom) !important;
        background: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(24px) saturate(220%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(220%) !important;
        border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04) !important;
        z-index: 1000 !important;
        justify-content: space-around !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .bottom-nav-item[b-j65y7q72mt] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        height: 100% !important;
        flex: 1 !important;
        color: var(--slate-400) !important;
        transition: all 0.2s var(--ease-expo) !important;
        cursor: pointer !important;
        padding: 4px 0 !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .bottom-nav-item .bottom-nav-label[b-j65y7q72mt] {
        font-size: 10px !important;
        font-weight: 600 !important;
        margin-top: 3px !important;
        color: var(--slate-500) !important;
        transition: color 0.2s !important;
    }

    .bottom-nav-item .mud-icon-root[b-j65y7q72mt] {
        color: var(--slate-400) !important;
        font-size: 22px !important;
        transition: color 0.2s, transform 0.2s !important;
    }

    .bottom-nav-item:active[b-j65y7q72mt] {
        transform: scale(0.90) !important;
    }

    .bottom-nav-item.active[b-j65y7q72mt] {
        color: var(--primary-600) !important;
    }

    .bottom-nav-item.active .mud-icon-root[b-j65y7q72mt] {
        color: var(--primary-600) !important;
        transform: translateY(-2px) !important;
    }

    .bottom-nav-item.active .bottom-nav-label[b-j65y7q72mt] {
        color: var(--primary-600) !important;
        font-weight: 700 !important;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Nova NavMenu — Clean Dark Sidebar
   Matches reference: small icons, blue active pill, 
   uppercase section labels, dark navy background
═══════════════════════════════════════════════════════════ */

:root[b-5bndfk4shp] {
    /* Brand */
    --nova-blue: #3b82f6;
    --nova-blue-400: #60a5fa;
    --nova-blue-600: #2563eb;
    --nova-blue-700: #1d4ed8;
    --nova-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);

    /* Surfaces */
    --sb-bg-deep: #070d1a;
    --sb-bg-primary: #0b1526;
    --sb-surface-hover: rgba(255, 255, 255, 0.05);

    /* Text */
    --sb-text-bright: #ffffff;
    --sb-text-primary: rgba(255, 255, 255, 0.88);
    --sb-text-secondary: rgba(255, 255, 255, 0.55);
    --sb-text-muted: rgba(255, 255, 255, 0.30);

    /* Icons */
    --sb-icon-default: rgba(255, 255, 255, 0.35);
    --sb-icon-hover: rgba(255, 255, 255, 0.65);
    --sb-icon-active: #ffffff;

    /* Borders */
    --sb-border: rgba(255, 255, 255, 0.06);

    /* Shape */
    --sb-radius: 10px;

    /* Motion */
    --sb-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --sb-speed: 0.18s;

    /* Nav sizing — compact to match reference */
    --nav-font-top: 14px;
    --nav-font-child: 13px;
    --nav-icon-size: 18px;
    --nav-icon-size-child: 12px;
    --nav-icon-box: 28px;
    --nav-icon-box-child: 20px;
    --nav-icon-gap: 10px;
    --nav-icon-gap-child: 8px;
    --nav-px: 12px;
    --nav-py-top: 10px;
    --nav-py-child: 8px;
    --nav-mx: 0px;
}

/* ─────────────────────────────────────────────
   MENU WRAPPER
───────────────────────────────────────────── */
[b-5bndfk4shp] .nova-nav.mud-navmenu {
    padding: 4px 0 !important;
}

/* ─────────────────────────────────────────────
   SECTION LABELS (MAIN CONSOLE / CONFIGURATIONS)
───────────────────────────────────────────── */
.nav-section[b-5bndfk4shp] {
    padding: 18px var(--nav-px) 8px var(--nav-px);
}

.nav-label[b-5bndfk4shp] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--sb-text-muted);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* Horizontal line extending after label text */
.nav-label[b-5bndfk4shp]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--sb-border);
}

/* ─────────────────────────────────────────────
   BOTTOM SECTION
───────────────────────────────────────────── */
.nav-bottom-section[b-5bndfk4shp] {
    margin-top: auto;
    padding: 0 0 20px;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   SIDEBAR BRAND
───────────────────────────────────────────── */
.sidebar-brand[b-5bndfk4shp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px var(--nav-px) 18px;
}

.brand-logo[b-5bndfk4shp] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
}

.brand-text[b-5bndfk4shp] {
    font-size: 16px;
    font-weight: 700;
    color: var(--sb-text-bright);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────
   SIDEBAR DIVIDER
───────────────────────────────────────────── */
[b-5bndfk4shp] .sidebar-divider {
    border-color: var(--sb-border) !important;
    margin: 4px var(--nav-px) !important;
    opacity: 0.6;
}

/* ─────────────────────────────────────────────
   BASE LINK (top-level items)
───────────────────────────────────────────── */
[b-5bndfk4shp] .mud-nav-link {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    border-radius: var(--sb-radius) !important;
    margin: 2px var(--nav-mx) !important;
    padding: var(--nav-py-top) var(--nav-px) !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative !important;
    overflow: hidden !important;
    transition:
        background var(--sb-speed) var(--sb-ease),
        transform var(--sb-speed) var(--sb-ease) !important;
}

/* ─────────────────────────────────────────────
   ICON — top-level
───────────────────────────────────────────── */
[b-5bndfk4shp] .mud-nav-link .nav-mud-icon,
[b-5bndfk4shp] .nova-group.mud-nav-group > .mud-nav-link .nav-mud-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: var(--nav-icon-box) !important;
    height: var(--nav-icon-box) !important;
    min-width: var(--nav-icon-box) !important;
    margin-right: var(--nav-icon-gap) !important;
    color: var(--sb-icon-default) !important;
    fill: var(--sb-icon-default) !important;
    background: transparent !important;
    border-radius: 8px !important;
    transition:
        color var(--sb-speed) var(--sb-ease),
        fill var(--sb-speed) var(--sb-ease),
        background var(--sb-speed) var(--sb-ease),
        transform var(--sb-speed) var(--sb-ease) !important;
}

[b-5bndfk4shp] .mud-nav-link .nav-mud-icon:empty {
    display: none !important;
}

[b-5bndfk4shp] .mud-nav-link .nav-mud-icon .mud-icon-size-small {
    width: var(--nav-icon-size) !important;
    height: var(--nav-icon-size) !important;
}

/* ─────────────────────────────────────────────
   ICON — child links (slightly smaller)
───────────────────────────────────────────── */
[b-5bndfk4shp] .nova-child-link.mud-nav-link .nav-mud-icon {
    width: var(--nav-icon-box-child) !important;
    height: var(--nav-icon-box-child) !important;
    min-width: var(--nav-icon-box-child) !important;
    margin-right: var(--nav-icon-gap-child) !important;
    opacity: 0.75;
}

[b-5bndfk4shp] .nova-child-link.mud-nav-link .nav-mud-icon .mud-icon-size-small {
    width: var(--nav-icon-size-child) !important;
    height: var(--nav-icon-size-child) !important;
}

/* ─────────────────────────────────────────────
   TEXT — top-level
───────────────────────────────────────────── */
[b-5bndfk4shp] .mud-nav-link .mud-nav-link-text,
[b-5bndfk4shp] .mud-nav-link .nav-link-text {
    color: var(--sb-text-secondary) !important;
    font-size: var(--nav-font-top) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    transition: color var(--sb-speed) var(--sb-ease) !important;
}

/* ─────────────────────────────────────────────
   TEXT — child links
───────────────────────────────────────────── */
[b-5bndfk4shp] .nova-child-link.mud-nav-link .mud-nav-link-text,
[b-5bndfk4shp] .nova-child-link.mud-nav-link .nav-link-text {
    font-size: var(--nav-font-child) !important;
    font-weight: 440 !important;
}

/* ─────────────────────────────────────────────
   GROUP HEADER (expandable items)
───────────────────────────────────────────── */
[b-5bndfk4shp] .nova-group.mud-nav-group > .mud-nav-link {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    border-radius: var(--sb-radius) !important;
    margin: 2px var(--nav-mx) !important;
    padding: var(--nav-py-top) var(--nav-px) !important;
    border: none !important;
    background: transparent !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Chevron (dropdown arrow) */
[b-5bndfk4shp] .nova-group.mud-nav-group > .mud-nav-link .mud-expand-icon,
[b-5bndfk4shp] .nova-group.mud-nav-group > .mud-nav-link .mud-expand-icon-wrapper {
    color: var(--sb-text-muted) !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    transition:
        color var(--sb-speed) var(--sb-ease),
        transform 0.28s var(--sb-ease) !important;
}

/* Children container */
[b-5bndfk4shp] .nova-group .mud-nav-group-items {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 2px 0 4px 0 !important;
}

[b-5bndfk4shp] .nova-group .mud-collapse-container {
    transition: height 0.24s var(--sb-ease) !important;
}

/* ─────────────────────────────────────────────
   CHILD LINK
───────────────────────────────────────────── */
[b-5bndfk4shp] .nova-child-link.mud-nav-link {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    border-radius: 8px !important;
    margin: 1px var(--nav-mx) 1px calc(var(--nav-mx) + 6px) !important;
    padding: var(--nav-py-child) var(--nav-px) !important;
    border: none !important;
    background: transparent !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   HOVER STATES
═══════════════════════════════════════════════════════════ */

[b-5bndfk4shp] .mud-nav-link:hover {
    background: var(--sb-surface-hover) !important;
}

[b-5bndfk4shp] .mud-nav-link:hover .mud-nav-link-text,
[b-5bndfk4shp] .mud-nav-link:hover .nav-link-text {
    color: var(--sb-text-primary) !important;
}

[b-5bndfk4shp] .mud-nav-link:hover .nav-mud-icon {
    color: var(--sb-icon-hover) !important;
    fill: var(--sb-icon-hover) !important;
    background: rgba(59, 130, 246, 0.08) !important;
}

/* Group hover */
[b-5bndfk4shp] .nova-group.mud-nav-group > .mud-nav-link:hover {
    background: var(--sb-surface-hover) !important;
}

/* Child hover */
[b-5bndfk4shp] .nova-child-link.mud-nav-link:hover {
    background: var(--sb-surface-hover) !important;
}

[b-5bndfk4shp] .nova-child-link.mud-nav-link:hover .nav-mud-icon {
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════
   ACTIVE / SELECTED STATES
═══════════════════════════════════════════════════════════ */

[b-5bndfk4shp] .mud-nav-link.active {
    background: var(--nova-gradient) !important;
    box-shadow:
        0 4px 16px -2px rgba(59, 130, 246, 0.40),
        0 2px 6px rgba(59, 130, 246, 0.18) !important;
}

/* Active text — bright white */
[b-5bndfk4shp] .mud-nav-link.active .mud-nav-link-text,
[b-5bndfk4shp] .mud-nav-link.active .nav-link-text {
    color: var(--sb-text-bright) !important;
    font-weight: 600 !important;
}

/* Active icon — white, blue container */
[b-5bndfk4shp] .mud-nav-link.active .nav-mud-icon {
    color: var(--sb-icon-active) !important;
    fill: var(--sb-icon-active) !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

/* ── Child active (subtler — no full gradient pill) ── */
[b-5bndfk4shp] .nova-child-link.mud-nav-link.active {
    background: rgba(59, 130, 246, 0.12) !important;
    box-shadow: none !important;
}

[b-5bndfk4shp] .nova-child-link.mud-nav-link.active .mud-nav-link-text,
[b-5bndfk4shp] .nova-child-link.mud-nav-link.active .nav-link-text {
    color: var(--nova-blue-400) !important;
    font-weight: 600 !important;
}

[b-5bndfk4shp] .nova-child-link.mud-nav-link.active .nav-mud-icon {
    color: var(--nova-blue) !important;
    fill: var(--nova-blue) !important;
    opacity: 1 !important;
}

/* ─────────────────────────────────────────────
   GROUP — EXPANDED
───────────────────────────────────────────── */
[b-5bndfk4shp] .nova-group.mud-nav-group.mud-expanded > .mud-nav-link {
    background: rgba(59, 130, 246, 0.06) !important;
}

[b-5bndfk4shp] .nova-group.mud-nav-group.mud-expanded > .mud-nav-link .nav-link-text,
[b-5bndfk4shp] .nova-group.mud-nav-group.mud-expanded > .mud-nav-link .mud-nav-link-text {
    color: var(--sb-text-primary) !important;
    font-weight: 600 !important;
}

[b-5bndfk4shp] .nova-group.mud-nav-group.mud-expanded > .mud-nav-link .nav-mud-icon {
    color: var(--nova-blue) !important;
    fill: var(--nova-blue) !important;
}

/* ─────────────────────────────────────────────
   LINK RESET
───────────────────────────────────────────── */
[b-5bndfk4shp] .mud-nav-link,
[b-5bndfk4shp] .mud-nav-link:visited,
[b-5bndfk4shp] .mud-nav-link:hover,
[b-5bndfk4shp] .mud-nav-link:active {
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
    [b-5bndfk4shp] .mud-nav-link {
        padding: 10px var(--nav-px) !important;
    }
}

@media (max-width: 600px) {
    :root[b-5bndfk4shp] {
        --nav-font-top: 13px;
        --nav-font-child: 12px;
        --nav-icon-size: 16px;
        --nav-icon-size-child: 14px;
        --nav-icon-box: 28px;
        --nav-icon-box-child: 24px;
        --nav-icon-gap: 10px;
        --nav-icon-gap-child: 8px;
        --nav-px: 10px;
        --nav-py-top: 8px;
        --nav-py-child: 6px;
        --nav-mx: 6px;
    }

    [b-5bndfk4shp] .mud-nav-link {
        border-radius: 8px !important;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-rp7b9a9cad],
.components-reconnect-repeated-attempt-visible[b-rp7b9a9cad],
.components-reconnect-failed-visible[b-rp7b9a9cad],
.components-pause-visible[b-rp7b9a9cad],
.components-resume-failed-visible[b-rp7b9a9cad],
.components-rejoining-animation[b-rp7b9a9cad] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Attendance/AttendanceLedger.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Attendance Ledger - Pro Professional Scoped Styles
   ══════════════════════════════════════════════════════════ */

/* ══ 120FPS SMOOTHING & RENDERING OPTIMIZATIONS ══ */
/* Note: contain/content-visibility omitted — page has scrollable fixed-height table */

[b-ms3liuyawq] .modern-table tbody tr {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══ STAGGERED ENTRANCE ANIMATION ══ */
@keyframes rowEnter-b-ms3liuyawq {
    from {
        opacity: 0;
        transform: translateZ(0) translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateZ(0) translateY(0) scale(1);
    }
}

.attendance-tabs-panel[b-ms3liuyawq] {
    margin-top: 16px !important;
    padding: 12px 16px !important;
    flex-shrink: 0 !important;
}

.attendance-tabs-panel .mud-button[b-ms3liuyawq] {
    white-space: nowrap !important;
}

.attendance-toolbar[b-ms3liuyawq] {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 2px !important;
}

.attendance-toolbar .toolbar-spacer[b-ms3liuyawq] {
    flex: 1 1 auto !important;
    min-width: 8px !important;
}

.attendance-toolbar > *[b-ms3liuyawq] {
    flex: 0 0 auto !important;
}

.attendance-tabs-panel .tab-btn[b-ms3liuyawq] {
    font-weight: 600 !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
}

.profile-text[b-ms3liuyawq] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.profile-empid[b-ms3liuyawq] {
    font-size: 0.68rem;
    color: var(--slate-500, #64748b);
    font-weight: 600;
    white-space: nowrap;
}

.attendance-tabs-panel .month-select[b-ms3liuyawq] {
    width: 115px !important;
    max-width: 115px !important;
    min-width: 100px !important;
}

.attendance-tabs-panel .lock-toggle-btn[b-ms3liuyawq] {
    border-radius: 10px !important;
    transition: transform 0.2s var(--ease-butter, ease), box-shadow 0.2s ease !important;
}

.attendance-tabs-panel .lock-toggle-btn:hover[b-ms3liuyawq] {
    transform: translateY(-2px) !important;
}

/* Green CTA variant for Process Salary (overrides .action-btn blue gradient) */
.action-btn-green[b-ms3liuyawq] {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.28) !important;
}

.action-btn-green:hover[b-ms3liuyawq] {
    box-shadow: 0 10px 26px rgba(22, 163, 74, 0.40) !important;
    filter: brightness(1.05);
}

[b-ms3liuyawq] .modern-table tbody tr:nth-child(1) { animation-delay: 0.02s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(2) { animation-delay: 0.04s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(3) { animation-delay: 0.06s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(4) { animation-delay: 0.08s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(5) { animation-delay: 0.10s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(6) { animation-delay: 0.12s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(7) { animation-delay: 0.14s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(8) { animation-delay: 0.16s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(9) { animation-delay: 0.18s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(10) { animation-delay: 0.20s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(11) { animation-delay: 0.22s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(12) { animation-delay: 0.24s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(13) { animation-delay: 0.26s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(14) { animation-delay: 0.28s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(15) { animation-delay: 0.30s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(16) { animation-delay: 0.32s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(17) { animation-delay: 0.34s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(18) { animation-delay: 0.36s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(19) { animation-delay: 0.38s; }
[b-ms3liuyawq] .modern-table tbody tr:nth-child(20) { animation-delay: 0.40s; }

.mud-checkbox[b-ms3liuyawq],
.mud-icon-button[b-ms3liuyawq],
.action-btn[b-ms3liuyawq] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
    [b-ms3liuyawq] .modern-table tbody tr {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    [b-ms3liuyawq] .modern-table tbody tr:hover {
        transform: none !important;
    }
    [b-ms3liuyawq] .modern-table tbody tr:active {
        transform: none !important;
    }
}

/* 2. LAYOUT WRAPPERS (Replacing Inline Styles) */
.header-avatar[b-ms3liuyawq] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-ms3liuyawq] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-ms3liuyawq] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-ms3liuyawq] {
    align-items: center !important;
}

.search-field-full[b-ms3liuyawq] {
    width: 100% !important;
}

.table-layout-wrapper[b-ms3liuyawq] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

/* 3. MODERN TABLE STRUCTURE */
[b-ms3liuyawq] .modern-table.mud-table-root {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

[b-ms3liuyawq] .modern-table table {
    table-layout: fixed !important;
    width: 100% !important;
}

[b-ms3liuyawq] .modern-table .mud-table-container {
    flex: 1 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 0 !important;
}

[b-ms3liuyawq] .modern-table th {
    background: white !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    color: var(--slate-600) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--slate-100) !important;
    padding: 10px 6px !important;
    text-align: center !important;
}

[b-ms3liuyawq] .modern-table td {
    padding: 8px 6px !important;
    border-bottom: 1px solid var(--slate-100) !important;
    vertical-align: middle !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Column Widths — percentage-based so all columns dynamically fit the
   container with NO horizontal scroll, regardless of sidebar/window size.
   Sum = 100%: ID 4% + Name 19% + 10 numeric × 7% (70%) + Actions 5%. */
[b-ms3liuyawq] .modern-table th:nth-child(1),
[b-ms3liuyawq] .modern-table td:nth-child(1) {
    width: 5% !important;
}

[b-ms3liuyawq] .modern-table th:nth-child(2),
[b-ms3liuyawq] .modern-table td:nth-child(2) {
    width: 20% !important;
}

[b-ms3liuyawq] .modern-table th.col-numeric,
[b-ms3liuyawq] .modern-table td.col-numeric {
    width: 5% !important;
}

[b-ms3liuyawq] .modern-table th.col-actions,
[b-ms3liuyawq] .modern-table td.col-actions {
    width: 5% !important;
    position: sticky !important;
    right: 0 !important;
    background: #ffffff !important;
    z-index: 2 !important;
}

/* Keep header action cell opaque while sticky */
[b-ms3liuyawq] .modern-table thead th.col-actions {
    background: white !important;
}

/* 4. GRID LOCK SYSTEM */
.cell-fixed-container[b-ms3liuyawq] {
    display: grid !important;
    grid-template-areas: "stack" !important;
    align-items: center !important;
    height: 52px !important;
    width: 100% !important;
    overflow: hidden !important;
}

.cell-fixed-container>span[b-ms3liuyawq],
.cell-fixed-container>form[b-ms3liuyawq],
.cell-fixed-container>div[b-ms3liuyawq] {
    grid-area: stack !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
}

/* 5. GHOST INPUTS & TYPOGRAPHY */
.edit-input[b-ms3liuyawq],
[b-ms3liuyawq] .edit-input .mud-input-slot {
    height: 34px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
}

.profile-name[b-ms3liuyawq] {
    font-size: 0.875rem !important;
    color: var(--slate-900);
    padding-right: 30px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.id-pill[b-ms3liuyawq] {
    padding: 2px 8px;
    background: var(--slate-100);
    color: var(--slate-500);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

/* 6. PAGINATION & JUMP */
.modern-pager[b-ms3liuyawq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: white;
    border-top: 1px solid var(--slate-100);
}

.jump-to-container[b-ms3liuyawq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jump-label[b-ms3liuyawq] {
    font-size: 0.75rem;
    color: var(--slate-500);
}

.jump-field[b-ms3liuyawq] {
    width: 60px !important;
}

/* ══ SAVE ALL BUTTON ══ */
.save-all-btn[b-ms3liuyawq] {
    white-space: nowrap !important;
    min-width: 110px !important;
}

/* ══ FOCUS HIGHLIGHT — know where you're editing ══ */
[b-ms3liuyawq] .edit-input .mud-input-slot:focus {
    outline: 2px solid var(--primary-500, #2563eb) !important;
    outline-offset: -1px !important;
    border-radius: 4px !important;
    background: #f8fbff !important;
    transition: outline 0.1s ease, background 0.15s ease !important;
}

[b-ms3liuyawq] .modern-table tbody tr:focus-within {
    background: rgba(37, 99, 235, 0.03) !important;
    box-shadow: inset 3px 0 0 var(--primary-500, #2563eb) !important;
    transition: background 0.2s ease !important;
}

/* ══ MOBILE FIELDS STRIP: invisible on desktop ══ */
.mobile-fields-strip[b-ms3liuyawq] {
    display: contents;
}

/* ── Responsive & Mobile/Tablet Optimizations ── */
@media (max-width: 1023.98px) {
    .header-section > div[b-ms3liuyawq] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
    }

    [b-ms3liuyawq] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }

    /* ── RESPONSIVE NATIVE CARD LAYOUT ── */
    [b-ms3liuyawq] .modern-table table {
        min-width: unset !important;
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }

    [b-ms3liuyawq] .modern-table .mud-table-container {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        flex: 1 !important;
    }

    [b-ms3liuyawq] .modern-table thead {
        display: none !important; /* Hide headers */
    }

    [b-ms3liuyawq] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }

    [b-ms3liuyawq] .modern-table tbody .mud-table-row {
        display: flex !important;
    }

    /* ── CARD: 3-row flex-wrap layout ── */
    [b-ms3liuyawq] .modern-table tbody tr {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px 12px !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01), inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
        margin-bottom: 12px !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        will-change: transform !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    [b-ms3liuyawq] .modern-table tbody tr::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(37, 99, 235, 0.03) !important;
        opacity: 0 !important;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    [b-ms3liuyawq] .modern-table tbody tr:hover::after {
        opacity: 1 !important;
    }

    [b-ms3liuyawq] .modern-table tbody tr:hover {
        transform: translateY(-2px) !important;
        border-color: var(--primary-300, #93c5fd) !important;
    }

    [b-ms3liuyawq] .modern-table tbody tr:active {
        transform: translateY(0) scale(0.98) !important;
        transition-duration: 0.1s !important;
    }

    [b-ms3liuyawq] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        white-space: nowrap !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Grid layout for numeric fields — fits perfectly on the card with no scrolling */
    .mobile-fields-strip[b-ms3liuyawq] {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        overflow: visible !important;
        padding: 8px 0 !important;
        order: 1 !important;
        flex: 1 1 100% !important;
        z-index: 2 !important;
    }

    /* Row 1: ID + Name */
    [b-ms3liuyawq] .modern-table tr td:nth-child(1) {
        width: auto !important;
        flex: 0 0 auto !important;
        order: 0 !important;
    }

    [b-ms3liuyawq] .modern-table tr td:nth-child(1) .id-pill {
        background: rgba(37, 99, 235, 0.08) !important;
        color: var(--primary-600, #2563eb) !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        font-family: var(--font-display), sans-serif !important;
        letter-spacing: 0.02em !important;
    }

    [b-ms3liuyawq] .modern-table tr td:nth-child(2) {
        flex: 1 1 150px !important;
        order: 0 !important;
        display: flex !important;
    }

    /* Numeric pills inside the grid */
    [b-ms3liuyawq] .modern-table tr .mobile-fields-strip td.col-numeric,
    [b-ms3liuyawq] .modern-table tr .mobile-fields-strip .mud-table-cell {
        width: 100% !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: space-between !important; /* Label left, value/input right */
        gap: 4px !important;
        padding: 6px 8px !important;
        background: var(--slate-50, #f8fafc) !important;
        border: 1px solid var(--slate-150, #e2e8f0) !important;
        border-radius: 8px !important;
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        min-width: 0 !important;
    }

    /* Numeric labels */
    [b-ms3liuyawq] .mobile-fields-strip .mud-table-cell:nth-child(1)::before { content: "WD:" !important; color: var(--slate-500) !important; font-weight: 700 !important; margin-right: 2px !important; font-size: 0.65rem !important; }
    [b-ms3liuyawq] .mobile-fields-strip .mud-table-cell:nth-child(2)::before { content: "PD:" !important; color: var(--slate-500) !important; font-weight: 700 !important; margin-right: 2px !important; font-size: 0.65rem !important; }
    [b-ms3liuyawq] .mobile-fields-strip .mud-table-cell:nth-child(3)::before { content: "Woff:" !important; color: var(--slate-500) !important; font-weight: 700 !important; margin-right: 2px !important; font-size: 0.65rem !important; }
    [b-ms3liuyawq] .mobile-fields-strip .mud-table-cell:nth-child(4)::before { content: "PL:" !important; color: var(--slate-500) !important; font-weight: 700 !important; margin-right: 2px !important; font-size: 0.65rem !important; }
    [b-ms3liuyawq] .mobile-fields-strip .mud-table-cell:nth-child(5)::before { content: "OT:" !important; color: var(--slate-500) !important; font-weight: 700 !important; margin-right: 2px !important; font-size: 0.65rem !important; }
    [b-ms3liuyawq] .mobile-fields-strip .mud-table-cell:nth-child(6)::before { content: "PD2:" !important; color: var(--slate-500) !important; font-weight: 700 !important; margin-right: 2px !important; font-size: 0.65rem !important; }
    [b-ms3liuyawq] .mobile-fields-strip .mud-table-cell:nth-child(7)::before { content: "Alw1:" !important; color: var(--slate-500) !important; font-weight: 700 !important; margin-right: 2px !important; font-size: 0.65rem !important; }
    [b-ms3liuyawq] .mobile-fields-strip .mud-table-cell:nth-child(8)::before { content: "Alw2:" !important; color: var(--slate-500) !important; font-weight: 700 !important; margin-right: 2px !important; font-size: 0.65rem !important; }
    [b-ms3liuyawq] .mobile-fields-strip .mud-table-cell:nth-child(9)::before { content: "Oth:" !important; color: var(--slate-500) !important; font-weight: 700 !important; margin-right: 2px !important; font-size: 0.65rem !important; }
    [b-ms3liuyawq] .mobile-fields-strip .mud-table-cell:nth-child(10)::before { content: "Cant:" !important; color: var(--slate-500) !important; font-weight: 700 !important; margin-right: 2px !important; font-size: 0.65rem !important; }

    /* Row 3: Actions — full width */
    [b-ms3liuyawq] .modern-table tr td:nth-child(13) {
        width: 100% !important;
        position: static !important;
        justify-content: flex-end !important;
        padding-top: 12px !important;
        border-top: 1px dashed rgba(226, 232, 240, 0.8) !important;
        order: 2 !important;
        z-index: 2 !important;
    }

    [b-ms3liuyawq] .modern-table tr td:nth-child(13) .mud-stack {
        justify-content: flex-end !important;
        width: 100% !important;
    }

    /* Pastel styled action buttons */
    [b-ms3liuyawq] .modern-table tr td:nth-child(13) .action-btn-edit {
        background: rgba(79, 70, 229, 0.06) !important;
        color: #4f46e5 !important;
        border: 1px solid rgba(79, 70, 229, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-ms3liuyawq] .modern-table tr td:nth-child(13) .action-btn-edit:hover {
        background: #4f46e5 !important;
        color: #ffffff !important;
    }

    [b-ms3liuyawq] .modern-table tr td:nth-child(13) .action-btn-del {
        background: rgba(239, 68, 68, 0.06) !important;
        color: #ef4444 !important;
        border: 1px solid rgba(239, 68, 68, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-ms3liuyawq] .modern-table tr td:nth-child(13) .action-btn-del:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
    }

    .profile-name[b-ms3liuyawq] {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: var(--slate-800, #1e293b) !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        padding-right: 0 !important;
    }

    [b-ms3liuyawq] .modern-table tr td:nth-child(2) .employee-profile {
        gap: 12px !important;
    }

    [b-ms3liuyawq] .modern-table tr td:nth-child(2) .profile-avatar {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 0.9rem !important;
        background: linear-gradient(135deg, var(--primary-400), var(--primary-600)) !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.12) !important;
        border-radius: 50% !important;
    }

    .cell-fixed-container[b-ms3liuyawq] {
        height: auto !important;
        min-height: 34px !important;
        width: 100% !important;
    }

    .cell-fixed-container>span[b-ms3liuyawq],
    .cell-fixed-container>form[b-ms3liuyawq],
    .cell-fixed-container>div[b-ms3liuyawq] {
        height: auto !important;
        min-height: 34px !important;
    }

    [b-ms3liuyawq] .edit-input {
        width: 100% !important;
        max-width: 45px !important;
    }
    
    [b-ms3liuyawq] .edit-input .mud-input-slot {
        height: 24px !important;
        font-size: 0.75rem !important;
        padding: 0 4px !important;
        text-align: right !important;
    }

    /* Single-line pagination on tablet/mobile */
    .modern-pager[b-ms3liuyawq] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 8px !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .jump-to-container[b-ms3liuyawq] {
        display: none !important;
    }

    .modern-pager[b-ms3liuyawq]  .mud-table-pagination {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide pagination spacer */
    .modern-pager[b-ms3liuyawq]  .mud-table-pagination-spacer {
        display: none !important;
    }

    /* Hide "Rows per page:" text label to fit in a single line */
    .modern-pager[b-ms3liuyawq]  .mud-table-pagination-information {
        display: none !important;
    }

    .modern-pager[b-ms3liuyawq]  .mud-table-pagination-item {
        margin: 0 !important;
        padding: 0 4px !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .modern-pager[b-ms3liuyawq]  .mud-select {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 95px !important;
        font-size: 0.75rem !important;
        height: 28px !important;
        margin-right: 8px !important;
        flex-shrink: 0 !important;
    }

    /* Fix select dropdown padding to prevent number clipping (e.g. 10 looking like 1) */
    .modern-pager[b-ms3liuyawq]  .mud-select .mud-input-slot {
        width: 100% !important;
        text-align: left !important;
        justify-content: flex-start !important;
        padding-right: 14px !important;
        padding-left: 4px !important;
        text-overflow: clip !important;
        overflow: visible !important;
    }

    .modern-pager[b-ms3liuyawq]  .mud-select .mud-input {
        width: 100% !important;
        min-width: 100% !important;
    }

    .modern-pager[b-ms3liuyawq]  .mud-select .mud-input-control {
        width: 100% !important;
    }

    .modern-pager[b-ms3liuyawq]  .mud-typography {
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .modern-pager[b-ms3liuyawq]  .mud-table-pagination-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        margin-left: 8px !important;
    }

    /* Hide first page and last page buttons (|< and >|) on mobile/tablet to only show < and > */
    .modern-pager[b-ms3liuyawq]  .mud-table-pagination-first-button,
    .modern-pager[b-ms3liuyawq]  .mud-table-pagination-last-button,
    .modern-pager[b-ms3liuyawq]  .mud-icon-button.mud-table-pagination-first-button,
    .modern-pager[b-ms3liuyawq]  .mud-icon-button.mud-table-pagination-last-button {
        display: none !important;
    }

    .modern-pager[b-ms3liuyawq]  .mud-icon-button {
        width: 32px !important;
        height: 32px !important;
        padding: 4px !important;
        margin: 0 2px !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
    }

    .modern-pager[b-ms3liuyawq]  .mud-icon-button .mud-icon-size-medium {
        font-size: 1rem !important;
    }
}

/* Mobile-Only Stacking and Sizing */
@media (max-width: 599.98px) {
    [b-ms3liuyawq] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
    }

    [b-ms3liuyawq] .control-panel-card .action-btn,
    [b-ms3liuyawq] .control-panel-card .shadow-btn,
    [b-ms3liuyawq] .control-panel-card .upload-btn,
    [b-ms3liuyawq] .control-panel-card .add-btn,
    [b-ms3liuyawq] .control-panel-card .mud-button-root {
        width: 100% !important;
        margin: 0 !important;
        display: inline-flex !important;
    }

    .mobile-fields-strip[b-ms3liuyawq] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Slightly smaller elements on small screen mobile */
    [b-ms3liuyawq] .modern-table tr td:nth-child(2) .profile-avatar {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: 0.75rem !important;
    }
    
    .profile-name[b-ms3liuyawq] {
        font-size: 0.85rem !important;
    }
    
    [b-ms3liuyawq] .modern-table tr .mobile-fields-strip td.col-numeric,
    [b-ms3liuyawq] .modern-table tr .mobile-fields-strip .mud-table-cell {
        padding: 4px 6px !important;
        font-size: 0.7rem !important;
    }
}
/* /Components/Pages/BankMaster/BankMaster.razor.rz.scp.css */
/* Scoped Styles for BankMaster Page */

.header-avatar[b-ddpyt4i3a2] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-ddpyt4i3a2] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-ddpyt4i3a2] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-ddpyt4i3a2] {
    align-items: center !important;
}

.search-field-full[b-ddpyt4i3a2] {
    width: 100% !important;
}

.table-layout-wrapper[b-ddpyt4i3a2] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

/* modern table structure */
[b-ddpyt4i3a2] .modern-table table {
    table-layout: fixed !important;
    width: 100% !important;
}

[b-ddpyt4i3a2] .modern-table th {
    background: white !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--slate-600) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--slate-100) !important;
    padding: 10px 16px !important;
}

[b-ddpyt4i3a2] .modern-table td {
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--slate-100) !important;
    vertical-align: middle !important;
    font-size: 0.8rem !important;
}

[b-ddpyt4i3a2] .modern-table .col-actions {
    width: 160px !important;
}

/* multi-delete pill */
.multi-delete-pill[b-ddpyt4i3a2] {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #fff1f2;
    border: 1px solid #fda4af;
    border-radius: 99px;
    padding: 0 6px 0 0;
    height: 32px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.delete-count[b-ddpyt4i3a2] {
    color: #ef4444;
    font-weight: 700;
    font-size: 14px;
    user-select: none;
}

.delete-icon-btn[b-ddpyt4i3a2] {
    background: transparent !important;
    margin-right: -4px !important;
}

.id-pill[b-ddpyt4i3a2] {
    padding: 2px 8px;
    background: var(--slate-100);
    color: var(--slate-500);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.profile-name[b-ddpyt4i3a2] {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--slate-900) !important;
}

.profile-container[b-ddpyt4i3a2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Responsive Styles */
@media (max-width: 1023.98px) {
    .header-section > div[b-ddpyt4i3a2] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
    }

    [b-ddpyt4i3a2] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }

    /* Transform Table to Native List Card Layout on Mobile and Tablet */
    [b-ddpyt4i3a2] .modern-table table {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }
    
    [b-ddpyt4i3a2] .modern-table thead {
        display: none !important;
    }
    
    [b-ddpyt4i3a2] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }
    
    [b-ddpyt4i3a2] .modern-table tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto auto auto !important;
        grid-template-areas: 
            "id name select"
            "branch ifsc ifsc"
            "city contact contact"
            "lock actions actions" !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01) !important;
        gap: 12px !important;
        align-items: center !important;
        margin-bottom: 12px !important;
    }
    
    [b-ddpyt4i3a2] .modern-table tr:hover {
        transform: translateY(-2px) !important;
        border-color: #93c5fd !important;
    }

    [b-ddpyt4i3a2] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    [b-ddpyt4i3a2] .modern-table tr td.col-ref {
        grid-area: id !important;
    }

    [b-ddpyt4i3a2] .modern-table tr td.col-ref .id-pill {
        background: rgba(37, 99, 235, 0.08) !important;
        color: #2563eb !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
    }
    
    [b-ddpyt4i3a2] .modern-table tr td.col-desc {
        grid-area: name !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    [b-ddpyt4i3a2] .modern-table tr td.col-desc .profile-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #1e293b !important;
    }

    [b-ddpyt4i3a2] .modern-table tr td.col-branch {
        grid-area: branch !important;
    }

    [b-ddpyt4i3a2] .modern-table tr td.col-ifsc {
        grid-area: ifsc !important;
    }

    [b-ddpyt4i3a2] .modern-table tr td.col-city {
        grid-area: city !important;
    }

    [b-ddpyt4i3a2] .modern-table tr td.col-contact {
        grid-area: contact !important;
    }
    
    [b-ddpyt4i3a2] .modern-table tr td.col-select {
        grid-area: select !important;
        justify-content: flex-end !important;
    }
    
    [b-ddpyt4i3a2] .modern-table tr td.col-lock {
        grid-area: lock !important;
        padding-top: 12px !important;
        border-top: 1px dashed rgba(226, 232, 240, 0.8) !important;
    }
    
    [b-ddpyt4i3a2] .modern-table tr td.col-actions {
        grid-area: actions !important;
        justify-content: flex-end !important;
        padding-top: 12px !important;
        border-top: 1px dashed rgba(226, 232, 240, 0.8) !important;
        width: 100% !important;
        gap: 8px !important;
    }

    [b-ddpyt4i3a2] .modern-table tr td.col-actions .mud-stack {
        justify-content: flex-end !important;
        width: 100% !important;
    }
}

@media (max-width: 599.98px) {
    [b-ddpyt4i3a2] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
    }
    
    [b-ddpyt4i3a2] .control-panel-card .action-btn,
    [b-ddpyt4i3a2] .control-panel-card .mud-button-root {
        width: 100% !important;
        margin: 0 !important;
        display: inline-flex !important;
    }
}
/* /Components/Pages/BankMaster/BankMasterEdit.razor.rz.scp.css */
/* Scoped Styles for BankMasterEdit Page */

.bankmaster-edit-root[b-fo7l68s7bv] {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    font-family: "Inter", "Roboto", "Segoe UI", sans-serif;
    color: #1e293b;
}

/* ════════════════════════════════════════════
   §1. BUTTONS & ACTIONS
   ════════════════════════════════════════════ */
.action-btn[b-fo7l68s7bv] {
    border-radius: 8px !important;
    text-transform: none !important;
    font-weight: 600 !important;
}

/* ════════════════════════════════════════════
   §2. COMPACT FORM CONTAINER
   ════════════════════════════════════════════ */
.form-container-card[b-fo7l68s7bv] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px 24px;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02), 0 2px 4px -1px rgba(15, 23, 42, 0.02);
}

.field-row[b-fo7l68s7bv] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.field-label[b-fo7l68s7bv] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 160px;
    min-width: 160px;
    height: 38px;
    background: #e2e8f0;
    color: #475569;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0 16px;
    border-radius: 6px;
    white-space: nowrap;
}

.field-input[b-fo7l68s7bv] {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

/* Scoped target styling for input components */
[b-fo7l68s7bv] .modern-input {
    width: 100% !important;
}

[b-fo7l68s7bv] .modern-input .mud-input-outlined-border {
    border-color: #e2e8f0 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

[b-fo7l68s7bv] .modern-input:hover .mud-input-outlined-border {
    border-color: #cbd5e1 !important;
}

[b-fo7l68s7bv] .modern-input.mud-input-focus .mud-input-outlined-border {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08) !important;
}

[b-fo7l68s7bv] .modern-input input {
    color: #1e293b !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    height: 38px !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
}

/* ════════════════════════════════════════════
   §3. LOADING OVERLAY
   ════════════════════════════════════════════ */
.loading-overlay[b-fo7l68s7bv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 40px;
}

.loading-text[b-fo7l68s7bv] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

/* ════════════════════════════════════════════
   §4. RESPONSIVE MEDIA QUERIES (MOBILE/TABLET)
   ════════════════════════════════════════════ */
@media (max-width: 599.98px) {
    .form-container-card[b-fo7l68s7bv] {
        padding: 16px 12px !important;
    }

    .field-row[b-fo7l68s7bv] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }

    .field-label[b-fo7l68s7bv] {
        width: 100% !important;
        min-width: 100% !important;
        height: 28px !important;
        padding: 0 10px !important;
        font-size: 0.75rem !important;
        border-radius: 4px !important;
    }
}
/* /Components/Pages/Bank/BankEdit.razor.rz.scp.css */
/* Scoped Styles for Bank Edit Page */

.bank-edit-root[b-6i29y433gh] {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    font-family: "Inter", "Roboto", "Segoe UI", sans-serif;
    color: #1e293b;
}

/* ════════════════════════════════════════════
   §1. BUTTONS & ACTIONS
   ════════════════════════════════════════════ */
.action-btn[b-6i29y433gh] {
    border-radius: 8px !important;
    text-transform: none !important;
    font-weight: 600 !important;
}

/* ════════════════════════════════════════════
   §2. COMPACT FORM CONTAINER
   ════════════════════════════════════════════ */
.form-container-card[b-6i29y433gh] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px 24px;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02), 0 2px 4px -1px rgba(15, 23, 42, 0.02);
}

.field-row[b-6i29y433gh] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.field-label[b-6i29y433gh] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 160px;
    min-width: 160px;
    height: 38px;
    background: #e2e8f0;
    color: #475569;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0 16px;
    border-radius: 6px;
    white-space: nowrap;
}

.field-input[b-6i29y433gh] {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

/* Scoped target styling for input components */
[b-6i29y433gh] .modern-input {
    width: 100% !important;
}

[b-6i29y433gh] .modern-input .mud-input-outlined-border {
    border-color: #e2e8f0 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

[b-6i29y433gh] .modern-input:hover .mud-input-outlined-border {
    border-color: #cbd5e1 !important;
}

[b-6i29y433gh] .modern-input.mud-input-focus .mud-input-outlined-border {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08) !important;
}

[b-6i29y433gh] .modern-input input {
    color: #1e293b !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    height: 38px !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
}

/* ════════════════════════════════════════════
   §3. LOADING OVERLAY
   ════════════════════════════════════════════ */
.loading-overlay[b-6i29y433gh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 40px;
}

.loading-text[b-6i29y433gh] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

/* ════════════════════════════════════════════
   §4. RESPONSIVE MEDIA QUERIES (MOBILE/TABLET)
   ════════════════════════════════════════════ */
@media (max-width: 599.98px) {
    .form-container-card[b-6i29y433gh] {
        padding: 16px 12px !important;
    }

    .field-row[b-6i29y433gh] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }

    .field-label[b-6i29y433gh] {
        width: 100% !important;
        min-width: 100% !important;
        height: 28px !important;
        padding: 0 10px !important;
        font-size: 0.75rem !important;
        border-radius: 4px !important;
    }
}

/* /Components/Pages/Bank/Banks.razor.rz.scp.css */
/* Scoped Styles for Banks Master Page */

.header-avatar[b-0n94mmicep] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-0n94mmicep] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-0n94mmicep] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-0n94mmicep] {
    align-items: center !important;
}

.search-field-full[b-0n94mmicep] {
    width: 100% !important;
}

.table-layout-wrapper[b-0n94mmicep] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

/* modern table structure */
[b-0n94mmicep] .modern-table table {
    table-layout: fixed !important;
    width: 100% !important;
}

[b-0n94mmicep] .modern-table th {
    background: white !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--slate-600) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--slate-100) !important;
    padding: 10px 16px !important;
}

[b-0n94mmicep] .modern-table td {
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--slate-100) !important;
    vertical-align: middle !important;
    font-size: 0.8rem !important;
}

[b-0n94mmicep] .modern-table .col-actions {
    width: 160px !important;
}

/* multi-delete pill */
.multi-delete-pill[b-0n94mmicep] {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #fff1f2;
    border: 1px solid #fda4af;
    border-radius: 99px;
    padding: 0 6px 0 0;
    height: 32px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.delete-count[b-0n94mmicep] {
    color: #ef4444;
    font-weight: 700;
    font-size: 14px;
    user-select: none;
}

.delete-icon-btn[b-0n94mmicep] {
    background: transparent !important;
    margin-right: -4px !important;
}

.id-pill[b-0n94mmicep] {
    padding: 2px 8px;
    background: var(--slate-100);
    color: var(--slate-500);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.profile-name[b-0n94mmicep] {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--slate-900) !important;
}

.profile-container[b-0n94mmicep] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Responsive Styles */
@media (max-width: 1023.98px) {
    .header-section > div[b-0n94mmicep] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
    }

    [b-0n94mmicep] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }

    /* Transform Table to Native List Card Layout on Mobile and Tablet */
    [b-0n94mmicep] .modern-table table {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }
    
    [b-0n94mmicep] .modern-table thead {
        display: none !important;
    }
    
    [b-0n94mmicep] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }
    
    [b-0n94mmicep] .modern-table tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas: 
            "id name select"
            "lock actions actions" !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01) !important;
        gap: 12px !important;
        align-items: center !important;
        margin-bottom: 12px !important;
    }
    
    [b-0n94mmicep] .modern-table tr:hover {
        transform: translateY(-2px) !important;
        border-color: #93c5fd !important;
    }

    [b-0n94mmicep] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    [b-0n94mmicep] .modern-table tr td.col-ref {
        grid-area: id !important;
    }

    [b-0n94mmicep] .modern-table tr td.col-ref .id-pill {
        background: rgba(37, 99, 235, 0.08) !important;
        color: #2563eb !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
    }
    
    [b-0n94mmicep] .modern-table tr td.col-desc {
        grid-area: name !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    [b-0n94mmicep] .modern-table tr td.col-desc .profile-avatar {
        width: 36px !important;
        height: 36px !important;
        background: linear-gradient(135deg, #60a5fa, #2563eb) !important;
        border: 2px solid #ffffff !important;
        border-radius: 50% !important;
    }

    [b-0n94mmicep] .modern-table tr td.col-desc .profile-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #1e293b !important;
    }
    
    [b-0n94mmicep] .modern-table tr td.col-select {
        grid-area: select !important;
        justify-content: flex-end !important;
    }
    
    [b-0n94mmicep] .modern-table tr td.col-lock {
        grid-area: lock !important;
        padding-top: 12px !important;
        border-top: 1px dashed rgba(226, 232, 240, 0.8) !important;
    }
    
    [b-0n94mmicep] .modern-table tr td.col-actions {
        grid-area: actions !important;
        justify-content: flex-end !important;
        padding-top: 12px !important;
        border-top: 1px dashed rgba(226, 232, 240, 0.8) !important;
        width: 100% !important;
        gap: 8px !important;
    }

    [b-0n94mmicep] .modern-table tr td.col-actions .mud-stack {
        justify-content: flex-end !important;
        width: 100% !important;
    }

    /* Pastel styled action buttons inside mobile/tablet view */
    [b-0n94mmicep] .modern-table tr td.col-actions .action-btn-edit {
        background: rgba(79, 70, 229, 0.06) !important;
        color: #4f46e5 !important;
        border: 1px solid rgba(79, 70, 229, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-0n94mmicep] .modern-table tr td.col-actions .action-btn-edit:hover {
        background: #4f46e5 !important;
        color: #ffffff !important;
    }

    [b-0n94mmicep] .modern-table tr td.col-actions .action-btn-del {
        background: rgba(239, 68, 68, 0.06) !important;
        color: #ef4444 !important;
        border: 1px solid rgba(239, 68, 68, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-0n94mmicep] .modern-table tr td.col-actions .action-btn-del:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
    }
}

@media (max-width: 599.98px) {
    [b-0n94mmicep] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
    }
    
    [b-0n94mmicep] .control-panel-card .action-btn,
    [b-0n94mmicep] .control-panel-card .mud-button-root {
        width: 100% !important;
        margin: 0 !important;
        display: inline-flex !important;
    }
}
/* /Components/Pages/Category/Categorys.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Category Master - Scoped Styles
   ══════════════════════════════════════════════════════════ */

/* 1. LAYOUT WRAPPERS */
.header-avatar[b-7veox72kdy] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-7veox72kdy] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-7veox72kdy] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-7veox72kdy] {
    align-items: center !important;
}

.search-field-full[b-7veox72kdy] {
    width: 100% !important;
}

.table-layout-wrapper[b-7veox72kdy] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

/* 2. MODERN TABLE STRUCTURE */
[b-7veox72kdy] .modern-table table {
    table-layout: fixed !important;
    width: 100% !important;
}

[b-7veox72kdy] .modern-table th {
    background: white !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--slate-600) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--slate-100) !important;
    padding: 10px 16px !important;
}

[b-7veox72kdy] .modern-table td {
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--slate-100) !important;
    vertical-align: middle !important;
    font-size: 0.8rem !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
}

[b-7veox72kdy] .modern-table td::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

[b-7veox72kdy] .modern-table .col-actions {
    width: 160px !important;
}

/* 3. MULTI-DELETE PILL */
.multi-delete-pill[b-7veox72kdy] {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #fff1f2;
    border: 1px solid #fda4af;
    border-radius: 99px;
    padding: 0 6px 0 0;
    height: 32px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.delete-count[b-7veox72kdy] {
    color: #ef4444;
    font-weight: 700;
    font-size: 14px;
    user-select: none;
}

.delete-icon-btn[b-7veox72kdy] {
    background: transparent !important;
    margin-right: -4px !important;
}

/* 4. IDENTITY & TYPOGRAPHY */
.id-pill[b-7veox72kdy] {
    padding: 2px 8px;
    background: var(--slate-100);
    color: var(--slate-500);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.profile-name[b-7veox72kdy] {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--slate-900) !important;
}

.employee-profile[b-7veox72kdy] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-container[b-7veox72kdy] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.max-w-400[b-7veox72kdy] {
    max-width: 400px !important;
}

/* ── Responsive & Mobile/Tablet Optimizations ── */
@media (max-width: 1023.98px) {
    .header-section > div[b-7veox72kdy] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
    }

    [b-7veox72kdy] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }

    /* Transform Table to Native List Card Layout on Mobile and Tablet */
    [b-7veox72kdy] .modern-table table {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }
    
    [b-7veox72kdy] .modern-table thead {
        display: none !important; /* Hide column headers */
    }
    
    [b-7veox72kdy] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }
    
    [b-7veox72kdy] .modern-table tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas: 
            "id name select"
            "actions actions actions" !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01), inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
        gap: 12px !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    [b-7veox72kdy] .modern-table tr::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(37, 99, 235, 0.03) !important;
        opacity: 0 !important;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    
    [b-7veox72kdy] .modern-table tr:hover::after {
        opacity: 1 !important;
    }
    
    [b-7veox72kdy] .modern-table tr:hover {
        transform: translateY(-2px) !important;
        border-color: var(--primary-300, #93c5fd) !important;
    }
    
    [b-7veox72kdy] .modern-table tr:active {
        transform: translateY(0) scale(0.98) !important;
        transition-duration: 0.1s !important;
    }

    [b-7veox72kdy] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Ref ID Badge */
    [b-7veox72kdy] .modern-table tr td:nth-child(1) {
        grid-area: id !important;
    }

    [b-7veox72kdy] .modern-table tr td:nth-child(1) .id-pill {
        background: rgba(37, 99, 235, 0.08) !important;
        color: var(--primary-600, #2563eb) !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        font-family: var(--font-display), sans-serif !important;
        letter-spacing: 0.02em !important;
    }

    /* Profile Container */
    [b-7veox72kdy] .modern-table tr td:nth-child(2) {
        grid-area: name !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    [b-7veox72kdy] .modern-table tr td:nth-child(2) .profile-avatar {
        width: 36px !important;
        height: 36px !important;
        background: linear-gradient(135deg, var(--primary-400), var(--primary-600)) !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.12) !important;
        border-radius: 50% !important;
    }

    [b-7veox72kdy] .modern-table tr td:nth-child(2) .profile-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--slate-800, #1e293b) !important;
        letter-spacing: -0.01em !important;
    }

    /* Selection Checkbox */
    [b-7veox72kdy] .modern-table tr td:nth-child(3) {
        grid-area: select !important;
        justify-content: flex-end !important;
    }

    /* Actions Layout Row */
    [b-7veox72kdy] .modern-table tr td:nth-child(4) {
        grid-area: actions !important;
        justify-content: flex-end !important;
        padding-top: 12px !important;
        border-top: 1px dashed rgba(226, 232, 240, 0.8) !important;
        width: 100% !important;
        gap: 8px !important;
    }

    [b-7veox72kdy] .modern-table tr td:nth-child(4) .mud-stack {
        justify-content: flex-end !important;
        width: 100% !important;
    }

    /* Pastel styled action buttons */
    [b-7veox72kdy] .modern-table tr td:nth-child(4) .action-btn-edit {
        background: rgba(79, 70, 229, 0.06) !important;
        color: #4f46e5 !important;
        border: 1px solid rgba(79, 70, 229, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-7veox72kdy] .modern-table tr td:nth-child(4) .action-btn-edit:hover {
        background: #4f46e5 !important;
        color: #ffffff !important;
    }

    [b-7veox72kdy] .modern-table tr td:nth-child(4) .action-btn-del {
        background: rgba(239, 68, 68, 0.06) !important;
        color: #ef4444 !important;
        border: 1px solid rgba(239, 68, 68, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-7veox72kdy] .modern-table tr td:nth-child(4) .action-btn-del:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
    }

    /* Style checkboxes inside table row */
    [b-7veox72kdy] .modern-table tr td .mud-checkbox {
        margin: 0 !important;
        padding: 0 !important;
    }

    .edit-container[b-7veox72kdy] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px !important;
    }
    
    .max-w-400[b-7veox72kdy] {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Excel Manager Responsive Equal Width Layout */
    [b-7veox72kdy] .control-panel-card .d-flex.gap-2 {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 8px !important;
    }
    
    [b-7veox72kdy] .control-panel-card .d-flex.gap-2 > * {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }
    
    [b-7veox72kdy] .control-panel-card .d-flex.gap-2 .mud-button-root {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Mobile-Only Stacking and Sizing */
@media (max-width: 599.98px) {
    [b-7veox72kdy] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
    }
    
    [b-7veox72kdy] .control-panel-card .action-btn,
    [b-7veox72kdy] .control-panel-card .shadow-btn,
    [b-7veox72kdy] .control-panel-card .upload-btn,
    [b-7veox72kdy] .control-panel-card .add-btn,
    [b-7veox72kdy] .control-panel-card .mud-button-root {
        width: 100% !important;
        margin: 0 !important;
        display: inline-flex !important;
    }
}

/* ══ SMOOTHING & RENDERING OPTIMIZATIONS ══ */
.category-master-root[b-7veox72kdy] {
    content-visibility: auto;
    contain: layout style paint;
}

.header-section[b-7veox72kdy],
.control-panel-card[b-7veox72kdy],
.table-layout-wrapper[b-7veox72kdy] {
    contain: layout style;
}

[b-7veox72kdy] .modern-table tbody tr {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══ STAGGERED ENTRANCE ANIMATION ══ */
@keyframes rowEnter-b-7veox72kdy {
    from {
        opacity: 0;
        transform: translateZ(0) translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateZ(0) translateY(0) scale(1);
    }
}

[b-7veox72kdy] .modern-table tbody tr {
    animation: rowEnter-b-7veox72kdy 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[b-7veox72kdy] .modern-table tbody tr:nth-child(1) { animation-delay: 0.02s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(2) { animation-delay: 0.04s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(3) { animation-delay: 0.06s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(4) { animation-delay: 0.08s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(5) { animation-delay: 0.10s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(6) { animation-delay: 0.12s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(7) { animation-delay: 0.14s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(8) { animation-delay: 0.16s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(9) { animation-delay: 0.18s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(10) { animation-delay: 0.20s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(11) { animation-delay: 0.22s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(12) { animation-delay: 0.24s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(13) { animation-delay: 0.26s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(14) { animation-delay: 0.28s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(15) { animation-delay: 0.30s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(16) { animation-delay: 0.32s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(17) { animation-delay: 0.34s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(18) { animation-delay: 0.36s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(19) { animation-delay: 0.38s; }
[b-7veox72kdy] .modern-table tbody tr:nth-child(20) { animation-delay: 0.40s; }

.mud-checkbox[b-7veox72kdy],
.mud-icon-button[b-7veox72kdy],
.action-btn[b-7veox72kdy] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
    [b-7veox72kdy] .modern-table tbody tr {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    [b-7veox72kdy] .modern-table tbody tr:hover {
        transform: none !important;
    }
    [b-7veox72kdy] .modern-table tbody tr:active {
        transform: none !important;
    }
}

/* Hide tooltips/capsules completely inside the action columns */
[b-7veox72kdy] .mud-tooltip {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* /Components/Pages/Company/Companies.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Company Master - Scoped Styles
   ══════════════════════════════════════════════════════════ */

.header-avatar[b-9akcumwz26] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-9akcumwz26] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-9akcumwz26] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-9akcumwz26] {
    align-items: center !important;
}

.search-field-full[b-9akcumwz26] {
    width: 100% !important;
}

.table-layout-wrapper[b-9akcumwz26] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

[b-9akcumwz26] .modern-table {
    margin-bottom: 24px;
}

[b-9akcumwz26] .modern-table .mud-table-container {
    height: 380px !important;
}

/* ══════════════════════════════════════════════════════════
   Mobile & Tablet Native App Styles
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1023.98px) {
    .header-section > div[b-9akcumwz26] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
        gap: 12px !important;
    }

    [b-9akcumwz26] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }

    [b-9akcumwz26] .stat-chip {
        display: none !important;
    }

    [b-9akcumwz26] .mud-table-smalldevices-sortselect {
        display: none !important;
    }

    [b-9akcumwz26] .modern-table table {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }
    
    [b-9akcumwz26] .modern-table thead {
        display: none !important;
    }
    
    [b-9akcumwz26] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }
    
    [b-9akcumwz26] .modern-table tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto auto auto !important;
        grid-template-areas: 
            "id actions"
            "name name"
            "code contact"
            "city state" !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 14px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
        gap: 10px !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    
    [b-9akcumwz26] .modern-table tr:hover {
        transform: translateY(-2px) !important;
        border-color: #3b82f6 !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    }

    [b-9akcumwz26] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    [b-9akcumwz26] .modern-table td::before {
        display: none !important;
    }

    [b-9akcumwz26] .modern-table tr td:nth-child(1) {
        grid-area: id !important;
        justify-content: flex-start !important;
    }

    [b-9akcumwz26] .modern-table tr td:nth-child(1) .id-pill {
        background: rgba(37, 99, 235, 0.08) !important;
        color: #2563eb !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
    }
    
    [b-9akcumwz26] .modern-table tr td:nth-child(2) {
        grid-area: code !important;
    }

    [b-9akcumwz26] .modern-table tr td:nth-child(2)::before {
        content: attr(data-label) ": " !important;
        display: inline-block !important;
        font-weight: 600 !important;
        color: #94a3b8 !important;
        margin-right: 8px !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        flex-shrink: 0 !important;
    }

    [b-9akcumwz26] .modern-table tr td:nth-child(2) .role-badge {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #475569 !important;
    }

    [b-9akcumwz26] .modern-table tr td:nth-child(3) {
        grid-area: name !important;
    }

    [b-9akcumwz26] .modern-table tr td:nth-child(3) .profile-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
    }

    [b-9akcumwz26] .modern-table tr td:nth-child(4) {
        grid-area: city !important;
    }

    [b-9akcumwz26] .modern-table tr td:nth-child(4)::before {
        content: attr(data-label) ": " !important;
        display: inline-block !important;
        font-weight: 600 !important;
        color: #94a3b8 !important;
        margin-right: 8px !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        flex-shrink: 0 !important;
    }

    [b-9akcumwz26] .modern-table tr td:nth-child(4) .text-secondary {
        font-size: 12px !important;
        color: #64748b !important;
    }

    [b-9akcumwz26] .modern-table tr td:nth-child(5) {
        grid-area: state !important;
        justify-content: flex-end !important;
    }

    [b-9akcumwz26] .modern-table tr td:nth-child(5)::before {
        content: attr(data-label) ": " !important;
        display: inline-block !important;
        font-weight: 600 !important;
        color: #94a3b8 !important;
        margin-right: 8px !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        flex-shrink: 0 !important;
    }

    [b-9akcumwz26] .modern-table tr td:nth-child(5) .text-secondary {
        font-size: 12px !important;
        color: #64748b !important;
    }

    [b-9akcumwz26] .modern-table tr td:nth-child(6) {
        grid-area: contact !important;
    }

    [b-9akcumwz26] .modern-table tr td:nth-child(6)::before {
        content: attr(data-label) ": " !important;
        display: inline-block !important;
        font-weight: 600 !important;
        color: #94a3b8 !important;
        margin-right: 8px !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        flex-shrink: 0 !important;
    }

    [b-9akcumwz26] .modern-table tr td:nth-child(6) .text-secondary {
        font-size: 12px !important;
        color: #64748b !important;
    }
    
    [b-9akcumwz26] .modern-table tr td:nth-child(7) {
        grid-area: actions !important;
        justify-content: flex-end !important;
        width: 100% !important;
        align-self: start !important;
        justify-self: end !important;
        margin-top: -4px !important;
        margin-right: -6px !important;
    }

    [b-9akcumwz26] .modern-table tr td:nth-child(7) .mud-stack {
        justify-content: flex-end !important;
        width: auto !important;
        gap: 0 !important;
    }

    [b-9akcumwz26] .modern-table tr td:nth-child(7) .mud-icon-button {
        padding: 4px !important;
        width: 32px !important;
        height: 32px !important;
    }

    /* Pagination */
    [b-9akcumwz26] .modern-table .mud-table-footer {
        overflow: hidden !important;
    }

    [b-9akcumwz26] .modern-table .mud-table-container {
        overflow-x: hidden !important;
    }

    [b-9akcumwz26] .modern-table tfoot {
        overflow: hidden !important;
    }

    .modern-pager[b-9akcumwz26] {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 6px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .modern-pager[b-9akcumwz26]  .mud-table-pagination {
        margin-left: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }

    .modern-pager[b-9akcumwz26]  .mud-table-pagination-toolbar {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 2px !important;
        height: 32px !important;
        min-height: 32px !important;
        display: flex !important;
        align-items: center !important;
    }

    .modern-pager[b-9akcumwz26]  .mud-table-pagination-spacer {
        display: none !important;
    }

    .modern-pager[b-9akcumwz26]  .mud-select {
        display: none !important;
    }

    .modern-pager[b-9akcumwz26]  .mud-table-pagination-information {
        font-size: 12px !important;
        margin: 0 4px 0 0 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        color: var(--slate-600) !important;
        font-weight: 500 !important;
    }

    .modern-pager[b-9akcumwz26]  .mud-table-pagination-actions {
        display: flex !important;
        align-items: center !important;
        gap: 0px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .modern-pager[b-9akcumwz26]  .mud-icon-button {
        padding: 4px !important;
        width: 28px !important;
        height: 28px !important;
    }

    .modern-pager[b-9akcumwz26]  .mud-icon-button .mud-icon-root {
        font-size: 18px !important;
    }

    .jump-to-container[b-9akcumwz26] {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        background: var(--slate-100) !important;
        padding: 2px 6px !important;
        border-radius: 6px !important;
        height: 28px !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }

    .jump-label[b-9akcumwz26] {
        font-size: 11px !important;
        color: var(--color-text-muted) !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .jump-input-wrapper[b-9akcumwz26] {
        width: 36px !important;
        flex-shrink: 0 !important;
    }

    .jump-field[b-9akcumwz26] {
        margin-top: 0 !important;
    }

    .jump-field[b-9akcumwz26]  .mud-input {
        font-size: 11px !important;
        height: 20px !important;
    }

    .jump-field[b-9akcumwz26]  input {
        text-align: center !important;
        font-weight: 700 !important;
        padding: 0 !important;
    }

    .jump-btn[b-9akcumwz26] {
        padding: 1px !important;
        width: 22px !important;
        height: 22px !important;
    }

    .jump-btn[b-9akcumwz26]  .mud-icon-root {
        font-size: 16px !important;
    }

    @media (max-width: 500px) {
        .jump-label[b-9akcumwz26] {
            display: none !important;
        }
        .modern-pager[b-9akcumwz26] {
            gap: 4px !important;
            padding: 4px 4px !important;
        }
        .modern-pager[b-9akcumwz26]  .mud-table-pagination-information {
            font-size: 10px !important;
            margin-right: 2px !important;
        }
    }
}

@media (max-width: 599.98px) {
    [b-9akcumwz26] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
    }
    
    [b-9akcumwz26] .control-panel-card .action-btn,
    [b-9akcumwz26] .control-panel-card .mud-button-root {
        width: 100% !important;
        margin: 0 !important;
        display: inline-flex !important;
    }
}
/* /Components/Pages/Company/CompanyEdit.razor.rz.scp.css */
.header-avatar[b-27khcpz9dl] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-27khcpz9dl] {
    color: white !important;
    font-size: 22px !important;
}

.btn-success-outline[b-27khcpz9dl] {
    border-color: #10b981 !important;
    color: #10b981 !important;
}
/* /Components/Pages/Department/Department.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Department Master - Scoped Styles
   ══════════════════════════════════════════════════════════ */

/* 1. LAYOUT WRAPPERS */
.header-avatar[b-ebkl2v1ef9] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-ebkl2v1ef9] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-ebkl2v1ef9] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-ebkl2v1ef9] {
    align-items: center !important;
}

.search-field-full[b-ebkl2v1ef9] {
    width: 100% !important;
}

.table-layout-wrapper[b-ebkl2v1ef9] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

/* 2. MODERN TABLE STRUCTURE */
[b-ebkl2v1ef9] .modern-table table {
    table-layout: fixed !important;
    width: 100% !important;
}

[b-ebkl2v1ef9] .modern-table th {
    background: white !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--slate-600) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--slate-100) !important;
    padding: 10px 16px !important;
}

[b-ebkl2v1ef9] .modern-table td {
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--slate-100) !important;
    vertical-align: middle !important;
    font-size: 0.8rem !important;
}

[b-ebkl2v1ef9] .modern-table .col-actions {
    width: 160px !important;
}

/* 3. MULTI-DELETE PILL */
.multi-delete-pill[b-ebkl2v1ef9] {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #fff1f2;
    border: 1px solid #fda4af;
    border-radius: 99px;
    padding: 0 6px 0 0;
    height: 32px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.delete-count[b-ebkl2v1ef9] {
    color: #ef4444;
    font-weight: 700;
    font-size: 14px;
    user-select: none;
}

.delete-icon-btn[b-ebkl2v1ef9] {
    background: transparent !important;
    margin-right: -4px !important;
}

/* 4. IDENTITY & TYPOGRAPHY */
.id-pill[b-ebkl2v1ef9] {
    padding: 2px 8px;
    background: var(--slate-100);
    color: var(--slate-500);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.profile-name[b-ebkl2v1ef9] {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--slate-900) !important;
}

.employee-profile[b-ebkl2v1ef9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-container[b-ebkl2v1ef9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.max-w-400[b-ebkl2v1ef9] {
    max-width: 400px !important;
}

/* ── Responsive & Mobile/Tablet Optimizations ── */
@media (max-width: 1023.98px) {
    .header-section > div[b-ebkl2v1ef9] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
    }

    [b-ebkl2v1ef9] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }

    /* Transform Table to Native List Card Layout on Mobile and Tablet */
    [b-ebkl2v1ef9] .modern-table table {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }
    
    [b-ebkl2v1ef9] .modern-table thead {
        display: none !important; /* Hide column headers */
    }
    
    [b-ebkl2v1ef9] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }
    
    [b-ebkl2v1ef9] .modern-table tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas: 
            "id name select"
            "lock actions actions" !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01), inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
        gap: 12px !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    [b-ebkl2v1ef9] .modern-table tr::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(37, 99, 235, 0.03) !important;
        opacity: 0 !important;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    
    [b-ebkl2v1ef9] .modern-table tr:hover::after {
        opacity: 1 !important;
    }
    
    [b-ebkl2v1ef9] .modern-table tr:hover {
        transform: translateY(-2px) !important;
        border-color: var(--primary-300, #93c5fd) !important;
    }
    
    [b-ebkl2v1ef9] .modern-table tr:active {
        transform: translateY(0) scale(0.98) !important;
        transition-duration: 0.1s !important;
    }
    
    [b-ebkl2v1ef9] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Ref ID Badge */
    [b-ebkl2v1ef9] .modern-table tr td:nth-child(1) {
        grid-area: id !important;
    }

    [b-ebkl2v1ef9] .modern-table tr td:nth-child(1) .id-pill {
        background: rgba(37, 99, 235, 0.08) !important;
        color: var(--primary-600, #2563eb) !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        font-family: var(--font-display), sans-serif !important;
        letter-spacing: 0.02em !important;
    }

    /* Department Profile Container */
    [b-ebkl2v1ef9] .modern-table tr td:nth-child(2) {
        grid-area: name !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    [b-ebkl2v1ef9] .modern-table tr td:nth-child(2) .profile-avatar {
        width: 36px !important;
        height: 36px !important;
        background: linear-gradient(135deg, var(--primary-400), var(--primary-600)) !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.12) !important;
        border-radius: 50% !important;
    }

    [b-ebkl2v1ef9] .modern-table tr td:nth-child(2) .profile-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--slate-800, #1e293b) !important;
        letter-spacing: -0.01em !important;
    }

    /* Selection Checkbox */
    [b-ebkl2v1ef9] .modern-table tr td:nth-child(3) {
        grid-area: select !important;
        justify-content: flex-end !important;
    }

    /* Lock Status Badge */
    [b-ebkl2v1ef9] .modern-table tr td:nth-child(4) {
        grid-area: lock !important;
        padding-top: 12px !important;
        border-top: 1px dashed rgba(226, 232, 240, 0.8) !important;
        display: flex !important;
        align-items: center !important;
    }

    [b-ebkl2v1ef9] .modern-table tr td:nth-child(4) .mud-icon-button {
        padding: 6px !important;
        border-radius: 8px !important;
        transition: all 0.2s ease !important;
    }

    /* Actions Layout Row */
    [b-ebkl2v1ef9] .modern-table tr td:nth-child(5) {
        grid-area: actions !important;
        justify-content: flex-end !important;
        padding-top: 12px !important;
        border-top: 1px dashed rgba(226, 232, 240, 0.8) !important;
        width: 100% !important;
        gap: 8px !important;
    }

    [b-ebkl2v1ef9] .modern-table tr td:nth-child(5) .mud-stack {
        justify-content: flex-end !important;
        width: 100% !important;
    }

    /* Pastel styled action buttons */
    [b-ebkl2v1ef9] .modern-table tr td:nth-child(5) .action-btn-edit {
        background: rgba(79, 70, 229, 0.06) !important;
        color: #4f46e5 !important;
        border: 1px solid rgba(79, 70, 229, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-ebkl2v1ef9] .modern-table tr td:nth-child(5) .action-btn-edit:hover {
        background: #4f46e5 !important;
        color: #ffffff !important;
    }

    [b-ebkl2v1ef9] .modern-table tr td:nth-child(5) .action-btn-del {
        background: rgba(239, 68, 68, 0.06) !important;
        color: #ef4444 !important;
        border: 1px solid rgba(239, 68, 68, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-ebkl2v1ef9] .modern-table tr td:nth-child(5) .action-btn-del:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
    }

    /* Style checkboxes inside table row */
    [b-ebkl2v1ef9] .modern-table tr td .mud-checkbox {
        margin: 0 !important;
        padding: 0 !important;
    }

    .edit-container[b-ebkl2v1ef9] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px !important;
    }
    
    .max-w-400[b-ebkl2v1ef9] {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Mobile-Only Stacking and Sizing */
@media (max-width: 599.98px) {
    [b-ebkl2v1ef9] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
    }
    
    [b-ebkl2v1ef9] .control-panel-card .action-btn,
    [b-ebkl2v1ef9] .control-panel-card .shadow-btn,
    [b-ebkl2v1ef9] .control-panel-card .upload-btn,
    [b-ebkl2v1ef9] .control-panel-card .add-btn,
    [b-ebkl2v1ef9] .control-panel-card .mud-button-root {
        width: 100% !important;
        margin: 0 !important;
        display: inline-flex !important;
    }
}

/* ══ 120FPS SMOOTHING & RENDERING OPTIMIZATIONS ══ */
.department-master-root[b-ebkl2v1ef9] {
    content-visibility: auto;
    contain: layout style paint;
}

.header-section[b-ebkl2v1ef9],
.control-panel-card[b-ebkl2v1ef9],
.table-layout-wrapper[b-ebkl2v1ef9] {
    contain: layout style;
}

[b-ebkl2v1ef9] .modern-table tbody tr {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══ STAGGERED ENTRANCE ANIMATION ══ */
@keyframes rowEnter-b-ebkl2v1ef9 {
    from {
        opacity: 0;
        transform: translateZ(0) translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateZ(0) translateY(0) scale(1);
    }
}

[b-ebkl2v1ef9] .modern-table tbody tr {
    animation: rowEnter-b-ebkl2v1ef9 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(1) { animation-delay: 0.02s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(2) { animation-delay: 0.04s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(3) { animation-delay: 0.06s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(4) { animation-delay: 0.08s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(5) { animation-delay: 0.10s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(6) { animation-delay: 0.12s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(7) { animation-delay: 0.14s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(8) { animation-delay: 0.16s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(9) { animation-delay: 0.18s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(10) { animation-delay: 0.20s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(11) { animation-delay: 0.22s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(12) { animation-delay: 0.24s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(13) { animation-delay: 0.26s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(14) { animation-delay: 0.28s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(15) { animation-delay: 0.30s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(16) { animation-delay: 0.32s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(17) { animation-delay: 0.34s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(18) { animation-delay: 0.36s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(19) { animation-delay: 0.38s; }
[b-ebkl2v1ef9] .modern-table tbody tr:nth-child(20) { animation-delay: 0.40s; }

.mud-checkbox[b-ebkl2v1ef9],
.mud-icon-button[b-ebkl2v1ef9],
.action-btn[b-ebkl2v1ef9] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
    [b-ebkl2v1ef9] .modern-table tbody tr {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    [b-ebkl2v1ef9] .modern-table tbody tr:hover {
        transform: none !important;
    }
    [b-ebkl2v1ef9] .modern-table tbody tr:active {
        transform: none !important;
    }
}
/* /Components/Pages/Designation/Designation.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Designation Master - Scoped Styles
   ══════════════════════════════════════════════════════════ */

/* 1. LAYOUT WRAPPERS */
.header-avatar[b-qc61xegvxw] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-qc61xegvxw] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-qc61xegvxw] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-qc61xegvxw] {
    align-items: center !important;
}

.search-field-full[b-qc61xegvxw] {
    width: 100% !important;
}

.table-layout-wrapper[b-qc61xegvxw] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

/* 2. MODERN TABLE STRUCTURE */
[b-qc61xegvxw] .modern-table table {
    table-layout: fixed !important;
    width: 100% !important;
}

[b-qc61xegvxw] .modern-table th {
    background: white !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--slate-600) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--slate-100) !important;
    padding: 10px 16px !important;
}

[b-qc61xegvxw] .modern-table td {
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--slate-100) !important;
    vertical-align: middle !important;
    font-size: 0.8rem !important;
}

[b-qc61xegvxw] .modern-table .col-actions {
    width: 160px !important;
}

/* 3. MULTI-DELETE PILL */
.multi-delete-pill[b-qc61xegvxw] {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #fff1f2;
    border: 1px solid #fda4af;
    border-radius: 99px;
    padding: 0 6px 0 0;
    height: 32px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.delete-count[b-qc61xegvxw] {
    color: #ef4444;
    font-weight: 700;
    font-size: 14px;
    user-select: none;
}

.delete-icon-btn[b-qc61xegvxw] {
    background: transparent !important;
    margin-right: -4px !important;
}

/* 4. IDENTITY & TYPOGRAPHY */
.id-pill[b-qc61xegvxw] {
    padding: 2px 8px;
    background: var(--slate-100);
    color: var(--slate-500);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.profile-name[b-qc61xegvxw] {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--slate-900) !important;
}

.employee-profile[b-qc61xegvxw] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-container[b-qc61xegvxw] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.max-w-400[b-qc61xegvxw] {
    max-width: 400px !important;
}

/* ── Responsive & Mobile/Tablet Optimizations ── */
@media (max-width: 1023.98px) {
    .header-section > div[b-qc61xegvxw] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
    }

    [b-qc61xegvxw] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }

    /* Transform Table to Native List Card Layout on Mobile and Tablet */
    [b-qc61xegvxw] .modern-table table {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }
    
    [b-qc61xegvxw] .modern-table thead {
        display: none !important; /* Hide column headers */
    }
    
    [b-qc61xegvxw] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }
    
    [b-qc61xegvxw] .modern-table tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas: 
            "id name select"
            "actions actions actions" !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01), inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
        gap: 12px !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    [b-qc61xegvxw] .modern-table tr::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(37, 99, 235, 0.03) !important;
        opacity: 0 !important;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    
    [b-qc61xegvxw] .modern-table tr:hover::after {
        opacity: 1 !important;
    }
    
    [b-qc61xegvxw] .modern-table tr:hover {
        transform: translateY(-2px) !important;
        border-color: var(--primary-300, #93c5fd) !important;
    }
    
    [b-qc61xegvxw] .modern-table tr:active {
        transform: translateY(0) scale(0.98) !important;
        transition-duration: 0.1s !important;
    }

    [b-qc61xegvxw] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Ref ID Badge */
    [b-qc61xegvxw] .modern-table tr td:nth-child(1) {
        grid-area: id !important;
    }

    [b-qc61xegvxw] .modern-table tr td:nth-child(1) .id-pill {
        background: rgba(37, 99, 235, 0.08) !important;
        color: var(--primary-600, #2563eb) !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        font-family: var(--font-display), sans-serif !important;
        letter-spacing: 0.02em !important;
    }

    /* Designation Profile Container */
    [b-qc61xegvxw] .modern-table tr td:nth-child(2) {
        grid-area: name !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    [b-qc61xegvxw] .modern-table tr td:nth-child(2) .profile-avatar {
        width: 36px !important;
        height: 36px !important;
        background: linear-gradient(135deg, var(--primary-400), var(--primary-600)) !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.12) !important;
        border-radius: 50% !important;
    }

    [b-qc61xegvxw] .modern-table tr td:nth-child(2) .profile-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--slate-800, #1e293b) !important;
        letter-spacing: -0.01em !important;
    }

    /* Selection Checkbox */
    [b-qc61xegvxw] .modern-table tr td:nth-child(3) {
        grid-area: select !important;
        justify-content: flex-end !important;
    }

    /* Actions Layout Row */
    [b-qc61xegvxw] .modern-table tr td:nth-child(4) {
        grid-area: actions !important;
        justify-content: flex-end !important;
        padding-top: 12px !important;
        border-top: 1px dashed rgba(226, 232, 240, 0.8) !important;
        width: 100% !important;
        gap: 8px !important;
    }

    [b-qc61xegvxw] .modern-table tr td:nth-child(4) .mud-stack {
        justify-content: flex-end !important;
        width: 100% !important;
    }

    /* Pastel styled action buttons */
    [b-qc61xegvxw] .modern-table tr td:nth-child(4) .action-btn-edit {
        background: rgba(79, 70, 229, 0.06) !important;
        color: #4f46e5 !important;
        border: 1px solid rgba(79, 70, 229, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-qc61xegvxw] .modern-table tr td:nth-child(4) .action-btn-edit:hover {
        background: #4f46e5 !important;
        color: #ffffff !important;
    }

    [b-qc61xegvxw] .modern-table tr td:nth-child(4) .action-btn-del {
        background: rgba(239, 68, 68, 0.06) !important;
        color: #ef4444 !important;
        border: 1px solid rgba(239, 68, 68, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-qc61xegvxw] .modern-table tr td:nth-child(4) .action-btn-del:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
    }

    /* Style checkboxes inside table row */
    [b-qc61xegvxw] .modern-table tr td .mud-checkbox {
        margin: 0 !important;
        padding: 0 !important;
    }

    .edit-container[b-qc61xegvxw] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px !important;
    }
    
    .max-w-400[b-qc61xegvxw] {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Excel Manager Responsive Equal Width Layout */
    [b-qc61xegvxw] .control-panel-card .d-flex.gap-2 {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 8px !important;
    }
    
    [b-qc61xegvxw] .control-panel-card .d-flex.gap-2 > * {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }
    
    [b-qc61xegvxw] .control-panel-card .d-flex.gap-2 .mud-button-root {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Mobile-Only Stacking and Sizing */
@media (max-width: 599.98px) {
    [b-qc61xegvxw] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
    }
    
    [b-qc61xegvxw] .control-panel-card .action-btn,
    [b-qc61xegvxw] .control-panel-card .shadow-btn,
    [b-qc61xegvxw] .control-panel-card .upload-btn,
    [b-qc61xegvxw] .control-panel-card .add-btn,
    [b-qc61xegvxw] .control-panel-card .mud-button-root {
        width: 100% !important;
        margin: 0 !important;
        display: inline-flex !important;
    }
}

/* ══ 120FPS SMOOTHING & RENDERING OPTIMIZATIONS ══ */
.designation-master-root[b-qc61xegvxw] {
    content-visibility: auto;
    contain: layout style paint;
}

.header-section[b-qc61xegvxw],
.control-panel-card[b-qc61xegvxw],
.table-layout-wrapper[b-qc61xegvxw] {
    contain: layout style;
}

[b-qc61xegvxw] .modern-table tbody tr {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══ STAGGERED ENTRANCE ANIMATION ══ */
@keyframes rowEnter-b-qc61xegvxw {
    from {
        opacity: 0;
        transform: translateZ(0) translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateZ(0) translateY(0) scale(1);
    }
}

[b-qc61xegvxw] .modern-table tbody tr {
    animation: rowEnter-b-qc61xegvxw 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[b-qc61xegvxw] .modern-table tbody tr:nth-child(1) { animation-delay: 0.02s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(2) { animation-delay: 0.04s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(3) { animation-delay: 0.06s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(4) { animation-delay: 0.08s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(5) { animation-delay: 0.10s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(6) { animation-delay: 0.12s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(7) { animation-delay: 0.14s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(8) { animation-delay: 0.16s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(9) { animation-delay: 0.18s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(10) { animation-delay: 0.20s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(11) { animation-delay: 0.22s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(12) { animation-delay: 0.24s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(13) { animation-delay: 0.26s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(14) { animation-delay: 0.28s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(15) { animation-delay: 0.30s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(16) { animation-delay: 0.32s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(17) { animation-delay: 0.34s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(18) { animation-delay: 0.36s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(19) { animation-delay: 0.38s; }
[b-qc61xegvxw] .modern-table tbody tr:nth-child(20) { animation-delay: 0.40s; }

.mud-checkbox[b-qc61xegvxw],
.mud-icon-button[b-qc61xegvxw],
.action-btn[b-qc61xegvxw] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
    [b-qc61xegvxw] .modern-table tbody tr {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    [b-qc61xegvxw] .modern-table tbody tr:hover {
        transform: none !important;
    }
    [b-qc61xegvxw] .modern-table tbody tr:active {
        transform: none !important;
    }
}
/* /Components/Pages/EmployeeDaily/EmployeeDaily.razor.rz.scp.css */
/* ══════════════════════════════════════
   Employee Daily Styles - Clean Master Look
   ══════════════════════════════════════ */

/* Clean Look - Subtle Transitions */
.employee-daily-root[b-aqtq0loeko] {
    transition: opacity 0.3s ease;
}

.mobile-label[b-aqtq0loeko] {
    display: none !important;
}

/* Cleanup shadows for cleaner Master-page look */
[b-aqtq0loeko] .mud-input-control,
[b-aqtq0loeko] .mud-input,
[b-aqtq0loeko] .mud-input-outlined,
[b-aqtq0loeko] .mud-button-root,
[b-aqtq0loeko] .mud-icon-button,
[b-aqtq0loeko] .mud-ripple {
    box-shadow: none !important;
}

/* ID Pill - Matching Department Master */
.id-pill[b-aqtq0loeko] {
    display: inline-flex;
    padding: 2px 8px;
    background: var(--slate-100);
    color: var(--slate-500);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
}

/* 1. Rigid Row Height for zero jumping */
[b-aqtq0loeko] .modern-table .mud-table-body tr {
    height: 58px !important;
}

[b-aqtq0loeko] .modern-table .mud-table-body td {
    height: 58px !important;
    padding: 0 16px !important;
    border-bottom: 1px solid var(--slate-100) !important;
}

[b-aqtq0loeko] .modern-table td {
    height: 58px !important;
    padding: 0 8px !important;
    border-bottom: 1px solid var(--slate-100) !important;
}

/* Actions Cell Alignment */
.actions-cell-center[b-aqtq0loeko] {
    justify-content: center !important;
}

/* 2. Table Header - Modern Look */
[b-aqtq0loeko] .modern-table th {
    background: white !important;
    padding: 12px 16px !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--slate-600) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--slate-100) !important;
}

/* Column Proportions - Optimized Space Utilization */
[b-aqtq0loeko] .modern-table th:nth-child(1) {
    width: 80px !important;
}

/* Day Column */
[b-aqtq0loeko] .modern-table th:nth-child(2) {
    width: 50px !important;
}

/* Employee Name */
[b-aqtq0loeko] .modern-table th:nth-child(3) {
    width: 20% !important;
}

/* Leave Type - Optimized for split attendance circles */
[b-aqtq0loeko] .modern-table th:nth-child(4),
[b-aqtq0loeko] .modern-table td:nth-child(4) {
    width: 380px !important;
}

[b-aqtq0loeko] .modern-table th:nth-child(5),
[b-aqtq0loeko] .modern-table td:nth-child(5) {
    width: 380px !important;
}

/* Leave Type - Fixed Small */
/* Remarks - Takes remaining ~45-50% space automatically */
[b-aqtq0loeko] .modern-table .col-actions {
    width: 120px !important;
}

/* Actions - Tight */

/* 2. LAYOUT WRAPPERS (Replacing Inline Styles) */
.header-avatar[b-aqtq0loeko] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-aqtq0loeko] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-aqtq0loeko] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-aqtq0loeko] {
    align-items: center !important;
}

.search-field-full[b-aqtq0loeko] {
    width: 100% !important;
}

.table-layout-wrapper[b-aqtq0loeko] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

/* 3. MODERN TABLE STRUCTURE */
.cell-fixed-container[b-aqtq0loeko] {
    display: grid !important;
    grid-template-areas: "stack" !important;
    align-items: center !important;
    height: 58px !important;
    width: 100% !important;
}

.cell-fixed-container>span[b-aqtq0loeko],
.cell-fixed-container>form[b-aqtq0loeko],
.cell-fixed-container>div[b-aqtq0loeko] {
    grid-area: stack !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 4. Ghost Edit Mode - "Just Cursor" Logic */
.ghost-input[b-aqtq0loeko] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

[b-aqtq0loeko] .ghost-input .mud-input {
    background: transparent !important;
    border: none !important;
}

[b-aqtq0loeko] .ghost-input .mud-input-outlined-border {
    border: none !important;
}

[b-aqtq0loeko] .ghost-input .mud-input-slot {
    padding: 0 !important;
    font-size: 0.875rem !important;
    color: var(--slate-900) !important;
    height: 58px !important;
    /* Forces text to stay in the exact vertical center */
    line-height: 58px !important;
    display: flex !important;
    align-items: center !important;
}

/* Hide all underlines (even the focused ones) */
[b-aqtq0loeko] .ghost-input .mud-input-underline:before,
[b-aqtq0loeko] .ghost-input .mud-input-underline:after {
    display: none !important;
    border: none !important;
}

[b-aqtq0loeko] .ghost-input .mud-input-adornment {
    display: none !important;
}

/* Action Buttons - Premium Colors */
[b-aqtq0loeko] .action-btn-edit {
    background: var(--primary-50) !important;
    color: var(--primary-600) !important;
    border-radius: var(--radius-md) !important;
}

[b-aqtq0loeko] .action-btn-del {
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border-radius: var(--radius-md) !important;
}

/* Employee Profile Section */
.employee-profile[b-aqtq0loeko] {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
}

.profile-name[b-aqtq0loeko] {
    font-weight: 500;
    color: var(--slate-900);
    font-size: 0.9rem;
}

/* Pager Styling */
.modern-pager[b-aqtq0loeko] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background-color: white;
    border-top: 1px solid var(--slate-100);
}

.jump-to-container[b-aqtq0loeko] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.jump-label[b-aqtq0loeko] {
    font-size: 0.75rem;
    color: var(--slate-500);
    font-weight: 500;
}

.footer-spacer[b-aqtq0loeko] {
    height: 48px;
}

/* 5. Day Selector - Matching Header Company Selector Style */
[b-aqtq0loeko] .day-selector {
    background: var(--slate-50) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-1) var(--space-2) !important;
    border: 1.5px solid var(--color-border-default) !important;
    min-width: 0 !important;
    width: clamp(100px, 12vw, 140px) !important;
    height: 48px !important;
    transition:
        border-color var(--duration-normal) var(--ease-ultra),
        box-shadow var(--duration-smooth) var(--ease-ultra),
        background var(--duration-normal) var(--ease-ultra),
        transform var(--duration-normal) var(--ease-ultra) !important;
}

[b-aqtq0loeko] .day-selector:hover {
    border-color: var(--primary-300) !important;
    background: var(--color-bg-surface) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06);
}

[b-aqtq0loeko] .day-selector:focus-within {
    border-color: var(--primary-400) !important;
    box-shadow: var(--shadow-brand), 0 0 0 4px rgba(37, 99, 235, 0.06) !important;
    transform: translateY(-1px);
}

[b-aqtq0loeko] .mud-select.day-selector .mud-input-slot {
    font-weight: 600 !important;
    color: var(--slate-900) !important;
    font-size: var(--text-sm) !important;
    white-space: nowrap !important;
    padding-right: 32px !important;
}

[b-aqtq0loeko] .day-selector .mud-popover {
    max-height: 200px !important;
}

[b-aqtq0loeko] .mud-select.day-selector .mud-input {
    overflow: hidden !important;
}

/* 6. Clickable LeaveType Cell */
.clickable-cell[b-aqtq0loeko] {
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

.clickable-cell:hover[b-aqtq0loeko] {
    background-color: var(--primary-50) !important;
}

.clickable-cell .profile-name[b-aqtq0loeko] {
    color: var(--primary-700) !important;
    font-weight: 600 !important;
    text-decoration: underline dotted;
    text-underline-offset: 4px;
}

/* 7. Save Button Top */
.save-btn-top[b-aqtq0loeko] {
    height: 38px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15) !important;
    border-radius: var(--radius-md) !important;
    text-transform: none !important;
}

.save-btn-top:not(:disabled):hover[b-aqtq0loeko] {
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.25) !important;
    background-color: var(--color-success-dark) !important;
}

/* ══════════════════════════════════════
   FEEDBACK RADIO GROUP (Uiverse.io)
   ══════════════════════════════════════ */

.feedback-container[b-aqtq0loeko] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* ══════════════════════════════════════
   LEAVE TYPE CIRCLE SELECTOR
   ══════════════════════════════════════ */

.leave-type-container[b-aqtq0loeko] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 12px;
}

/* ══════════════════════════════════════
   SPLIT LEAVE SELECTOR (MORNING/AFTERNOON)
   ══════════════════════════════════════ */

.split-leave-container[b-aqtq0loeko] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 0;
}

.shift-section[b-aqtq0loeko] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.shift-label[b-aqtq0loeko] {
    font-size: 10px;
    font-weight: 800;
    color: var(--slate-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}



.leave-selector[b-aqtq0loeko] {
    display: flex;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.leave-selector label[b-aqtq0loeko] {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 36px;
}

.leave-selector input[b-aqtq0loeko] {
    display: none;
    /* Hide standard radio */
}

/* Base Circle Style - Increased size */
.status-circle[b-aqtq0loeko] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--slate-100);
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--slate-400);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Hover Effect */
.leave-selector label:hover .status-circle[b-aqtq0loeko] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: var(--slate-600);
}

/* Active/Checked State */
.leave-selector input:checked+.status-circle[b-aqtq0loeko] {
    background-color: var(--status-color);
    border-color: rgba(255, 255, 255, 0.4);
    color: white;
    transform: scale(1.15);
    box-shadow: 0 4px 12px var(--status-shadow);
}

/* Color Mappings */
.leave-selector label[data-type="PR"][b-aqtq0loeko] {
    --status-color: #10b981;
    --status-shadow: rgba(16, 185, 129, 0.3);
}

.leave-selector label[data-type="AB"][b-aqtq0loeko] {
    --status-color: #ef4444;
    --status-shadow: rgba(239, 68, 68, 0.3);
}

.leave-selector label[data-type="CL"][b-aqtq0loeko] {
    --status-color: #f59e0b;
    --status-shadow: rgba(245, 158, 11, 0.3);
}

.leave-selector label[data-type="PL"][b-aqtq0loeko] {
    --status-color: #8b5cf6;
    --status-shadow: rgba(139, 92, 246, 0.3);
}

.leave-selector label[data-type="SL"][b-aqtq0loeko] {
    --status-color: #6366f1;
    --status-shadow: rgba(99, 102, 241, 0.3);
}

.leave-selector label[data-type="WO"][b-aqtq0loeko] {
    --status-color: #06b6d4;
    --status-shadow: rgba(6, 182, 212, 0.3);
}

.leave-selector label[data-type="RH"][b-aqtq0loeko] {
    --status-color: #f97316;
    --status-shadow: rgba(249, 115, 22, 0.3);
}

.leave-selector label[data-type="CO"][b-aqtq0loeko] {
    --status-color: #ec4899;
    --status-shadow: rgba(236, 72, 153, 0.3);
}

/* ══════════════════════════════════════
   HORIZONTAL DAYS SCROLLER
   ══════════════════════════════════════ */

.days-scroller-wrapper[b-aqtq0loeko] {
    margin-top: 24px;
    padding: 8px 16px;
    width: 100%;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.days-scroller-label[b-aqtq0loeko] {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--slate-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    display: block;
}

.days-scroller-container[b-aqtq0loeko] {
    width: 100%;
}

.days-scroller[b-aqtq0loeko] {
    display: flex;
    justify-content: space-between;
    gap: 3px;
    padding-bottom: 0px;
    width: 100%;
}

.day-btn[b-aqtq0loeko] {
    min-width: 45px !important;
    height: 45px !important;
    /* Increased for Day Name */
    border-radius: 8px !important;
    background: var(--slate-50);
    border: 1px solid transparent !important;
    color: var(--slate-600) !important;
    font-weight: 700 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0 !important;
    line-height: 1 !important;
    position: relative !important;
}

/* Notification Badge - Pure Professional Look */
/* Notification Badge - Small for Compact view */
.day-badge[b-aqtq0loeko] {
    position: absolute;
    top: 0.5px;
    right: 0.5px;
    background: #ef4444 !important;
    color: white !important;
    font-size: 8px;
    font-weight: 800;
    min-width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    padding: 0 2px;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
    border: none !important;
    z-index: 10;
    line-height: normal;
}

.day-num[b-aqtq0loeko] {
    font-size: 12px !important;
    font-weight: 800 !important;

}

.day-name-small[b-aqtq0loeko] {
    font-size: 12px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    opacity: 0.6;
    margin-top: 5px;
    display: block !important;
}

.day-btn.active .day-name-small[b-aqtq0loeko] {
    opacity: 0.9;
}


.day-btn:hover[b-aqtq0loeko] {
    background: var(--slate-100) !important;
    transform: translateY(-2px);
    color: var(--primary-600) !important;
}

.day-btn.active[b-aqtq0loeko] {
    background: var(--primary-600) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
    transform: scale(1.1);
    z-index: 2;
}

.day-btn.active.has-data[b-aqtq0loeko] {
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4) !important;
    background: rgba(37, 99, 235, 0.06);
    color: white !important;
    border: none !important;
}

/* Disabled State - Greyed Out */
.day-btn:disabled[b-aqtq0loeko] {
    cursor: not-allowed !important;
}


/* Specific selector for has-data days that aren't currently active */
.days-scroller .day-btn.has-data:not(.active)[b-aqtq0loeko] {
    background: #ecfdf5 !important;
    /* Emerald-50 */
    color: #010e0a !important;
    /* Emerald-800 */
    border: none !important;
}

/* Subtle pulse for days with data to draw attention softly */
@keyframes data-pulse-b-aqtq0loeko {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.day-btn.has-data:hover[b-aqtq0loeko] {
    animation: data-pulse-b-aqtq0loeko 0.6s ease-in-out;
}

/* Removed custom all-days width to match other day buttons */

/* Future & Today States - "Light Out" Future Data */
.day-btn.is-future[b-aqtq0loeko] {
    opacity: 1 !important;
}

.shadow-btn[b-aqtq0loeko] {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
}

/* Prevent filled icon buttons/menus from becoming invisible on hover/focus/active due to transparent overrides */
[b-aqtq0loeko] .shadow-btn.mud-button-filled-primary:hover,
[b-aqtq0loeko] .shadow-btn.mud-button-filled-primary:focus,
[b-aqtq0loeko] .shadow-btn.mud-button-filled-primary:active,
[b-aqtq0loeko] .shadow-btn .mud-button-filled-primary:hover,
[b-aqtq0loeko] .shadow-btn .mud-button-filled-primary:focus,
[b-aqtq0loeko] .shadow-btn .mud-button-filled-primary:active {
    background-color: var(--primary-600) !important;
    color: white !important;
}

[b-aqtq0loeko] .shadow-btn.mud-button-filled-secondary:hover,
[b-aqtq0loeko] .shadow-btn.mud-button-filled-secondary:focus,
[b-aqtq0loeko] .shadow-btn.mud-button-filled-secondary:active,
[b-aqtq0loeko] .shadow-btn .mud-button-filled-secondary:hover,
[b-aqtq0loeko] .shadow-btn .mud-button-filled-secondary:focus,
[b-aqtq0loeko] .shadow-btn .mud-button-filled-secondary:active,
[b-aqtq0loeko] .shadow-btn .mud-icon-button:hover,
[b-aqtq0loeko] .shadow-btn .mud-icon-button:focus,
[b-aqtq0loeko] .shadow-btn .mud-icon-button:focus-within,
[b-aqtq0loeko] .shadow-btn .mud-icon-button:active {
    background-color: #db2777 !important;
    color: white !important;
    opacity: 1 !important;
}

[b-aqtq0loeko] .shadow-btn:hover .mud-icon-root,
[b-aqtq0loeko] .shadow-btn:hover .mud-button-label,
[b-aqtq0loeko] .shadow-btn .mud-button-root:hover .mud-icon-root,
[b-aqtq0loeko] .shadow-btn .mud-button-root:hover .mud-button-label,
[b-aqtq0loeko] .shadow-btn .mud-icon-button:hover .mud-icon-root,
[b-aqtq0loeko] .shadow-btn .mud-icon-button:focus .mud-icon-root,
[b-aqtq0loeko] .shadow-btn .mud-icon-button:focus-within .mud-icon-root,
[b-aqtq0loeko] .shadow-btn .mud-icon-button:active .mud-icon-root {
    color: white !important;
}




.day-btn:disabled[b-aqtq0loeko] {

    background: #8a8a8a !important;
    color: #e7e0e0 !important;  
    cursor: not-allowed !important;
    border: 1px dashed #838485 !important;
}

.day-btn.is-today[b-aqtq0loeko] {
    border-color: #3b82f6 !important;
    color: #1d4ed8 !important;
    font-weight: 800 !important;
    background: white !important;
}

.today-marker[b-aqtq0loeko] {
    position: absolute;
    top: 4px;
    width: 5px;
    height: 5px;
    background: #3b82f6;
    border-radius: 50%;
    box-shadow: 0 0 6px #93c5fd;
}

/* ══════════════════════════════════════
   REPORT BUTTON - CORPORATE PRO
   ══════════════════════════════════════ */
.report-btn[b-aqtq0loeko] {
    height: 48px !important;
    padding: 0 24px !important;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(30, 27, 75, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    position: relative !important;
}

.report-btn:not(:disabled):hover[b-aqtq0loeko] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30, 27, 75, 0.3) !important;
    background: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%) !important;
}

.report-btn:not(:disabled):active[b-aqtq0loeko] {
    transform: translateY(0);
}

.report-btn:disabled[b-aqtq0loeko] {
    background: var(--slate-200) !important;
    color: var(--slate-400) !important;
    box-shadow: none !important;
}

/* Shine effect on hover */
.report-btn[b-aqtq0loeko]::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(30deg);
    transition: all 0.6s ease;
}

.report-btn:hover[b-aqtq0loeko]::after {
    left: 120%;
}

/* ══════════════════════════════════════
   RESPONSIVE & MOBILE
   ══════════════════════════════════════ */
@media (max-width: 959.98px) {
    .header-section > div[b-aqtq0loeko] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
    }

    [b-aqtq0loeko] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }
}

@media (max-width: 768px) {
    [b-aqtq0loeko] .modern-table .mud-table-container {
        overflow-x: auto !important;
    }
}

@media (max-width: 599.98px) {
    /* ── Compact control panel ── */
    [b-aqtq0loeko] .control-panel-card .mud-grid {
        gap: 0 !important;
    }

    [b-aqtq0loeko] .control-panel-card .d-flex.justify-end {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100%;
        gap: 4px !important;
        margin-top: 4px !important;
    }

    /* Hide stat chip on mobile */
    .stat-chip[b-aqtq0loeko] {
        display: none !important;
    }

    /* Compact action buttons */
    [b-aqtq0loeko] .control-panel-card .shadow-btn {
        width: auto !important;
        min-width: unset !important;
        padding: 0 8px !important;
        height: 30px !important;
        font-size: 0.7rem !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        display: inline-flex !important;
    }

    [b-aqtq0loeko] .control-panel-card .shadow-btn .mud-button-label {
        font-size: 0.7rem !important;
    }

    [b-aqtq0loeko] .control-panel-card .shadow-btn .mud-icon-root {
        font-size: 1rem !important;
    }

    [b-aqtq0loeko] .control-panel-card .mud-menu {
        width: auto !important;
    }

    /* ── Compact days scroller ── */
    .days-scroller-wrapper[b-aqtq0loeko] {
        margin-top: 8px !important;
        padding: 4px 8px !important;
    }

    .days-scroller-label[b-aqtq0loeko] {
        display: none !important;
    }

    .days-scroller-container[b-aqtq0loeko] {
        overflow: hidden !important;
    }

    .days-scroller[b-aqtq0loeko] {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 4px !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
    }

    .days-scroller[b-aqtq0loeko]::-webkit-scrollbar {
        display: none !important;
    }

    .day-btn[b-aqtq0loeko] {
        min-width: 44px !important;
        height: 44px !important;
        border-radius: 6px !important;
        flex: 0 0 auto !important;
    }

    .day-num[b-aqtq0loeko] {
        font-size: 11px !important;
        line-height: 1 !important;
    }

    .day-name-small[b-aqtq0loeko] {
        display: flex !important;
        font-size: 7px !important;
        margin-top: 2px !important;
        letter-spacing: 0.3px !important;
        line-height: 1 !important;
    }

    .day-badge[b-aqtq0loeko] {
        font-size: 6px !important;
        min-width: 10px !important;
        height: 10px !important;
        border-radius: 5px !important;
        top: 1px !important;
        right: 1px !important;
    }

    .day-btn.active[b-aqtq0loeko] {
        transform: scale(1.05) !important;
    }

    .day-btn:hover[b-aqtq0loeko] {
        transform: translateY(-1px) !important;
    }

    .dot.data-dot[b-aqtq0loeko] {
        display: none !important;
    }

    /* Single-line compact pagination */
    /* Single-line compact pagination */
    .modern-pager[b-aqtq0loeko] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 8px !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .modern-pager[b-aqtq0loeko]  .mud-table-pagination {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide pagination spacer */
    .modern-pager[b-aqtq0loeko]  .mud-table-pagination-spacer {
        display: none !important;
    }

    /* Hide "Rows per page:" text label to fit in a single line */
    .modern-pager[b-aqtq0loeko]  .mud-table-pagination-information {
        display: none !important;
    }

    .modern-pager[b-aqtq0loeko]  .mud-table-pagination-item {
        margin: 0 !important;
        padding: 0 4px !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .modern-pager[b-aqtq0loeko]  .mud-select {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 95px !important;
        font-size: 0.75rem !important;
        height: 28px !important;
        margin-right: 8px !important;
        flex-shrink: 0 !important;
    }

    /* Fix select dropdown padding to prevent number clipping (e.g. 10 looking like 1) */
    .modern-pager[b-aqtq0loeko]  .mud-select .mud-input-slot {
        width: 100% !important;
        text-align: left !important;
        justify-content: flex-start !important;
        padding-right: 14px !important;
        padding-left: 4px !important;
        text-overflow: clip !important;
        overflow: visible !important;
    }

    .modern-pager[b-aqtq0loeko]  .mud-select .mud-input {
        width: 100% !important;
        min-width: 100% !important;
    }

    .modern-pager[b-aqtq0loeko]  .mud-select .mud-input-control {
        width: 100% !important;
    }

    .modern-pager[b-aqtq0loeko]  .mud-typography {
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .modern-pager[b-aqtq0loeko]  .mud-table-pagination-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        margin-left: 8px !important;
    }

    /* Hide first page and last page buttons (|< and >|) on mobile/tablet to only show < and > */
    .modern-pager[b-aqtq0loeko]  .mud-table-pagination-first-button,
    .modern-pager[b-aqtq0loeko]  .mud-table-pagination-last-button,
    .modern-pager[b-aqtq0loeko]  .mud-icon-button.mud-table-pagination-first-button,
    .modern-pager[b-aqtq0loeko]  .mud-icon-button.mud-table-pagination-last-button {
        display: none !important;
    }

    .modern-pager[b-aqtq0loeko]  .mud-icon-button {
        width: 32px !important;
        height: 32px !important;
        padding: 4px !important;
        margin: 0 2px !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
    }

    .modern-pager[b-aqtq0loeko]  .mud-icon-button .mud-icon-size-medium {
        font-size: 1rem !important;
    }

    /* ── Compact Table Content & Prevent Horizontal Scroll ── */
    [b-aqtq0loeko] .modern-table .mud-table-body td,
    [b-aqtq0loeko] .modern-table td,
    [b-aqtq0loeko] .modern-table .mud-table-cell {
        height: auto !important;
        padding: 6px 10px !important;
        min-height: unset !important;
    }

    [b-aqtq0loeko] .modern-table .mud-table-body tr {
        height: auto !important;
        padding: 8px 4px !important;
    }

    .leave-selector[b-aqtq0loeko] {
        gap: 5px !important;
        margin-left: -6px !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .leave-selector label[b-aqtq0loeko] {
        width: 32px !important;
    }

    .status-circle[b-aqtq0loeko] {
        width: 30px !important;
        height: 30px !important;
        font-size: 10px !important;
    }

    .leave-selector input:checked+.status-circle[b-aqtq0loeko] {
        transform: scale(1.1) !important;
    }

    .split-leave-container[b-aqtq0loeko] {
        gap: 12px !important;
        padding: 4px 0 !important;
    }

    [b-aqtq0loeko] .modern-table .mud-table-container {
        overflow-x: hidden !important;
    }
}

/* ── Tablet & Mobile Card Layout ── */
@media (max-width: 1023.98px) {
    /* Transform Table to Native List Card Layout on Mobile and Tablet */
    [b-aqtq0loeko] .modern-table table {
        min-width: unset !important;
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }

    [b-aqtq0loeko] .modern-table .mud-table-container {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        flex: 1 !important;
    }

    [b-aqtq0loeko] .modern-table thead {
        display: none !important; /* Hide headers */
    }

    [b-aqtq0loeko] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }

    [b-aqtq0loeko] .modern-table tbody tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        gap: 12px !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01), inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
        margin-bottom: 12px !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        will-change: transform !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }

    [b-aqtq0loeko] .modern-table tbody tr::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(37, 99, 235, 0.03) !important;
        opacity: 0 !important;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    [b-aqtq0loeko] .modern-table tbody tr:hover::after {
        opacity: 1 !important;
    }

    [b-aqtq0loeko] .modern-table tbody tr:hover {
        transform: translateY(-2px) !important;
        border-color: var(--primary-300, #93c5fd) !important;
    }

    [b-aqtq0loeko] .modern-table tbody tr:active {
        transform: translateY(0) scale(0.98) !important;
        transition-duration: 0.1s !important;
    }

    [b-aqtq0loeko] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        grid-column: 1 / -1 !important; /* Default full span */
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .cell-fixed-container[b-aqtq0loeko] {
        height: auto !important;
        min-height: 34px !important;
        width: 100% !important;
    }

    .cell-fixed-container>span[b-aqtq0loeko],
    .cell-fixed-container>form[b-aqtq0loeko],
    .cell-fixed-container>div[b-aqtq0loeko] {
        height: auto !important;
        min-height: 34px !important;
    }

    /* Header Elements Placement */
    [b-aqtq0loeko] .modern-table tr .col-day {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    [b-aqtq0loeko] .modern-table tr .col-id {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
    }

    [b-aqtq0loeko] .modern-table tr .col-profile {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.4) !important;
    }

    [b-aqtq0loeko] .modern-table tr .col-day .day-count-badge::before {
        content: "Day " !important;
    }

    /* Custom styling for calendar day badge */
    .day-count-badge[b-aqtq0loeko] {
        padding: 4px 10px !important;
        background: rgba(37, 99, 235, 0.08) !important;
        color: var(--primary-600, #2563eb) !important;
        border-radius: 8px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        font-family: var(--font-display), sans-serif !important;
        border: 1px solid rgba(37, 99, 235, 0.15) !important;
        line-height: 1 !important;
    }

    /* Profile Avatar size on mobile card */
    [b-aqtq0loeko] .modern-table tr .col-profile .profile-avatar {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 0.9rem !important;
        background: linear-gradient(135deg, var(--primary-400), var(--primary-600)) !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.12) !important;
        border-radius: 50% !important;
    }

    [b-aqtq0loeko] .modern-table tr .col-profile .profile-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--slate-800, #1e293b) !important;
        letter-spacing: -0.01em !important;
    }

    /* Labels and alignment for selector columns */
    .mobile-label[b-aqtq0loeko] {
        display: inline-block !important;
        font-weight: 700 !important;
        font-size: 0.8rem !important;
        color: var(--slate-500) !important;
        margin-bottom: 6px !important;
        flex-shrink: 0 !important;
    }

    [b-aqtq0loeko] .modern-table tr .col-morning,
    [b-aqtq0loeko] .modern-table tr .col-afternoon,
    [b-aqtq0loeko] .modern-table tr .col-attendance {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding-top: 10px !important;
        padding-bottom: 6px !important;
        gap: 6px !important;
    }

    /* Style the leave selector inside the card for mobile/tablets to prevent clipping */
    [b-aqtq0loeko] .modern-table tr .leave-selector {
        display: flex !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        width: 100% !important;
        margin-left: 0 !important;
        padding: 0 !important;
    }

    [b-aqtq0loeko] .modern-table tr .leave-selector label {
        width: 34px !important;
        margin: 0 !important;
    }

    [b-aqtq0loeko] .modern-table tr .leave-selector .status-circle {
        width: 32px !important;
        height: 32px !important;
        font-size: 11px !important;
    }

    /* Remarks alignment & input styling */
    [b-aqtq0loeko] .modern-table tr .col-remarks {
        grid-column: 1 / 4 !important;
        grid-row: 5 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding-top: 10px !important;
        padding-bottom: 8px !important;
    }

    [b-aqtq0loeko] .modern-table tr .col-remarks .cell-fixed-container {
        width: 100% !important;
        margin-top: 4px !important;
    }

    [b-aqtq0loeko] .col-remarks .ghost-input {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        padding: 4px 12px !important;
        width: 100% !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }

    [b-aqtq0loeko] .col-remarks .ghost-input:focus-within {
        border-color: var(--primary-400, #3b82f6) !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    }

    [b-aqtq0loeko] .col-remarks .ghost-input .mud-input-slot {
        height: 32px !important;
        line-height: 32px !important;
        padding: 0 !important;
    }

    /* Actions placed next to Remarks on Row 5 */
    [b-aqtq0loeko] .modern-table tr .col-actions {
        grid-column: 4 !important;
        grid-row: 5 !important;
        justify-content: flex-end !important;
        align-self: flex-end !important; /* align with remarks input box */
        padding-bottom: 8px !important; /* matches col-remarks bottom padding */
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        margin-left: 12px !important; /* space between remarks field and delete button */
        border-top: none !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    [b-aqtq0loeko] .modern-table tr .col-actions .cell-fixed-container {
        width: auto !important;
        flex-grow: 0 !important;
        height: auto !important;
    }

    [b-aqtq0loeko] .modern-table tr .col-actions .mud-tooltip {
        display: inline-flex !important;
    }

    [b-aqtq0loeko] .modern-table tr .col-actions .action-btn-del {
        background: rgba(239, 68, 68, 0.06) !important;
        color: #ef4444 !important;
        border: 1px solid rgba(239, 68, 68, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-aqtq0loeko] .modern-table tr .col-actions .action-btn-del:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
    }
}
/* /Components/Pages/EmployeeForm/EmployeeFormEdit.razor.rz.scp.css */
.header-avatar[b-4x0tnxzgtd] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-4x0tnxzgtd] {
    color: white !important;
    font-size: 22px !important;
}

.btn-success-outline[b-4x0tnxzgtd] {
    border-color: #10b981 !important;
    color: #10b981 !important;
}

[b-4x0tnxzgtd] .mud-autocomplete button.mud-icon-button {
    display: none !important;
}

[b-4x0tnxzgtd] .mud-autocomplete .mud-input-adornment-end button.mud-icon-button {
    display: inline-flex !important;
}

/* ═══════════════════════════════════════════
   Mobile & Tablet - Native App Layout
   ═══════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .header-section[b-4x0tnxzgtd] {
        border-radius: 0 !important;
        padding: var(--space-3) !important;
        margin-bottom: 0 !important;
    }

    .header-section > div[b-4x0tnxzgtd] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .progress-mini[b-4x0tnxzgtd] {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
        padding: 8px 12px !important;
    }

    .form-container[b-4x0tnxzgtd] {
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    [b-4x0tnxzgtd] .scrolling-content-container {
        padding: 12px 12px 100px 12px !important;
    }

    [b-4x0tnxzgtd] .scroll-section .section-title {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }

    [b-4x0tnxzgtd] .scroll-section .mud-grid {
        padding: 0 4px !important;
    }

    [b-4x0tnxzgtd] .mud-grid-item {
        padding: 4px !important;
    }

    [b-4x0tnxzgtd] .mud-input {
        font-size: 15px !important;
    }

    [b-4x0tnxzgtd] .mud-input-label {
        font-size: 13px !important;
    }

    /* Make all fields full-width on mobile */
    [b-4x0tnxzgtd] .scroll-section .mud-grid-item[class*="sm-"] {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    [b-4x0tnxzgtd] .scroll-section .mud-grid-item[class*="md-"] {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    /* Fix footer */
    .fixed-footer[b-4x0tnxzgtd] {
        border-radius: 0 !important;
        padding: 12px 16px !important;
        background: #ffffff !important;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.05) !important;
    }

    .fixed-footer .footer-step[b-4x0tnxzgtd] {
        display: none !important;
    }

    .fixed-footer .footer-buttons[b-4x0tnxzgtd] {
        width: 100% !important;
    }

    .fixed-footer .footer-buttons .btn-submit[b-4x0tnxzgtd] {
        width: 100% !important;
    }
}

@media (max-width: 599.98px) {
    [b-4x0tnxzgtd] .mud-grid-item[class*="xs-"] {
        padding: 4px 0 !important;
    }
}
/* /Components/Pages/EmployeeForm/EmployeeFormList.razor.rz.scp.css */
    .header-avatar[b-f75fivklqe] {
        background: rgba(255, 255, 255, 0.15) !important;
        width: 44px !important;
        height: 44px !important;
    }

    .header-icon[b-f75fivklqe] {
        color: white !important;
        font-size: 22px !important;
    }

    .control-panel-card[b-f75fivklqe] {
        margin-top: 16px !important;
        padding: 16px !important;
        flex-shrink: 0 !important;
    }

    .centered-grid[b-f75fivklqe] {
        align-items: center !important;
    }

    .search-field-full[b-f75fivklqe] {
        width: 100% !important;
    }

    .table-layout-wrapper[b-f75fivklqe] {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        margin-top: 16px !important;
        overflow: hidden !important;
    }

    [b-f75fivklqe] .modern-table {
        margin-bottom: 24px;
        table-layout: fixed !important;
    }

    [b-f75fivklqe] .modern-table .mud-table-container {
        overflow-y: auto !important;
        height: 380px !important;
    }

    [b-f75fivklqe] .modern-table .mud-table-root {
        table-layout: fixed !important;
    }

    [b-f75fivklqe] .modern-table .col-id {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        text-align: center !important;
    }

    [b-f75fivklqe] .modern-table .col-name {
        width: auto !important;
    }

    [b-f75fivklqe] .modern-table .col-actions {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
        text-align: center !important;
    }

    .modern-pager[b-f75fivklqe] {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 6px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .jump-to-container[b-f75fivklqe] {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        background: rgba(0, 0, 0, 0.04) !important;
        padding: 2px 6px !important;
        border-radius: 6px !important;
        height: 28px !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }

    .jump-label[b-f75fivklqe] {
        font-size: 11px !important;
        color: #64748b !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .jump-input-wrapper[b-f75fivklqe] {
        width: 36px !important;
        flex-shrink: 0 !important;
    }

    .jump-field[b-f75fivklqe] {
        margin-top: 0 !important;
    }

    .jump-field[b-f75fivklqe]  .mud-input {
        font-size: 11px !important;
        height: 20px !important;
    }

    .jump-field[b-f75fivklqe]  input {
        text-align: center !important;
        font-weight: 700 !important;
        padding: 0 !important;
    }

    .jump-btn[b-f75fivklqe] {
        padding: 1px !important;
        width: 22px !important;
        height: 22px !important;
    }

    .jump-btn[b-f75fivklqe]  .mud-icon-root {
        font-size: 16px !important;
    }

    /* ══════════════════════════════════════════════════════════
       Mobile & Tablet Responsive Table Transformations
       ══════════════════════════════════════════════════════════ */
    @media (max-width: 1023.98px) {
        .header-section > div[b-f75fivklqe] {
            justify-content: center !important;
            text-align: center;
            flex-direction: column;
            gap: 12px !important;
        }

        [b-f75fivklqe] .control-panel-card .d-flex.justify-end {
            justify-content: center !important;
            width: 100%;
            margin-top: 12px;
        }

        [b-f75fivklqe] .stat-chip {
            display: none !important;
        }

        [b-f75fivklqe] .mud-table-smalldevices-sortselect {
            display: none !important;
        }

        [b-f75fivklqe] .modern-table table {
            display: flex !important;
            flex-direction: column !important;
            background: transparent !important;
        }
        
        [b-f75fivklqe] .modern-table thead {
            display: none !important;
        }
        
        [b-f75fivklqe] .modern-table tbody {
            display: flex !important;
            flex-direction: column !important;
            gap: 12px !important;
            padding: 4px !important;
            background: transparent !important;
        }
        
        [b-f75fivklqe] .modern-table tr {
            position: relative !important;
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            grid-template-rows: auto auto !important;
            grid-template-areas: 
                "id actions"
                "name name" !important;
            background: #ffffff !important;
            border: 1px solid rgba(226, 232, 240, 0.7) !important;
            border-radius: 16px !important;
            padding: 14px !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
            gap: 10px !important;
            align-items: center !important;
            margin-bottom: 12px !important;
            transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
        }
        
        [b-f75fivklqe] .modern-table tr:hover {
            transform: translateY(-2px) !important;
            border-color: #3b82f6 !important;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
        }

        [b-f75fivklqe] .modern-table td {
            border-bottom: none !important;
            padding: 0 !important;
            display: flex !important;
            align-items: center !important;
            background: transparent !important;
            width: auto !important;
            max-width: none !important;
            min-width: 0 !important;
        }

        [b-f75fivklqe] .modern-table td::before {
            display: none !important;
        }

        [b-f75fivklqe] .modern-table tr td.col-id {
            grid-area: id !important;
            justify-content: flex-start !important;
        }

        [b-f75fivklqe] .modern-table tr td.col-id .id-pill {
            background: rgba(37, 99, 235, 0.08) !important;
            color: #2563eb !important;
            border-radius: 8px !important;
            padding: 4px 10px !important;
            font-weight: 700 !important;
            font-size: 11px !important;
        }
        
        [b-f75fivklqe] .modern-table tr td.col-name {
            grid-area: name !important;
        }

        [b-f75fivklqe] .modern-table tr td.col-name .profile-name {
            font-size: 15px !important;
            font-weight: 700 !important;
            color: #0f172a !important;
        }
        
        [b-f75fivklqe] .modern-table tr td.col-actions {
            grid-area: actions !important;
            justify-content: flex-end !important;
            width: 100% !important;
            align-self: start !important;
            justify-self: end !important;
            margin-top: -4px !important;
            margin-right: -6px !important;
        }

        [b-f75fivklqe] .modern-table tr td.col-actions .mud-stack {
            justify-content: flex-end !important;
            width: auto !important;
            gap: 0 !important;
        }

        [b-f75fivklqe] .modern-table tr td.col-actions .mud-icon-button {
            padding: 4px !important;
            width: 32px !important;
            height: 32px !important;
        }

        /* Pagination */
        [b-f75fivklqe] .modern-table .mud-table-footer {
            overflow: hidden !important;
        }

        [b-f75fivklqe] .modern-table .mud-table-container {
            overflow-x: hidden !important;
        }

        [b-f75fivklqe] .modern-table tfoot {
            overflow: hidden !important;
        }

        .modern-pager[b-f75fivklqe] {
            display: flex !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            gap: 8px !important;
            padding: 6px 12px !important;
            width: 100% !important;
            box-sizing: border-box !important;
            min-width: 0 !important;
            overflow: hidden !important;
        }

        .modern-pager[b-f75fivklqe]  .mud-table-pagination {
            margin-left: 0 !important;
            width: auto !important;
            min-width: 0 !important;
            flex-shrink: 1 !important;
        }

        .modern-pager[b-f75fivklqe]  .mud-table-pagination-toolbar {
            padding-left: 0 !important;
            padding-right: 0 !important;
            gap: 2px !important;
            height: 32px !important;
            min-height: 32px !important;
            display: flex !important;
            align-items: center !important;
        }

        .modern-pager[b-f75fivklqe]  .mud-table-pagination-spacer {
            display: none !important;
        }

        .modern-pager[b-f75fivklqe]  .mud-select {
            display: none !important;
        }

        .modern-pager[b-f75fivklqe]  .mud-table-pagination-information {
            font-size: 12px !important;
            margin: 0 4px 0 0 !important;
            white-space: nowrap !important;
            flex-shrink: 0 !important;
            color: var(--slate-600) !important;
            font-weight: 500 !important;
        }

        .modern-pager[b-f75fivklqe]  .mud-table-pagination-actions {
            display: flex !important;
            align-items: center !important;
            gap: 0px !important;
            margin: 0 !important;
            flex-shrink: 0 !important;
        }

        .modern-pager[b-f75fivklqe]  .mud-icon-button {
            padding: 4px !important;
            width: 28px !important;
            height: 28px !important;
        }

        .modern-pager[b-f75fivklqe]  .mud-icon-button .mud-icon-root {
            font-size: 18px !important;
        }

        .jump-to-container[b-f75fivklqe] {
            display: flex !important;
            align-items: center !important;
            gap: 4px !important;
            background: var(--slate-100) !important;
            padding: 2px 6px !important;
            border-radius: 6px !important;
            height: 28px !important;
            flex-shrink: 0 !important;
            margin-left: auto !important;
        }

        .jump-label[b-f75fivklqe] {
            font-size: 11px !important;
            color: var(--color-text-muted) !important;
            font-weight: 600 !important;
            white-space: nowrap !important;
        }

        .jump-input-wrapper[b-f75fivklqe] {
            width: 36px !important;
            flex-shrink: 0 !important;
        }

        .jump-field[b-f75fivklqe] {
            margin-top: 0 !important;
        }

        .jump-field[b-f75fivklqe]  .mud-input {
            font-size: 11px !important;
            height: 20px !important;
        }

        .jump-field[b-f75fivklqe]  input {
            text-align: center !important;
            font-weight: 700 !important;
            padding: 0 !important;
        }

        .jump-btn[b-f75fivklqe] {
            padding: 1px !important;
            width: 22px !important;
            height: 22px !important;
        }

        .jump-btn[b-f75fivklqe]  .mud-icon-root {
            font-size: 16px !important;
        }

        @media (max-width: 500px) {
            .jump-label[b-f75fivklqe] {
                display: none !important;
            }
            .modern-pager[b-f75fivklqe] {
                gap: 4px !important;
                padding: 4px 4px !important;
            }
            .modern-pager[b-f75fivklqe]  .mud-table-pagination-information {
                font-size: 10px !important;
                margin-right: 2px !important;
            }
        }
    }

    @media (max-width: 599.98px) {
        [b-f75fivklqe] .control-panel-card .d-flex.justify-end {
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 8px !important;
        }

        [b-f75fivklqe] .control-panel-card .action-btn,
        [b-f75fivklqe] .control-panel-card .mud-button-root {
            width: 100% !important;
        }
    }
/* /Components/Pages/EmployeeRegister/EmployeeRegisterEdit.razor.rz.scp.css */
.header-avatar[b-99dcie26hl] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-99dcie26hl] {
    color: white !important;
    font-size: 22px !important;
}

.field-readonly-bg[b-99dcie26hl] {
    background: #f1f5f9 !important;
    border-radius: 8px !important;
}

.btn-success-outline[b-99dcie26hl] {
    border-color: #10b981 !important;
    color: #10b981 !important;
}

.photo-section[b-99dcie26hl] {
    text-align: center;
    padding: 12px;
}

.employee-photo[b-99dcie26hl] {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.photo-placeholder[b-99dcie26hl] {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    [b-99dcie26hl] .mud-input {
        font-size: 15px !important;
    }

    [b-99dcie26hl] .mud-input-label {
        font-size: 13px !important;
    }

    /* Full-width fields on mobile */
    [b-99dcie26hl] .mud-grid-item[class*="sm-"],
    [b-99dcie26hl] .mud-grid-item[class*="md-"] {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    /* Larger touch targets for tabs */
    [b-99dcie26hl] .mud-tab {
        min-height: 44px !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    /* Larger next/prev buttons */
    [b-99dcie26hl] .btn-next,
    [b-99dcie26hl] .btn-prev,
    [b-99dcie26hl] .btn-submit {
        min-height: 40px !important;
        font-size: 14px !important;
    }

    /* Checkbox labels larger for touch */
    [b-99dcie26hl] .mud-checkbox .mud-checkbox-label {
        font-size: 14px !important;
    }
}
/* /Components/Pages/EmployeeRegister/EmployeeRegisters.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Employee Registers - Scoped Styles
   ══════════════════════════════════════════════════════════ */

.header-avatar[b-jbesrr1jh8] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-jbesrr1jh8] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-jbesrr1jh8] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-jbesrr1jh8] {
    align-items: center !important;
}

.search-field-full[b-jbesrr1jh8] {
    width: 100% !important;
}

.table-layout-wrapper[b-jbesrr1jh8] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

[b-jbesrr1jh8] .modern-table {
    margin-bottom: 24px;
}

[b-jbesrr1jh8] .modern-table .mud-table-container {
    height: 380px !important;
}

/* Responsive Styles for Employee registers list page */
@media (max-width: 1023.98px) {
    .header-section > div[b-jbesrr1jh8] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
        gap: 12px !important;
    }

    [b-jbesrr1jh8] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }

    [b-jbesrr1jh8] .stat-chip {
        display: none !important;
    }

    [b-jbesrr1jh8] .mud-table-smalldevices-sortselect {
        display: none !important;
    }

    /* Transform Table to Native List Card Layout on Mobile and Tablet */
    [b-jbesrr1jh8] .modern-table table {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }
    
    [b-jbesrr1jh8] .modern-table thead {
        display: none !important;
    }
    
    [b-jbesrr1jh8] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }
    
    [b-jbesrr1jh8] .modern-table tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto auto auto auto !important;
        grid-template-areas: 
            "id actions"
            "profile profile"
            "designation status"
            "joindate joindate"
            "city state" !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 14px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
        gap: 10px !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    
    [b-jbesrr1jh8] .modern-table tr:hover {
        transform: translateY(-2px) !important;
        border-color: #3b82f6 !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    }

    [b-jbesrr1jh8] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Hide default MudBlazor mobile labels */
    [b-jbesrr1jh8] .modern-table td::before {
        display: none !important;
    }

    [b-jbesrr1jh8] .modern-table tr td:nth-child(1) {
        grid-area: id !important;
        justify-content: flex-start !important;
    }

    [b-jbesrr1jh8] .modern-table tr td:nth-child(1) .id-pill {
        background: rgba(37, 99, 235, 0.08) !important;
        color: #2563eb !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
    }
    
    [b-jbesrr1jh8] .modern-table tr td:nth-child(2) {
        grid-area: profile !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    [b-jbesrr1jh8] .modern-table tr td:nth-child(2) .profile-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #1e293b !important;
    }

    [b-jbesrr1jh8] .modern-table tr td:nth-child(3) {
        grid-area: designation !important;
    }

    [b-jbesrr1jh8] .modern-table tr td:nth-child(4) {
        grid-area: city !important;
    }

    [b-jbesrr1jh8] .modern-table tr td:nth-child(5) {
        grid-area: state !important;
        justify-content: flex-end !important;
    }

    [b-jbesrr1jh8] .modern-table tr td:nth-child(6) {
        grid-area: joindate !important;
    }

    [b-jbesrr1jh8] .modern-table tr td:nth-child(7) {
        grid-area: status !important;
        justify-content: flex-end !important;
    }
    
    [b-jbesrr1jh8] .modern-table tr td:nth-child(8) {
        grid-area: actions !important;
        justify-content: flex-end !important;
        width: 100% !important;
        align-self: start !important;
        justify-self: end !important;
        margin-top: -4px !important;
        margin-right: -6px !important;
    }

    [b-jbesrr1jh8] .modern-table tr td:nth-child(8) .mud-stack {
        justify-content: flex-end !important;
        width: auto !important;
        gap: 0 !important;
    }

    [b-jbesrr1jh8] .modern-table tr td:nth-child(8) .mud-icon-button {
        padding: 4px !important;
        width: 32px !important;
        height: 32px !important;
    }

    /* Custom styled labels for mobile card view */
    [b-jbesrr1jh8] .modern-table td:nth-child(3)::before,
    [b-jbesrr1jh8] .modern-table td:nth-child(4)::before,
    [b-jbesrr1jh8] .modern-table td:nth-child(5)::before,
    [b-jbesrr1jh8] .modern-table td:nth-child(6)::before,
    [b-jbesrr1jh8] .modern-table td:nth-child(7)::before {
        content: attr(data-label) ": " !important;
        display: inline-block !important;
        font-weight: 600 !important;
        color: #94a3b8 !important;
        margin-right: 8px !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        width: 90px !important;
        flex-shrink: 0 !important;
    }

    [b-jbesrr1jh8] .modern-table td:nth-child(4)::before,
    [b-jbesrr1jh8] .modern-table td:nth-child(5)::before,
    [b-jbesrr1jh8] .modern-table td:nth-child(7)::before {
        width: auto !important;
    }
}

@media (max-width: 599.98px) {
    [b-jbesrr1jh8] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
    }
    
    [b-jbesrr1jh8] .control-panel-card .action-btn,
    [b-jbesrr1jh8] .control-panel-card .mud-button-root {
        width: 100% !important;
        margin: 0 !important;
        display: inline-flex !important;
    }
}

/* Scoped fallback for EmployeeRegisterEdit container */
[b-jbesrr1jh8] .edit-employee-container {
    transition: all 0.2s ease;
}

@media (max-width: 767.98px) {
    [b-jbesrr1jh8] .edit-employee-container {
        padding: 0 !important;
    }
    [b-jbesrr1jh8] .edit-employee-container .header-section {
        border-radius: 0 !important;
        margin-bottom: 0 !important;
        padding: var(--space-3) var(--space-4) !important;
    }
    [b-jbesrr1jh8] .edit-employee-container .progress-mini {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
        background: var(--slate-50) !important;
    }
    [b-jbesrr1jh8] .edit-employee-container .form-container {
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    [b-jbesrr1jh8] .edit-employee-container .mud-tabs-toolbar {
        background: #ffffff !important;
    }
    [b-jbesrr1jh8] .edit-employee-container .mud-tab-panel {
        padding: var(--space-3) !important;
    }
    [b-jbesrr1jh8] .edit-employee-container .fixed-footer {
        border-radius: 0 !important;
        padding: var(--space-3) !important;
        background: #ffffff !important;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05) !important;
    }
    [b-jbesrr1jh8] .edit-employee-container .footer-step {
        display: none !important;
    }
    [b-jbesrr1jh8] .edit-employee-container .footer-buttons {
        width: 100%;
        justify-content: space-between;
    }
}
/* /Components/Pages/EmployeeSiteChange/EmployeeSiteChangeList.razor.rz.scp.css */
.header-avatar[b-egecmj9z7m] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-egecmj9z7m] {
    color: white !important;
    font-size: 22px !important;
}

.header-subtitle[b-egecmj9z7m] {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 12px !important;
}

.control-panel-card[b-egecmj9z7m] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-egecmj9z7m] {
    align-items: center !important;
}

.search-field-full[b-egecmj9z7m] {
    width: 100% !important;
}

.table-layout-wrapper[b-egecmj9z7m] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

[b-egecmj9z7m] .modern-table {
    margin-bottom: 24px;
    table-layout: fixed !important;
}

[b-egecmj9z7m] .modern-table .mud-table-container {
    overflow-y: auto !important;
    height: 380px !important;
}

[b-egecmj9z7m] .modern-table .col-select {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    text-align: center !important;
}

[b-egecmj9z7m] .modern-table .col-code {
    width: 100px !important;
    min-width: 100px !important;
}

[b-egecmj9z7m] .modern-table .col-name {
    width: auto !important;
    min-width: 180px !important;
}

[b-egecmj9z7m] .modern-table .col-desig {
    width: 140px !important;
    min-width: 140px !important;
}

[b-egecmj9z7m] .modern-table .col-company {
    width: 200px !important;
    min-width: 180px !important;
}

[b-egecmj9z7m] .modern-table .col-date {
    width: 130px !important;
    min-width: 130px !important;
}

[b-egecmj9z7m] .modern-table .col-actions {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    text-align: center !important;
}

[b-egecmj9z7m] .site-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(99, 102, 241, 0.1) !important;
    color: #6366f1 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    white-space: nowrap !important;
}

[b-egecmj9z7m] .edit-autocomplete {
    min-width: 200px !important;
}

[b-egecmj9z7m] .bulk-autocomplete {
    min-width: 250px !important;
}

[b-egecmj9z7m] .edit-datepicker {
    min-width: 140px !important;
    font-size: 12px !important;
}

.bulk-bar[b-egecmj9z7m] {
    margin-top: 12px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    flex-shrink: 0 !important;
}

.bulk-bar-inner[b-egecmj9z7m] {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    background: linear-gradient(135deg, #eef2ff 0%, #ffffff 100%) !important;
    flex-wrap: wrap !important;
}

.bulk-info[b-egecmj9z7m] {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.bulk-controls[b-egecmj9z7m] {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    flex: 1 !important;
}

[b-egecmj9z7m] .bulk-datepicker {
    min-width: 160px !important;
}

.bulk-apply-btn[b-egecmj9z7m] {
    white-space: nowrap !important;
}

.bulk-clear-btn[b-egecmj9z7m] {
    white-space: nowrap !important;
}

/* Review Table Bar */
.review-table-bar[b-egecmj9z7m] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 16px !important;
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    border-radius: 6px !important;
    margin-bottom: 4px !important;
    flex-shrink: 0 !important;
    min-height: 42px !important;
}

.review-bar-active[b-egecmj9z7m] {
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
}

.review-table-bar-left[b-egecmj9z7m] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    user-select: none !important;
}

.review-bar-static[b-egecmj9z7m] {
    cursor: default !important;
}

.review-table-bar-actions[b-egecmj9z7m] {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

[b-egecmj9z7m] .review-chevron {
    color: #92400e !important;
    font-size: 22px !important;
}

[b-egecmj9z7m] .review-bar-text {
    font-weight: 600 !important;
    color: #92400e !important;
    font-size: 14px !important;
}

[b-egecmj9z7m] .review-count-btn {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #78350f !important;
    text-transform: none !important;
    padding: 6px 20px !important;
    min-height: 36px !important;
    letter-spacing: 0.3px !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%) !important;
    border: 1px solid #d97706 !important;
    border-bottom: 3px solid #b45309 !important;
    box-shadow: 0 3px 6px rgba(180, 83, 9, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transition: all 0.08s ease !important;
    position: relative !important;
    top: 0 !important;
}

[b-egecmj9z7m] .review-count-btn:hover {
    background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 100%) !important;
    box-shadow: 0 4px 10px rgba(180, 83, 9, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

[b-egecmj9z7m] .review-count-btn:active {
    top: 2px !important;
    border-bottom-width: 1px !important;
    box-shadow: 0 1px 2px rgba(180, 83, 9, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    background: linear-gradient(180deg, #d97706 0%, #f59e0b 100%) !important;
}

.review-filter-hint[b-egecmj9z7m] {
    font-weight: 400 !important;
    font-size: 12px !important;
    color: #b45309 !important;
}

[b-egecmj9z7m] .review-confirm-btn {
    white-space: nowrap !important;
    font-size: 14px !important;
    padding: 4px 18px !important;
    min-height: 32px !important;
}

[b-egecmj9z7m] .review-cancel-btn {
    white-space: nowrap !important;
    font-size: 14px !important;
    padding: 4px 12px !important;
    min-height: 32px !important;
}
/* /Components/Pages/Employees/EmployeeEdit.razor.rz.scp.css */
.header-avatar[b-inbnx4ojsd] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-inbnx4ojsd] {
    color: white !important;
    font-size: 22px !important;
}

.field-readonly-bg[b-inbnx4ojsd] {
    background: #f1f5f9 !important;
    border-radius: 8px !important;
}

.btn-success-outline[b-inbnx4ojsd] {
    border-color: #10b981 !important;
    color: #10b981 !important;
}
/* /Components/Pages/Employees/Employees.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Employee Master - Scoped Styles
   ══════════════════════════════════════════════════════════ */

.header-avatar[b-jh3vsrua00] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-jh3vsrua00] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-jh3vsrua00] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}



.centered-grid[b-jh3vsrua00] {
    align-items: center !important;
}

.search-field-full[b-jh3vsrua00] {
    width: 100% !important;
}

.table-layout-wrapper[b-jh3vsrua00] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

[b-jh3vsrua00] .modern-table {
    margin-bottom: 24px;
}

[b-jh3vsrua00] .modern-table .mud-table-container {
    height: 380px !important;
}

/* Responsive Styles for Employees list page */
@media (max-width: 1023.98px) {
    .header-section > div[b-jh3vsrua00] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
        gap: 12px !important;
    }

    [b-jh3vsrua00] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }

    [b-jh3vsrua00] .stat-chip {
        display: none !important;
    }

    [b-jh3vsrua00] .mud-table-smalldevices-sortselect {
        display: none !important;
    }

    /* Transform Table to Native List Card Layout on Mobile and Tablet */
    [b-jh3vsrua00] .modern-table table {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }
    
    [b-jh3vsrua00] .modern-table thead {
        display: none !important;
    }
    
    [b-jh3vsrua00] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }
    
    [b-jh3vsrua00] .modern-table tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto auto auto auto !important;
        grid-template-areas: 
            "id actions"
            "profile profile"
            "designation designation"
            "company company"
            "city state" !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 14px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
        gap: 10px !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    
    [b-jh3vsrua00] .modern-table tr:hover {
        transform: translateY(-2px) !important;
        border-color: #3b82f6 !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    }

    [b-jh3vsrua00] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Hide default MudBlazor mobile labels */
    [b-jh3vsrua00] .modern-table td::before {
        display: none !important;
    }

    [b-jh3vsrua00] .modern-table tr td:nth-child(1) {
        grid-area: id !important;
        justify-content: flex-start !important;
    }

    [b-jh3vsrua00] .modern-table tr td:nth-child(1) .id-pill {
        background: rgba(37, 99, 235, 0.08) !important;
        color: #2563eb !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
    }
    
    [b-jh3vsrua00] .modern-table tr td:nth-child(2) {
        grid-area: profile !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    [b-jh3vsrua00] .modern-table tr td:nth-child(2) .profile-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #1e293b !important;
    }

    [b-jh3vsrua00] .modern-table tr td:nth-child(3) {
        grid-area: company !important;
    }

    [b-jh3vsrua00] .modern-table tr td:nth-child(4) {
        grid-area: designation !important;
    }

    [b-jh3vsrua00] .modern-table tr td:nth-child(5) {
        grid-area: city !important;
    }

    [b-jh3vsrua00] .modern-table tr td:nth-child(6) {
        grid-area: state !important;
        justify-content: flex-end !important;
    }
    
    [b-jh3vsrua00] .modern-table tr td:nth-child(7) {
        grid-area: actions !important;
        justify-content: flex-end !important;
        width: 100% !important;
        align-self: start !important;
        justify-self: end !important;
        margin-top: -4px !important;
        margin-right: -6px !important;
    }

    [b-jh3vsrua00] .modern-table tr td:nth-child(7) .mud-stack {
        justify-content: flex-end !important;
        width: auto !important;
        gap: 0 !important;
    }

    [b-jh3vsrua00] .modern-table tr td:nth-child(7) .mud-icon-button {
        padding: 4px !important;
        width: 32px !important;
        height: 32px !important;
    }

    /* Custom styled labels for mobile card view */
    [b-jh3vsrua00] .modern-table td:nth-child(3)::before,
    [b-jh3vsrua00] .modern-table td:nth-child(4)::before,
    [b-jh3vsrua00] .modern-table td:nth-child(5)::before,
    [b-jh3vsrua00] .modern-table td:nth-child(6)::before {
        content: attr(data-label) ": " !important;
        display: inline-block !important;
        font-weight: 600 !important;
        color: #94a3b8 !important;
        margin-right: 8px !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        width: 90px !important;
        flex-shrink: 0 !important;
    }

    [b-jh3vsrua00] .modern-table td:nth-child(5)::before,
    [b-jh3vsrua00] .modern-table td:nth-child(6)::before {
        width: auto !important;
    }

}

@media (max-width: 599.98px) {
    [b-jh3vsrua00] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
    }
    
    [b-jh3vsrua00] .control-panel-card .action-btn,
    [b-jh3vsrua00] .control-panel-card .mud-button-root {
        width: 100% !important;
        margin: 0 !important;
        display: inline-flex !important;
    }
}

/* Scoped fallback for EmployeeEdit container in case of hierarchy wrapper */
[b-jh3vsrua00] .edit-employee-container {
    transition: all 0.2s ease;
}

@media (max-width: 767.98px) {
    [b-jh3vsrua00] .edit-employee-container {
        padding: 0 !important;
    }
    [b-jh3vsrua00] .edit-employee-container .header-section {
        border-radius: 0 !important;
        margin-bottom: 0 !important;
        padding: var(--space-3) var(--space-4) !important;
    }
    [b-jh3vsrua00] .edit-employee-container .progress-mini {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
        background: var(--slate-50) !important;
    }
    [b-jh3vsrua00] .edit-employee-container .form-container {
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    [b-jh3vsrua00] .edit-employee-container .mud-tabs-toolbar {
        background: #ffffff !important;
    }
    [b-jh3vsrua00] .edit-employee-container .mud-tab-panel {
        padding: var(--space-3) !important;
    }
    [b-jh3vsrua00] .edit-employee-container .fixed-footer {
        border-radius: 0 !important;
        padding: var(--space-3) !important;
        background: #ffffff !important;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05) !important;
    }
}

/* Custom Pagination Single-Line Layout */
.modern-pager[b-jh3vsrua00] {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

[b-jh3vsrua00] .modern-table .mud-table-footer {
    overflow: hidden !important;
}

[b-jh3vsrua00] .modern-table .mud-table-container {
    overflow-x: hidden !important;
}

[b-jh3vsrua00] .modern-table tfoot {
    overflow: hidden !important;
}

.modern-pager[b-jh3vsrua00]  .mud-table-pagination {
    margin-left: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
}

.modern-pager[b-jh3vsrua00]  .mud-table-pagination-toolbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 2px !important;
    height: 32px !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
}

.modern-pager[b-jh3vsrua00]  .mud-table-pagination-spacer {
    display: none !important;
}

.modern-pager[b-jh3vsrua00]  .mud-table-pagination-information {
    font-size: 12px !important;
    margin: 0 4px 0 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    color: var(--slate-600) !important;
    font-weight: 500 !important;
}

.modern-pager[b-jh3vsrua00]  .mud-table-pagination-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.modern-pager[b-jh3vsrua00]  .mud-icon-button {
    padding: 4px !important;
    width: 28px !important;
    height: 28px !important;
}

.modern-pager[b-jh3vsrua00]  .mud-icon-button .mud-icon-root {
    font-size: 18px !important;
}

/* Adjust jump to row container to be compact */
.jump-to-container[b-jh3vsrua00] {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: var(--slate-100) !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

.jump-label[b-jh3vsrua00] {
    font-size: 11px !important;
    color: var(--color-text-muted) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.jump-input-wrapper[b-jh3vsrua00] {
    width: 36px !important;
    flex-shrink: 0 !important;
}

.jump-field[b-jh3vsrua00] {
    margin-top: 0 !important;
}

.jump-field[b-jh3vsrua00]  .mud-input {
    font-size: 11px !important;
    height: 20px !important;
}

.jump-field[b-jh3vsrua00]  input {
    text-align: center !important;
    font-weight: 700 !important;
    padding: 0 !important;
}

.jump-btn[b-jh3vsrua00] {
    padding: 1px !important;
    width: 22px !important;
    height: 22px !important;
}

.jump-btn[b-jh3vsrua00]  .mud-icon-root {
    font-size: 16px !important;
}

@media (max-width: 500px) {
    .jump-label[b-jh3vsrua00] {
        display: none !important;
    }
    .modern-pager[b-jh3vsrua00] {
        gap: 4px !important;
        padding: 4px 4px !important;
    }
    .modern-pager[b-jh3vsrua00]  .mud-table-pagination-information {
        font-size: 10px !important;
        margin-right: 2px !important;
    }
}
/* /Components/Pages/Employeetran/EmployeeTranReport.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Employee Transaction Report — Scoped Styles
   All global styles (dashboard-container, header-section,
   modern-table th/td, action-btn, id-pill, profile-name)
   come from app.css. Only page-specific overrides live here.
   ══════════════════════════════════════════════════════════ */

/* Stability: no animations on table rows */
.employee-tran-root[b-zj0zl6vn7e],
.employee-tran-root *[b-zj0zl6vn7e],
[b-zj0zl6vn7e] .employee-tran-root *,
[b-zj0zl6vn7e] .modern-table *,
[b-zj0zl6vn7e] .mud-table-row {
    animation: none !important;
    transition: none !important;
}

/* Header avatar / icon — same as AttendanceLedger scoped override */
.header-avatar[b-zj0zl6vn7e] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-zj0zl6vn7e] {
    color: white !important;
    font-size: 22px !important;
}

/* Control panel card */
.control-panel-card[b-zj0zl6vn7e] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-zj0zl6vn7e] {
    align-items: center !important;
}

/* Table wrapper */
.table-layout-wrapper[b-zj0zl6vn7e] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: visible !important;
}

/* Fixed layout so all 13 columns have defined widths */
[b-zj0zl6vn7e] .modern-table table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 1000px !important;  /* Reduced slightly to fit common screens better */
}

/* Scroll container: keep scrolling functionality but hide the visual bar */
[b-zj0zl6vn7e] .modern-table .mud-table-container {
    overflow-x: auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
[b-zj0zl6vn7e] .modern-table .mud-table-container::-webkit-scrollbar {
    display: none !important;
}

/* Hide Spinners for YearMonth numeric inputs */
[b-zj0zl6vn7e] .modern-search input::-webkit-outer-spin-button,
[b-zj0zl6vn7e] .modern-search input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

[b-zj0zl6vn7e] .modern-search input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* ── Percentage-based column widths — scale at any zoom level ──
   Total = 4 + 20 + 8 + (10 × 6.8) = 100%
*/
[b-zj0zl6vn7e] .modern-table th:nth-child(1),
[b-zj0zl6vn7e] .modern-table td:nth-child(1) { width: 4% !important; }     /* ID */

[b-zj0zl6vn7e] .modern-table th:nth-child(2),
[b-zj0zl6vn7e] .modern-table td:nth-child(2) { width: 20% !important; }    /* Employee Name */

[b-zj0zl6vn7e] .modern-table th:nth-child(3),
[b-zj0zl6vn7e] .modern-table td:nth-child(3) { width: 8% !important; }     /* Period — widened to fit text */

[b-zj0zl6vn7e] .modern-table th.col-numeric { width: 6.8% !important; }    /* 10 numeric columns */

/* Body cell font — compact like AttendanceLedger */
[b-zj0zl6vn7e] .mud-table-body td {
    font-size: 0.8125rem !important;   /* 13px */
    font-weight: 400 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 1.4 !important;
    font-family: 'Inter', 'Outfit', sans-serif !important;
}

/* Cell alignment overrides for numeric columns */
.col-numeric[b-zj0zl6vn7e] {
    text-align: right !important;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.8rem !important;
    vertical-align: middle !important;
}

/* Employee name cell — dynamic row height */
.cell-fixed-container[b-zj0zl6vn7e] {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    width: 100% !important;
    padding: 6px 0 !important;
}

.employee-profile[b-zj0zl6vn7e] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar-small[b-zj0zl6vn7e] {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.75rem !important;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

/* Allow long names to wrap — row grows to fit */
.profile-name[b-zj0zl6vn7e] {
    font-size: 0.8125rem !important;   /* 13px — same as body */
    font-weight: 500;
    color: #0f172a;
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.4;
    overflow: visible !important;
    text-overflow: unset !important;
    font-family: 'Inter', 'Outfit', sans-serif !important;
}

/* Override fixed td height so rows grow with long names */
[b-zj0zl6vn7e] .mud-table-body td,
[b-zj0zl6vn7e] .mud-table-body .mud-table-cell {
    height: auto !important;
    min-height: 52px !important;
    vertical-align: middle !important;
}


/* Period badge */
.period-badge[b-zj0zl6vn7e] {
    display: inline-block;
    padding: 2px 10px;
    background: #eff6ff;
    color: #3b82f6;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Unit chip in header */
.unit-chip[b-zj0zl6vn7e] {
    color: white !important;
    font-weight: 600;
}

/* Empty / Loading states */
.empty-state[b-zj0zl6vn7e], .loading-state[b-zj0zl6vn7e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
}

/* Export menu shadow */
.shadow-btn[b-zj0zl6vn7e] {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
}

/* Prevent filled icon buttons/menus from becoming invisible on hover/focus/active due to transparent overrides */
[b-zj0zl6vn7e] .shadow-btn.mud-button-filled-primary:hover,
[b-zj0zl6vn7e] .shadow-btn.mud-button-filled-primary:focus,
[b-zj0zl6vn7e] .shadow-btn.mud-button-filled-primary:active,
[b-zj0zl6vn7e] .shadow-btn .mud-button-filled-primary:hover,
[b-zj0zl6vn7e] .shadow-btn .mud-button-filled-primary:focus,
[b-zj0zl6vn7e] .shadow-btn .mud-button-filled-primary:active {
    background-color: var(--primary-600) !important;
    color: white !important;
}

[b-zj0zl6vn7e] .shadow-btn.mud-button-filled-secondary:hover,
[b-zj0zl6vn7e] .shadow-btn.mud-button-filled-secondary:focus,
[b-zj0zl6vn7e] .shadow-btn.mud-button-filled-secondary:active,
[b-zj0zl6vn7e] .shadow-btn .mud-button-filled-secondary:hover,
[b-zj0zl6vn7e] .shadow-btn .mud-button-filled-secondary:focus,
[b-zj0zl6vn7e] .shadow-btn .mud-button-filled-secondary:active,
[b-zj0zl6vn7e] .shadow-btn .mud-icon-button:hover,
[b-zj0zl6vn7e] .shadow-btn .mud-icon-button:focus,
[b-zj0zl6vn7e] .shadow-btn .mud-icon-button:focus-within,
[b-zj0zl6vn7e] .shadow-btn .mud-icon-button:active {
    background-color: #db2777 !important;
    color: white !important;
    opacity: 1 !important;
}

[b-zj0zl6vn7e] .shadow-btn:hover .mud-icon-root,
[b-zj0zl6vn7e] .shadow-btn:hover .mud-button-label,
[b-zj0zl6vn7e] .shadow-btn .mud-button-root:hover .mud-icon-root,
[b-zj0zl6vn7e] .shadow-btn .mud-button-root:hover .mud-button-label,
[b-zj0zl6vn7e] .shadow-btn .mud-icon-button:hover .mud-icon-root,
[b-zj0zl6vn7e] .shadow-btn .mud-icon-button:focus .mud-icon-root,
[b-zj0zl6vn7e] .shadow-btn .mud-icon-button:focus-within .mud-icon-root,
[b-zj0zl6vn7e] .shadow-btn .mud-icon-button:active .mud-icon-root {
    color: white !important;
}




/* Pager — sticky at bottom, always visible */
[b-zj0zl6vn7e] .modern-table .mud-table-pager {
    border-top: 1px solid #e2e8f0;
    background: white;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 5;
}

@media (max-width: 1023.98px) {
    /* Table layout transform */
    [b-zj0zl6vn7e] .modern-table table {
        min-width: unset !important;
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }

    [b-zj0zl6vn7e] .modern-table .mud-table-container {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        flex: 1 !important;
        height: auto !important;
    }

    [b-zj0zl6vn7e] .modern-table thead {
        display: none !important; /* Hide column headers */
    }

    [b-zj0zl6vn7e] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 4px !important;
        background: transparent !important;
    }

    [b-zj0zl6vn7e] .modern-table tbody tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 12px !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01) !important;
        margin-bottom: 8px !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        will-change: transform !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }

    [b-zj0zl6vn7e] .modern-table tbody tr:hover {
        transform: translateY(-2px) !important;
        border-color: #3b82f6 !important;
        box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    }

    [b-zj0zl6vn7e] .modern-table td,
    [b-zj0zl6vn7e] .modern-table td:nth-child(1),
    [b-zj0zl6vn7e] .modern-table td:nth-child(2),
    [b-zj0zl6vn7e] .modern-table td:nth-child(3),
    [b-zj0zl6vn7e] .modern-table td.col-numeric {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        grid-column: 1 / -1 !important; /* Default full span */
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: unset !important;
    }

    /* Row 1: ID & Period */
    [b-zj0zl6vn7e] .modern-table tr .col-id {
        grid-column: 1 / 4 !important;
        grid-row: 1 !important;
        width: auto !important;
        justify-content: flex-start !important;
    }

    [b-zj0zl6vn7e] .modern-table tr .col-period {
        grid-column: 4 / 7 !important;
        grid-row: 1 !important;
        width: auto !important;
        justify-content: flex-end !important;
        margin-left: auto !important;
    }

    /* Row 2: Employee Profile */
    [b-zj0zl6vn7e] .modern-table tr .col-profile {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        border-top: 1px solid rgba(226, 232, 240, 0.4) !important;
        padding: 8px 0 !important;
    }

    .cell-fixed-container[b-zj0zl6vn7e] {
        min-height: unset !important;
        padding: 0 !important;
    }

    /* Row 3: Section Title - Work Days */
    [b-zj0zl6vn7e] .modern-table tr::before {
        content: "Work Details" !important;
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        color: #94a3b8 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        border-top: 1px dashed rgba(226, 232, 240, 0.6) !important;
        padding-top: 10px !important;
        margin-top: 2px !important;
    }

    /* Row 4: Days breakdown (6 cells side-by-side) */
    [b-zj0zl6vn7e] .modern-table tr .col-wdays { grid-column: 1 !important; grid-row: 4 !important; }
    [b-zj0zl6vn7e] .modern-table tr .col-pdays { grid-column: 2 !important; grid-row: 4 !important; }
    [b-zj0zl6vn7e] .modern-table tr .col-woff { grid-column: 3 !important; grid-row: 4 !important; }
    [b-zj0zl6vn7e] .modern-table tr .col-pl { grid-column: 4 !important; grid-row: 4 !important; }
    [b-zj0zl6vn7e] .modern-table tr .col-othrs { grid-column: 5 !important; grid-row: 4 !important; }
    [b-zj0zl6vn7e] .modern-table tr .col-pdays2 { grid-column: 6 !important; grid-row: 4 !important; }

    /* Days Cell Styling: block structure with top-aligned small label */
    [b-zj0zl6vn7e] .modern-table tr .col-wdays,
    [b-zj0zl6vn7e] .modern-table tr .col-pdays,
    [b-zj0zl6vn7e] .modern-table tr .col-woff,
    [b-zj0zl6vn7e] .modern-table tr .col-pl,
    [b-zj0zl6vn7e] .modern-table tr .col-othrs,
    [b-zj0zl6vn7e] .modern-table tr .col-pdays2 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        padding: 6px 2px !important;
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        text-align: center !important;
    }

    /* Labels for Days Cells */
    [b-zj0zl6vn7e] .modern-table tr .col-wdays::before { content: "W.Days" !important; }
    [b-zj0zl6vn7e] .modern-table tr .col-pdays::before { content: "P.Days" !important; }
    [b-zj0zl6vn7e] .modern-table tr .col-woff::before { content: "W.Off" !important; }
    [b-zj0zl6vn7e] .modern-table tr .col-pl::before { content: "PL" !important; }
    [b-zj0zl6vn7e] .modern-table tr .col-othrs::before { content: "OT Hrs" !important; }
    [b-zj0zl6vn7e] .modern-table tr .col-pdays2::before { content: "PDays1" !important; }

    [b-zj0zl6vn7e] .modern-table tr .col-wdays::before,
    [b-zj0zl6vn7e] .modern-table tr .col-pdays::before,
    [b-zj0zl6vn7e] .modern-table tr .col-woff::before,
    [b-zj0zl6vn7e] .modern-table tr .col-pl::before,
    [b-zj0zl6vn7e] .modern-table tr .col-othrs::before,
    [b-zj0zl6vn7e] .modern-table tr .col-pdays2::before {
        font-size: 0.55rem !important;
        color: #64748b !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        margin-bottom: 4px !important;
    }

    /* Row 5: Section Title - Wages & Allowances */
    /* Add another dashed line before the wages section by styling the first wage child */
    [b-zj0zl6vn7e] .modern-table tr .col-basic {
        border-top: 1px dashed rgba(226, 232, 240, 0.6) !important;
        padding-top: 10px !important;
        margin-top: 4px !important;
    }

    /* Row 6 & 7: Wages and Allowances (2 columns, 3 spans each) */
    [b-zj0zl6vn7e] .modern-table tr .col-basic { grid-column: 1 / 4 !important; grid-row: 5 !important; }
    [b-zj0zl6vn7e] .modern-table tr .col-allow1 { grid-column: 4 / 7 !important; grid-row: 5 !important; }
    [b-zj0zl6vn7e] .modern-table tr .col-allow2 { grid-column: 1 / 4 !important; grid-row: 6 !important; }
    [b-zj0zl6vn7e] .modern-table tr .col-otherallow { grid-column: 4 / 7 !important; grid-row: 6 !important; }

    /* Wage cells styling: full flex-row with labels on left, values on right */
    [b-zj0zl6vn7e] .modern-table tr .col-basic,
    [b-zj0zl6vn7e] .modern-table tr .col-allow1,
    [b-zj0zl6vn7e] .modern-table tr .col-allow2,
    [b-zj0zl6vn7e] .modern-table tr .col-otherallow {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: #fdfdfd !important;
        border: 1px solid rgba(226, 232, 240, 0.6) !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        box-sizing: border-box !important;
        margin-bottom: 2px !important;
    }

    /* Wage Labels */
    [b-zj0zl6vn7e] .modern-table tr .col-basic::before { content: "Basic:" !important; }
    [b-zj0zl6vn7e] .modern-table tr .col-allow1::before { content: "Allow 1:" !important; }
    [b-zj0zl6vn7e] .modern-table tr .col-allow2::before { content: "Allow 2:" !important; }
    [b-zj0zl6vn7e] .modern-table tr .col-otherallow::before { content: "Other Allow:" !important; }

    [b-zj0zl6vn7e] .modern-table tr .col-basic::before,
    [b-zj0zl6vn7e] .modern-table tr .col-allow1::before,
    [b-zj0zl6vn7e] .modern-table tr .col-allow2::before,
    [b-zj0zl6vn7e] .modern-table tr .col-otherallow::before {
        font-family: 'Inter', sans-serif !important;
        font-size: 0.75rem !important;
        color: #64748b !important;
        font-weight: 600 !important;
    }

    /* ── Single-line Pagination Overrides ── */
    [b-zj0zl6vn7e] .modern-table .mud-table-pagination-toolbar,
    [b-zj0zl6vn7e] .modern-table tfoot,
    [b-zj0zl6vn7e] .modern-table tfoot tr,
    [b-zj0zl6vn7e] .modern-table tfoot td {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    [b-zj0zl6vn7e] .modern-table .mud-table-pagination {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 4px 4px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        gap: 4px !important;
    }

    [b-zj0zl6vn7e] .modern-table .mud-table-pagination-spacer {
        display: none !important;
        flex: 0 !important;
        width: 0 !important;
    }

    [b-zj0zl6vn7e] .modern-table .mud-table-pagination-information {
        display: none !important;
    }

    [b-zj0zl6vn7e] .modern-table .mud-table-pagination-item {
        margin: 0 !important;
        padding: 0 2px !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    [b-zj0zl6vn7e] .modern-table .mud-table-pagination .mud-select {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        font-size: 0.75rem !important;
        height: 28px !important;
        flex-shrink: 0 !important;
    }

    [b-zj0zl6vn7e] .modern-table .mud-table-pagination .mud-select .mud-input-slot {
        width: 100% !important;
        text-align: left !important;
        padding-right: 12px !important;
        padding-left: 4px !important;
        text-overflow: clip !important;
        overflow: visible !important;
    }

    [b-zj0zl6vn7e] .modern-table .mud-table-pagination .mud-select .mud-input,
    [b-zj0zl6vn7e] .modern-table .mud-table-pagination .mud-select .mud-input-control {
        width: 100% !important;
    }

    [b-zj0zl6vn7e] .modern-table .mud-table-pagination .mud-typography {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    [b-zj0zl6vn7e] .modern-table .mud-table-pagination-actions {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        gap: 0 !important;
    }

    [b-zj0zl6vn7e] .modern-table .mud-table-pagination-first-button,
    [b-zj0zl6vn7e] .modern-table .mud-table-pagination-last-button,
    [b-zj0zl6vn7e] .modern-table .mud-icon-button.mud-table-pagination-first-button,
    [b-zj0zl6vn7e] .modern-table .mud-icon-button.mud-table-pagination-last-button {
        display: none !important;
    }

    [b-zj0zl6vn7e] .modern-table .mud-table-pagination-actions .mud-icon-button {
        width: 30px !important;
        height: 30px !important;
        padding: 3px !important;
        margin: 0 1px !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
    }

    [b-zj0zl6vn7e] .modern-table .mud-table-pagination-actions .mud-icon-button .mud-icon-size-medium {
        font-size: 1rem !important;
    }
}

@media (max-width: 599.98px) {
    .control-panel-card :deep(.centered-grid)[b-zj0zl6vn7e] {
        margin: 0 !important;
    }

    .control-panel-card :deep(.d-flex.align-center.gap-2)[b-zj0zl6vn7e] {
        width: 100% !important;
        margin-top: 8px !important;
    }

    .control-panel-card :deep(.d-flex.align-center.gap-2 > *)[b-zj0zl6vn7e] {
        flex: 1 !important;
        width: 100% !important;
    }
}

/* /Components/Pages/Employer/EmployerEdit.razor.rz.scp.css */
.header-avatar[b-93q3k45p5u] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-93q3k45p5u] {
    color: white !important;
    font-size: 22px !important;
}
/* /Components/Pages/Employer/Employers.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Employer Master - Scoped Styles
   ══════════════════════════════════════════════════════════ */

.header-avatar[b-xpnywq7j1i] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-xpnywq7j1i] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-xpnywq7j1i] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-xpnywq7j1i] {
    align-items: center !important;
}

.search-field-full[b-xpnywq7j1i] {
    width: 100% !important;
}

.table-layout-wrapper[b-xpnywq7j1i] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

[b-xpnywq7j1i] .modern-table {
    margin-bottom: 24px;
}

[b-xpnywq7j1i] .modern-table .mud-table-container {
    height: 380px !important;
}

/* ══════════════════════════════════════════════════════════
   Mobile & Tablet Native App Styles
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1023.98px) {
    .header-section > div[b-xpnywq7j1i] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
        gap: 12px !important;
    }

    [b-xpnywq7j1i] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }

    [b-xpnywq7j1i] .stat-chip {
        display: none !important;
    }

    [b-xpnywq7j1i] .mud-table-smalldevices-sortselect {
        display: none !important;
    }

    /* Card Layout */
    [b-xpnywq7j1i] .modern-table table {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }
    
    [b-xpnywq7j1i] .modern-table thead {
        display: none !important;
    }
    
    [b-xpnywq7j1i] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }
    
    [b-xpnywq7j1i] .modern-table tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto auto auto !important;
        grid-template-areas: 
            "id actions"
            "name name"
            "code contact"
            "email email" !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 14px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
        gap: 10px !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    
    [b-xpnywq7j1i] .modern-table tr:hover {
        transform: translateY(-2px) !important;
        border-color: #3b82f6 !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    }

    [b-xpnywq7j1i] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    [b-xpnywq7j1i] .modern-table td::before {
        display: none !important;
    }

    [b-xpnywq7j1i] .modern-table tr td:nth-child(1) {
        grid-area: id !important;
        justify-content: flex-start !important;
    }

    [b-xpnywq7j1i] .modern-table tr td:nth-child(1) .id-pill {
        background: rgba(37, 99, 235, 0.08) !important;
        color: #2563eb !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
    }
    
    [b-xpnywq7j1i] .modern-table tr td:nth-child(2) {
        grid-area: code !important;
    }

    [b-xpnywq7j1i] .modern-table tr td:nth-child(2)::before {
        content: attr(data-label) ": " !important;
        display: inline-block !important;
        font-weight: 600 !important;
        color: #94a3b8 !important;
        margin-right: 8px !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        flex-shrink: 0 !important;
    }

    [b-xpnywq7j1i] .modern-table tr td:nth-child(2) .role-badge {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #475569 !important;
    }

    [b-xpnywq7j1i] .modern-table tr td:nth-child(3) {
        grid-area: name !important;
    }

    [b-xpnywq7j1i] .modern-table tr td:nth-child(3) .profile-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
    }

    [b-xpnywq7j1i] .modern-table tr td:nth-child(4) {
        grid-area: contact !important;
        justify-content: flex-end !important;
    }

    [b-xpnywq7j1i] .modern-table tr td:nth-child(4)::before {
        content: attr(data-label) ": " !important;
        display: inline-block !important;
        font-weight: 600 !important;
        color: #94a3b8 !important;
        margin-right: 8px !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        flex-shrink: 0 !important;
    }

    [b-xpnywq7j1i] .modern-table tr td:nth-child(4) .text-secondary {
        font-size: 12px !important;
        color: #64748b !important;
    }

    [b-xpnywq7j1i] .modern-table tr td:nth-child(5) {
        grid-area: email !important;
    }

    [b-xpnywq7j1i] .modern-table tr td:nth-child(5)::before {
        content: attr(data-label) ": " !important;
        display: inline-block !important;
        font-weight: 600 !important;
        color: #94a3b8 !important;
        margin-right: 8px !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        flex-shrink: 0 !important;
    }

    [b-xpnywq7j1i] .modern-table tr td:nth-child(5) .text-secondary {
        font-size: 12px !important;
        color: #64748b !important;
    }
    
    [b-xpnywq7j1i] .modern-table tr td:nth-child(6) {
        grid-area: actions !important;
        justify-content: flex-end !important;
        width: 100% !important;
        align-self: start !important;
        justify-self: end !important;
        margin-top: -4px !important;
        margin-right: -6px !important;
    }

    [b-xpnywq7j1i] .modern-table tr td:nth-child(6) .mud-stack {
        justify-content: flex-end !important;
        width: auto !important;
        gap: 0 !important;
    }

    [b-xpnywq7j1i] .modern-table tr td:nth-child(6) .mud-icon-button {
        padding: 4px !important;
        width: 32px !important;
        height: 32px !important;
    }

    /* Pagination */
    [b-xpnywq7j1i] .modern-table .mud-table-footer {
        overflow: hidden !important;
    }

    [b-xpnywq7j1i] .modern-table .mud-table-container {
        overflow-x: hidden !important;
    }

    [b-xpnywq7j1i] .modern-table tfoot {
        overflow: hidden !important;
    }

    .modern-pager[b-xpnywq7j1i] {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 6px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .modern-pager[b-xpnywq7j1i]  .mud-table-pagination {
        margin-left: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }

    .modern-pager[b-xpnywq7j1i]  .mud-table-pagination-toolbar {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 2px !important;
        height: 32px !important;
        min-height: 32px !important;
        display: flex !important;
        align-items: center !important;
    }

    .modern-pager[b-xpnywq7j1i]  .mud-table-pagination-spacer {
        display: none !important;
    }

    .modern-pager[b-xpnywq7j1i]  .mud-select {
        display: none !important;
    }

    .modern-pager[b-xpnywq7j1i]  .mud-table-pagination-information {
        font-size: 12px !important;
        margin: 0 4px 0 0 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        color: var(--slate-600) !important;
        font-weight: 500 !important;
    }

    .modern-pager[b-xpnywq7j1i]  .mud-table-pagination-actions {
        display: flex !important;
        align-items: center !important;
        gap: 0px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .modern-pager[b-xpnywq7j1i]  .mud-icon-button {
        padding: 4px !important;
        width: 28px !important;
        height: 28px !important;
    }

    .modern-pager[b-xpnywq7j1i]  .mud-icon-button .mud-icon-root {
        font-size: 18px !important;
    }

    .jump-to-container[b-xpnywq7j1i] {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        background: var(--slate-100) !important;
        padding: 2px 6px !important;
        border-radius: 6px !important;
        height: 28px !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }

    .jump-label[b-xpnywq7j1i] {
        font-size: 11px !important;
        color: var(--color-text-muted) !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .jump-input-wrapper[b-xpnywq7j1i] {
        width: 36px !important;
        flex-shrink: 0 !important;
    }

    .jump-field[b-xpnywq7j1i] {
        margin-top: 0 !important;
    }

    .jump-field[b-xpnywq7j1i]  .mud-input {
        font-size: 11px !important;
        height: 20px !important;
    }

    .jump-field[b-xpnywq7j1i]  input {
        text-align: center !important;
        font-weight: 700 !important;
        padding: 0 !important;
    }

    .jump-btn[b-xpnywq7j1i] {
        padding: 1px !important;
        width: 22px !important;
        height: 22px !important;
    }

    .jump-btn[b-xpnywq7j1i]  .mud-icon-root {
        font-size: 16px !important;
    }

    @media (max-width: 500px) {
        .jump-label[b-xpnywq7j1i] {
            display: none !important;
        }
        .modern-pager[b-xpnywq7j1i] {
            gap: 4px !important;
            padding: 4px 4px !important;
        }
        .modern-pager[b-xpnywq7j1i]  .mud-table-pagination-information {
            font-size: 10px !important;
            margin-right: 2px !important;
        }
    }
}

@media (max-width: 599.98px) {
    [b-xpnywq7j1i] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
    }
    
    [b-xpnywq7j1i] .control-panel-card .action-btn,
    [b-xpnywq7j1i] .control-panel-card .mud-button-root {
        width: 100% !important;
        margin: 0 !important;
        display: inline-flex !important;
    }
}
/* /Components/Pages/EmploymentView/EmploymentEdit.razor.rz.scp.css */
.header-avatar[b-6d21a2cgu4] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-6d21a2cgu4] {
    color: white !important;
    font-size: 22px !important;
}

.header-subtitle[b-6d21a2cgu4] {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 12px !important;
}

.btn-success-outline[b-6d21a2cgu4] {
    border-color: #10b981 !important;
    color: #10b981 !important;
}

.language-header[b-6d21a2cgu4] {
    font-weight: 600 !important;
    color: var(--color-text-muted) !important;
    padding-top: 8px !important;
}

.subgrid-toolbar[b-6d21a2cgu4] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.subgrid-input[b-6d21a2cgu4] {
    width: 100% !important;
    min-width: 0 !important;
}

.subgrid-input .mud-input[b-6d21a2cgu4] {
    width: 100% !important;
    min-width: 0 !important;
}

[b-6d21a2cgu4] .subgrid-table {
    width: 100% !important;
    margin-bottom: 8px !important;
}

[b-6d21a2cgu4] .subgrid-table .mud-table-container {
    overflow-x: auto !important;
}

[b-6d21a2cgu4] .subgrid-table td {
    padding: 2px 4px !important;
    vertical-align: middle !important;
}

[b-6d21a2cgu4] .subgrid-table td .mud-input-control {
    width: 100% !important;
    min-width: 0 !important;
}

[b-6d21a2cgu4] .subgrid-table td .mud-input {
    width: 100% !important;
    min-width: 0 !important;
}

.upload-card[b-6d21a2cgu4] {
    border-radius: 8px !important;
    background: transparent !important;
    padding: 0 !important;
}

.upload-card-inner[b-6d21a2cgu4] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.upload-preview-label[b-6d21a2cgu4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.upload-img[b-6d21a2cgu4] {
    object-fit: cover;
    border-radius: 4px;
}

.upload-img--photo[b-6d21a2cgu4] {
    width: 110px;
    height: 140px;
}

.upload-img--sig[b-6d21a2cgu4] {
    width: 160px;
    height: 48px;
}

.upload-placeholder[b-6d21a2cgu4] {
    width: 110px;
    height: 140px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.upload-placeholder-icon[b-6d21a2cgu4] {
    color: #bbb !important;
    font-size: 36px !important;
}

.upload-placeholder-text[b-6d21a2cgu4] {
    color: #bbb !important;
    font-size: 12px !important;
}


[b-6d21a2cgu4] .mud-input-control {
    width: 100% !important;
    min-width: 0 !important;
}

[b-6d21a2cgu4] .mud-input {
    width: 100% !important;
    min-width: 0 !important;
}

[b-6d21a2cgu4] .mud-input-slot {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

[b-6d21a2cgu4] .mud-grid {
    margin: 0 !important;
    width: 100% !important;
}

[b-6d21a2cgu4] form {
    width: 100% !important;
    min-width: 0 !important;
}

/* /Components/Pages/EmploymentView/EmploymentList.razor.rz.scp.css */
.header-avatar[b-jlxy8ope5o] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-jlxy8ope5o] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-jlxy8ope5o] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-jlxy8ope5o] {
    align-items: center !important;
}

.search-field-full[b-jlxy8ope5o] {
    width: 100% !important;
}

.table-layout-wrapper[b-jlxy8ope5o] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

[b-jlxy8ope5o] .modern-table {
    margin-bottom: 24px;
}

[b-jlxy8ope5o] .modern-table .mud-table-container {
    height: 380px !important;
}

[b-jlxy8ope5o] .col-actions {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
}

/* Modern Pager */
.modern-pager[b-jlxy8ope5o] {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.modern-pager[b-jlxy8ope5o]  .mud-table-pagination {
    margin-left: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
}

.modern-pager[b-jlxy8ope5o]  .mud-table-pagination-toolbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 2px !important;
    height: 32px !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
}

.modern-pager[b-jlxy8ope5o]  .mud-table-pagination-spacer {
    display: none !important;
}

.modern-pager[b-jlxy8ope5o]  .mud-table-pagination-information {
    font-size: 12px !important;
    margin: 0 4px 0 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    color: var(--slate-600) !important;
    font-weight: 500 !important;
}

.modern-pager[b-jlxy8ope5o]  .mud-table-pagination-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.modern-pager[b-jlxy8ope5o]  .mud-icon-button {
    padding: 4px !important;
    width: 28px !important;
    height: 28px !important;
}

.modern-pager[b-jlxy8ope5o]  .mud-icon-button .mud-icon-root {
    font-size: 18px !important;
}
/* /Components/Pages/EPPlusExample/EPPlusExample.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   EPPlus Example - Scoped Styles
   ══════════════════════════════════════════════════════════ */

.text-semibold[b-py9tqcp104] {
    font-weight: 600 !important;
}

.table-layout-wrapper[b-py9tqcp104] {
    height: 400px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin-top: 16px !important;
}

[b-py9tqcp104] .modern-table {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

[b-py9tqcp104] .modern-table .mud-table-container {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.dashboard-root[b-x0adpbawup] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    padding: 0;
    margin: 0;
}

/* HEADER */
.executive-header[b-x0adpbawup] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 32px 40px;
    color: white;
    border-radius: 12px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
}

.executive-header[b-x0adpbawup]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 20% 50%, rgba(37, 99, 235, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.header-breadcrumb-top[b-x0adpbawup] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-icon-box[b-x0adpbawup] {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.header-title-text[b-x0adpbawup] {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.header-icon[b-x0adpbawup] {
    color: white !important;
    opacity: 0.9;
}

.header-subtitle-text[b-x0adpbawup] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* QUICK ACCESS */
.section-title[b-x0adpbawup] {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 24px;
    padding-left: 4px;
}

.access-card[b-x0adpbawup] {
    background: white;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    gap: 16px;
    text-align: center;
}

.access-card:hover[b-x0adpbawup] {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.08);
    border-color: #e2e8f0;
}

.card-icon-box[b-x0adpbawup] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.bg-employees[b-x0adpbawup] {
    background: #3b82f6;
}

.bg-depts[b-x0adpbawup] {
    background: #6366f1;
}

.bg-desigs[b-x0adpbawup] {
    background: #a855f7;
}

.bg-companies[b-x0adpbawup] {
    background: #06b6d4;
}

.card-title[b-x0adpbawup] {
    font-weight: 700;
    font-size: 1.125rem;
    color: #1e293b;
}

.card-subtitle[b-x0adpbawup] {
    font-size: 0.825rem;
    color: #64748b;
}

/* PLACEHOLDER AREA */
.placeholder-area[b-x0adpbawup] {
    margin-top: 48px;
    border: 1px dashed rgba(203, 213, 225, 0.5);
    border-radius: 12px;
    padding: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.3);
}

.placeholder-icon[b-x0adpbawup] {
    font-size: 48px;
    color: #e2e8f0;
}

.placeholder-text[b-x0adpbawup] {
    font-size: 1rem;
    color: #64748b;
    font-weight: 500;
}

@media (max-width: 960px) {

    /* Tablet View */
    .dashboard-root[b-x0adpbawup] {
        padding: 16px !important;
    }

    .executive-header[b-x0adpbawup] {
        padding: 24px 28px;
        margin-bottom: 24px;
        border-radius: 16px;
    }

    .header-title-text[b-x0adpbawup] {
        font-size: 1.75rem;
    }

    .access-card[b-x0adpbawup] {
        padding: 18px;
        gap: 12px;
        border-radius: 14px;
    }

    .card-title[b-x0adpbawup] {
        font-size: 1rem;
    }

    .card-subtitle[b-x0adpbawup] {
        font-size: 0.75rem;
    }
}

@media (max-width: 600px) {

    /* Mobile View - Native App Feel */
    .dashboard-root[b-x0adpbawup] {
        padding: 12px !important;
    }

    .executive-header[b-x0adpbawup] {
        padding: 20px 16px;
        margin-bottom: 16px;
        border-radius: 12px;
        text-align: left;
    }

    .header-breadcrumb-top[b-x0adpbawup] {
        margin-bottom: 8px;
        font-size: 9px;
    }

    .header-icon-box[b-x0adpbawup] {
        width: 36px;
        height: 36px;
        margin-bottom: 8px;
        border-radius: 6px;
    }

    .header-title-text[b-x0adpbawup] {
        font-size: 1.35rem;
        font-weight: 700;
    }

    .header-subtitle-text[b-x0adpbawup] {
        font-size: 0.8rem;
        opacity: 0.8;
    }

    .section-title[b-x0adpbawup] {
        font-size: 0.9rem;
        margin-bottom: 16px;
        padding-left: 2px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
    }

    .access-card[b-x0adpbawup] {
        padding: 16px 12px;
        border-radius: 12px;
        gap: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    }

    /* Add native-feeling active state tap effect */
    .access-card:active[b-x0adpbawup] {
        transform: scale(0.95);
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    .card-icon-box[b-x0adpbawup] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .card-title[b-x0adpbawup] {
        font-size: 0.9rem;
        margin-bottom: 2px;
    }

    .card-subtitle[b-x0adpbawup] {
        font-size: 0.7rem;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .placeholder-area[b-x0adpbawup] {
        padding: 32px 16px;
        margin-top: 24px;
        border-radius: 10px;
    }

    .placeholder-icon[b-x0adpbawup] {
        font-size: 36px;
    }

    .placeholder-text[b-x0adpbawup] {
        font-size: 0.85rem;
    }
}
/* /Components/Pages/Home1/Home.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   EXECUTIVE DASHBOARD — Premium Refined Design
   ═══════════════════════════════════════════════════════════════ */

:root[b-ofemq0r3cp] {
    --db-surface: #ffffff;
    --db-sunken: #f1f5f9;
    --db-border: #e2e8f0;
    --db-border-sub: #edf2f7;
    --db-text-p: #0f172a;
    --db-text-s: #334155;
    --db-text-m: #64748b;
    --db-text-tertiary: #94a3b8;
    --db-blue: #3b82f6;
    --db-blue-deep: #2563eb;
    --db-emerald: #10b981;
    --db-emerald-deep: #059669;
    --db-violet: #8b5cf6;
    --db-violet-deep: #7c3aed;
    --db-amber: #f59e0b;
    --db-amber-deep: #d97706;
    --db-rose: #ef4444;
    --db-teal: #14b8a6;
    --db-indigo: #4f46e5;
    --db-slate-100: #f1f5f9;
    --db-slate-200: #e2e8f0;
    --db-radius-xs: 4px;
    --db-radius-sm: 6px;
    --db-radius-md: 10px;
    --db-radius-lg: 14px;
    --db-radius-xl: 9999px;
    --db-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*[b-ofemq0r3cp],
*[b-ofemq0r3cp]::before,
*[b-ofemq0r3cp]::after {
    box-sizing: border-box;
}

/* ── Root ── */
.db-root[b-ofemq0r3cp] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: radial-gradient(ellipse at 20% 0%, rgba(59, 130, 246, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, rgba(139, 92, 246, 0.03) 0%, transparent 50%),
        linear-gradient(170deg, #f0f4fa 0%, #e2e8f0 100%);
    padding: 0 0 40px;
    font-family: var(--db-font-sans);
    color: var(--db-text-p);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 1024px) {
    .db-root[b-ofemq0r3cp] {
        height: 100vh;
        overflow-y: auto;
        scroll-behavior: smooth;
    }

    .db-root[b-ofemq0r3cp]::-webkit-scrollbar {
        width: 5px;
    }

    .db-root[b-ofemq0r3cp]::-webkit-scrollbar-track {
        background: transparent;
    }

    .db-root[b-ofemq0r3cp]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

    .db-root[b-ofemq0r3cp]::-webkit-scrollbar-thumb:hover {
        background: var(--db-blue);
    }
}

/* ── Topbar ── */
.db-topbar[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 36px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
    position: sticky;
    top: 0;
    z-index: 100;
}

.db-topbar-left[b-ofemq0r3cp] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.db-topbar-right[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.db-breadcrumb[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: var(--db-text-m);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.db-breadcrumb-current[b-ofemq0r3cp] {
    color: var(--db-blue);
    font-weight: 700;
}

.db-breadcrumb-sep[b-ofemq0r3cp] {
    opacity: .35;
}

.db-greeting-new[b-ofemq0r3cp] {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--db-text-p);
    margin: 0;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

/* ── Search ── */
.db-search-wrap[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: var(--db-sunken);
    border: 1.5px solid var(--db-border);
    border-radius: var(--db-radius-lg);
    transition: border-color .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s cubic-bezier(.4, 0, .2, 1), background .25s cubic-bezier(.4, 0, .2, 1);
}

.db-search-wrap:focus-within[b-ofemq0r3cp] {
    border-color: var(--db-blue);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.10);
    background: #ffffff;
}

.db-search-icon[b-ofemq0r3cp] {
    display: flex;
    color: var(--db-text-m);
    line-height: 0;
}

.db-search-wrap input[b-ofemq0r3cp] {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.8rem;
    color: var(--db-text-p);
    font-family: var(--db-font-sans);
    width: 200px;
}

.db-search-wrap input[b-ofemq0r3cp]::placeholder {
    color: var(--db-text-tertiary);
}

/* ── Icon Buttons ── */
.db-icon-btn[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--db-text-m);
    cursor: pointer;
    position: relative;
    transition: background .25s cubic-bezier(.4, 0, .2, 1), color .25s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1);
}

.db-icon-btn:hover[b-ofemq0r3cp] {
    background: rgba(59, 130, 246, 0.08);
    color: var(--db-blue);
    transform: scale(1.08);
}

.db-icon-btn:active[b-ofemq0r3cp] {
    transform: scale(0.90);
}

.db-notif-dot[b-ofemq0r3cp] {
    position: absolute;
    top: 7px;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--db-rose);
    box-shadow: 0 0 0 2px #ffffff, 0 0 10px rgba(239, 68, 68, 0.5);
    animation: db-pulse-dot-b-ofemq0r3cp 2s ease-in-out infinite;
}

@keyframes db-pulse-dot-b-ofemq0r3cp {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ── User Avatar ── */
.db-user-avatar[b-ofemq0r3cp] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--db-blue), var(--db-violet));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s cubic-bezier(.4, 0, .2, 1);
}

.db-user-avatar:hover[b-ofemq0r3cp] {
    transform: scale(1.1);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

/* ── Page Title ── */
.db-page-title-row[b-ofemq0r3cp] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 24px 36px 0;
}

.db-page-title-row h2[b-ofemq0r3cp] {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--db-text-p);
    margin: 0;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.db-page-title-row .db-title-accent[b-ofemq0r3cp] {
    color: #3b82f6;
    font-weight: 700;
}

.db-page-title-row p[b-ofemq0r3cp] {
    font-size: 0.82rem;
    color: var(--db-text-s);
    margin: 5px 0 0;
    font-weight: 400;
}

.db-page-actions[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Date Dropdown ── */
.db-date-dropdown[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: var(--db-radius-sm);
    border: 1px solid var(--db-border);
    font-size: .8rem;
    font-weight: 600;
    color: var(--db-text-s);
    cursor: pointer;
    transition: border-color .2s cubic-bezier(.4, 0, .2, 1), background .2s cubic-bezier(.4, 0, .2, 1);
}

.db-date-dropdown:hover[b-ofemq0r3cp] {
    border-color: var(--db-blue);
    background: var(--db-sunken);
}

/* ── Buttons ── */
.db-btn-mock-primary[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1);
}

.db-btn-mock-primary:hover[b-ofemq0r3cp] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.30);
}

.db-btn-mock-primary:active[b-ofemq0r3cp] {
    transform: scale(0.96);
}

.db-btn-mock-outline[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    background: #fff;
    color: var(--db-text-s);
    border: 1px solid var(--db-border);
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .2s cubic-bezier(.4, 0, .2, 1), background .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1);
}

.db-btn-mock-outline:hover[b-ofemq0r3cp] {
    border-color: var(--db-blue);
    background: rgba(59, 130, 246, 0.04);
    color: var(--db-blue);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06);
}

/* ── KPI Strip ── */
.db-kpi-strip[b-ofemq0r3cp] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    padding: 22px 36px;
}

@media (max-width: 1280px) {
    .db-kpi-strip[b-ofemq0r3cp] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .db-kpi-strip[b-ofemq0r3cp] {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.db-kpi-card-mock[b-ofemq0r3cp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(226, 232, 240, 0.7);
    border-radius: var(--db-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .4s cubic-bezier(.4, 0, .2, 1), background .3s ease;
    position: relative;
    overflow: hidden;
}

.db-kpi-card-mock:hover[b-ofemq0r3cp] {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.95);
}

.db-kpi-card-mock:nth-child(1):hover[b-ofemq0r3cp] {
    box-shadow: 0 16px 32px -8px rgba(59, 130, 246, 0.20);
}

.db-kpi-card-mock:nth-child(2):hover[b-ofemq0r3cp] {
    box-shadow: 0 16px 32px -8px rgba(16, 185, 129, 0.20);
}

.db-kpi-card-mock:nth-child(3):hover[b-ofemq0r3cp] {
    box-shadow: 0 16px 32px -8px rgba(139, 92, 246, 0.20);
}

.db-kpi-card-mock:nth-child(4):hover[b-ofemq0r3cp] {
    box-shadow: 0 16px 32px -8px rgba(245, 158, 11, 0.20);
}

.db-kpi-card-mock:nth-child(5):hover[b-ofemq0r3cp] {
    box-shadow: 0 16px 32px -8px rgba(20, 184, 166, 0.20);
}

.db-kpi-card-mock[b-ofemq0r3cp]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    border-radius: var(--db-radius-lg) var(--db-radius-lg) 0 0;
}

.db-kpi-card-mock[b-ofemq0r3cp]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--db-radius-lg);
    opacity: 0;
    transition: opacity .4s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}

.db-kpi-card-mock:nth-child(1)[b-ofemq0r3cp]::after {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, transparent 60%);
}

.db-kpi-card-mock:nth-child(2)[b-ofemq0r3cp]::after {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.04) 0%, transparent 60%);
}

.db-kpi-card-mock:nth-child(3)[b-ofemq0r3cp]::after {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.04) 0%, transparent 60%);
}

.db-kpi-card-mock:nth-child(4)[b-ofemq0r3cp]::after {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.04) 0%, transparent 60%);
}

.db-kpi-card-mock:nth-child(5)[b-ofemq0r3cp]::after {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.04) 0%, transparent 60%);
}

.db-kpi-card-mock:hover[b-ofemq0r3cp]::after {
    opacity: 1;
}

.db-kpi-card-mock:nth-child(1)[b-ofemq0r3cp]::before {
    background: linear-gradient(90deg, var(--db-blue), #60a5fa);
}

.db-kpi-card-mock:nth-child(2)[b-ofemq0r3cp]::before {
    background: linear-gradient(90deg, var(--db-emerald), #34d399);
}

.db-kpi-card-mock:nth-child(3)[b-ofemq0r3cp]::before {
    background: linear-gradient(90deg, var(--db-violet), #a78bfa);
}

.db-kpi-card-mock:nth-child(4)[b-ofemq0r3cp]::before {
    background: linear-gradient(90deg, var(--db-amber), #fbbf24);
}

.db-kpi-card-mock:nth-child(5)[b-ofemq0r3cp]::before {
    background: linear-gradient(90deg, var(--db-teal), #5eead4);
}

.db-kpi-card-top[b-ofemq0r3cp] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.db-kpi-card-label[b-ofemq0r3cp] {
    font-size: .7rem;
    font-weight: 700;
    color: var(--db-text-m);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0;
}

.db-kpi-icon-box[b-ofemq0r3cp] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .9rem;
}

.db-kpi-card-mock:nth-child(1) .db-kpi-icon-box[b-ofemq0r3cp] {
    background: rgba(59, 130, 246, 0.10);
    color: var(--db-blue);
}

.db-kpi-card-mock:nth-child(2) .db-kpi-icon-box[b-ofemq0r3cp] {
    background: rgba(16, 185, 129, 0.10);
    color: var(--db-emerald);
}

.db-kpi-card-mock:nth-child(3) .db-kpi-icon-box[b-ofemq0r3cp] {
    background: rgba(139, 92, 246, 0.10);
    color: var(--db-violet);
}

.db-kpi-card-mock:nth-child(4) .db-kpi-icon-box[b-ofemq0r3cp] {
    background: rgba(245, 158, 11, 0.10);
    color: var(--db-amber);
}

.db-kpi-card-mock:nth-child(5) .db-kpi-icon-box[b-ofemq0r3cp] {
    background: rgba(20, 184, 166, 0.10);
    color: var(--db-teal);
}

.db-kpi-mid[b-ofemq0r3cp] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.db-kpi-value-new[b-ofemq0r3cp] {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--db-text-p);
    line-height: 1;
    letter-spacing: -0.03em;
}

.db-kpi-card-mock:nth-child(1) .db-kpi-value-new[b-ofemq0r3cp] {
    color: var(--db-blue);
}

.db-kpi-card-mock:nth-child(2) .db-kpi-value-new[b-ofemq0r3cp] {
    color: var(--db-emerald);
}

.db-kpi-card-mock:nth-child(3) .db-kpi-value-new[b-ofemq0r3cp] {
    color: var(--db-violet);
}

.db-kpi-card-mock:nth-child(4) .db-kpi-value-new[b-ofemq0r3cp] {
    color: var(--db-amber);
}

.db-kpi-card-mock:nth-child(5) .db-kpi-value-new[b-ofemq0r3cp] {
    color: var(--db-teal);
}

.db-kpi-trend[b-ofemq0r3cp] {
    font-size: .7rem;
    font-weight: 500;
    color: var(--db-text-m);
    display: flex;
    align-items: center;
    gap: 4px;
}

.db-kpi-trend svg[b-ofemq0r3cp] {
    color: var(--db-emerald);
}

.db-kpi-trend-up[b-ofemq0r3cp] {
    color: #059669;
    font-weight: 600;
}

.db-kpi-sparkline[b-ofemq0r3cp] {
    height: 26px;
    margin-top: 4px;
}

.db-kpi-sparkline svg[b-ofemq0r3cp] {
    width: 100%;
    height: 100%;
}

/* ── Skeletons ── */
.db-skeleton[b-ofemq0r3cp] {
    background: linear-gradient(110deg, #e2e8f0 28%, #f1f5f9 40%, #e2e8f0 52%);
    background-size: 300% 100%;
    border-radius: var(--db-radius-sm);
    color: transparent !important;
    animation: db-shimmer-b-ofemq0r3cp 1.6s ease-in-out infinite;
}

@keyframes db-shimmer-b-ofemq0r3cp {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.db-skel-kpi-value[b-ofemq0r3cp] {
    height: 28px;
    width: 100px;
}

.db-skel-kpi-trend[b-ofemq0r3cp] {
    height: 14px;
    width: 120px;
}

.db-skel-chart[b-ofemq0r3cp] {
    width: 100%;
    height: 200px;
    border-radius: var(--db-radius-md);
}

.db-skel-donut[b-ofemq0r3cp] {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 18px solid var(--db-border);
}

.db-skel-bar[b-ofemq0r3cp] {
    height: 14px;
    width: 100%;
    margin-bottom: 8px;
}

.db-skel-table-cell[b-ofemq0r3cp] {
    flex: 1;
    height: 16px;
    border-radius: 4px;
}

.db-skel-table-row[b-ofemq0r3cp] {
    display: flex;
    gap: 12px;
    padding: 8px 0;
}

/* ── Rows ── */
.db-row[b-ofemq0r3cp] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0 36px;
    margin-bottom: 18px;
}

.db-row-2col[b-ofemq0r3cp] {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 18px;
    padding: 0 36px;
    margin-bottom: 18px;
}

@media (max-width: 820px) {
    .db-row-2col[b-ofemq0r3cp] {
        grid-template-columns: 1fr;
    }
}

.db-row-3col[b-ofemq0r3cp] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding: 0 36px;
    margin-bottom: 18px;
}

@media (max-width: 1024px) {
    .db-row-3col[b-ofemq0r3cp] {
        grid-template-columns: 1fr;
    }
}

/* ── Panels ── */
.db-panel-mock[b-ofemq0r3cp] {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(226, 232, 240, 0.7);
    border-radius: var(--db-radius-lg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .4s cubic-bezier(.4, 0, .2, 1);
}

.db-panel-mock:hover[b-ofemq0r3cp] {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.06);
}

.db-table-panel[b-ofemq0r3cp] {
    overflow: hidden;
}

.db-panel-head[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 22px 14px;
    border-bottom: 1px solid var(--db-border);
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%);
    flex-shrink: 0;
}

.db-panel-head-left[b-ofemq0r3cp] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.db-panel-head-left h3[b-ofemq0r3cp] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--db-text-p);
    margin: 0;
    line-height: 1.2;
}

.db-panel-head-left p[b-ofemq0r3cp] {
    font-size: .72rem;
    color: var(--db-text-m);
    margin: 0;
    font-weight: 400;
}

.db-panel-head-right[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Legend ── */
.db-legend-row[b-ofemq0r3cp] {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.db-legend-row span[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--db-text-s);
}

.db-legend-dot[b-ofemq0r3cp] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ── Chart Wrapper ── */
.db-chart-wrap[b-ofemq0r3cp] {
    width: 100%;
    padding: 20px 24px;
    position: relative;
}

.db-chart-wrap canvas[b-ofemq0r3cp] {
    width: 100% !important;
    height: 100% !important;
}







/* ── Tables ── */
.db-table-toolbar[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--db-border);
}

.db-table-search[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    background: var(--db-sunken);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-md);
    padding: 7px 12px;
    gap: 8px;
    transition: border-color .2s cubic-bezier(.4, 0, .2, 1), background .2s cubic-bezier(.4, 0, .2, 1);
}

.db-table-search:focus-within[b-ofemq0r3cp] {
    border-color: var(--db-blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .08);
}

.db-table-search input[b-ofemq0r3cp] {
    border: none;
    background: transparent;
    outline: none;
    font-size: .78rem;
    color: var(--db-text-p);
    width: 200px;
}

.db-table-search input[b-ofemq0r3cp]::placeholder {
    color: var(--db-text-m);
}

.db-table-wrap[b-ofemq0r3cp] {
    overflow-x: auto;
    border-bottom: 1px solid var(--db-border);
}

.db-table[b-ofemq0r3cp] {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
    min-width: 660px;
}

.db-table thead th[b-ofemq0r3cp] {
    position: sticky;
    top: 0;
    background: #f8fafc;
    color: var(--db-text-m);
    font-weight: 600;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 12px 16px;
    border-bottom: 1px solid var(--db-border);
    white-space: nowrap;
    z-index: 2;
    cursor: pointer;
    user-select: none;
}

.db-table thead th:hover[b-ofemq0r3cp] {
    color: var(--db-blue);
}

.sort-icon[b-ofemq0r3cp] {
    opacity: .3;
    font-size: .7rem;
    margin-left: 3px;
}

.db-table tbody td[b-ofemq0r3cp] {
    padding: 11px 14px;
    border-bottom: 1px solid var(--db-border-sub);
    color: var(--db-text-p);
    white-space: nowrap;
    vertical-align: middle;
}

.db-table tbody tr:last-child td[b-ofemq0r3cp] {
    border-bottom: none;
}

.db-table tbody tr[b-ofemq0r3cp] {
    transition: background .15s ease;
}

.db-table tbody tr:hover td[b-ofemq0r3cp] {
    background: rgba(59, 130, 246, 0.03);
}

/* ── Table Status ── */
.db-att-bar-track[b-ofemq0r3cp] {
    width: 60px;
    height: 5px;
    background: #eef2f7;
    border-radius: 999px;
    overflow: hidden;
}

.db-att-bar-fill[b-ofemq0r3cp] {
    height: 100%;
    border-radius: 999px;
    transition: width .3s ease;
}

.bg-green[b-ofemq0r3cp] {
    background: var(--db-emerald);
}

.bg-yellow[b-ofemq0r3cp] {
    background: var(--db-amber);
}

.bg-red[b-ofemq0r3cp] {
    background: var(--db-rose);
}

.font-semibold[b-ofemq0r3cp] {
    font-weight: 600;
}

.at-status-excellent[b-ofemq0r3cp] {
    color: var(--db-emerald);
}

.at-status-good[b-ofemq0r3cp] {
    color: var(--db-blue);
}

.at-status-average[b-ofemq0r3cp] {
    color: var(--db-amber);
}

.at-status-poor[b-ofemq0r3cp] {
    color: var(--db-rose);
}

/* ── Link Button ── */
.db-btn-link[b-ofemq0r3cp] {
    background: transparent;
    color: var(--db-blue);
    border: none;
    padding: 4px 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: .78rem;
    border-radius: var(--db-radius-xs);
    transition: background .15s ease;
}

.db-btn-link:hover[b-ofemq0r3cp] {
    background: rgba(59, 130, 246, 0.08);
}

/* ── Pagination ── */
.db-pagination[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px;
    gap: 10px;
    flex-wrap: wrap;
}

.db-pagination-info[b-ofemq0r3cp] {
    font-size: .75rem;
    color: var(--db-text-m);
}

.db-pagination-btns[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.db-page-btn[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-sm);
    background: #fff;
    color: var(--db-text-s);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.db-page-btn:not(:disabled):hover[b-ofemq0r3cp] {
    background: var(--db-blue);
    color: #fff;
    border-color: var(--db-blue);
}

.db-page-btn.active[b-ofemq0r3cp] {
    background: var(--db-blue);
    color: #fff;
    border-color: var(--db-blue);
}

.db-page-btn:disabled[b-ofemq0r3cp] {
    opacity: .4;
    cursor: not-allowed;
}



/* ── Company Headcount Filters ── */
.db-ch-filter-row[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.ch-filter-sep[b-ofemq0r3cp] {
    color: var(--db-text-tertiary);
    font-size: .75rem;
    font-weight: 600;
}

.ch-ym-input[b-ofemq0r3cp] {
    width: 78px !important;
}

.ch-ym-input .mud-input-input[b-ofemq0r3cp] {
    font-size: .75rem !important;
    padding: 6px 8px !important;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.ch-company-select[b-ofemq0r3cp] {
    width: 150px !important;
}

.ch-company-select .mud-input-input[b-ofemq0r3cp] {
    font-size: .72rem !important;
    padding: 6px 8px !important;
    font-weight: 600;
}

.ch-refresh-btn[b-ofemq0r3cp] {
    width: 28px;
    height: 28px;
}

.ch-clear-btn[b-ofemq0r3cp] {
    width: 28px;
    height: 28px;
    color: var(--db-rose);
}

/* ── Custom Multi-Select Dropdown ── */
.ch-dd-wrapper[b-ofemq0r3cp] {
    position: relative;
    display: inline-block;
}

.ch-dd-backdrop[b-ofemq0r3cp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: transparent;
}

.ch-dd-trigger[b-ofemq0r3cp] {
    cursor: pointer;
}

.ch-dd-trigger .mud-input-input[b-ofemq0r3cp] {
    cursor: pointer !important;
}

.ch-dd-panel[b-ofemq0r3cp] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 200;
    min-width: 250px;
    max-width: 320px;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ch-dd-search[b-ofemq0r3cp] {
    width: 100%;
}

.ch-dd-search .mud-input-input[b-ofemq0r3cp] {
    font-size: .78rem !important;
    padding: 6px 8px !important;
}

.ch-dd-list[b-ofemq0r3cp] {
    max-height: 160px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ch-dd-item[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--db-radius-xs);
    cursor: pointer;
    transition: background 0.15s ease;
}

.ch-dd-item:hover[b-ofemq0r3cp] {
    background: rgba(59, 130, 246, 0.06);
}

.ch-dd-actions[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--db-border-sub);
}

.ch-dd-ok-btn[b-ofemq0r3cp] {
    min-width: 80px;
    white-space: nowrap;
}

.ch-dd-clear-btn[b-ofemq0r3cp] {
    min-width: 80px;
    white-space: nowrap;
}

/* ── Empty State ── */
.db-empty[b-ofemq0r3cp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    color: var(--db-text-m);
    text-align: center;
}

.db-empty-icon[b-ofemq0r3cp] {
    opacity: .15;
}

.db-empty-text[b-ofemq0r3cp] {
    font-size: .85rem;
    font-weight: 500;
    color: var(--db-text-m);
}

/* ── Statusbar ── */
.db-statusbar-mock[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 36px;
    margin-top: 24px;
    background: linear-gradient(90deg, #f1f5f9 0%, #ffffff 30%, #ffffff 70%, #f1f5f9 100%);
    border-top: 1px solid var(--db-border);
    position: relative;
}

.db-statusbar-mock[b-ofemq0r3cp]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 36px;
    right: 36px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.08), transparent);
}

.db-statusbar-mock-left[b-ofemq0r3cp],
.db-statusbar-mock-right[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .74rem;
    color: var(--db-text-m);
    font-weight: 500;
}

.db-status-dot[b-ofemq0r3cp] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.45);
    animation: db-pulse-dot-b-ofemq0r3cp 2.5s ease-in-out infinite;
}

/* ── Drawer ── */
.db-drawer-content[b-ofemq0r3cp] {
    padding: 16px;
}

.db-drawer-header[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--db-border);
}

.db-drawer-name[b-ofemq0r3cp] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--db-text-p);
    margin: 0;
}

.db-drawer-close[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--db-slate-100);
    border-radius: 50%;
    color: var(--db-text-m);
    cursor: pointer;
}

.db-drawer-field[b-ofemq0r3cp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--db-border-sub);
}

.db-drawer-field-label[b-ofemq0r3cp] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--db-text-m);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.db-drawer-field-value[b-ofemq0r3cp] {
    font-size: .875rem;
    font-weight: 700;
    color: var(--db-text-p);
}

/* ── Utilities ── */
.db-flex-between[b-ofemq0r3cp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.db-flex-center[b-ofemq0r3cp] {
    display: flex;
    align-items: center;
}

.db-flex[b-ofemq0r3cp] {
    display: flex;
}

.db-gap-2[b-ofemq0r3cp] {
    gap: 8px;
}

.db-gap-3[b-ofemq0r3cp] {
    gap: 12px;
}

.db-mb-1[b-ofemq0r3cp] {
    margin-bottom: 4px;
}

.db-text-xs[b-ofemq0r3cp] {
    font-size: .7rem;
}

.db-text-muted[b-ofemq0r3cp] {
    color: var(--db-text-m);
}

.db-font-semibold[b-ofemq0r3cp] {
    font-weight: 600;
}
/* /Components/Pages/Invoices/Invoices.razor.rz.scp.css */
/* ══════════════════════════════════════════════
   INVOICE PAGE — Scoped Styles
   ══════════════════════════════════════════════ */

/* ── Page wrapper ── */
.inv-page[b-jumcxfiu5s] {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    font-family: 'Inter', 'Roboto', 'Segoe UI', sans-serif;
}

/* ── Header ── */
.inv-header[b-jumcxfiu5s] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.inv-title[b-jumcxfiu5s] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
    margin: 0;
    line-height: 1.2;
}

.inv-subtitle[b-jumcxfiu5s] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #64748b);
    margin: 4px 0 0;
}

.inv-header-actions[b-jumcxfiu5s] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inv-icon-btn[b-jumcxfiu5s] {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--color-border-default, #e2e8f0);
    background: var(--color-bg-surface, #fff);
    color: var(--color-text-secondary, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s;
}

.inv-icon-btn:hover[b-jumcxfiu5s] {
    border-color: var(--color-border-strong, #94a3b8);
    color: var(--color-text-primary, #1e293b);
}

.inv-create-btn[b-jumcxfiu5s] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    height: 38px;
    background: #2563EB;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.inv-create-btn:hover[b-jumcxfiu5s] {
    background: #1D4ED8;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}

/* ── Stat Cards ── */
.inv-stats-grid[b-jumcxfiu5s] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1100px) {
    .inv-stats-grid[b-jumcxfiu5s] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .inv-stats-grid[b-jumcxfiu5s] {
        grid-template-columns: 1fr;
    }
}

.inv-stat-card[b-jumcxfiu5s] {
    background: var(--color-bg-surface, #fff);
    border: 1px solid var(--color-border-subtle, #f1f5f9);
    border-radius: 14px;
    padding: 20px 20px 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}

.inv-stat-card:hover[b-jumcxfiu5s] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.inv-stat-body[b-jumcxfiu5s] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.inv-stat-label[b-jumcxfiu5s] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted, #94a3b8);
    display: block;
    margin-bottom: 8px;
}

.inv-stat-value[b-jumcxfiu5s] {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--color-text-primary, #0f172a);
    line-height: 1;
    margin-bottom: 6px;
}

.inv-stat-trend[b-jumcxfiu5s] {
    font-size: 0.78rem;
    font-weight: 600;
}

.inv-stat-trend.positive[b-jumcxfiu5s] {
    color: #10B981;
}

.inv-stat-trend.warning[b-jumcxfiu5s] {
    color: #F59E0B;
}

.inv-stat-trend.danger[b-jumcxfiu5s] {
    color: #EF4444;
}

.inv-stat-icon[b-jumcxfiu5s] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inv-stat-icon.blue[b-jumcxfiu5s] {
    background: #EFF6FF;
    color: #2563EB;
}

.inv-stat-icon.orange[b-jumcxfiu5s] {
    background: #FFF7ED;
    color: #F97316;
}

.inv-stat-icon.red[b-jumcxfiu5s] {
    background: #FEF2F2;
    color: #EF4444;
}

.inv-stat-icon.green[b-jumcxfiu5s] {
    background: #F0FDF4;
    color: #10B981;
}

.inv-stat-bar[b-jumcxfiu5s] {
    height: 4px;
    margin: 0 -20px;
    background: #E2E8F0;
    position: relative;
}

.inv-stat-bar[b-jumcxfiu5s]::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 55%;
}

.blue-bar[b-jumcxfiu5s]::after {
    background: #2563EB;
}

.orange-bar[b-jumcxfiu5s]::after {
    background: #F97316;
    width: 35%;
}

.red-bar[b-jumcxfiu5s]::after {
    background: #EF4444;
    width: 20%;
}

.green-bar[b-jumcxfiu5s]::after {
    background: #10B981;
    width: 70%;
}

/* ── Table Card ── */
.inv-table-card[b-jumcxfiu5s] {
    background: var(--color-bg-surface, #fff);
    border: 1px solid var(--color-border-subtle, #f1f5f9);
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.inv-table-header[b-jumcxfiu5s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--color-border-subtle, #f1f5f9);
}

.inv-table-title[b-jumcxfiu5s] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text-primary, #0f172a);
}

.inv-table-controls[b-jumcxfiu5s] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Search */
.inv-search-wrap[b-jumcxfiu5s] {
    position: relative;
    display: flex;
    align-items: center;
}

.inv-search-icon[b-jumcxfiu5s] {
    position: absolute;
    left: 10px;
    color: #94A3B8 !important;
    pointer-events: none;
}

.inv-search-input[b-jumcxfiu5s] {
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--color-border-default, #e2e8f0);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-primary, #1e293b);
    background: var(--color-bg-sunken, #f8fafc);
    outline: none;
    width: 210px;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.inv-search-input:focus[b-jumcxfiu5s] {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background: var(--color-bg-surface, #fff);
}

/* Filter tabs */
.inv-filter-tabs[b-jumcxfiu5s] {
    display: flex;
    border: 1px solid var(--color-border-default, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg-sunken, #f8fafc);
}

.inv-tab[b-jumcxfiu5s] {
    padding: 7px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--color-text-muted, #64748b);
    cursor: pointer;
    transition: all 0.18s;
}

.inv-tab:not(:last-child)[b-jumcxfiu5s] {
    border-right: 1px solid var(--color-border-default, #e2e8f0);
}

.inv-tab.active[b-jumcxfiu5s] {
    background: var(--color-bg-surface, #fff);
    color: #2563EB;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Bulk delete */
.inv-delete-btn[b-jumcxfiu5s] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.06);
    color: #EF4444;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
}

.inv-delete-btn:hover[b-jumcxfiu5s] {
    background: rgba(239, 68, 68, 0.12);
}

/* ── Table ── */
.inv-table-wrap[b-jumcxfiu5s] {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
}

.inv-table[b-jumcxfiu5s] {
    width: 100%;
    border-collapse: collapse;
}

/* ── Fluid column widths (auto-sizing) ── */

/* Tight Checkbox and Actions columns */
.inv-table th:nth-child(5)[b-jumcxfiu5s],
.inv-table td:nth-child(5)[b-jumcxfiu5s] {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.inv-table th:nth-child(6)[b-jumcxfiu5s],
.inv-table td:nth-child(6)[b-jumcxfiu5s] {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.inv-table thead tr[b-jumcxfiu5s] {
    background: var(--color-bg-sunken, #f8fafc);
    border-bottom: 1px solid var(--color-border-default, #e2e8f0);
}

.inv-table th[b-jumcxfiu5s] {
    padding: 12px 24px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted, #94a3b8);
    text-align: left;
    white-space: nowrap;
}

.inv-table td[b-jumcxfiu5s] {
    padding: 14px 24px;
    font-size: 0.875rem;
    color: var(--color-text-primary, #1e293b);
    border-bottom: 1px solid var(--color-border-subtle, #f1f5f9);
    vertical-align: middle;
}

/* Checkbox column */
.inv-table th:nth-child(5)[b-jumcxfiu5s],
.inv-table td:nth-child(5)[b-jumcxfiu5s] {
    padding-left: 8px;
    padding-right: 8px;
}

.inv-table th:nth-child(6)[b-jumcxfiu5s],
.inv-table td:nth-child(6)[b-jumcxfiu5s] {
    padding-left: 8px;
    padding-right: 8px;
}

.inv-row:hover td[b-jumcxfiu5s] {
    background: var(--color-bg-sunken, #f8fafc);
}

.inv-row.selected td[b-jumcxfiu5s] {
    background: rgba(37, 99, 235, 0.05);
}

.inv-table input[type="checkbox"][b-jumcxfiu5s] {
    width: 16px;
    height: 16px;
    accent-color: #2563EB;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}

/* Invoice ID link */
.inv-id-link[b-jumcxfiu5s] {
    color: #2563EB;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
}

.inv-id-link:hover[b-jumcxfiu5s] {
    text-decoration: underline;
}

/* ── Client column ── */
.inv-client[b-jumcxfiu5s] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Avatar circle */
.inv-avatar[b-jumcxfiu5s] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563EB, #818cf8);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

/* ★ Client name — clearly visible ★ */
.inv-client span[b-jumcxfiu5s] {
    font-family: 'Inter', 'Roboto', 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Amount */
.inv-amount[b-jumcxfiu5s] {
    font-weight: 700 !important;
    color: var(--color-text-primary, #0f172a) !important;
    font-variant-numeric: tabular-nums;
}

/* Date */
.inv-date[b-jumcxfiu5s] {
    color: var(--color-text-secondary, #64748b) !important;
}

/* Actions */
.inv-actions[b-jumcxfiu5s] {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

/* Empty state */
.inv-empty[b-jumcxfiu5s] {
    text-align: center;
    padding: 48px !important;
    color: #94A3B8;
    font-style: italic;
}

/* ── Pagination ── */
.inv-table-footer[b-jumcxfiu5s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid var(--color-border-subtle, #f1f5f9);
    background: var(--color-bg-sunken, #fafafa);
}

.inv-showing[b-jumcxfiu5s] {
    font-size: 0.8rem;
    color: var(--color-text-muted, #64748b);
}

.inv-pagination[b-jumcxfiu5s] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.inv-page-btn[b-jumcxfiu5s] {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 7px;
    border: 1px solid var(--color-border-default, #e2e8f0);
    background: var(--color-bg-surface, #fff);
    color: var(--color-text-primary, #334155);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inv-page-btn:hover:not(:disabled):not(.active)[b-jumcxfiu5s] {
    border-color: #94A3B8;
    background: var(--color-bg-sunken, #f8fafc);
}

.inv-page-btn.active[b-jumcxfiu5s] {
    background: #2563EB;
    border-color: #2563EB;
    color: white;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.inv-page-btn:disabled[b-jumcxfiu5s] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Loading ── */
.inv-loading[b-jumcxfiu5s] {
    display: flex;
    justify-content: center;
    padding: 48px;
}

.inv-alert[b-jumcxfiu5s] {
    border-radius: 10px !important;
}
/* /Components/Pages/Items/ItemsEdit.razor.rz.scp.css */
.header-avatar[b-sbu7wiqw4c] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-sbu7wiqw4c] {
    color: white !important;
    font-size: 22px !important;
}

.btn-success-outline[b-sbu7wiqw4c] {
    border-color: #10b981 !important;
    color: #10b981 !important;
}

[b-sbu7wiqw4c] .mud-autocomplete button.mud-icon-button {
    display: none !important;
}

[b-sbu7wiqw4c] .mud-autocomplete .mud-input-adornment-end button.mud-icon-button {
    display: inline-flex !important;
}

.detail-table[b-sbu7wiqw4c] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.detail-table[b-sbu7wiqw4c]  .mud-table-head {
    background: #f8fafc;
}

.detail-table[b-sbu7wiqw4c]  .mud-table-row:hover {
    background: rgba(59, 130, 246, 0.04);
}

.detail-table[b-sbu7wiqw4c]  .mud-table-cell {
    padding: 4px 8px !important;
}

.id-pill[b-sbu7wiqw4c] {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    border-radius: 6px;
    padding: 2px 8px;
    font-weight: 700;
    font-size: 11px;
}

@media (max-width: 767.98px) {
    .header-section[b-sbu7wiqw4c] {
        border-radius: 0 !important;
        margin-bottom: 0 !important;
        padding: var(--space-3) !important;
    }

    .header-section > div[b-sbu7wiqw4c] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .progress-mini[b-sbu7wiqw4c] {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
        padding: 8px 12px !important;
    }

    .form-container[b-sbu7wiqw4c] {
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    [b-sbu7wiqw4c] .mud-input {
        font-size: 15px !important;
    }

    [b-sbu7wiqw4c] .mud-input-label {
        font-size: 13px !important;
    }

    [b-sbu7wiqw4c] .mud-grid-item[class*="sm-"],
    [b-sbu7wiqw4c] .mud-grid-item[class*="md-"] {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    [b-sbu7wiqw4c] .mud-tab {
        min-height: 44px !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    [b-sbu7wiqw4c] .scrolling-content-container {
        padding: 12px 12px 100px 12px !important;
    }

    [b-sbu7wiqw4c] .scroll-section .section-title {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }

    .fixed-footer[b-sbu7wiqw4c] {
        border-radius: 0 !important;
        padding: 12px 16px !important;
        background: #ffffff !important;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.05) !important;
    }

    .fixed-footer .footer-step[b-sbu7wiqw4c] {
        display: none !important;
    }

    .fixed-footer .footer-buttons[b-sbu7wiqw4c] {
        width: 100% !important;
    }

    [b-sbu7wiqw4c] .btn-next,
    [b-sbu7wiqw4c] .btn-prev,
    [b-sbu7wiqw4c] .btn-submit {
        min-height: 40px !important;
        font-size: 14px !important;
    }
}
/* /Components/Pages/Items/ItemsList.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Items List - Scoped Styles (mirrors Designation Master)
   ══════════════════════════════════════════════════════════ */

/* 1. LAYOUT WRAPPERS */
.header-avatar[b-pnoyig7cn9] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-pnoyig7cn9] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-pnoyig7cn9] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-pnoyig7cn9] {
    align-items: center !important;
}

.search-field-full[b-pnoyig7cn9] {
    width: 100% !important;
}

.table-layout-wrapper[b-pnoyig7cn9] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

/* 2. MODERN TABLE STRUCTURE */
[b-pnoyig7cn9] .modern-table table {
    table-layout: fixed !important;
    width: 100% !important;
}

[b-pnoyig7cn9] .modern-table th {
    background: white !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--slate-600) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--slate-100) !important;
    padding: 10px 16px !important;
}

[b-pnoyig7cn9] .modern-table td {
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--slate-100) !important;
    vertical-align: middle !important;
    font-size: 0.8rem !important;
}

[b-pnoyig7cn9] .modern-table .col-actions {
    width: 120px !important;
}

[b-pnoyig7cn9] .modern-table .mud-table-container {
    overflow-y: auto !important;
    height: 380px !important;
}

/* 3. IDENTITY & TYPOGRAPHY */
.id-pill[b-pnoyig7cn9] {
    padding: 2px 8px;
    background: var(--slate-100);
    color: var(--slate-500);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.profile-name[b-pnoyig7cn9] {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--slate-900) !important;
}

.role-badge[b-pnoyig7cn9] {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    border-radius: 6px;
    padding: 2px 8px;
    font-weight: 600;
    font-size: 11px;
}

/* 4. MODERN PAGER */
.modern-pager[b-pnoyig7cn9] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.jump-to-container[b-pnoyig7cn9] {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(0, 0, 0, 0.04) !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

.jump-label[b-pnoyig7cn9] {
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.jump-input-wrapper[b-pnoyig7cn9] {
    width: 36px !important;
    flex-shrink: 0 !important;
}

.jump-field[b-pnoyig7cn9] {
    margin-top: 0 !important;
}

.jump-field[b-pnoyig7cn9]  .mud-input {
    font-size: 11px !important;
    height: 20px !important;
}

.jump-field[b-pnoyig7cn9]  input {
    text-align: center !important;
    font-weight: 700 !important;
    padding: 0 !important;
}

.jump-btn[b-pnoyig7cn9] {
    padding: 1px !important;
    width: 22px !important;
    height: 22px !important;
}

.jump-btn[b-pnoyig7cn9]  .mud-icon-root {
    font-size: 16px !important;
}

/* ── Responsive & Mobile/Tablet Optimizations ── */
@media (max-width: 1023.98px) {
    .header-section > div[b-pnoyig7cn9] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
    }

    [b-pnoyig7cn9] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }

    [b-pnoyig7cn9] .stat-chip {
        display: none !important;
    }

    [b-pnoyig7cn9] .modern-table table {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }
    
    [b-pnoyig7cn9] .modern-table thead {
        display: none !important;
    }
    
    [b-pnoyig7cn9] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }
    
    [b-pnoyig7cn9] .modern-table tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas: 
            "id name actions"
            "unit rate tolrate"
            "lock . ." !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01), inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
        gap: 12px !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    [b-pnoyig7cn9] .modern-table tr::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(37, 99, 235, 0.03) !important;
        opacity: 0 !important;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    
    [b-pnoyig7cn9] .modern-table tr:hover::after {
        opacity: 1 !important;
    }
    
    [b-pnoyig7cn9] .modern-table tr:hover {
        transform: translateY(-2px) !important;
        border-color: var(--primary-300, #93c5fd) !important;
    }
    
    [b-pnoyig7cn9] .modern-table tr:active {
        transform: translateY(0) scale(0.98) !important;
        transition-duration: 0.1s !important;
    }

    [b-pnoyig7cn9] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* ID Badge */
    [b-pnoyig7cn9] .modern-table tr td.col-id {
        grid-area: id !important;
    }

    [b-pnoyig7cn9] .modern-table tr td.col-id .id-pill {
        background: rgba(37, 99, 235, 0.08) !important;
        color: var(--primary-600, #2563eb) !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        font-family: var(--font-display), sans-serif !important;
        letter-spacing: 0.02em !important;
    }

    /* Name */
    [b-pnoyig7cn9] .modern-table tr td.col-name {
        grid-area: name !important;
    }

    [b-pnoyig7cn9] .modern-table tr td.col-name .profile-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--slate-800, #1e293b) !important;
        letter-spacing: -0.01em !important;
    }

    /* Unit */
    [b-pnoyig7cn9] .modern-table tr td.col-unit {
        grid-area: unit !important;
    }

    /* Rate */
    [b-pnoyig7cn9] .modern-table tr td.col-rate {
        grid-area: rate !important;
    }

    /* Tol. Rate */
    [b-pnoyig7cn9] .modern-table tr td.col-tolrate {
        grid-area: tolrate !important;
    }

    /* Lock */
    [b-pnoyig7cn9] .modern-table tr td.col-lock {
        grid-area: lock !important;
        justify-content: center !important;
    }

    /* Actions */
    [b-pnoyig7cn9] .modern-table tr td.col-actions {
        grid-area: actions !important;
        justify-content: flex-end !important;
        width: 100% !important;
        align-self: start !important;
        justify-self: end !important;
        margin-top: -4px !important;
        margin-right: -6px !important;
    }

    [b-pnoyig7cn9] .modern-table tr td.col-actions .mud-stack {
        justify-content: flex-end !important;
        width: auto !important;
        gap: 0 !important;
    }

    [b-pnoyig7cn9] .modern-table tr td.col-actions .mud-icon-button {
        padding: 4px !important;
        width: 32px !important;
        height: 32px !important;
    }

    /* Style checkboxes inside table row */
    [b-pnoyig7cn9] .modern-table tr td .mud-checkbox {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Pagination */
    [b-pnoyig7cn9] .modern-table .mud-table-footer {
        overflow: hidden !important;
    }

    [b-pnoyig7cn9] .modern-table .mud-table-container {
        overflow-x: hidden !important;
    }

    [b-pnoyig7cn9] .modern-table tfoot {
        overflow: hidden !important;
    }

    .modern-pager[b-pnoyig7cn9] {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 6px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .modern-pager[b-pnoyig7cn9]  .mud-table-pagination {
        margin-left: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }

    .modern-pager[b-pnoyig7cn9]  .mud-table-pagination-toolbar {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 2px !important;
        height: 32px !important;
        min-height: 32px !important;
        display: flex !important;
        align-items: center !important;
    }

    .modern-pager[b-pnoyig7cn9]  .mud-table-pagination-spacer {
        display: none !important;
    }

    .modern-pager[b-pnoyig7cn9]  .mud-select {
        display: none !important;
    }

    .modern-pager[b-pnoyig7cn9]  .mud-table-pagination-information {
        font-size: 12px !important;
        margin: 0 4px 0 0 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        color: var(--slate-600) !important;
        font-weight: 500 !important;
    }

    .modern-pager[b-pnoyig7cn9]  .mud-table-pagination-actions {
        display: flex !important;
        align-items: center !important;
        gap: 0px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .modern-pager[b-pnoyig7cn9]  .mud-icon-button {
        padding: 4px !important;
        width: 28px !important;
        height: 28px !important;
    }

    .modern-pager[b-pnoyig7cn9]  .mud-icon-button .mud-icon-root {
        font-size: 18px !important;
    }

    .jump-to-container[b-pnoyig7cn9] {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        background: var(--slate-100) !important;
        padding: 2px 6px !important;
        border-radius: 6px !important;
        height: 28px !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }

    .jump-label[b-pnoyig7cn9] {
        font-size: 11px !important;
        color: var(--color-text-muted) !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .jump-input-wrapper[b-pnoyig7cn9] {
        width: 36px !important;
        flex-shrink: 0 !important;
    }

    .jump-field[b-pnoyig7cn9] {
        margin-top: 0 !important;
    }

    .jump-field[b-pnoyig7cn9]  .mud-input {
        font-size: 11px !important;
        height: 20px !important;
    }

    .jump-field[b-pnoyig7cn9]  input {
        text-align: center !important;
        font-weight: 700 !important;
        padding: 0 !important;
    }

    .jump-btn[b-pnoyig7cn9] {
        padding: 1px !important;
        width: 22px !important;
        height: 22px !important;
    }

    .jump-btn[b-pnoyig7cn9]  .mud-icon-root {
        font-size: 16px !important;
    }

    @media (max-width: 500px) {
        .jump-label[b-pnoyig7cn9] {
            display: none !important;
        }
        .modern-pager[b-pnoyig7cn9] {
            gap: 4px !important;
            padding: 4px 4px !important;
        }
        .modern-pager[b-pnoyig7cn9]  .mud-table-pagination-information {
            font-size: 10px !important;
            margin-right: 2px !important;
        }
    }
}

@media (max-width: 599.98px) {
    [b-pnoyig7cn9] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    [b-pnoyig7cn9] .control-panel-card .action-btn,
    [b-pnoyig7cn9] .control-panel-card .mud-button-root {
        width: 100% !important;
    }
}

/* ══ 120FPS SMOOTHING & RENDERING OPTIMIZATIONS ══ */
.items-root[b-pnoyig7cn9] {
    content-visibility: auto;
    contain: layout style paint;
}

.header-section[b-pnoyig7cn9],
.control-panel-card[b-pnoyig7cn9],
.table-layout-wrapper[b-pnoyig7cn9] {
    contain: layout style;
}

[b-pnoyig7cn9] .modern-table tbody tr {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══ STAGGERED ENTRANCE ANIMATION ══ */
@keyframes rowEnter-b-pnoyig7cn9 {
    from {
        opacity: 0;
        transform: translateZ(0) translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateZ(0) translateY(0) scale(1);
    }
}

[b-pnoyig7cn9] .modern-table tbody tr {
    animation: rowEnter-b-pnoyig7cn9 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[b-pnoyig7cn9] .modern-table tbody tr:nth-child(1) { animation-delay: 0.02s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(2) { animation-delay: 0.04s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(3) { animation-delay: 0.06s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(4) { animation-delay: 0.08s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(5) { animation-delay: 0.10s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(6) { animation-delay: 0.12s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(7) { animation-delay: 0.14s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(8) { animation-delay: 0.16s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(9) { animation-delay: 0.18s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(10) { animation-delay: 0.20s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(11) { animation-delay: 0.22s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(12) { animation-delay: 0.24s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(13) { animation-delay: 0.26s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(14) { animation-delay: 0.28s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(15) { animation-delay: 0.30s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(16) { animation-delay: 0.32s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(17) { animation-delay: 0.34s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(18) { animation-delay: 0.36s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(19) { animation-delay: 0.38s; }
[b-pnoyig7cn9] .modern-table tbody tr:nth-child(20) { animation-delay: 0.40s; }

.mud-checkbox[b-pnoyig7cn9],
.mud-icon-button[b-pnoyig7cn9],
.action-btn[b-pnoyig7cn9] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
    [b-pnoyig7cn9] .modern-table tbody tr {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    [b-pnoyig7cn9] .modern-table tbody tr:hover {
        transform: none !important;
    }
    [b-pnoyig7cn9] .modern-table tbody tr:active {
        transform: none !important;
    }
}
/* /Components/Pages/JhumkaType/JhumkaTypesPage.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Jhumka Type Master - Scoped Styles
   ══════════════════════════════════════════════════════════ */

/* 1. LAYOUT WRAPPERS */
.header-avatar[b-pysm88w15q] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-pysm88w15q] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-pysm88w15q] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-pysm88w15q] {
    align-items: center !important;
}

.search-field-full[b-pysm88w15q] {
    width: 100% !important;
}

.table-layout-wrapper[b-pysm88w15q] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

/* 2. MODERN TABLE STRUCTURE */
[b-pysm88w15q] .modern-table table {
    table-layout: fixed !important;
    width: 100% !important;
}

[b-pysm88w15q] .modern-table th {
    background: white !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--slate-600) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--slate-100) !important;
    padding: 10px 16px !important;
}

[b-pysm88w15q] .modern-table td {
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--slate-100) !important;
    vertical-align: middle !important;
    font-size: 0.8rem !important;
}

[b-pysm88w15q] .modern-table .col-actions {
    width: 160px !important;
}

/* 3. MULTI-DELETE PILL */
.multi-delete-pill[b-pysm88w15q] {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #fff1f2;
    border: 1px solid #fda4af;
    border-radius: 99px;
    padding: 0 6px 0 0;
    height: 32px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.delete-count[b-pysm88w15q] {
    color: #ef4444;
    font-weight: 700;
    font-size: 14px;
    user-select: none;
}

.delete-icon-btn[b-pysm88w15q] {
    background: transparent !important;
    margin-right: -4px !important;
}

/* 4. IDENTITY & TYPOGRAPHY */
.id-pill[b-pysm88w15q] {
    padding: 2px 8px;
    background: var(--slate-100);
    color: var(--slate-500);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.profile-name[b-pysm88w15q] {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--slate-900) !important;
}

.profile-container[b-pysm88w15q] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-container[b-pysm88w15q] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.max-w-400[b-pysm88w15q] {
    max-width: 400px !important;
}

/* ── Responsive & Mobile/Tablet Optimizations ── */
@media (max-width: 1023.98px) {
    .header-section > div[b-pysm88w15q] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
    }

    [b-pysm88w15q] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }

    /* Transform Table to Native List Card Layout on Mobile and Tablet */
    [b-pysm88w15q] .modern-table table {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }
    
    [b-pysm88w15q] .modern-table thead {
        display: none !important; /* Hide column headers */
    }
    
    [b-pysm88w15q] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }
    
    [b-pysm88w15q] .modern-table tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas: 
            "id name select"
            "tablename tablename tablename"
            "lock actions actions" !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01), inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
        gap: 12px !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    [b-pysm88w15q] .modern-table tr::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(37, 99, 235, 0.03) !important;
        opacity: 0 !important;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    
    [b-pysm88w15q] .modern-table tr:hover::after {
        opacity: 1 !important;
    }
    
    [b-pysm88w15q] .modern-table tr:hover {
        transform: translateY(-2px) !important;
        border-color: var(--primary-300, #93c5fd) !important;
    }
    
    [b-pysm88w15q] .modern-table tr:active {
        transform: translateY(0) scale(0.98) !important;
        transition-duration: 0.1s !important;
    }
    
    [b-pysm88w15q] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Column grid-area assignment using custom classes */
    [b-pysm88w15q] .modern-table tr td.col-ref {
        grid-area: id !important;
    }

    [b-pysm88w15q] .modern-table tr td.col-ref .id-pill {
        background: rgba(37, 99, 235, 0.08) !important;
        color: var(--primary-600, #2563eb) !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        font-family: var(--font-display), sans-serif !important;
        letter-spacing: 0.02em !important;
    }
    
    [b-pysm88w15q] .modern-table tr td.col-desc {
        grid-area: name !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    [b-pysm88w15q] .modern-table tr td.col-desc .profile-avatar {
        width: 36px !important;
        height: 36px !important;
        background: linear-gradient(135deg, var(--primary-400), var(--primary-600)) !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.12) !important;
        border-radius: 50% !important;
    }

    [b-pysm88w15q] .modern-table tr td.col-desc .profile-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--slate-800, #1e293b) !important;
        letter-spacing: -0.01em !important;
    }
    
    [b-pysm88w15q] .modern-table tr td.col-select {
        grid-area: select !important;
        justify-content: flex-end !important;
    }

    [b-pysm88w15q] .modern-table tr td.col-tablename {
        grid-area: tablename !important;
        padding: 4px 0 !important;
        font-family: monospace;
        font-size: 0.8rem !important;
        color: var(--slate-600) !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }

    [b-pysm88w15q] .modern-table tr td.col-tablename span {
        background: var(--slate-50) !important;
        color: var(--slate-600) !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
        border: 1px solid var(--slate-100) !important;
        font-weight: 500 !important;
    }
    
    [b-pysm88w15q] .modern-table tr td.col-lock {
        grid-area: lock !important;
        padding-top: 12px !important;
        border-top: 1px dashed rgba(226, 232, 240, 0.8) !important;
        display: flex !important;
        align-items: center !important;
    }

    [b-pysm88w15q] .modern-table tr td.col-lock .mud-icon-button {
        padding: 6px !important;
        border-radius: 8px !important;
        transition: all 0.2s ease !important;
    }
    
    [b-pysm88w15q] .modern-table tr td.col-actions {
        grid-area: actions !important;
        justify-content: flex-end !important;
        padding-top: 12px !important;
        border-top: 1px dashed rgba(226, 232, 240, 0.8) !important;
        width: 100% !important;
        gap: 8px !important;
    }

    [b-pysm88w15q] .modern-table tr td.col-actions .mud-stack {
        justify-content: flex-end !important;
        width: 100% !important;
    }

    /* Pastel styled action buttons */
    [b-pysm88w15q] .modern-table tr td.col-actions .action-btn-edit {
        background: rgba(79, 70, 229, 0.06) !important;
        color: #4f46e5 !important;
        border: 1px solid rgba(79, 70, 229, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-pysm88w15q] .modern-table tr td.col-actions .action-btn-edit:hover {
        background: #4f46e5 !important;
        color: #ffffff !important;
    }

    [b-pysm88w15q] .modern-table tr td.col-actions .action-btn-del {
        background: rgba(239, 68, 68, 0.06) !important;
        color: #ef4444 !important;
        border: 1px solid rgba(239, 68, 68, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-pysm88w15q] .modern-table tr td.col-actions .action-btn-del:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
    }

    .edit-container[b-pysm88w15q] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px !important;
    }
    
    .max-w-400[b-pysm88w15q] {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Style checkboxes inside table row */
    [b-pysm88w15q] .modern-table tr td .mud-checkbox {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Mobile-Only Stacking and Sizing */
@media (max-width: 599.98px) {
    [b-pysm88w15q] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
    }
    
    [b-pysm88w15q] .control-panel-card .action-btn,
    [b-pysm88w15q] .control-panel-card .mud-button-root {
        width: 100% !important;
        margin: 0 !important;
        display: inline-flex !important;
    }
}
/* /Components/Pages/Jhumka/JhumkaEditPage.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Jhumka Edit - Scoped Styles
   ══════════════════════════════════════════════════════════ */

.jhumka-edit-root[b-g71p1v27o5] {
    padding: 0.5rem 1rem;
    background-color: #f8fafc;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    box-sizing: border-box;
}

/* Header Section */
.header-section[b-g71p1v27o5] {
    margin-bottom: 1rem;
    max-width: 100%;
    overflow-x: hidden;
    flex-shrink: 0 !important;
}

/* Ultra-Compact Filter Bar / Card */
.pro-filter-bar[b-g71p1v27o5] {
    padding: 0.75rem 1.25rem !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    max-width: 100%;
    flex-shrink: 0 !important;
}

/* Scrollable Container for Details Card */
.reports-main-scrollable[b-g71p1v27o5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 100%;
    margin-top: 8px;
    padding-bottom: 12px;
}

.reports-main-scrollable[b-g71p1v27o5]::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.reports-main-scrollable[b-g71p1v27o5]::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

/* 2. MODERN TABLE STRUCTURE */
[b-g71p1v27o5] .modern-table {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    width: 100% !important;
    max-width: 100%;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
}

[b-g71p1v27o5] .modern-table .mud-table-container {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

[b-g71p1v27o5] .modern-table table {
    table-layout: fixed !important;
    width: 100% !important;
}

[b-g71p1v27o5] .modern-table th {
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--slate-600) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--slate-100) !important;
    padding: 10px 16px !important;
    background-color: #f8fafc !important;
}

[b-g71p1v27o5] .modern-table .mud-table-head .mud-th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background-color: #f8fafc !important;
}

[b-g71p1v27o5] .modern-table td {
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--slate-100) !important;
    vertical-align: middle !important;
    font-size: 0.8rem !important;
}

[b-g71p1v27o5] .modern-table .col-actions {
    width: 150px !important;
}

/* 3. TYPOGRAPHY & DECORATIONS */
.id-pill[b-g71p1v27o5] {
    padding: 2px 8px;
    background: var(--slate-100);
    color: var(--slate-500);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.type-pill[b-g71p1v27o5] {
    padding: 4px 10px;
    background: #eef2ff;
    color: #4f46e5;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
}

.text-muted[b-g71p1v27o5] {
    color: var(--slate-400) !important;
    font-style: italic;
    font-size: 0.8rem;
}

.edit-container[b-g71p1v27o5] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.profile-container[b-g71p1v27o5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-avatar[b-g71p1v27o5] {
    flex-shrink: 0 !important;
}

.profile-name[b-g71p1v27o5] {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--slate-900) !important;
}

/* Bulk Options List Custom Styling */
.bulk-options-list[b-g71p1v27o5] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    max-height: 280px;
    overflow-y: auto;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
}

.bulk-options-list[b-g71p1v27o5]::-webkit-scrollbar {
    width: 6px;
}

.bulk-options-list[b-g71p1v27o5]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 8px;
}

.bulk-options-list[b-g71p1v27o5]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
}

.bulk-options-list[b-g71p1v27o5]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.bulk-option-item[b-g71p1v27o5] {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    background-color: #ffffff;
    transition: background-color 0.15s ease, transform 0.1s ease;
    user-select: none;
}

.bulk-option-item:last-child[b-g71p1v27o5] {
    border-bottom: none;
}

.bulk-option-item:hover[b-g71p1v27o5] {
    background-color: #f1f5f9;
}

.bulk-option-item.selected[b-g71p1v27o5] {
    background-color: #eff6ff;
}

.bulk-option-item.selected:hover[b-g71p1v27o5] {
    background-color: #dbeafe;
}

.bulk-item-checkbox[b-g71p1v27o5] {
    flex-shrink: 0;
}

.bulk-item-text[b-g71p1v27o5] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
    margin-left: 4px;
}

[b-g71p1v27o5] .modern-table th.col-ref,
[b-g71p1v27o5] .modern-table td.col-ref {
    width: 120px !important;
    text-align: left !important;
    justify-content: flex-start !important;
}

[b-g71p1v27o5] .modern-table .col-optid {
    width: 130px !important;
}

.detail-card[b-g71p1v27o5] {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    height: 100% !important;
    min-height: 0 !important;
}

.bulk-item-id[b-g71p1v27o5] {
    font-size: 0.75rem;
    font-family: monospace;
    font-weight: 600;
    color: #94a3b8;
    background-color: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

/* ── Responsive & Mobile/Tablet Optimizations ── */
@media (max-width: 1023.98px) {
    .header-section>div[b-g71p1v27o5] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
    }

    .header-section .d-flex.align-center[b-g71p1v27o5] {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }

    /* Transform Table to Native List Card Layout on Mobile and Tablet */
    [b-g71p1v27o5] .modern-table table {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }

    [b-g71p1v27o5] .modern-table thead {
        display: none !important;
        /* Hide column headers */
    }

    [b-g71p1v27o5] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }

    [b-g71p1v27o5] .modern-table tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "id name"
            "optid actions" !important;
        background: white !important;
        border: 1px solid var(--slate-150) !important;
        border-radius: 12px !important;
        padding: 12px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
        gap: 10px !important;
        align-items: center !important;
        margin-bottom: 0 !important;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        will-change: transform !important;
    }

    [b-g71p1v27o5] .modern-table tr::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.02) !important;
        opacity: 0 !important;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        pointer-events: none !important;
        will-change: opacity !important;
        z-index: 1 !important;
    }

    [b-g71p1v27o5] .modern-table tr:hover::after {
        opacity: 1 !important;
    }

    [b-g71p1v27o5] .modern-table tr:hover {
        transform: translateY(-3px) !important;
    }

    [b-g71p1v27o5] .modern-table tr:active {
        transform: translateY(-1px) scale(0.99) !important;
    }

    [b-g71p1v27o5] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
    }

    /* Column grid-area assignment using custom classes */
    [b-g71p1v27o5] .modern-table tr td.col-ref {
        grid-area: id !important;
    }

    [b-g71p1v27o5] .modern-table tr td.col-name {
        grid-area: name !important;
        display: block !important;
    }

    [b-g71p1v27o5] .modern-table tr td.col-optid {
        grid-area: optid !important;
        padding-top: 8px !important;
        border-top: 1px solid var(--slate-100) !important;
    }

    [b-g71p1v27o5] .modern-table tr td.col-actions {
        grid-area: actions !important;
        justify-content: flex-end !important;
        padding-top: 8px !important;
        border-top: 1px solid var(--slate-100) !important;
        width: 100% !important;
    }

    .profile-name[b-g71p1v27o5] {
        font-size: 0.9rem !important;
    }

    .edit-container[b-g71p1v27o5] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px !important;
    }
}

/* Mobile-Only Stacking and Sizing */
@media (max-width: 599.98px) {
    .header-section .d-flex.align-center[b-g71p1v27o5] {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
        margin-top: 8px;
    }

    .header-section .action-btn[b-g71p1v27o5] {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Details Card Header section buttons */
    .mb-3 .d-flex.align-center[b-g71p1v27o5] {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
        margin-top: 8px;
    }

    .mb-3 .action-btn[b-g71p1v27o5] {
        width: 100% !important;
        margin: 0 !important;
    }
}
/* /Components/Pages/Jhumka/JhumkasPage.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Jhumka Master - Scoped Styles
   ══════════════════════════════════════════════════════════ */

/* 1. LAYOUT WRAPPERS */
.header-avatar[b-xy4j9i9pd5] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-xy4j9i9pd5] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-xy4j9i9pd5] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-xy4j9i9pd5] {
    align-items: center !important;
}

.search-field-full[b-xy4j9i9pd5] {
    width: 100% !important;
}

.table-layout-wrapper[b-xy4j9i9pd5] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

/* 2. MODERN TABLE STRUCTURE */
[b-xy4j9i9pd5] .modern-table table {
    table-layout: fixed !important;
    width: 100% !important;
}

[b-xy4j9i9pd5] .modern-table th {
    background: white !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--slate-600) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--slate-100) !important;
    padding: 10px 16px !important;
}

[b-xy4j9i9pd5] .modern-table td {
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--slate-100) !important;
    vertical-align: middle !important;
    font-size: 0.8rem !important;
}

[b-xy4j9i9pd5] .modern-table .col-actions {
    width: 160px !important;
}

/* 3. MULTI-DELETE PILL */
.multi-delete-pill[b-xy4j9i9pd5] {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #fff1f2;
    border: 1px solid #fda4af;
    border-radius: 99px;
    padding: 0 6px 0 0;
    height: 32px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.delete-count[b-xy4j9i9pd5] {
    color: #ef4444;
    font-weight: 700;
    font-size: 14px;
    user-select: none;
}

.delete-icon-btn[b-xy4j9i9pd5] {
    background: transparent !important;
    margin-right: -4px !important;
}

/* 4. IDENTITY & TYPOGRAPHY */
.id-pill[b-xy4j9i9pd5] {
    padding: 2px 8px;
    background: var(--slate-100);
    color: var(--slate-500);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.profile-name[b-xy4j9i9pd5] {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--slate-900) !important;
}

.profile-container[b-xy4j9i9pd5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.type-pill[b-xy4j9i9pd5] {
    padding: 4px 10px;
    background: #eef2ff;
    color: #4f46e5;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── Responsive & Mobile/Tablet Optimizations ── */
@media (max-width: 1023.98px) {
    .header-section > div[b-xy4j9i9pd5] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
    }

    [b-xy4j9i9pd5] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }

    /* Transform Table to Native List Card Layout on Mobile and Tablet */
    [b-xy4j9i9pd5] .modern-table table {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }
    
    [b-xy4j9i9pd5] .modern-table thead {
        display: none !important; /* Hide column headers */
    }
    
    [b-xy4j9i9pd5] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }
    
    [b-xy4j9i9pd5] .modern-table tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas: 
            "id name select"
            "type type scope"
            "lock actions actions" !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01), inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
        gap: 12px !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    [b-xy4j9i9pd5] .modern-table tr::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(37, 99, 235, 0.03) !important;
        opacity: 0 !important;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    
    [b-xy4j9i9pd5] .modern-table tr:hover::after {
        opacity: 1 !important;
    }
    
    [b-xy4j9i9pd5] .modern-table tr:hover {
        transform: translateY(-2px) !important;
        border-color: var(--primary-300, #93c5fd) !important;
    }
    
    [b-xy4j9i9pd5] .modern-table tr:active {
        transform: translateY(0) scale(0.98) !important;
        transition-duration: 0.1s !important;
    }

    [b-xy4j9i9pd5] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Column grid-area assignment using custom classes */
    [b-xy4j9i9pd5] .modern-table tr td.col-ref {
        grid-area: id !important;
    }

    [b-xy4j9i9pd5] .modern-table tr td.col-ref .id-pill {
        background: rgba(37, 99, 235, 0.08) !important;
        color: var(--primary-600, #2563eb) !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        font-family: var(--font-display), sans-serif !important;
        letter-spacing: 0.02em !important;
    }
    
    [b-xy4j9i9pd5] .modern-table tr td.col-desc {
        grid-area: name !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    [b-xy4j9i9pd5] .modern-table tr td.col-desc .profile-avatar {
        width: 36px !important;
        height: 36px !important;
        background: linear-gradient(135deg, var(--primary-400), var(--primary-600)) !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.12) !important;
        border-radius: 50% !important;
    }

    [b-xy4j9i9pd5] .modern-table tr td.col-desc .profile-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--slate-800, #1e293b) !important;
        letter-spacing: -0.01em !important;
    }
    
    [b-xy4j9i9pd5] .modern-table tr td.col-select {
        grid-area: select !important;
        justify-content: flex-end !important;
    }

    [b-xy4j9i9pd5] .modern-table tr td.col-type {
        grid-area: type !important;
        padding: 4px 0 !important;
        width: 100% !important;
    }
    
    [b-xy4j9i9pd5] .modern-table tr td.col-scope {
        grid-area: scope !important;
        justify-content: flex-end !important;
        padding: 4px 0 !important;
    }

    [b-xy4j9i9pd5] .modern-table tr td.col-scope span {
        background: #f0fdf4 !important;
        color: #16a34a !important;
        border-radius: 99px !important;
        padding: 4px 10px !important;
        font-weight: 600 !important;
        font-size: 0.75rem !important;
    }
    
    [b-xy4j9i9pd5] .modern-table tr td.col-lock {
        grid-area: lock !important;
        padding-top: 12px !important;
        border-top: 1px dashed rgba(226, 232, 240, 0.8) !important;
        display: flex !important;
        align-items: center !important;
    }

    [b-xy4j9i9pd5] .modern-table tr td.col-lock .mud-icon-button {
        padding: 6px !important;
        border-radius: 8px !important;
        transition: all 0.2s ease !important;
    }
    
    [b-xy4j9i9pd5] .modern-table tr td.col-actions {
        grid-area: actions !important;
        justify-content: flex-end !important;
        padding-top: 12px !important;
        border-top: 1px dashed rgba(226, 232, 240, 0.8) !important;
        width: 100% !important;
        gap: 8px !important;
    }

    [b-xy4j9i9pd5] .modern-table tr td.col-actions .mud-stack {
        justify-content: flex-end !important;
        width: 100% !important;
    }

    /* Pastel styled action buttons */
    [b-xy4j9i9pd5] .modern-table tr td.col-actions .action-btn-edit {
        background: rgba(79, 70, 229, 0.06) !important;
        color: #4f46e5 !important;
        border: 1px solid rgba(79, 70, 229, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-xy4j9i9pd5] .modern-table tr td.col-actions .action-btn-edit:hover {
        background: #4f46e5 !important;
        color: #ffffff !important;
    }

    [b-xy4j9i9pd5] .modern-table tr td.col-actions .action-btn-del {
        background: rgba(239, 68, 68, 0.06) !important;
        color: #ef4444 !important;
        border: 1px solid rgba(239, 68, 68, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-xy4j9i9pd5] .modern-table tr td.col-actions .action-btn-del:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
    }

    /* Style checkboxes inside table row */
    [b-xy4j9i9pd5] .modern-table tr td .mud-checkbox {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Mobile-Only Stacking and Sizing */
@media (max-width: 599.98px) {
    [b-xy4j9i9pd5] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
    }
    
    [b-xy4j9i9pd5] .control-panel-card .action-btn,
    [b-xy4j9i9pd5] .control-panel-card .mud-button-root {
        width: 100% !important;
        margin: 0 !important;
        display: inline-flex !important;
    }
}
/* /Components/Pages/LeaveApply/LeaveApply.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Leave Apply - Scoped Styles
   ══════════════════════════════════════════════════════════ */

.header-avatar[b-42j9ib5hyi] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-42j9ib5hyi] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-42j9ib5hyi] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-42j9ib5hyi] {
    align-items: center !important;
}

.search-field-full[b-42j9ib5hyi] {
    width: 100% !important;
}

.table-layout-wrapper[b-42j9ib5hyi] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow-x: auto !important;
    max-width: 100% !important;
}

/* 2. MODERN TABLE STRUCTURE & TYPOGRAPHY */
[b-42j9ib5hyi] .modern-table table {
    table-layout: auto !important;
    width: 100% !important;
}

[b-42j9ib5hyi] .modern-table th {
    background: white !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--slate-600, #475569) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    border-bottom: 2px solid var(--slate-100, #f1f5f9) !important;
    padding: 10px 12px !important;
    white-space: nowrap !important;
}

[b-42j9ib5hyi] .modern-table td {
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--slate-100, #f1f5f9) !important;
    vertical-align: middle !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: var(--slate-800, #1e293b) !important;
}

/* 3. IDENTITY & BADGES */
.id-pill[b-42j9ib5hyi] {
    padding: 2px 8px;
    background: var(--slate-100, #f1f5f9);
    color: var(--slate-500, #64748b);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.leave-apply-avatar[b-42j9ib5hyi] {
    background-color: var(--mud-palette-primary) !important;
}

.leave-apply-avatar-icon[b-42j9ib5hyi] {
    color: white !important;
}
/* /Components/Pages/LeaveApprove/LeaveApprove.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Leave Approval - Scoped Styles
   ══════════════════════════════════════════════════════════ */

.header-avatar[b-jid6877lpj] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-jid6877lpj] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-jid6877lpj] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-jid6877lpj] {
    align-items: center !important;
}

.search-field-full[b-jid6877lpj] {
    width: 100% !important;
}

.table-layout-wrapper[b-jid6877lpj] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow-x: auto !important;
    max-width: 100% !important;
}

/* 2. MODERN TABLE STRUCTURE & TYPOGRAPHY */
[b-jid6877lpj] .modern-table table {
    table-layout: auto !important;
    width: 100% !important;
}

[b-jid6877lpj] .modern-table th {
    background: white !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--slate-600, #475569) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    border-bottom: 2px solid var(--slate-100, #f1f5f9) !important;
    padding: 10px 12px !important;
    white-space: nowrap !important;
}

[b-jid6877lpj] .modern-table td {
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--slate-100, #f1f5f9) !important;
    vertical-align: middle !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: var(--slate-800, #1e293b) !important;
}

/* 3. IDENTITY & BADGES */
.id-pill[b-jid6877lpj] {
    padding: 2px 8px;
    background: var(--slate-100, #f1f5f9);
    color: var(--slate-500, #64748b);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.applicant-email[b-jid6877lpj] {
    font-size: 0.72rem;
    color: var(--slate-500, #64748b);
}

.leave-approve-avatar[b-jid6877lpj] {
    background-color: var(--mud-palette-success-darken-1, #2e7d32) !important;
}

.leave-approve-avatar-icon[b-jid6877lpj] {
    color: white !important;
}

/* SLEEK DYNAMIC 2-DIGIT MICRO-PILL INPUT FOR APPROVED DAYS */
[b-jid6877lpj] .col-app-days {
    min-width: 105px !important;
    width: 105px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.appr-days-input-native[b-jid6877lpj] {
    width: 48px !important;
    height: 28px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    color: #0f172a !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    appearance: none;
}

.appr-days-input-native:focus[b-jid6877lpj] {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.appr-days-input-native:disabled[b-jid6877lpj] {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    border-color: #e2e8f0 !important;
}

/* 4. ACTION BUTTONS - MATCHING EDIT & DELETE BUTTON STYLES WITH HOVER EFFECTS */
[b-jid6877lpj] .action-btn-approve {
    background: rgba(16, 185, 129, 0.08) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.18) !important;
    border-radius: 8px !important;
    padding: 6px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[b-jid6877lpj] .action-btn-approve:hover:not(:disabled) {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
    transform: translateY(-1px) scale(1.06) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
}

[b-jid6877lpj] .action-btn-reject {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.18) !important;
    border-radius: 8px !important;
    padding: 6px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[b-jid6877lpj] .action-btn-reject:hover:not(:disabled) {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
    transform: translateY(-1px) scale(1.06) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
}

[b-jid6877lpj] .action-btn-approve:disabled,
[b-jid6877lpj] .action-btn-reject:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}
/* /Components/Pages/Login/Login.razor.rz.scp.css */
:root[b-59nnq813mq] {
    --primary-blue: #2563eb;
    --primary-light: #60a5fa;
    --accent: #f43f5e;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.5);
    --text-main: #0f172a;
    --text-muted: #475569;
    --shadow-soft: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
}

/* BASE - REMOVE SCROLLING */
.login-wrapper[b-59nnq813mq] {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 10;
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* BACKGROUND SLIDESHOW - LOCKED BOX */
.slideshow-background[b-59nnq813mq] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.slide[b-59nnq813mq] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: #0f172a;
    /* Fallback safe color */
    opacity: 0;
    animation: slideShow-b-59nnq813mq 24s linear infinite;
    transform-origin: center;
}

.slide:nth-child(1)[b-59nnq813mq] {
    background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070');
    animation-delay: 0s;
}

.slide:nth-child(2)[b-59nnq813mq] {
    background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2069');
    animation-delay: 6s;
}

.slide:nth-child(3)[b-59nnq813mq] {
    background-image: url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?q=80&w=2070');
    animation-delay: 12s;
}

.slide:nth-child(4)[b-59nnq813mq] {
    background-image: url('https://images.unsplash.com/photo-1497215728101-856f4ea42174?q=80&w=2070');
    animation-delay: 18s;
}

@keyframes slideShow-b-59nnq813mq {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    5% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    25% {
        opacity: 0;
        transform: scale(1.05);
    }

    100% {
        opacity: 0;
    }
}

.overlay[b-59nnq813mq] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.45) 0%, rgba(30, 41, 59, 0.45) 100%);
    z-index: 2;
}

/* LOGIN CARD - STATIC FIXED SIZING */
.login-card[b-59nnq813mq] {
    position: relative;
    z-index: 10;
    display: flex;
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    width: 1000px;
    max-width: 95vw;
    height: 600px;
    max-height: 90vh;
    border-radius: 24px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    margin: auto;
}

.login-left[b-59nnq813mq] {
    flex: 1;
    background: rgba(255, 255, 255, 0.344);
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid var(--glass-border);
}

.brand[b-59nnq813mq] {
    display: flex;
    align-items: center;
    gap: 12px;

}

.brand-logo[b-59nnq813mq] {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.brand strong[b-59nnq813mq] {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text-main);
}

.image-container img[b-59nnq813mq] {
    max-width: 100%;
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    border: 4px solid white;
}

.tagline b[b-59nnq813mq] {
    font-size: 1.2rem;
    color: var(--text-main);
    display: block;
    margin-bottom: 4px;
}

.tagline p[b-59nnq813mq] {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.login-right[b-59nnq813mq] {
    flex: 1.2;
    padding: 60px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: whitesmoke;
}

h2[b-59nnq813mq] {
    font-size: 2.3rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-main);
}

.login-subtitle[b-59nnq813mq] {
    color: var(--text-muted);
    margin-bottom: 45px;
    font-size: 1rem;
}

/* FORM ELEMENTS - FORCED NO SCROLL */
.input-group[b-59nnq813mq] {
    position: relative !important;
    margin-bottom: 35px !important;
    width: 100% !important;
    display: block !important;
}

.input-group[b-59nnq813mq]  input,
.input-group input[b-59nnq813mq] {
    width: 100% !important;
    padding: 12px 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid #cbd5e1 !important;
    font-size: 1.1rem !important;
    color: var(--text-main) !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    display: block !important;
}

.input-group[b-59nnq813mq]  input:focus,
.input-group input:focus[b-59nnq813mq] {
    border-bottom-color: var(--primary-blue) !important;
}

.input-group label[b-59nnq813mq] {
    position: absolute;
    left: 0;
    top: 12px;
    color: var(--text-muted);
    pointer-events: none;
    transition: all 0.3s ease;
    font-size: 1rem;
    z-index: 5;
}

.input-group[b-59nnq813mq]  input:focus~label,
.input-group[b-59nnq813mq]  input:not(:placeholder-shown)~label,
.input-group[b-59nnq813mq]  input:autofill~label,
.input-group[b-59nnq813mq]  input:-webkit-autofill~label,
.input-group input:focus~label[b-59nnq813mq],
.input-group input:not(:placeholder-shown)~label[b-59nnq813mq],
.input-group input:autofill~label[b-59nnq813mq],
.input-group input:-webkit-autofill~label[b-59nnq813mq] {
    top: -22px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--primary-blue) !important;
}

.login-btn[b-59nnq813mq] {
    width: 100% !important;
    padding: 14px !important;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-top: 10px !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
    animation: slideIn 1s ease-in-out;
}

.login-btn:hover[b-59nnq813mq] {
    background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5) !important;
}

.login-btn:active[b-59nnq813mq] {
    transform: translateY(0) scale(0.98) !important;
}

/* Focused input color refinements */
.input-group[b-59nnq813mq]  input:focus~label,
.input-group[b-59nnq813mq]  input:not(:placeholder-shown)~label,
.input-group[b-59nnq813mq]  input:autofill~label,
.input-group[b-59nnq813mq]  input:-webkit-autofill~label,
.input-group input:focus~label[b-59nnq813mq],
.input-group input:not(:placeholder-shown)~label[b-59nnq813mq],
.input-group input:autofill~label[b-59nnq813mq],
.input-group input:-webkit-autofill~label[b-59nnq813mq] {
    color: #6366f1 !important;
}

.input-group[b-59nnq813mq]  input:focus,
.input-group input:focus[b-59nnq813mq] {
    border-bottom-color: #6366f1 !important;
}

.mobile-card-brand[b-59nnq813mq] {
    display: none !important;
}

.mobile-brand-header[b-59nnq813mq] {
    display: none !important;
}

/* MOBILE & TABLET LAYOUT OVERHAUL */
@media (max-width: 1023.98px) {
    .login-wrapper[b-59nnq813mq] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100vh !important;
        width: 100vw !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        flex-direction: column !important;
    }

    .slideshow-background[b-59nnq813mq] {
        filter: blur(6px) !important;
        transform: scale(1.05) !important;
    }

    .mobile-card-brand[b-59nnq813mq] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        margin-bottom: 1.5rem !important;
        text-align: center !important;
        width: 100% !important;
    }

    .mobile-card-brand .brand-logo[b-59nnq813mq] {
        width: 36px !important;
        height: 36px !important;
        object-fit: contain !important;
        filter: drop-shadow(0 2px 8px rgba(99, 102, 241, 0.4)) !important;
        animation: logoPulse-b-59nnq813mq 2.5s infinite ease-in-out !important;
    }

    @keyframes logoPulse-b-59nnq813mq {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.08);
        }
    }

    .mobile-card-brand strong[b-59nnq813mq] {
        font-size: 1.35rem !important;
        font-weight: 800 !important;
        color: var(--text-main) !important;
        letter-spacing: -0.5px !important;
        background: linear-gradient(135deg, #1e293b 0%, #475569 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }

    .mobile-card-brand .mobile-tagline[b-59nnq813mq] {
        font-size: 0.725rem !important;
        color: var(--text-muted) !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }

    .login-card[b-59nnq813mq] {
        width: 100% !important;
        max-width: 320px !important;
        /* Reduced, extremely snug size */
        height: auto !important;
        max-height: 88vh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.85) !important;
        /* glass look */
        backdrop-filter: blur(25px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25), 0 0 30px -5px rgba(99, 102, 241, 0.15) !important;
        margin: 0 !important;
        /* lets wrapper flex center it */
    }

    .login-left[b-59nnq813mq] {
        display: none !important;
    }

    .login-right[b-59nnq813mq] {
        padding: 1.75rem 1.25rem !important;
        /* snug high-density padding */
        background-color: transparent !important;
    }

    .login-right h2[b-59nnq813mq] {
        display: none !important;
        /* Hide redundant Log In header */
    }

    .login-right .login-subtitle[b-59nnq813mq] {
        display: none !important;
        /* Hide subtitle to preserve space */
    }

    .input-group[b-59nnq813mq] {
        margin-bottom: 1.25rem !important;
    }

    .input-group[b-59nnq813mq]  input,
    .input-group input[b-59nnq813mq] {
        padding: 6px 0 !important;
        font-size: 0.95rem !important;
        background: transparent !important;
    }

    .input-group label[b-59nnq813mq] {
        top: 6px !important;
        font-size: 0.9rem !important;
    }

    .input-group[b-59nnq813mq]  input:focus~label,
    .input-group[b-59nnq813mq]  input:not(:placeholder-shown)~label,
    .input-group[b-59nnq813mq]  input:autofill~label,
    .input-group[b-59nnq813mq]  input:-webkit-autofill~label,
    .input-group input:focus~label[b-59nnq813mq],
    .input-group input:not(:placeholder-shown)~label[b-59nnq813mq],
    .input-group input:autofill~label[b-59nnq813mq],
    .input-group input:-webkit-autofill~label[b-59nnq813mq] {
        top: -16px !important;
        font-size: 0.75rem !important;
    }

    /* Override browser default autofill backgrounds to keep them transparent */
    .input-group[b-59nnq813mq]  input:-webkit-autofill,
    .input-group[b-59nnq813mq]  input:-webkit-autofill:hover,
    .input-group[b-59nnq813mq]  input:-webkit-autofill:focus,
    .input-group[b-59nnq813mq]  input:-webkit-autofill:active,
    .input-group input:-webkit-autofill[b-59nnq813mq],
    .input-group input:-webkit-autofill:hover[b-59nnq813mq],
    .input-group input:-webkit-autofill:focus[b-59nnq813mq],
    .input-group input:-webkit-autofill:active[b-59nnq813mq] {
        -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
        box-shadow: 0 0 0 1000px transparent inset !important;
        -webkit-text-fill-color: var(--text-main) !important;
        transition: background-color 600000s ease-in-out 0s !important;
    }

    .login-btn[b-59nnq813mq] {
        padding: 11px !important;
        font-size: 0.925rem !important;
        margin-top: 4px !important;
        border-radius: 8px !important;
    }
}

@media (max-width: 599.98px) {
    .login-card[b-59nnq813mq] {
        max-width: 290px !important;
        /* ultra snug for small phones */
        border-radius: 16px !important;
    }

    .login-right[b-59nnq813mq] {
        padding: 1.5rem 1rem !important;
    }

    .mobile-card-brand[b-59nnq813mq] {
        margin-bottom: 1.25rem !important;
    }

    .mobile-card-brand .brand-logo[b-59nnq813mq] {
        width: 32px !important;
        height: 32px !important;
    }

    .mobile-card-brand strong[b-59nnq813mq] {
        font-size: 1.25rem !important;
    }
}

@media (max-height: 650px) {
    .login-card[b-59nnq813mq] {
        max-height: 95vh !important;
    }

    .login-right[b-59nnq813mq] {
        padding: 1.25rem 1rem !important;
    }

    .mobile-card-brand[b-59nnq813mq] {
        margin-bottom: 1rem !important;
    }

    .input-group[b-59nnq813mq] {
        margin-bottom: 1rem !important;
    }
}
/* /Components/Pages/Modules/UserModules.razor.rz.scp.css */
.col-id[b-iqv2mj2nj5] { width: 80px !important; }
.col-icon[b-iqv2mj2nj5] { width: 80px !important; }
.col-name[b-iqv2mj2nj5] { min-width: 200px !important; }
.col-parent[b-iqv2mj2nj5] { min-width: 250px !important; }
.col-url[b-iqv2mj2nj5] { min-width: 220px !important; }
.col-seq[b-iqv2mj2nj5] { width: 100px !important; }
.col-actions[b-iqv2mj2nj5] { width: 140px !important; }

.row-icon-preview[b-iqv2mj2nj5] {
    vertical-align: middle;
    color: #94a3b8;
}

.user-modules-container[b-iqv2mj2nj5] {
    padding: 2rem;
    min-height: calc(100vh - 64px);
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.05), transparent),
                radial-gradient(circle at bottom left, rgba(168, 85, 247, 0.05), transparent);
}

.mobile-label[b-iqv2mj2nj5] {
    display: none !important;
}

.glass-panel[b-iqv2mj2nj5] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.panel-header[b-iqv2mj2nj5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    gap: 2rem;
    flex-wrap: wrap;
}

.header-content[b-iqv2mj2nj5] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.icon-box[b-iqv2mj2nj5] {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    padding: 1rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);
}

.header-icon[b-iqv2mj2nj5] {
    color: white !important;
}

.panel-title[b-iqv2mj2nj5] {
    color: white;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.025em;
}

.panel-subtitle[b-iqv2mj2nj5] {
    color: #94a3b8;
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
}

.header-actions[b-iqv2mj2nj5] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.search-bar[b-iqv2mj2nj5] {
    width: 300px;
}

.search-bar :deep(.mud-input-outlined-border)[b-iqv2mj2nj5] {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.search-bar :deep(.mud-input-root)[b-iqv2mj2nj5] {
    color: #cbd5e1 !important;
    background: rgba(255, 255, 255, 0.03);
}

.add-btn[b-iqv2mj2nj5] {
    border-radius: 12px;
    text-transform: none;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    background: linear-gradient(135deg, #6366f1, #a855f7) !important;
}

/* Table Styles */
.modern-table[b-iqv2mj2nj5] {
    background: transparent !important;
    color: #e2e8f0 !important;
}

.modern-table :deep(thead)[b-iqv2mj2nj5] {
    background: rgba(255, 255, 255, 0.03);
}

.modern-table :deep(th)[b-iqv2mj2nj5] {
    color: #94a3b8 !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 1rem !important;
}

.modern-table :deep(td)[b-iqv2mj2nj5] {
    padding: 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    color: #cbd5e1 !important;
}

.modern-table :deep(.mud-table-row:hover)[b-iqv2mj2nj5] {
    background: rgba(255, 255, 255, 0.02) !important;
}

.table-layout-wrapper[b-iqv2mj2nj5] {
    overflow-x: auto;
    max-width: 100%;
}

/* Custom Scrollbar for the table */
.modern-table :deep(.mud-table-container)[b-iqv2mj2nj5]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.modern-table :deep(.mud-table-container)[b-iqv2mj2nj5]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 3px;
}

.modern-table :deep(.mud-table-container)[b-iqv2mj2nj5]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    border-radius: 3px;
}

.modern-table :deep(.mud-table-container)[b-iqv2mj2nj5]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #4f46e5, #9333ea);
}


.user-name[b-iqv2mj2nj5] {
    font-weight: 600;
    color: white;
}

.username-chip[b-iqv2mj2nj5] {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
    font-family: 'JetBrains Mono', monospace;
}

.id-pill[b-iqv2mj2nj5] {
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: 'JetBrains Mono', monospace;
}

.delete-btn[b-iqv2mj2nj5] {
    color: rgba(239, 68, 68, 0.7) !important;
    transition: all 0.3s;
}

.delete-btn:hover[b-iqv2mj2nj5] {
    color: #ef4444 !important;
    transform: rotate(15deg) scale(1.2);
    background: rgba(239, 68, 68, 0.1) !important;
}

/* Edit State */
.edit-input :deep(.mud-input-outlined-border)[b-iqv2mj2nj5] {
    border-color: rgba(99, 102, 241, 0.3) !important;
}

.edit-input :deep(.mud-input-root)[b-iqv2mj2nj5] {
    background: rgba(15, 23, 42, 0.4);
}

@media (max-width: 1023.98px) {
    /* Transform Table to Native List Card Layout on Mobile and Tablet */
    [b-iqv2mj2nj5] .modern-table table {
        min-width: unset !important;
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }

    [b-iqv2mj2nj5] .modern-table .mud-table-container {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        flex: 1 !important;
    }

    [b-iqv2mj2nj5] .modern-table thead {
        display: none !important; /* Hide column headers */
    }

    [b-iqv2mj2nj5] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }

    [b-iqv2mj2nj5] .modern-table tbody tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        gap: 12px !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01), inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
        margin-bottom: 12px !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        will-change: transform !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }

    [b-iqv2mj2nj5] .modern-table tbody tr::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(37, 99, 235, 0.03) !important;
        opacity: 0 !important;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    [b-iqv2mj2nj5] .modern-table tbody tr:hover::after {
        opacity: 1 !important;
    }

    [b-iqv2mj2nj5] .modern-table tbody tr:hover {
        transform: translateY(-2px) !important;
        border-color: var(--primary-300, #93c5fd) !important;
    }

    [b-iqv2mj2nj5] .modern-table tbody tr:active {
        transform: translateY(0) scale(0.98) !important;
        transition-duration: 0.1s !important;
    }

    [b-iqv2mj2nj5] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        grid-column: 1 / -1 !important; /* Default full span */
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Header Row Elements Placement */
    [b-iqv2mj2nj5] .modern-table tr .col-id {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    [b-iqv2mj2nj5] .modern-table tr .col-seq {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    [b-iqv2mj2nj5] .modern-table tr .col-actions {
        grid-column: 4 !important;
        grid-row: 1 !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin-left: auto !important;
    }

    /* Cards Detail Columns */
    [b-iqv2mj2nj5] .modern-table tr .col-name {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding-top: 10px !important;
        padding-bottom: 6px !important;
        border-top: 1px solid rgba(226, 232, 240, 0.4) !important;
    }

    [b-iqv2mj2nj5] .modern-table tr .col-parent {
        grid-column: 1 / 3 !important;
        grid-row: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        width: auto !important;
    }

    [b-iqv2mj2nj5] .modern-table tr .col-url {
        grid-column: 3 / -1 !important;
        grid-row: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        margin-left: 12px !important;
        width: auto !important;
    }

    /* Text & badge sizes */
    .module-name-text[b-iqv2mj2nj5] {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--slate-800, #1e293b) !important;
        letter-spacing: -0.01em !important;
    }

    .parent-pill[b-iqv2mj2nj5] {
        background: rgba(37, 99, 235, 0.08) !important;
        color: var(--primary-600, #2563eb) !important;
        padding: 4px 10px !important;
        border-radius: 8px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
    }

    .seq-pill[b-iqv2mj2nj5] {
        background: rgba(16, 185, 129, 0.08) !important;
        color: #10b981 !important;
        padding: 4px 10px !important;
        border-radius: 8px !important;
        font-size: 11px !important;
        font-weight: 600;
    }

    /* Mobile labels */
    .mobile-label[b-iqv2mj2nj5] {
        display: inline-block !important;
        font-weight: 700 !important;
        font-size: 0.8rem !important;
        color: var(--slate-500) !important;
        margin-bottom: 6px !important;
        flex-shrink: 0 !important;
    }

    /* Edit fields style */
    [b-iqv2mj2nj5] .modern-table tr .edit-field {
        width: 100% !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        padding: 0px 8px !important;
    }

    [b-iqv2mj2nj5] .modern-table tr .edit-field :deep(.mud-input-outlined-border) {
        border: none !important;
    }

    /* Actions styling */
    [b-iqv2mj2nj5] .modern-table tr .col-actions .mud-stack {
        justify-content: flex-end !important;
        width: 100% !important;
        gap: 8px !important;
    }

    [b-iqv2mj2nj5] .modern-table tr .col-actions .mud-icon-button {
        padding: 6px !important;
        border-radius: 8px !important;
        border: 1px solid rgba(226, 232, 240, 0.8) !important;
        background: #f8fafc !important;
        transition: all 0.2s ease !important;
    }

    [b-iqv2mj2nj5] .modern-table tr .col-actions .mud-icon-button:hover {
        background: var(--slate-100) !important;
    }
}

@media (max-width: 768px) {
    .panel-header[b-iqv2mj2nj5] {
        flex-direction: column;
        align-items: flex-start;
    }
    .search-bar[b-iqv2mj2nj5] {
        width: 100%;
    }
}

@media (max-width: 599.98px) {
    [b-iqv2mj2nj5] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }
    
    [b-iqv2mj2nj5] .control-panel-card .action-btn {
        width: 100% !important;
        display: inline-flex !important;
    }
}
/* /Components/Pages/Relation/Relation.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Relation Master - Scoped Styles
   ══════════════════════════════════════════════════════════ */

/* 1. LAYOUT WRAPPERS */
.header-avatar[b-5z6kh9blxx] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-5z6kh9blxx] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-5z6kh9blxx] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-5z6kh9blxx] {
    align-items: center !important;
}

.search-field-full[b-5z6kh9blxx] {
    width: 100% !important;
}

.table-layout-wrapper[b-5z6kh9blxx] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

/* 2. MODERN TABLE STRUCTURE */
[b-5z6kh9blxx] .modern-table table {
    table-layout: fixed !important;
    width: 100% !important;
}

[b-5z6kh9blxx] .modern-table th {
    background: white !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--slate-600) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--slate-100) !important;
    padding: 10px 16px !important;
}


[b-5z6kh9blxx] .modern-table td {
    border-bottom: 1px solid var(--slate-100) !important;
    padding: 8px 16px !important;
    vertical-align: middle !important;
    font-size: 0.8rem !important;
}

[b-5z6kh9blxx] .modern-table .col-ref {
    width: 90px !important;
}

[b-5z6kh9blxx] .modern-table .col-code {
    width: 120px !important;
}

[b-5z6kh9blxx] .modern-table .col-select {
    width: 80px !important;
}

[b-5z6kh9blxx] .modern-table .col-actions {
    width: 160px !important;
}


/* 3. MULTI-DELETE PILL */
.multi-delete-pill[b-5z6kh9blxx] {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #fff1f2;
    border: 1px solid #fda4af;
    border-radius: 99px;
    padding: 0 6px 0 0;
    height: 32px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.delete-count[b-5z6kh9blxx] {
    color: #ef4444;
    font-weight: 700;
    font-size: 14px;
    user-select: none;
}

.delete-icon-btn[b-5z6kh9blxx] {
    background: transparent !important;
    margin-right: -4px !important;
}

/* 4. IDENTITY & TYPOGRAPHY */
.id-pill[b-5z6kh9blxx] {
    padding: 2px 8px;
    background: var(--slate-100);
    color: var(--slate-500);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.profile-name[b-5z6kh9blxx] {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--slate-900) !important;
}

.employee-profile[b-5z6kh9blxx] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-container[b-5z6kh9blxx] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.full-width[b-5z6kh9blxx] {
    width: 100% !important;
}

/* ── Responsive & Mobile/Tablet Optimizations ── */
@media (max-width: 1023.98px) {
    .header-section > div[b-5z6kh9blxx] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
    }

    [b-5z6kh9blxx] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }

    /* Transform Table to Native List Card Layout on Mobile and Tablet */
    [b-5z6kh9blxx] .modern-table table {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }
    
    [b-5z6kh9blxx] .modern-table thead {
        display: none !important; /* Hide column headers */
    }
    
    [b-5z6kh9blxx] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }
    
    [b-5z6kh9blxx] .modern-table tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas: 
            "id code select"
            "name name name"
            "actions actions actions" !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01), inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
        gap: 12px !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    [b-5z6kh9blxx] .modern-table tr::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(37, 99, 235, 0.03) !important;
        opacity: 0 !important;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    
    [b-5z6kh9blxx] .modern-table tr:hover::after {
        opacity: 1 !important;
    }
    
    [b-5z6kh9blxx] .modern-table tr:hover {
        transform: translateY(-2px) !important;
        border-color: var(--primary-300, #93c5fd) !important;
    }
    
    [b-5z6kh9blxx] .modern-table tr:active {
        transform: translateY(0) scale(0.98) !important;
        transition-duration: 0.1s !important;
    }

    [b-5z6kh9blxx] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Ref ID Badge */
    [b-5z6kh9blxx] .modern-table tr td:nth-child(1) {
        grid-area: id !important;
    }

    [b-5z6kh9blxx] .modern-table tr td:nth-child(1) .id-pill {
        background: rgba(37, 99, 235, 0.08) !important;
        color: var(--primary-600, #2563eb) !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        font-family: var(--font-display), sans-serif !important;
        letter-spacing: 0.02em !important;
    }
    
    /* Relation Code Badge */
    [b-5z6kh9blxx] .modern-table tr td:nth-child(2) {
        grid-area: code !important;
        display: flex !important;
        align-items: center !important;
    }

    [b-5z6kh9blxx] .modern-table tr td:nth-child(2) span {
        background: var(--slate-100) !important;
        color: var(--slate-700) !important;
        padding: 2px 8px !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
        font-size: 0.75rem !important;
    }
    
    /* Relation Profile Container */
    [b-5z6kh9blxx] .modern-table tr td:nth-child(3) {
        grid-area: name !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    [b-5z6kh9blxx] .modern-table tr td:nth-child(3) .profile-avatar {
        width: 36px !important;
        height: 36px !important;
        background: linear-gradient(135deg, var(--primary-400), var(--primary-600)) !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.12) !important;
        border-radius: 50% !important;
    }

    [b-5z6kh9blxx] .modern-table tr td:nth-child(3) .profile-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--slate-800, #1e293b) !important;
        letter-spacing: -0.01em !important;
    }
    
    /* Selection Checkbox */
    [b-5z6kh9blxx] .modern-table tr td:nth-child(4) {
        grid-area: select !important;
        justify-content: flex-end !important;
    }
    
    /* Actions Layout Row */
    [b-5z6kh9blxx] .modern-table tr td:nth-child(5) {
        grid-area: actions !important;
        justify-content: flex-end !important;
        padding-top: 12px !important;
        border-top: 1px dashed rgba(226, 232, 240, 0.8) !important;
        width: 100% !important;
        gap: 8px !important;
    }

    [b-5z6kh9blxx] .modern-table tr td:nth-child(5) .mud-stack {
        justify-content: flex-end !important;
        width: 100% !important;
    }

    /* Pastel styled action buttons */
    [b-5z6kh9blxx] .modern-table tr td:nth-child(5) .action-btn-edit {
        background: rgba(79, 70, 229, 0.06) !important;
        color: #4f46e5 !important;
        border: 1px solid rgba(79, 70, 229, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-5z6kh9blxx] .modern-table tr td:nth-child(5) .action-btn-edit:hover {
        background: #4f46e5 !important;
        color: #ffffff !important;
    }

    [b-5z6kh9blxx] .modern-table tr td:nth-child(5) .action-btn-del {
        background: rgba(239, 68, 68, 0.06) !important;
        color: #ef4444 !important;
        border: 1px solid rgba(239, 68, 68, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-5z6kh9blxx] .modern-table tr td:nth-child(5) .action-btn-del:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
    }

    /* Style checkboxes inside table row */
    [b-5z6kh9blxx] .modern-table tr td .mud-checkbox {
        margin: 0 !important;
        padding: 0 !important;
    }

    .edit-container[b-5z6kh9blxx] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px !important;
    }
}

/* Mobile-Only Stacking and Sizing */
@media (max-width: 599.98px) {
    [b-5z6kh9blxx] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
    }
    
    [b-5z6kh9blxx] .control-panel-card .action-btn,
    [b-5z6kh9blxx] .control-panel-card .mud-button-root {
        width: 100% !important;
        margin: 0 !important;
        display: inline-flex !important;
    }
}

/* ══ 120FPS SMOOTHING & RENDERING OPTIMIZATIONS ══ */
.relation-master-root[b-5z6kh9blxx] {
    content-visibility: auto;
    contain: layout style paint;
}

.header-section[b-5z6kh9blxx],
.control-panel-card[b-5z6kh9blxx],
.table-layout-wrapper[b-5z6kh9blxx] {
    contain: layout style;
}

[b-5z6kh9blxx] .modern-table tbody tr {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══ STAGGERED ENTRANCE ANIMATION ══ */
@keyframes rowEnter-b-5z6kh9blxx {
    from {
        opacity: 0;
        transform: translateZ(0) translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateZ(0) translateY(0) scale(1);
    }
}

[b-5z6kh9blxx] .modern-table tbody tr {
    animation: rowEnter-b-5z6kh9blxx 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[b-5z6kh9blxx] .modern-table tbody tr:nth-child(1) { animation-delay: 0.02s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(2) { animation-delay: 0.04s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(3) { animation-delay: 0.06s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(4) { animation-delay: 0.08s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(5) { animation-delay: 0.10s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(6) { animation-delay: 0.12s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(7) { animation-delay: 0.14s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(8) { animation-delay: 0.16s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(9) { animation-delay: 0.18s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(10) { animation-delay: 0.20s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(11) { animation-delay: 0.22s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(12) { animation-delay: 0.24s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(13) { animation-delay: 0.26s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(14) { animation-delay: 0.28s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(15) { animation-delay: 0.30s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(16) { animation-delay: 0.32s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(17) { animation-delay: 0.34s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(18) { animation-delay: 0.36s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(19) { animation-delay: 0.38s; }
[b-5z6kh9blxx] .modern-table tbody tr:nth-child(20) { animation-delay: 0.40s; }

.mud-checkbox[b-5z6kh9blxx],
.mud-icon-button[b-5z6kh9blxx],
.action-btn[b-5z6kh9blxx] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
    [b-5z6kh9blxx] .modern-table tbody tr {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    [b-5z6kh9blxx] .modern-table tbody tr:hover {
        transform: none !important;
    }
    [b-5z6kh9blxx] .modern-table tbody tr:active {
        transform: none !important;
    }
}
/* /Components/Pages/ReportList/ReportList.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Report List - Scoped Styles (Matching Designation Master)
   ══════════════════════════════════════════════════════════ */

/* 1. LAYOUT WRAPPERS */
.header-avatar[b-6ade4eey56] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-6ade4eey56] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-6ade4eey56] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
    background: white !important;
    border-radius: 12px !important;
    border: 1px solid var(--slate-200) !important;
}

.table-layout-wrapper[b-6ade4eey56] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

/* 2. MODERN TABLE STRUCTURE */
[b-6ade4eey56] .modern-table table {
    table-layout: fixed !important;
    width: 100% !important;
}

[b-6ade4eey56] .modern-table th {
    background: #f8fafc !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: #475569 !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 2px solid #e2e8f0 !important;
    padding: 10px 16px !important;
}

[b-6ade4eey56] .modern-table td {
    padding: 8px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
    font-size: 0.8rem !important;
}

/* 3. IDENTITY & TYPOGRAPHY */
.id-pill[b-6ade4eey56] {
    padding: 2px 8px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.profile-container[b-6ade4eey56] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-avatar[b-6ade4eey56] {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.avatar-small[b-6ade4eey56] {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.profile-name[b-6ade4eey56] {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

[b-6ade4eey56] .modern-table .col-id {
    width: 80px !important;
}

[b-6ade4eey56] .modern-table .col-name {
    width: 350px !important;
}

[b-6ade4eey56] .modern-table .col-desc {
    width: 350px !important;
}

[b-6ade4eey56] .modern-table .col-group {
    width: 120px !important;
}

[b-6ade4eey56] .modern-table .col-type {
    width: 120px !important;
}

.report-desc-text[b-6ade4eey56] {
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.4;
}

.period-badge[b-6ade4eey56] {
    padding: 4px 10px;
    background: #f0f9ff;
    color: #0369a1;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: 1px solid #bae6fd;
}

.type-pill[b-6ade4eey56] {
    padding: 4px 10px;
    background: #f5f3ff;
    color: #6d28d9;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid #ddd6fe;
}

/* 4. ACTIONS & EDITING */
.action-btn-edit[b-6ade4eey56] {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease;
}

.action-btn-edit:hover[b-6ade4eey56] {
    background: #0284c7 !important;
    color: white !important;
}

.action-btn-del[b-6ade4eey56] {
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease;
}

.action-btn-del:hover[b-6ade4eey56] {
    background: #e11d48 !important;
    color: white !important;
}

[b-6ade4eey56] .modern-table .col-numeric {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: #475569;
    width: 80px !important;
    text-align: center !important;
}

.edit-input[b-6ade4eey56] {
    background: white !important;
}

[b-6ade4eey56] .mud-input-outlined-border {
    border-color: #e2e8f0 !important;
}

[b-6ade4eey56] .mud-input-focus .mud-input-outlined-border {
    border-color: #3b82f6 !important;
    border-width: 2px !important;
}

.mobile-label[b-6ade4eey56] {
    display: none;
}

@media (max-width: 1023.98px) {

    /* Transform Table to Native List Card Layout on Mobile and Tablet */
    [b-6ade4eey56] .modern-table table {
        min-width: unset !important;
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }

    [b-6ade4eey56] .modern-table .mud-table-container {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        flex: 1 !important;
        height: auto !important;
    }

    [b-6ade4eey56] .modern-table thead {
        display: none !important;
        /* Hide column headers */
    }

    [b-6ade4eey56] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 4px !important;
        background: transparent !important;
    }

    [b-6ade4eey56] .modern-table tbody tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 12px !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01) !important;
        margin-bottom: 8px !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        will-change: transform !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }

    [b-6ade4eey56] .modern-table tbody tr:hover {
        transform: translateY(-2px) !important;
        border-color: #3b82f6 !important;
        box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    }

    [b-6ade4eey56] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        grid-column: 1 / -1 !important;
        /* Default full span */
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Row 1 Positioning */
    [b-6ade4eey56] .modern-table tr .col-id {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
    }

    [b-6ade4eey56] .modern-table tr .col-name {
        grid-column: 2 / 5 !important;
        grid-row: 1 !important;
        width: auto !important;
        justify-content: flex-start !important;
    }

    [b-6ade4eey56] .modern-table tr .col-actions {
        grid-column: 5 !important;
        grid-row: 1 !important;
        width: auto !important;
        justify-content: flex-end !important;
        margin-left: auto !important;
    }

    /* Row 2 Positioning (Description) */
    [b-6ade4eey56] .modern-table tr .col-desc {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        padding: 6px 0 !important;
        border-top: 1px solid rgba(226, 232, 240, 0.4) !important;
        display: block !important;
    }

    /* Row 3 Positioning (Group & Type) */
    [b-6ade4eey56] .modern-table tr .col-group {
        grid-column: 1 / 3 !important;
        grid-row: 3 !important;
        justify-content: flex-start !important;
        padding-bottom: 6px !important;
    }

    [b-6ade4eey56] .modern-table tr .col-type {
        grid-column: 3 / -1 !important;
        grid-row: 3 !important;
        justify-content: flex-start !important;
        padding-bottom: 6px !important;
        margin-left: 8px !important;
    }

    /* Row 4 Positioning (Offsets) */
    [b-6ade4eey56] .modern-table tr .col-rowoffset {
        grid-column: 1 !important;
        grid-row: 4 !important;
    }

    [b-6ade4eey56] .modern-table tr .col-coloffset {
        grid-column: 2 !important;
        grid-row: 4 !important;
    }

    [b-6ade4eey56] .modern-table tr .col-columns {
        grid-column: 3 !important;
        grid-row: 4 !important;
    }

    [b-6ade4eey56] .modern-table tr .col-seq {
        grid-column: 4 !important;
        grid-row: 4 !important;
    }

    [b-6ade4eey56] .modern-table tr .col-header {
        grid-column: 5 !important;
        grid-row: 4 !important;
    }

    /* Config Offset Cells Styling */
    [b-6ade4eey56] .modern-table tr .col-rowoffset,
    [b-6ade4eey56] .modern-table tr .col-coloffset,
    [b-6ade4eey56] .modern-table tr .col-columns,
    [b-6ade4eey56] .modern-table tr .col-seq,
    [b-6ade4eey56] .modern-table tr .col-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        padding: 6px 4px !important;
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
    }

    .mobile-label[b-6ade4eey56] {
        display: block !important;
        font-size: 0.65rem !important;
        color: #64748b !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        margin-bottom: 2px !important;
    }

    /* ── Mobile Pagination: single-line, no scroll ── */

    /* Footer wrapper — kill any overflow */
    [b-6ade4eey56] .modern-table .mud-table-pagination-toolbar,
    [b-6ade4eey56] .modern-table tfoot,
    [b-6ade4eey56] .modern-table tfoot tr,
    [b-6ade4eey56] .modern-table tfoot td {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    [b-6ade4eey56] .modern-table .mud-table-pagination {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 4px 4px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        gap: 4px !important;
    }

    /* Kill the spacer that pushes arrows off-screen */
    [b-6ade4eey56] .modern-table .mud-table-pagination-spacer {
        display: none !important;
        flex: 0 !important;
        width: 0 !important;
    }

    /* Hide "Rows per page:" text */
    [b-6ade4eey56] .modern-table .mud-table-pagination-information {
        display: none !important;
    }

    /* Pagination items — compact */
    [b-6ade4eey56] .modern-table .mud-table-pagination-item {
        margin: 0 !important;
        padding: 0 2px !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    /* Rows-per-page select — small and fixed */
    [b-6ade4eey56] .modern-table .mud-table-pagination .mud-select {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        font-size: 0.75rem !important;
        height: 28px !important;
        flex-shrink: 0 !important;
    }

    [b-6ade4eey56] .modern-table .mud-table-pagination .mud-select .mud-input-slot {
        width: 100% !important;
        text-align: left !important;
        padding-right: 12px !important;
        padding-left: 4px !important;
        text-overflow: clip !important;
        overflow: visible !important;
    }

    [b-6ade4eey56] .modern-table .mud-table-pagination .mud-select .mud-input,
    [b-6ade4eey56] .modern-table .mud-table-pagination .mud-select .mud-input-control {
        width: 100% !important;
    }

    /* Page info text "1-10 of 90" — keep compact */
    [b-6ade4eey56] .modern-table .mud-table-pagination .mud-typography {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    /* Actions container (prev/next buttons) */
    [b-6ade4eey56] .modern-table .mud-table-pagination-actions {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        gap: 0 !important;
    }

    /* Hide first/last page buttons — keep only < and > */
    [b-6ade4eey56] .modern-table .mud-table-pagination-first-button,
    [b-6ade4eey56] .modern-table .mud-table-pagination-last-button,
    [b-6ade4eey56] .modern-table .mud-icon-button.mud-table-pagination-first-button,
    [b-6ade4eey56] .modern-table .mud-icon-button.mud-table-pagination-last-button {
        display: none !important;
    }

    /* Prev / Next arrow buttons */
    [b-6ade4eey56] .modern-table .mud-table-pagination-actions .mud-icon-button {
        width: 30px !important;
        height: 30px !important;
        padding: 3px !important;
        margin: 0 1px !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
    }

    [b-6ade4eey56] .modern-table .mud-table-pagination-actions .mud-icon-button .mud-icon-size-medium {
        font-size: 1rem !important;
    }
}

@media (max-width: 599.98px) {
    .control-panel-card :deep(.align-center)[b-6ade4eey56] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .control-panel-card :deep(.align-center > div)[b-6ade4eey56] {
        max-width: 100% !important;
        width: 100% !important;
    }
}
/* /Components/Pages/ReportMaster/ReportMaster.razor.rz.scp.css */
.report-master-root[b-we9wzbunjk] {
    padding: 1rem 1.25rem;
    background-color: #f8fafc;
    height: calc(100vh - 80px) !important;
    max-height: calc(100vh - 80px) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Header Section */
.header-section[b-we9wzbunjk] {
    margin-bottom: 1rem;
    max-width: 100%;
    overflow-x: hidden;
}

.header-avatar[b-we9wzbunjk] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    width: 32px !important;
    height: 32px !important;
}

.header-title[b-we9wzbunjk] {
    font-weight: 800;
    font-size: 1.1rem !important;
    color: #0f172a;
}

/* Ultra-Compact Filter Bar */
.pro-filter-bar[b-we9wzbunjk] {
    display: flex;
    flex-direction: column;
    padding: 0.4rem 0.75rem;
    gap: 0.5rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    width: 100% !important;
    max-width: 100% !important;
    max-height: 200px;
    overflow: hidden;
}

.pro-dynamic-filters-scroll[b-we9wzbunjk] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.pro-dynamic-filters-scroll[b-we9wzbunjk]::-webkit-scrollbar {
    width: 4px;
}

.pro-dynamic-filters-scroll[b-we9wzbunjk]::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

.pro-dynamic-filters[b-we9wzbunjk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pro-filter-item[b-we9wzbunjk] {
    min-width: 160px;
    max-width: 280px;
    flex: 1 1 auto;
}

.pro-category-section[b-we9wzbunjk] {
    display: none !important;
}

.filter-input[b-we9wzbunjk] {
    background: #ffffff !important;
}

[b-we9wzbunjk] .filter-input .mud-input-outlined-border {
    border-color: #cbd5e1 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

[b-we9wzbunjk] .filter-input:hover .mud-input-outlined-border {
    border-color: #94a3b8 !important;
}

[b-we9wzbunjk] .filter-input.mud-input-focus .mud-input-outlined-border,
[b-we9wzbunjk] .filter-input:focus-within .mud-input-outlined-border {
    border-color: var(--color-brand, #3b82f6) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08) !important;
}

.pro-format-section[b-we9wzbunjk] {
    flex-shrink: 0;
    min-width: 160px;
}

.compact-picker[b-we9wzbunjk] {
    width: 130px;
}

/* Category Tabs - iOS Premium Segment Control Style (Desktop Layout) */
.category-navigation-strip[b-we9wzbunjk] {
    padding: 2px 0;
    margin-top: 14px;
    margin-bottom: 1.5rem;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
    min-height: 54px;
}

.category-navigation-strip.grabbing[b-we9wzbunjk] {
    cursor: grabbing;
}

.category-navigation-strip[b-we9wzbunjk]::-webkit-scrollbar {
    display: none;
}

.pro-tab-group[b-we9wzbunjk] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    /* Force single line, no wrapping */
    gap: 6px !important;
    background-color: #f1f5f9 !important;
    /* Soft grey container background */
    padding: 5px !important;
    border-radius: 12px !important;
    width: max-content !important;
    /* Fit content size */
    min-width: min-content !important;
}

.pro-tab-btn[b-we9wzbunjk] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 18px !important;
    /* Premium and comfortable padding for desktop */
    background-color: transparent !important;
    border: none !important;
    border-radius: 10px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 0.825rem !important;
    /* Highly readable font size */
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap !important;
    /* Prevent text wrapping */
    flex-shrink: 0 !important;
    /* Never squish */
    min-width: 100px !important;
}

.pro-tab-btn:hover[b-we9wzbunjk] {
    color: #0f172a !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
}

.pro-tab-btn.active[b-we9wzbunjk] {
    background-color: #ffffff !important;
    /* Pops out with white bg */
    color: var(--color-brand, #3b82f6) !important;
    /* Active blue color */
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05), 0 2px 4px rgba(15, 23, 42, 0.02) !important;
    font-weight: 700 !important;
}

.pro-tab-btn[b-we9wzbunjk]  .mud-icon-root {
    font-size: 1.05rem !important;
    color: inherit !important;
    /* Follow button text color */
}

/* Report Micro Grid - Maximum Density */
.reports-main-scrollable[b-we9wzbunjk] {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-width: 100%;
    padding-bottom: 1rem;
}

.report-micro-grid[b-we9wzbunjk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    padding: 2px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.report-group-container[b-we9wzbunjk] {
    padding: 0;
    margin-bottom: 12px;
}

/* 3D Micro Action Button - High Fidelity Edition */
.micro-report-action[b-we9wzbunjk] {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    height: auto;
    padding: 6px 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #cbd5e1;
    border-bottom: 3.5px solid #94a3b8;
    border-radius: 8px;
    padding: 0 12px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

/* Reflective Gloss Effect */
.micro-report-action[b-we9wzbunjk]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

.micro-report-action:hover[b-we9wzbunjk] {
    transform: translateY(-3px) scale(1.02);
    background: #ffffff;
    border-color: #3b82f6;
    border-bottom-color: #2563eb;
    box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.micro-report-action:active[b-we9wzbunjk] {
    transform: translateY(2px) scale(0.98);
    border-bottom-width: 1px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.micro-icon[b-we9wzbunjk] {
    color: #64748b;
    font-size: 1.1rem !important;
    transition: all 0.2s;
    z-index: 2;
}

.micro-report-action:hover .micro-icon[b-we9wzbunjk] {
    color: #2563eb;
    transform: scale(1.15) rotate(5deg);
}

.micro-text-content[b-we9wzbunjk] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 4px;
}

.micro-name[b-we9wzbunjk] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e293b;
    white-space: normal !important;
    line-height: 1.2;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.micro-download-icon[b-we9wzbunjk] {
    color: #3b82f6;
    opacity: 0.4;
    /* Slightly visible always to show functionality */
    transition: all 0.2s;
    font-size: 0.95rem !important;
    z-index: 2;
}

.micro-report-action:hover .micro-download-icon[b-we9wzbunjk] {
    opacity: 1;
    transform: scale(1.2) translateY(-1px);
    color: #2563eb;
}

/* Empty State Compact */
.pro-empty-state-compact[b-we9wzbunjk] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px dashed #e2e8f0;
    color: #94a3b8;
}

/* Scrollbar */
.reports-main-scrollable[b-we9wzbunjk]::-webkit-scrollbar {
    width: 4px;
}

.reports-main-scrollable[b-we9wzbunjk]::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

/* Fluid scaling handled by grid-template-columns auto-fill auto-fit */

@media (max-width: 1023.98px) {
    .pro-category-section[b-we9wzbunjk] {
        display: none !important;
    }

    /* Mobile / Tablet Report Action Card overrides */
    .micro-report-action[b-we9wzbunjk] {
        height: 46px !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.8) !important;
        border-left: 4px solid var(--slate-400, #94a3b8) !important;
        border-radius: 10px !important;
        padding: 0 16px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
        transform: none !important;
    }

    .micro-report-action[b-we9wzbunjk]::before {
        display: none !important;
        /* Hide reflective 3D gloss */
    }

    /* Category Accent Borders for mobile/tablet */
    .micro-report-action.group-salary[b-we9wzbunjk] {
        border-left: 4px solid var(--success-500, #22c55e) !important;
    }

    .micro-report-action.group-master[b-we9wzbunjk] {
        border-left: 4px solid var(--purple-500, #a855f7) !important;
    }

    .micro-report-action.group-letters[b-we9wzbunjk] {
        border-left: 4px solid var(--warning-500, #f59e0b) !important;
    }

    .micro-report-action.group-other[b-we9wzbunjk] {
        border-left: 4px solid var(--slate-400, #94a3b8) !important;
    }

    .micro-report-action:hover[b-we9wzbunjk] {
        transform: translateY(-2px) scale(1.01) !important;
        background: #f8fafc !important;
        border-color: rgba(59, 130, 246, 0.2) !important;
        box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.06), 0 4px 6px -2px rgba(15, 23, 42, 0.02) !important;
    }

    .micro-report-action:active[b-we9wzbunjk] {
        transform: translateY(0) scale(0.99) !important;
        background: #f1f5f9 !important;
    }

    .micro-text-content[b-we9wzbunjk] {
        padding-left: 8px !important;
        text-align: left !important;
    }

    .micro-name[b-we9wzbunjk] {
        font-size: 0.85rem !important;
        color: var(--slate-800, #1e293b) !important;
    }

    .micro-download-icon[b-we9wzbunjk] {
        color: #cbd5e1 !important;
        opacity: 0.6 !important;
    }

    .micro-report-action:hover .micro-download-icon[b-we9wzbunjk] {
        opacity: 1 !important;
        transform: scale(1.15) !important;
        color: var(--color-brand, #3b82f6) !important;
    }
}

@media (max-width: 600px) {
    .report-micro-grid[b-we9wzbunjk] {
        grid-template-columns: 1fr;
    }

    .pro-filter-bar[b-we9wzbunjk] {
        max-height: 260px;
    }

    .pro-format-section[b-we9wzbunjk]  .compact-select {
        width: 100% !important;
    }
}
/* /Components/Pages/ReportTypes/ReportTypes.razor.rz.scp.css */
.col-id[b-b4m94b5phf] { width: 80px !important; }
.col-name[b-b4m94b5phf] { min-width: 220px !important; }
.col-major[b-b4m94b5phf] { min-width: 180px !important; }
.col-status-header[b-b4m94b5phf], .col-status[b-b4m94b5phf] { width: 120px !important; }
.col-lock-header[b-b4m94b5phf], .col-lock[b-b4m94b5phf] { width: 80px !important; }
.col-actions[b-b4m94b5phf] { width: 140px !important; }

.report-types-root[b-b4m94b5phf] {
    padding: 2rem;
    min-height: calc(100vh - 64px);
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.05), transparent),
                radial-gradient(circle at bottom left, rgba(168, 85, 247, 0.05), transparent);
}

.modern-table[b-b4m94b5phf] {
    background: transparent !important;
    color: #e2e8f0 !important;
    width: 100% !important;
}

.modern-table :deep(thead)[b-b4m94b5phf] {
    background: rgba(255, 255, 255, 0.03);
}

.modern-table :deep(th)[b-b4m94b5phf] {
    color: #94a3b8 !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 1rem !important;
}

.modern-table :deep(td)[b-b4m94b5phf] {
    padding: 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    color: #cbd5e1 !important;
}

.modern-table :deep(.mud-table-row:hover)[b-b4m94b5phf] {
    background: rgba(255, 255, 255, 0.02) !important;
}

.table-layout-wrapper[b-b4m94b5phf] {
    overflow-x: auto;
    max-width: 100%;
}

.id-pill[b-b4m94b5phf] {
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: 'JetBrains Mono', monospace;
}

.status-pill[b-b4m94b5phf] {
    font-size: 0.8rem;
    font-weight: 600;
}

.status-active[b-b4m94b5phf] {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
}

.status-inactive[b-b4m94b5phf] {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
}

.delete-btn[b-b4m94b5phf] {
    color: rgba(239, 68, 68, 0.7) !important;
    transition: all 0.3s;
}

.delete-btn:hover[b-b4m94b5phf] {
    color: #ef4444 !important;
    transform: rotate(15deg) scale(1.2);
    background: rgba(239, 68, 68, 0.1) !important;
}

.edit-field :deep(.mud-input-outlined-border)[b-b4m94b5phf] {
    border-color: rgba(99, 102, 241, 0.3) !important;
}

.edit-field :deep(.mud-input-root)[b-b4m94b5phf] {
    background: rgba(15, 23, 42, 0.4);
}
/* /Components/Pages/SiteMaster/SiteMasterEdit.razor.rz.scp.css */
.header-avatar[b-r1ewecpqsn] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-r1ewecpqsn] {
    color: white !important;
    font-size: 22px !important;
}

.btn-success-outline[b-r1ewecpqsn] {
    border-color: #10b981 !important;
    color: #10b981 !important;
}

[b-r1ewecpqsn] .mud-autocomplete button.mud-icon-button {
    display: none !important;
}

[b-r1ewecpqsn] .mud-autocomplete .mud-input-adornment-end button.mud-icon-button {
    display: inline-flex !important;
}

@media (max-width: 767.98px) {
    .header-section[b-r1ewecpqsn] {
        border-radius: 0 !important;
        margin-bottom: 0 !important;
        padding: var(--space-3) !important;
    }

    .header-section > div[b-r1ewecpqsn] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .progress-mini[b-r1ewecpqsn] {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
        padding: 8px 12px !important;
    }

    .form-container[b-r1ewecpqsn] {
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    [b-r1ewecpqsn] .mud-input {
        font-size: 15px !important;
    }

    [b-r1ewecpqsn] .mud-input-label {
        font-size: 13px !important;
    }

    [b-r1ewecpqsn] .mud-grid-item[class*="sm-"],
    [b-r1ewecpqsn] .mud-grid-item[class*="md-"] {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    [b-r1ewecpqsn] .mud-tab {
        min-height: 44px !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    [b-r1ewecpqsn] .scrolling-content-container {
        padding: 12px 12px 100px 12px !important;
    }

    [b-r1ewecpqsn] .scroll-section .section-title {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }

    .fixed-footer[b-r1ewecpqsn] {
        border-radius: 0 !important;
        padding: 12px 16px !important;
        background: #ffffff !important;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.05) !important;
    }

    .fixed-footer .footer-step[b-r1ewecpqsn] {
        display: none !important;
    }

    .fixed-footer .footer-buttons[b-r1ewecpqsn] {
        width: 100% !important;
    }

    [b-r1ewecpqsn] .btn-next,
    [b-r1ewecpqsn] .btn-prev,
    [b-r1ewecpqsn] .btn-submit {
        min-height: 40px !important;
        font-size: 14px !important;
    }
}
/* /Components/Pages/SiteMaster/SiteMasterList.razor.rz.scp.css */
.header-avatar[b-19f55jlpye] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-19f55jlpye] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-19f55jlpye] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-19f55jlpye] {
    align-items: center !important;
}

.search-field-full[b-19f55jlpye] {
    width: 100% !important;
}

.table-layout-wrapper[b-19f55jlpye] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

[b-19f55jlpye] .modern-table {
    margin-bottom: 24px;
    table-layout: fixed !important;
}

[b-19f55jlpye] .modern-table .mud-table-container {
    overflow-y: auto !important;
    height: 380px !important;
}

[b-19f55jlpye] .modern-table .mud-table-root {
    table-layout: fixed !important;
}

[b-19f55jlpye] .modern-table .col-id {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
}

[b-19f55jlpye] .modern-table .col-name {
    width: 28% !important;
    min-width: 140px !important;
}

[b-19f55jlpye] .modern-table .col-pgn {
    width: 14% !important;
    min-width: 100px !important;
}

[b-19f55jlpye] .modern-table .col-address {
    width: auto !important;
    min-width: 160px !important;
}

[b-19f55jlpye] .modern-table .col-actions {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
}

[b-19f55jlpye] .modern-table th.col-actions {
    text-align: right !important;
}

[b-19f55jlpye] .modern-table th.col-actions .mud-table-sort-label {
    justify-content: flex-end !important;
}

[b-19f55jlpye] .modern-table td.col-actions {
    text-align: center !important;
}

.modern-pager[b-19f55jlpye] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.jump-to-container[b-19f55jlpye] {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(0, 0, 0, 0.04) !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

.jump-label[b-19f55jlpye] {
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.jump-input-wrapper[b-19f55jlpye] {
    width: 36px !important;
    flex-shrink: 0 !important;
}

.jump-field[b-19f55jlpye] {
    margin-top: 0 !important;
}

.jump-field[b-19f55jlpye]  .mud-input {
    font-size: 11px !important;
    height: 20px !important;
}

.jump-field[b-19f55jlpye]  input {
    text-align: center !important;
    font-weight: 700 !important;
    padding: 0 !important;
}

.jump-btn[b-19f55jlpye] {
    padding: 1px !important;
    width: 22px !important;
    height: 22px !important;
}

.jump-btn[b-19f55jlpye]  .mud-icon-root {
    font-size: 16px !important;
}

/* ══════════════════════════════════════════════════════════
   Mobile & Tablet Responsive Table Transformations
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1023.98px) {
    .header-section > div[b-19f55jlpye] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
        gap: 12px !important;
    }

    [b-19f55jlpye] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }

    [b-19f55jlpye] .stat-chip {
        display: none !important;
    }

    [b-19f55jlpye] .mud-table-smalldevices-sortselect {
        display: none !important;
    }

    [b-19f55jlpye] .modern-table table {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }
    
    [b-19f55jlpye] .modern-table thead {
        display: none !important;
    }
    
    [b-19f55jlpye] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }
    
    [b-19f55jlpye] .modern-table tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas: 
            "id actions"
            "name name"
            "pgn address" !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 14px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
        gap: 10px !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    
    [b-19f55jlpye] .modern-table tr:hover {
        transform: translateY(-2px) !important;
        border-color: #3b82f6 !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    }

    [b-19f55jlpye] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    [b-19f55jlpye] .modern-table td::before {
        display: none !important;
    }

    [b-19f55jlpye] .modern-table tr td.col-id {
        grid-area: id !important;
        justify-content: flex-start !important;
    }

    [b-19f55jlpye] .modern-table tr td.col-id .id-pill {
        background: rgba(37, 99, 235, 0.08) !important;
        color: #2563eb !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
    }
    
    [b-19f55jlpye] .modern-table tr td.col-name {
        grid-area: name !important;
    }

    [b-19f55jlpye] .modern-table tr td.col-name .profile-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
    }

    [b-19f55jlpye] .modern-table tr td.col-pgn {
        grid-area: pgn !important;
    }

    [b-19f55jlpye] .modern-table tr td.col-pgn::before {
        content: "PGN: " !important;
        display: inline-block !important;
        font-weight: 600 !important;
        color: #94a3b8 !important;
        margin-right: 8px !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        flex-shrink: 0 !important;
    }

    [b-19f55jlpye] .modern-table tr td.col-pgn .role-badge {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #475569 !important;
    }

    [b-19f55jlpye] .modern-table tr td.col-address {
        grid-area: address !important;
        justify-content: flex-end !important;
    }

    [b-19f55jlpye] .modern-table tr td.col-address::before {
        content: "📍 " !important;
        display: inline-block !important;
        margin-right: 4px !important;
        flex-shrink: 0 !important;
    }

    [b-19f55jlpye] .modern-table tr td.col-address .text-secondary {
        font-size: 12px !important;
        color: #64748b !important;
    }
    
    [b-19f55jlpye] .modern-table tr td.col-actions {
        grid-area: actions !important;
        justify-content: flex-end !important;
        width: 100% !important;
        align-self: start !important;
        justify-self: end !important;
        margin-top: -4px !important;
        margin-right: -6px !important;
    }

    [b-19f55jlpye] .modern-table tr td.col-actions .mud-stack {
        justify-content: flex-end !important;
        width: auto !important;
        gap: 0 !important;
    }

    [b-19f55jlpye] .modern-table tr td.col-actions .mud-icon-button {
        padding: 4px !important;
        width: 32px !important;
        height: 32px !important;
    }

    /* Pagination */
    [b-19f55jlpye] .modern-table .mud-table-footer {
        overflow: hidden !important;
    }

    [b-19f55jlpye] .modern-table .mud-table-container {
        overflow-x: hidden !important;
    }

    [b-19f55jlpye] .modern-table tfoot {
        overflow: hidden !important;
    }

    .modern-pager[b-19f55jlpye] {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 6px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .modern-pager[b-19f55jlpye]  .mud-table-pagination {
        margin-left: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }

    .modern-pager[b-19f55jlpye]  .mud-table-pagination-toolbar {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 2px !important;
        height: 32px !important;
        min-height: 32px !important;
        display: flex !important;
        align-items: center !important;
    }

    .modern-pager[b-19f55jlpye]  .mud-table-pagination-spacer {
        display: none !important;
    }

    .modern-pager[b-19f55jlpye]  .mud-select {
        display: none !important;
    }

    .modern-pager[b-19f55jlpye]  .mud-table-pagination-information {
        font-size: 12px !important;
        margin: 0 4px 0 0 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        color: var(--slate-600) !important;
        font-weight: 500 !important;
    }

    .modern-pager[b-19f55jlpye]  .mud-table-pagination-actions {
        display: flex !important;
        align-items: center !important;
        gap: 0px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .modern-pager[b-19f55jlpye]  .mud-icon-button {
        padding: 4px !important;
        width: 28px !important;
        height: 28px !important;
    }

    .modern-pager[b-19f55jlpye]  .mud-icon-button .mud-icon-root {
        font-size: 18px !important;
    }

    .jump-to-container[b-19f55jlpye] {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        background: var(--slate-100) !important;
        padding: 2px 6px !important;
        border-radius: 6px !important;
        height: 28px !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }

    .jump-label[b-19f55jlpye] {
        font-size: 11px !important;
        color: var(--color-text-muted) !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .jump-input-wrapper[b-19f55jlpye] {
        width: 36px !important;
        flex-shrink: 0 !important;
    }

    .jump-field[b-19f55jlpye] {
        margin-top: 0 !important;
    }

    .jump-field[b-19f55jlpye]  .mud-input {
        font-size: 11px !important;
        height: 20px !important;
    }

    .jump-field[b-19f55jlpye]  input {
        text-align: center !important;
        font-weight: 700 !important;
        padding: 0 !important;
    }

    .jump-btn[b-19f55jlpye] {
        padding: 1px !important;
        width: 22px !important;
        height: 22px !important;
    }

    .jump-btn[b-19f55jlpye]  .mud-icon-root {
        font-size: 16px !important;
    }

    @media (max-width: 500px) {
        .jump-label[b-19f55jlpye] {
            display: none !important;
        }
        .modern-pager[b-19f55jlpye] {
            gap: 4px !important;
            padding: 4px 4px !important;
        }
        .modern-pager[b-19f55jlpye]  .mud-table-pagination-information {
            font-size: 10px !important;
            margin-right: 2px !important;
        }
    }
}

@media (max-width: 599.98px) {
    [b-19f55jlpye] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    [b-19f55jlpye] .control-panel-card .action-btn,
    [b-19f55jlpye] .control-panel-card .mud-button-root {
        width: 100% !important;
    }
}
/* /Components/Pages/Slab/Slab.razor.rz.scp.css */
/* ============================================
   Slab Master CSS - Enhanced & Optimized
   ============================================ */

/* ── Design Tokens ── */
:root[b-w1f2c3iok7] {
    --sm-primary: #3b82f6;
    --sm-primary-light: #eff6ff;
    --sm-primary-dark: #2563eb;
    --sm-border: #e2e8f0;
    --sm-border-strong: #cbd5e1;
    --sm-bg: #ffffff;
    --sm-bg-alt: #f8fafc;
    --sm-text: #1e293b;
    --sm-text-muted: #64748b;
    --sm-text-soft: #475569;
    --sm-radius-sm: 6px;
    --sm-radius: 8px;
    --sm-radius-lg: 12px;
    --sm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --sm-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --sm-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --sm-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --sm-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --sm-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ── Header ── */
.header-avatar[b-w1f2c3iok7] {
    background: rgba(255, 255, 255, 0.18) !important;
    width: 44px !important;
    height: 44px !important;
    backdrop-filter: blur(8px);
    transition: background var(--sm-transition);
}

.header-avatar:hover[b-w1f2c3iok7] {
    background: rgba(255, 255, 255, 0.28) !important;
}

.header-icon[b-w1f2c3iok7] {
    color: #ffffff !important;
    font-size: 22px !important;
}

/* ── Control Panel ── */
.control-panel-card[b-w1f2c3iok7] {
    margin-top: 16px !important;
    padding: 18px 20px !important;
    flex-shrink: 0 !important;
    border: 1px solid var(--sm-border) !important;
    border-radius: var(--sm-radius) !important;
    background: var(--sm-bg) !important;
    box-shadow: var(--sm-shadow-sm);
}

.centered-grid[b-w1f2c3iok7] {
    align-items: center !important;
}

[b-w1f2c3iok7] .col-month { width: 120px; }
[b-w1f2c3iok7] .col-gender { width: 120px; }

.search-field-full[b-w1f2c3iok7] {
    width: 100% !important;
}

/* ── Layout Wrappers ── */
.table-layout-wrapper[b-w1f2c3iok7] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

.slab-tabs-wrapper[b-w1f2c3iok7] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

.category-navigation-strip[b-w1f2c3iok7] {
    padding: 0;
    margin: 0;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    overflow-x: auto !important;
    scrollbar-width: none;
}

.category-navigation-strip[b-w1f2c3iok7]::-webkit-scrollbar {
    display: none;
}

.pro-tab-group[b-w1f2c3iok7] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    background-color: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    width: max-content;
    min-width: min-content;
}

.pro-tab-btn[b-w1f2c3iok7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 16px;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    color: #64748b;
    font-weight: 500;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
    font-family: inherit;
}

.pro-tab-btn:hover[b-w1f2c3iok7] {
    color: #1e293b;
    background-color: rgba(255, 255, 255, 0.55);
}

.pro-tab-btn.active[b-w1f2c3iok7] {
    background-color: #ffffff;
    color: #2563eb;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.03);
}

.pro-tab-btn[b-w1f2c3iok7]  .mud-icon-root {
    font-size: 1rem;
    color: inherit;
}

/* ── Wider Actions column (3 buttons + NovaUpload) ── */
.slab-master-root[b-w1f2c3iok7]  .modern-table .col-actions {
    width: 160px !important;
    min-width: 160px !important;
}

/* Custom scrollbar */
.slab-master-root[b-w1f2c3iok7]  .mud-table-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.slab-master-root[b-w1f2c3iok7]  .mud-table-container::-webkit-scrollbar-track {
    background: var(--sm-bg-alt);
}

.slab-master-root[b-w1f2c3iok7]  .mud-table-container::-webkit-scrollbar-thumb {
    background: var(--sm-border-strong);
    border-radius: 4px;
}

.slab-master-root[b-w1f2c3iok7]  .mud-table-container::-webkit-scrollbar-thumb:hover {
    background: var(--sm-text-muted);
}

[b-w1f2c3iok7] .mud-table-head th {
    background: var(--sm-bg-alt) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--sm-text-soft) !important;
    font-family: var(--sm-font-sans) !important;
    border-bottom: 1px solid var(--sm-border) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

[b-w1f2c3iok7] .mud-table-body td {
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    line-height: 1.4 !important;
    font-family: var(--sm-font-sans) !important;
    color: var(--sm-text) !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

[b-w1f2c3iok7] .mud-table-body tr {
    transition: background var(--sm-transition) !important;
}

[b-w1f2c3iok7] .mud-table-body tr:hover {
    background: var(--sm-bg-alt) !important;
}

/* ── Column Variants ── */
.col-numeric[b-w1f2c3iok7] {
    text-align: right !important;
    font-family: var(--sm-font-mono) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums !important;
}

/* ── Pills & Badges ── */
.id-pill[b-w1f2c3iok7] {
    display: inline-block;
    padding: 3px 9px;
    background: var(--sm-bg-alt);
    color: var(--sm-text-soft);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--sm-font-mono);
    line-height: 1.4;
}

.period-badge[b-w1f2c3iok7] {
    display: inline-block;
    padding: 3px 11px;
    background: var(--sm-primary-light);
    color: var(--sm-primary-dark);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

/* Gender Pills */
.gender-pill[b-w1f2c3iok7] {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
}

.gender-all[b-w1f2c3iok7] {
    background: #f1f5f9;
    color: #475569;
}

.gender-male[b-w1f2c3iok7] {
    background: #e0f2fe;
    color: #0369a1;
}

.gender-female[b-w1f2c3iok7] {
    background: #fce7f3;
    color: #be185d;
}

/* ── Inline Edit ── */
[b-w1f2c3iok7] .edit-input {
    font-size: 0.8125rem !important;
    min-width: 0 !important;
    width: 100% !important;
}

[b-w1f2c3iok7] .edit-input .mud-input-outlined-border {
    border-color: var(--sm-border-strong) !important;
    transition: border-color var(--sm-transition) !important;
}

[b-w1f2c3iok7] .edit-input:hover .mud-input-outlined-border {
    border-color: var(--sm-primary) !important;
}

[b-w1f2c3iok7] .edit-input .mud-input {
    font-size: 0.8125rem !important;
    font-family: var(--sm-font-sans) !important;
}

[b-w1f2c3iok7] .edit-input-narrow {
    max-width: 110px !important;
    min-width: 80px !important;
}

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) {
    *[b-w1f2c3iok7], *[b-w1f2c3iok7]::before, *[b-w1f2c3iok7]::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Specific overrides for select dropdown scrollable popovers */
[b-w1f2c3iok7] .mud-popover:has(.mud-select-list),
[b-w1f2c3iok7] .mud-popover.scrollable-select-popover {
    max-height: 250px !important;
    height: auto !important;
    overflow: hidden !important;
}

[b-w1f2c3iok7] .mud-popover:has(.mud-select-list) .mud-popover-cascading-value,
[b-w1f2c3iok7] .mud-popover.scrollable-select-popover .mud-popover-cascading-value {
    max-height: 250px !important;
    height: auto !important;
    overflow: hidden !important;
}

[b-w1f2c3iok7] .mud-popover:has(.mud-select-list) .mud-paper,
[b-w1f2c3iok7] .mud-popover.scrollable-select-popover .mud-paper {
    max-height: 250px !important;
    height: auto !important;
    overflow: hidden !important;
}

[b-w1f2c3iok7] .mud-popover:has(.mud-select-list) .mud-list,
[b-w1f2c3iok7] .mud-popover.scrollable-select-popover .mud-list {
    max-height: 250px !important;
    height: auto !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    -ms-overflow-style: auto !important;
}

[b-w1f2c3iok7] .mud-popover:has(.mud-select-list) .mud-list::-webkit-scrollbar,
[b-w1f2c3iok7] .mud-popover.scrollable-select-popover .mud-list::-webkit-scrollbar {
    display: block !important;
    width: 6px !important;
}

[b-w1f2c3iok7] .mud-popover:has(.mud-select-list) .mud-list::-webkit-scrollbar-track,
[b-w1f2c3iok7] .mud-popover.scrollable-select-popover .mud-list::-webkit-scrollbar-track {
    background: transparent !important;
}

[b-w1f2c3iok7] .mud-popover:has(.mud-select-list) .mud-list::-webkit-scrollbar-thumb,
[b-w1f2c3iok7] .mud-popover.scrollable-select-popover .mud-list::-webkit-scrollbar-thumb {
    background: var(--sm-border-strong, #cbd5e1) !important;
    border-radius: 3px !important;
}

[b-w1f2c3iok7] .mud-popover:has(.mud-select-list) .mud-list::-webkit-scrollbar-thumb:hover,
[b-w1f2c3iok7] .mud-popover.scrollable-select-popover .mud-list::-webkit-scrollbar-thumb:hover {
    background: var(--sm-text-muted, #64748b) !important;
}
/* /Components/Pages/State/State.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   State Master - Scoped Styles
   ══════════════════════════════════════════════════════════ */

/* 1. LAYOUT WRAPPERS */
.header-avatar[b-ardr3tklh9] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-ardr3tklh9] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-ardr3tklh9] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-ardr3tklh9] {
    align-items: center !important;
}

.search-field-full[b-ardr3tklh9] {
    width: 100% !important;
}

.table-layout-wrapper[b-ardr3tklh9] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

/* 2. MODERN TABLE STRUCTURE */
[b-ardr3tklh9] .modern-table table {
    table-layout: fixed !important;
    width: 100% !important;
}
[b-ardr3tklh9] .modern-table th {
    background: white !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--slate-600) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--slate-100) !important;
    padding: 10px 16px !important;
}

[b-ardr3tklh9] .modern-table td {
    border-bottom: 1px solid var(--slate-100) !important;
    padding: 8px 16px !important;
    vertical-align: middle !important;
    font-size: 0.8rem !important;
}

[b-ardr3tklh9] .modern-table .col-ref {
    width: 90px !important;
}

[b-ardr3tklh9] .modern-table .col-code {
    width: 120px !important;
}

[b-ardr3tklh9] .modern-table .col-select {
    width: 80px !important;
}

[b-ardr3tklh9] .modern-table .col-actions {
    width: 160px !important;
}

/* 3. MULTI-DELETE PILL */
.multi-delete-pill[b-ardr3tklh9] {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #fff1f2;
    border: 1px solid #fda4af;
    border-radius: 99px;
    padding: 0 6px 0 0;
    height: 32px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.delete-count[b-ardr3tklh9] {
    color: #ef4444;
    font-weight: 700;
    font-size: 14px;
    user-select: none;
}

.delete-icon-btn[b-ardr3tklh9] {
    background: transparent !important;
    margin-right: -4px !important;
}

/* 4. IDENTITY & TYPOGRAPHY */
.id-pill[b-ardr3tklh9] {
    padding: 2px 8px;
    background: var(--slate-100);
    color: var(--slate-500);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.profile-name[b-ardr3tklh9] {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--slate-900) !important;
}

.employee-profile[b-ardr3tklh9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-container[b-ardr3tklh9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.max-w-400[b-ardr3tklh9] {
    max-width: 400px !important;
}

/* ── Responsive & Mobile/Tablet Optimizations ── */
@media (max-width: 1023.98px) {
    .header-section > div[b-ardr3tklh9] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
    }

    [b-ardr3tklh9] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }

    /* Transform Table to Native List Card Layout on Mobile and Tablet */
    [b-ardr3tklh9] .modern-table table {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }
    
    [b-ardr3tklh9] .modern-table thead {
        display: none !important; /* Hide column headers */
    }
    
    [b-ardr3tklh9] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }
    
    [b-ardr3tklh9] .modern-table tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas: 
            "id code select"
            "name name name"
            "actions actions actions" !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01), inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
        gap: 12px !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    [b-ardr3tklh9] .modern-table tr::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(37, 99, 235, 0.03) !important;
        opacity: 0 !important;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    
    [b-ardr3tklh9] .modern-table tr:hover::after {
        opacity: 1 !important;
    }
    
    [b-ardr3tklh9] .modern-table tr:hover {
        transform: translateY(-2px) !important;
        border-color: var(--primary-300, #93c5fd) !important;
    }
    
    [b-ardr3tklh9] .modern-table tr:active {
        transform: translateY(0) scale(0.98) !important;
        transition-duration: 0.1s !important;
    }

    [b-ardr3tklh9] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Ref ID Badge */
    [b-ardr3tklh9] .modern-table tr td:nth-child(1) {
        grid-area: id !important;
    }

    [b-ardr3tklh9] .modern-table tr td:nth-child(1) .id-pill {
        background: rgba(37, 99, 235, 0.08) !important;
        color: var(--primary-600, #2563eb) !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        font-family: var(--font-display), sans-serif !important;
        letter-spacing: 0.02em !important;
    }
    
    /* State Code Badge */
    [b-ardr3tklh9] .modern-table tr td:nth-child(2) {
        grid-area: code !important;
        display: flex !important;
        align-items: center !important;
    }

    [b-ardr3tklh9] .modern-table tr td:nth-child(2) span {
        background: var(--slate-100) !important;
        color: var(--slate-700) !important;
        padding: 2px 8px !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
        font-size: 0.75rem !important;
    }
    
    /* State Profile Container */
    [b-ardr3tklh9] .modern-table tr td:nth-child(3) {
        grid-area: name !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    [b-ardr3tklh9] .modern-table tr td:nth-child(3) .profile-avatar {
        width: 36px !important;
        height: 36px !important;
        background: linear-gradient(135deg, var(--primary-400), var(--primary-600)) !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.12) !important;
        border-radius: 50% !important;
    }

    [b-ardr3tklh9] .modern-table tr td:nth-child(3) .profile-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--slate-800, #1e293b) !important;
        letter-spacing: -0.01em !important;
    }
    
    /* Selection Checkbox */
    [b-ardr3tklh9] .modern-table tr td:nth-child(4) {
        grid-area: select !important;
        justify-content: flex-end !important;
    }
    
    /* Actions Layout Row */
    [b-ardr3tklh9] .modern-table tr td:nth-child(5) {
        grid-area: actions !important;
        justify-content: flex-end !important;
        padding-top: 12px !important;
        border-top: 1px dashed rgba(226, 232, 240, 0.8) !important;
        width: 100% !important;
        gap: 8px !important;
    }

    [b-ardr3tklh9] .modern-table tr td:nth-child(5) .mud-stack {
        justify-content: flex-end !important;
        width: 100% !important;
    }

    /* Pastel styled action buttons */
    [b-ardr3tklh9] .modern-table tr td:nth-child(5) .action-btn-edit {
        background: rgba(79, 70, 229, 0.06) !important;
        color: #4f46e5 !important;
        border: 1px solid rgba(79, 70, 229, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-ardr3tklh9] .modern-table tr td:nth-child(5) .action-btn-edit:hover {
        background: #4f46e5 !important;
        color: #ffffff !important;
    }

    [b-ardr3tklh9] .modern-table tr td:nth-child(5) .action-btn-del {
        background: rgba(239, 68, 68, 0.06) !important;
        color: #ef4444 !important;
        border: 1px solid rgba(239, 68, 68, 0.1) !important;
        border-radius: 8px !important;
        padding: 6px !important;
        transition: all 0.2s ease !important;
    }

    [b-ardr3tklh9] .modern-table tr td:nth-child(5) .action-btn-del:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
    }

    /* Style checkboxes inside table row */
    [b-ardr3tklh9] .modern-table tr td .mud-checkbox {
        margin: 0 !important;
        padding: 0 !important;
    }

    .edit-container[b-ardr3tklh9] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px !important;
    }
    
    .max-w-400[b-ardr3tklh9] {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Mobile-Only Stacking and Sizing */
@media (max-width: 599.98px) {
    [b-ardr3tklh9] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
    }
    
    [b-ardr3tklh9] .control-panel-card .action-btn,
    [b-ardr3tklh9] .control-panel-card .mud-button-root {
        width: 100% !important;
        margin: 0 !important;
        display: inline-flex !important;
    }
}

/* ══ 120FPS SMOOTHING & RENDERING OPTIMIZATIONS ══ */
/* GPU-composited animations — zero layout thrash, runs on compositor thread */
.state-master-root[b-ardr3tklh9] {
    content-visibility: auto;
    contain: layout style paint;
}

.header-section[b-ardr3tklh9],
.control-panel-card[b-ardr3tklh9],
.table-layout-wrapper[b-ardr3tklh9] {
    contain: layout style;
}

/* Optimize table rows for compositing */
[b-ardr3tklh9] .modern-table tbody tr {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* GPU-friendly hover — opacity/transform only, no repaints */
[b-ardr3tklh9] .modern-table tbody tr {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══ STAGGERED ENTRANCE ANIMATION ══ */
@keyframes rowEnter-b-ardr3tklh9 {
    from {
        opacity: 0;
        transform: translateZ(0) translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateZ(0) translateY(0) scale(1);
    }
}

[b-ardr3tklh9] .modern-table tbody tr {
    animation: rowEnter-b-ardr3tklh9 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[b-ardr3tklh9] .modern-table tbody tr:nth-child(1) { animation-delay: 0.02s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(2) { animation-delay: 0.04s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(3) { animation-delay: 0.06s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(4) { animation-delay: 0.08s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(5) { animation-delay: 0.10s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(6) { animation-delay: 0.12s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(7) { animation-delay: 0.14s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(8) { animation-delay: 0.16s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(9) { animation-delay: 0.18s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(10) { animation-delay: 0.20s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(11) { animation-delay: 0.22s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(12) { animation-delay: 0.24s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(13) { animation-delay: 0.26s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(14) { animation-delay: 0.28s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(15) { animation-delay: 0.30s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(16) { animation-delay: 0.32s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(17) { animation-delay: 0.34s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(18) { animation-delay: 0.36s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(19) { animation-delay: 0.38s; }
[b-ardr3tklh9] .modern-table tbody tr:nth-child(20) { animation-delay: 0.40s; }

/* Checkbox & button hit areas — no slow CSS */
.mud-checkbox[b-ardr3tklh9],
.mud-icon-button[b-ardr3tklh9],
.action-btn[b-ardr3tklh9] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    [b-ardr3tklh9] .modern-table tbody tr {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    [b-ardr3tklh9] .modern-table tbody tr:hover {
        transform: none !important;
    }
    [b-ardr3tklh9] .modern-table tbody tr:active {
        transform: none !important;
    }
}
/* /Components/Pages/TestGrids/TestGridAdd.razor.rz.scp.css */
.header-avatar[b-h4za2ijbko] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-h4za2ijbko] {
    color: white !important;
    font-size: 22px !important;
}

.icon-sm[b-h4za2ijbko] {
    font-size: 14px !important;
}
/* /Components/Pages/TestGrids/TestGrids.razor.rz.scp.css */
.header-avatar[b-8di27e8knz] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-8di27e8knz] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-8di27e8knz] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-8di27e8knz] {
    align-items: center !important;
}

.search-field-full[b-8di27e8knz] {
    width: 100% !important;
}
/* /Components/Pages/TestGrids/TestGridsEdit.razor.rz.scp.css */
.header-avatar[b-8whv988qu1] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-8whv988qu1] {
    color: white !important;
    font-size: 22px !important;
}

.icon-sm[b-8whv988qu1] {
    font-size: 14px !important;
}
/* /Components/Pages/UploadControl.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Upload Control - Scoped Styles
   ══════════════════════════════════════════════════════════ */

/* 1. LAYOUT WRAPPERS */
.header-avatar[b-ml9saqt0mf] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-ml9saqt0mf] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-ml9saqt0mf] {
    margin-top: 8px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-ml9saqt0mf] {
    align-items: center !important;
}

/* 2. MODERN TABLE STRUCTURE */
[b-ml9saqt0mf] .modern-table table {
    table-layout: fixed !important;
    width: 100% !important;
}

[b-ml9saqt0mf] .modern-table th {
    background: white !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--slate-600) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--slate-100) !important;
    padding: 10px 16px !important;
}

[b-ml9saqt0mf] .modern-table td {
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--slate-100) !important;
    vertical-align: middle !important;
    font-size: 0.8rem !important;
}

[b-ml9saqt0mf] .col-name { width: 40%; }
[b-ml9saqt0mf] .col-desc { width: 30%; }
[b-ml9saqt0mf] .col-date { width: 15%; }
[b-ml9saqt0mf] .col-action { width: 15%; text-align: right; }

/* 3. UPLOAD AREA */
.upload-box[b-ml9saqt0mf] {
    border: 2px dashed var(--slate-200) !important;
    border-radius: 8px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--slate-50) !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    height: 100% !important;
    min-height: 100px !important;
}

.upload-box:hover[b-ml9saqt0mf] {
    border-color: var(--mud-palette-primary) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05) !important;
}

.upload-icon[b-ml9saqt0mf] {
    color: var(--mud-palette-primary) !important;
    font-size: 24px !important;
    margin-bottom: 4px !important;
}

.upload-text[b-ml9saqt0mf] {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--slate-700) !important;
}

.upload-subtext[b-ml9saqt0mf] {
    font-size: 0.875rem !important;
    color: var(--slate-600) !important;
    font-weight: 500 !important;
}
/* /Components/Pages/UserMaster/UserMaster.razor.rz.scp.css */
.usermaster-root[b-idhxxxut6c] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
}

/* Header */
.header-avatar[b-idhxxxut6c] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    width: 32px !important;
    height: 32px !important;
}

.header-title[b-idhxxxut6c] {
    font-weight: 800;
    font-size: 1.1rem !important;
    color: #0f172a;
}

.header-subtitle[b-idhxxxut6c] {
    color: #64748b;
    font-size: 0.72rem !important;
    margin-top: -2px;
}

/* Control Panel Card */
.control-panel-card[b-idhxxxut6c] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 1rem 1.25rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    margin-bottom: 1rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.modern-search[b-idhxxxut6c] {
    background: #ffffff !important;
}

.action-btn[b-idhxxxut6c] {
    border-radius: 8px !important;
    text-transform: none !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    padding: 0.45rem 1.1rem !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease !important;
}

.action-btn:hover[b-idhxxxut6c] {
    transform: translateY(-1px) !important;
    filter: brightness(1.05);
}

.action-btn:active[b-idhxxxut6c] {
    transform: translateY(0) scale(0.98) !important;
}

/* Table Wrapper */
.table-layout-wrapper[b-idhxxxut6c] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Table */
.modern-table[b-idhxxxut6c] {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden;
}

.modern-table :deep(thead)[b-idhxxxut6c] {
    background: #f8fafc !important;
}

.modern-table :deep(th)[b-idhxxxut6c] {
    color: #475569 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.68rem !important;
    letter-spacing: 0.06em;
    border-bottom: 2px solid #e2e8f0 !important;
    padding: 10px 14px !important;
}

.modern-table :deep(td)[b-idhxxxut6c] {
    padding: 8px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #334155 !important;
    font-size: 0.82rem !important;
}

.modern-table :deep(.mud-table-row:hover)[b-idhxxxut6c] {
    background: #f8fafc !important;
}

.modern-table :deep(.mud-table-row:last-child td)[b-idhxxxut6c] {
    border-bottom: none !important;
}

/* ID pill */
.id-pill[b-idhxxxut6c] {
    background: #f1f5f9;
    color: #64748b;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Profile column */
.profile-container[b-idhxxxut6c] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.profile-avatar[b-idhxxxut6c] {
    color: #ffffff !important;
    font-weight: 700;
    width: 28px !important;
    height: 28px !important;
    font-size: 0.75rem !important;
}

.profile-text[b-idhxxxut6c] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-name[b-idhxxxut6c] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.85rem;
    line-height: 1.3;
}

.profile-username[b-idhxxxut6c] {
    font-size: 0.7rem;
    color: #94a3b8;
    line-height: 1.2;
}

/* Units cell */
.units-cell[b-idhxxxut6c] {
    display: flex;
    align-items: center;
}

.unit-chips-wrap[b-idhxxxut6c] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    max-width: 200px;
}

.unit-chip[b-idhxxxut6c] {
    display: inline-block;
    background: rgba(59, 130, 246, 0.08);
    color: #3b82f6;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unit-chip-more[b-idhxxxut6c] {
    display: inline-block;
    background: #f1f5f9;
    color: #64748b;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
}

.unit-edit-btn[b-idhxxxut6c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 3px;
    margin-left: 2px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.mud-table-row:hover .unit-edit-btn[b-idhxxxut6c] {
    opacity: 1;
}

.unit-edit-btn:hover[b-idhxxxut6c] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.startlink-text[b-idhxxxut6c] {
    color: #64748b;
    font-size: 0.78rem;
    text-transform: capitalize;
}

/* Role chip */
.role-chip[b-idhxxxut6c] {
    font-weight: 700;
}

.text-muted[b-idhxxxut6c] {
    color: #cbd5e1;
}

/* Status toggle button */
.status-toggle-btn[b-idhxxxut6c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    border: none;
    outline: none;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
    font-family: inherit;
}

.status-toggle-btn:active[b-idhxxxut6c] {
    transform: scale(0.95);
}

.status-toggle-btn.active[b-idhxxxut6c] {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.status-toggle-btn.inactive[b-idhxxxut6c] {
    background: rgba(239, 68, 68, 0.10);
    color: #dc2626;
}

.status-toggle-btn:hover[b-idhxxxut6c] {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
    filter: brightness(0.95);
}

.status-dot[b-idhxxxut6c] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    flex-shrink: 0;
}

.status-toggle-btn.active .status-dot[b-idhxxxut6c] {
    background: #10b981;
}

.status-toggle-btn.inactive .status-dot[b-idhxxxut6c] {
    background: #ef4444;
}

.admin-account-pill[b-idhxxxut6c] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(59, 130, 246, 0.07);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.12);
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
}

/* Loading skeleton */
.loading-skeleton-container[b-idhxxxut6c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.skeleton-row[b-idhxxxut6c] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
}

.skeleton-circle[b-idhxxxut6c] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e2e8f0;
    flex-shrink: 0;
}

.skeleton-line[b-idhxxxut6c] {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-idhxxxut6c 1.5s ease-in-out infinite;
}

.skeleton-line.w-30[b-idhxxxut6c] { width: 30%; }
.skeleton-line.w-20[b-idhxxxut6c] { width: 20%; }
.skeleton-line.w-40[b-idhxxxut6c] { width: 40%; }
.skeleton-line.w-15[b-idhxxxut6c] { width: 15%; }

@keyframes shimmer-b-idhxxxut6c {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty state */
.empty-state[b-idhxxxut6c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    gap: 0.5rem;
}

.empty-title[b-idhxxxut6c] {
    font-weight: 700;
    color: #1e293b;
}

.empty-desc[b-idhxxxut6c] {
    color: #94a3b8;
}

/* Mobile label */
.mobile-label[b-idhxxxut6c] {
    display: none !important;
}

/* Responsive */
@media (max-width: 1023.98px) {
    [b-idhxxxut6c] .modern-table table {
        min-width: unset !important;
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }

    [b-idhxxxut6c] .modern-table .mud-table-container {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        flex: 1 !important;
    }

    [b-idhxxxut6c] .modern-table thead {
        display: none !important;
    }

    [b-idhxxxut6c] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }

    [b-idhxxxut6c] .modern-table tbody tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 14px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01) !important;
        margin-bottom: 10px !important;
        align-items: start !important;
    }

    [b-idhxxxut6c] .modern-table tbody tr:hover {
        border-color: #3b82f6 !important;
    }

    [b-idhxxxut6c] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        background: transparent !important;
        grid-column: 1 / -1 !important;
        gap: 2px !important;
    }

    [b-idhxxxut6c] .modern-table tr .col-id {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    [b-idhxxxut6c] .modern-table tr .col-status {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-items: flex-end !important;
    }

    [b-idhxxxut6c] .modern-table tr .col-actions {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        align-items: flex-end !important;
        padding-top: 6px !important;
        border-top: 1px solid #f1f5f9 !important;
    }

    [b-idhxxxut6c] .modern-table tr .col-profile {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }

    [b-idhxxxut6c] .modern-table tr .col-role {
        grid-column: 2 !important;
        grid-row: 3 !important;
        align-items: flex-end !important;
    }

    [b-idhxxxut6c] .modern-table tr .col-units {
        grid-column: 1 / -1 !important;
        grid-row: 5 !important;
    }

    [b-idhxxxut6c] .modern-table tr .col-startlink {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .unit-chips-wrap[b-idhxxxut6c] {
        max-width: none !important;
        width: 100% !important;
    }

    .unit-edit-btn[b-idhxxxut6c] {
        opacity: 1 !important;
    }

    .profile-name[b-idhxxxut6c] {
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    .mobile-label[b-idhxxxut6c] {
        display: inline-block !important;
        font-weight: 700 !important;
        font-size: 0.68rem !important;
        color: #94a3b8 !important;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    [b-idhxxxut6c] .modern-table tr .col-actions .mud-stack {
        justify-content: flex-end !important;
        width: 100% !important;
        gap: 8px !important;
    }

    [b-idhxxxut6c] .modern-table tr .col-actions .mud-icon-button {
        padding: 6px !important;
        border-radius: 8px !important;
        border: 1px solid #e2e8f0 !important;
        background: #f8fafc !important;
    }
}

@media (max-width: 599.98px) {
    [b-idhxxxut6c] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }

    [b-idhxxxut6c] .control-panel-card .action-btn {
        width: 100% !important;
    }
}

/* ── Units Select ── */
.units-select[b-idhxxxut6c] {
    width: 150px !important;
    min-width: 120px;
}

.units-select :deep(.mud-select-input)[b-idhxxxut6c] {
    font-size: 0.72rem !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.units-select :deep(.mud-input-outlined-border)[b-idhxxxut6c] {
    border-color: #e2e8f0 !important;
}

.units-select :deep(.mud-icon-button)[b-idhxxxut6c] {
    width: 28px !important;
    height: 28px !important;
    padding: 4px !important;
}

/* ── Start Link Autocomplete ── */
.startlink-autocomplete[b-idhxxxut6c] {
    min-width: 120px;
}

.startlink-autocomplete :deep(.mud-input-input)[b-idhxxxut6c] {
    font-size: 0.72rem !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.startlink-autocomplete :deep(.mud-input-outlined-border)[b-idhxxxut6c] {
    border-color: #e2e8f0 !important;
}

.startlink-autocomplete :deep(.mud-icon-button)[b-idhxxxut6c] {
    width: 24px !important;
    height: 24px !important;
    padding: 3px !important;
}

.startlink-autocomplete :deep(.mud-input-clear-button)[b-idhxxxut6c] {
    width: 20px !important;
    height: 20px !important;
    padding: 2px !important;
}

/* ── Units Select (responsive) ── */
@media (max-width: 1023.98px) {
    .units-select[b-idhxxxut6c] {
        width: 100% !important;
        max-width: none !important;
    }

    .startlink-autocomplete[b-idhxxxut6c] {
        width: 100% !important;
    }
}
/* /Components/Pages/UserMaster/UserMasterEdit.razor.rz.scp.css */
.usermaster-edit-root[b-418090edtz] {
    padding: 0.5rem 1rem;
    background-color: #f8fafc;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    box-sizing: border-box;
}

/* Header Section */
.header-section[b-418090edtz] {
    margin-bottom: 1rem;
    max-width: 100%;
    overflow-x: hidden;
}

.header-avatar[b-418090edtz] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    width: 32px !important;
    height: 32px !important;
}

.header-title[b-418090edtz] {
    font-weight: 800;
    font-size: 1.1rem !important;
    color: #0f172a;
}

.icon-override[b-418090edtz] {
    color: #f59e0b !important;
    flex-shrink: 0 !important;
}

.icon-zumka[b-418090edtz] {
    color: #10b981 !important;
    flex-shrink: 0 !important;
}

.reset-override-btn[b-418090edtz] {
    position: absolute !important;
    right: 10px !important;
    z-index: 10 !important;
    padding: 4px !important;
}

.header-subtitle[b-418090edtz] {
    color: #64748b;
    font-size: 0.8rem !important;
}

/* Ultra-Compact Filter Bar / Card */
.pro-filter-bar[b-418090edtz] {
    padding: 1rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    max-width: 100%;
}

/* Category Tabs */
.category-navigation-strip[b-418090edtz] {
    padding: 2px 0;
    margin-bottom: 0.25rem;
    max-width: 100%;
    overflow-x: hidden;
}

.pro-tab-group[b-418090edtz] {
    display: inline-flex;
    background-color: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    gap: 2px;
}

.pro-tab-btn[b-418090edtz] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    color: #64748b;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.pro-tab-btn:hover[b-418090edtz] {
    color: #0f172a;
    background-color: rgba(255, 255, 255, 0.5);
}

.pro-tab-btn.active[b-418090edtz] {
    background-color: #0e0e0e;
    color: #ebebed;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* Report Micro Grid */
.reports-main-scrollable[b-418090edtz] {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto !important;
    max-width: 100%;
}

.report-micro-grid[b-418090edtz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 2px 2px 20px 2px;
    max-width: 100%;
}

/* Premium Action Button for Reports */
.micro-report-action[b-418090edtz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 38px;
    background: #f8fafc;
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 500px;
    padding: 0 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.micro-report-action:hover[b-418090edtz] {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.micro-report-action:active[b-418090edtz] {
    transform: scale(0.97);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.micro-report-action.selected[b-418090edtz] {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 6px 14px rgba(59, 130, 246, 0.25) !important;
    transform: translateY(-1px);
}

.micro-report-action.selected:hover[b-418090edtz] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35) !important;
}

.micro-report-action.selected:active[b-418090edtz] {
    transform: scale(0.97);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2) !important;
}

.micro-report-action.selected .micro-name[b-418090edtz] {
    color: #ffffff !important;
}

.micro-icon[b-418090edtz] {
    color: #64748b;
    font-size: 1.1rem !important;
}

.micro-name[b-418090edtz] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Empty State */
.pro-empty-state-compact[b-418090edtz] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px dashed #e2e8f0;
    color: #94a3b8;
}

/* Modern Table for Role Rights */
.modern-table[b-418090edtz] {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background-color: #ffffff;
    width: auto !important;
    max-width: 100%;
    table-layout: auto !important;
}
 
.modern-table .mud-th[b-418090edtz], .modern-table .mud-td[b-418090edtz] {
    padding: 2px 1px !important;
    font-size: 0.7rem !important;
    text-align: center !important;
}
 
.modern-table .mud-table-head .mud-th[b-418090edtz] {
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background-color: #f8fafc !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
}

.modern-table .mud-checkbox[b-418090edtz] {
    margin: 0 !important;
}

.modern-table .mud-icon-button[b-418090edtz] {
    padding: 2px !important;
}

/* Scrollbar */
.reports-main-scrollable[b-418090edtz]::-webkit-scrollbar {
    width: 4px;
}

.reports-main-scrollable[b-418090edtz]::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

@media (max-width: 600px) {
    .report-micro-grid[b-418090edtz] { grid-template-columns: 1fr; }
    .pro-filter-bar[b-418090edtz] { flex-direction: column; }
}

/* ── Rights Matrix Table ── */
.rights-matrix-wrap[b-418090edtz] {
    /* Removed overflow: auto and max-height to prevent nested scrollbars */
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

.rights-matrix-table[b-418090edtz] {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.rmt-th[b-418090edtz] {
    background: #f8fafc;
    font-size: 0.68rem;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 4px;
    text-align: center;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 3;
    border-bottom: 2px solid #e2e8f0;
}

.rmt-module-col[b-418090edtz] {
    min-width: 160px;
    max-width: 200px;
    text-align: left !important;
    padding-left: 10px !important;
    position: sticky;
    left: 0;
    z-index: 4 !important;
    background: #f8fafc;
    border-right: 2px solid #e2e8f0;
}

.rmt-all-col[b-418090edtz] {
    min-width: 38px;
    border-right: 1px solid #e2e8f0;
}

.rmt-right-col[b-418090edtz] {
    min-width: 46px;
}

.rmt-col-label[b-418090edtz] {
    display: block;
    font-size: 0.58rem;
    margin-top: 2px;
    color: #64748b;
    font-weight: 600;
}

.rmt-selectall-row[b-418090edtz] {
    background: #f1f5f9;
}

.rmt-selectall-label[b-418090edtz] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #475569;
    padding-left: 10px !important;
    position: sticky;
    left: 0;
    background: #f1f5f9 !important;
    border-right: 2px solid #e2e8f0;
    top: auto;
    z-index: 2;
}

.rmt-td[b-418090edtz] {
    padding: 3px 2px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.rmt-row:hover .rmt-td[b-418090edtz] {
    background-color: rgba(59, 130, 246, 0.04);
}

.rmt-row:hover .rmt-module-col[b-418090edtz] {
    background-color: #eff6ff !important;
}

.rmt-module-col.rmt-td[b-418090edtz] {
    text-align: left !important;
    padding-left: 10px !important;
    position: sticky;
    left: 0;
    background: #ffffff;
    border-right: 2px solid #e2e8f0;
    z-index: 2;
}

.rmt-module-name[b-418090edtz] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
}

.rmt-module-badge[b-418090edtz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    background: #3b82f6;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 100px;
    padding: 1px 5px;
    min-width: 16px;
}

.rmt-cell-on[b-418090edtz] {
    background-color: rgba(59, 130, 246, 0.08);
}

.rmt-chk[b-418090edtz] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #3b82f6;
}

.rmt-chk-row[b-418090edtz] {
    accent-color: #7c3aed;
}

/* /Components/Pages/UserMultiRoles/UserMultiRoles.razor.rz.scp.css */
/* ==========================================================================
   User Multi Jhumkas - Premium Styling & Layout
   ========================================================================== */

.usermulti-root[b-p54puswae9] {
    padding: 0.5rem 1rem;
    background-color: #f8fafc;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    box-sizing: border-box;
}

/* Header Section */
.header-section[b-p54puswae9] {
    margin-bottom: 0.75rem;
    max-width: 100%;
    overflow-x: hidden;
    flex-shrink: 0 !important;
}

.header-avatar[b-p54puswae9] {
    background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.icon-search-large[b-p54puswae9] {
    font-size: 3rem !important;
    color: #94a3b8 !important;
}

.text-selection-req[b-p54puswae9] {
    color: #475569 !important;
    font-weight: 600 !important;
}

.header-title[b-p54puswae9] {
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
}

.header-subtitle[b-p54puswae9] {
    color: #64748b;
}

/* Glassmorphic Selector Bar */
.pro-filter-bar[b-p54puswae9] {
    padding: 0.75rem 1.25rem !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    max-width: 100%;
    flex-shrink: 0 !important;
    margin-bottom: 0.75rem;
}

/* Main Dual List Container */
.roles-dual-container[b-p54puswae9] {
    flex: 1;
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
    overflow: hidden;
    margin-bottom: 4.5rem; /* space for fixed footer */
}

/* Roles Panel Card */
.roles-panel-card[b-p54puswae9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.015) !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

.roles-panel-card:hover[b-p54puswae9] {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.03) !important;
    border-color: #cbd5e1 !important;
}

.panel-header[b-p54puswae9] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.panel-title[b-p54puswae9] {
    font-weight: 700;
    font-size: 0.95rem;
    color: #0f172a;
}

.panel-search-wrapper[b-p54puswae9] {
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.panel-list[b-p54puswae9] {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* List View Item Card */
.litem[b-p54puswae9] {
    display: flex;
    align-items: stretch;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
    min-height: 56px;
}

.litem:last-child[b-p54puswae9] {
    border-bottom: none;
}

.litem:hover[b-p54puswae9] {
    background: #f8fafc;
}

.litem:active[b-p54puswae9] {
    background: #f1f5f9;
}

.litem-bar[b-p54puswae9] {
    width: 3px;
    flex-shrink: 0;
    border-radius: 0 2px 2px 0;
    margin: 6px 0;
    transition: background 0.2s;
}

.litem-a .litem-bar[b-p54puswae9] { background: #4f46e5; }
.litem-g .litem-bar[b-p54puswae9] { background: #10b981; }
.litem-f .litem-bar[b-p54puswae9] { background: #cbd5e1; }

.litem-body[b-p54puswae9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 12px 8px 10px;
    min-width: 0;
}

.litem-top[b-p54puswae9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.litem-name[b-p54puswae9] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.litem-bot[b-p54puswae9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 1px;
}

.litem-ref[b-p54puswae9] {
    font-size: 0.7rem;
    color: #94a3b8;
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
}

/* Status Tag */
.litem-tag[b-p54puswae9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 10px 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.01em;
}

.tag-dot[b-p54puswae9] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tag-a[b-p54puswae9] {
    background: #eef2ff;
    color: #4f46e5;
}

.tag-a .tag-dot[b-p54puswae9] {
    background: #4f46e5;
}

.tag-g[b-p54puswae9] {
    background: #ecfdf5;
    color: #059669;
}

.tag-g .tag-dot[b-p54puswae9] {
    background: #10b981;
}

.tag-f[b-p54puswae9] {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.tag-f .tag-dot[b-p54puswae9] {
    background: #94a3b8;
}

.panel-list[b-p54puswae9]::-webkit-scrollbar {
    width: 6px;
}

.panel-list[b-p54puswae9]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.panel-list[b-p54puswae9]::-webkit-scrollbar-track {
    background: transparent;
}

/* Role Item Card */
.role-item-card[b-p54puswae9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.role-item-card:hover[b-p54puswae9] {
    background: #ffffff;
    border-color: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.05);
}

.role-item-info[b-p54puswae9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.role-item-name[b-p54puswae9] {
    font-weight: 600;
    font-size: 0.85rem;
    color: #1e293b;
}

.role-item-desc[b-p54puswae9] {
    font-size: 0.75rem;
    color: #64748b;
}

.dlist[b-p54puswae9] {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #e2e8f0;
}

.dlist-hdr[b-p54puswae9] {
    font-size: 0.6rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.dlist-scroll[b-p54puswae9] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 6px;
    max-height: 72px;
    overflow-y: auto;
}

.dlist-scroll[b-p54puswae9]::-webkit-scrollbar {
    width: 3px;
}

.dlist-scroll[b-p54puswae9]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.dlist-chip[b-p54puswae9] {
    font-size: 0.65rem;
    color: #475569;
    background: #f1f5f9;
    padding: 1px 8px;
    border-radius: 4px;
    line-height: 1.7;
    white-space: nowrap;
    border: 1px solid #e2e8f0;
}

/* Denied item state */
.role-item-card.denied[b-p54puswae9] {
    background: #fef2f2;
    border-color: #fecaca;
}

.role-item-card.denied:hover[b-p54puswae9] {
    background: #fff5f5;
    border-color: #f87171;
}

.denied-text[b-p54puswae9] {
    text-decoration: line-through;
    color: #94a3b8 !important;
}

/* Middle Actions (Move arrows) */
.middle-actions[b-p54puswae9] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    flex-shrink: 0;
    width: 48px;
}

.action-arrow-btn[b-p54puswae9] {
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
}

.action-arrow-btn:hover[b-p54puswae9] {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25) !important;
    transform: scale(1.05);
}

/* Pinned Footer Styles */
.navbar-fixed-bottom[b-p54puswae9] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.03);
    z-index: 100;
}

/* Row Counter Style */
.RowsCount[b-p54puswae9] {
    padding: 6px 14px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Action button style */
.action-btn[b-p54puswae9] {
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.825rem !important;
    text-transform: none !important;
    padding: 6px 16px !important;
}

.action-btn-primary[b-p54puswae9] {
    background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2) !important;
    transition: all 0.2s ease !important;
}

.action-btn-primary:hover[b-p54puswae9] {
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.3) !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   Responsive Viewports (Mobile & Tablet Layouts)
   ========================================================================== */
@media (max-width: 1023.98px) {
    .usermulti-root[b-p54puswae9] {
        height: 100% !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 2rem !important; /* normal padding since footer is now static */
    }

    /* Wrap header content on mobile/tablet */
    .header-section .d-flex.align-center.justify-space-between[b-p54puswae9] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .header-section .d-flex.align-center.gap-3[b-p54puswae9] {
        flex-wrap: wrap !important;
    }

    .header-section .action-btn[b-p54puswae9] {
        flex: 1 1 auto !important;
        justify-content: center !important;
    }

    /* Filters Selector Bar Adjustments */
    .pro-filter-bar[b-p54puswae9] {
        padding: 0.75rem 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Stack panels vertically */
    .roles-dual-container[b-p54puswae9] {
        flex-direction: column !important;
        gap: 1rem !important;
        height: auto !important;
        overflow: visible !important;
        margin-bottom: 2rem !important;
    }

    /* Hide the middle transfer arrows since tapping items directly is more intuitive on mobile/tablet */
    .middle-actions[b-p54puswae9] {
        display: none !important;
    }

    /* Standard height and scrolling behavior for each list panel card */
    .roles-panel-card[b-p54puswae9] {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02) !important;
    }

    .panel-list[b-p54puswae9] {
        flex: none !important;
        overflow-y: visible !important;
        max-height: none !important;
    }

    /* Custom panel header and scrollbar for native app feel */
    .panel-header[b-p54puswae9] {
        padding: 0.85rem 1.25rem !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    }

    .roles-panel-card:first-of-type .panel-header[b-p54puswae9] {
        background: rgba(79, 70, 229, 0.04) !important;
    }

    .roles-panel-card:last-of-type .panel-header[b-p54puswae9] {
        background: rgba(16, 185, 129, 0.04) !important;
    }

    .panel-title[b-p54puswae9] {
        font-size: 0.9rem !important;
        font-weight: 800 !important;
        letter-spacing: -0.01em !important;
    }

    .panel-search-wrapper[b-p54puswae9] {
        padding: 0.6rem 1rem !important;
        background: #f8fafc !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
    }

    .panel-list[b-p54puswae9]::-webkit-scrollbar {
        width: 4px;
    }

    /* Premium Native Card styling for Jhumka items */
    .role-item-card[b-p54puswae9] {
        padding: 0.85rem 1rem !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.8) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.015) !important;
        margin-bottom: 2px !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative;
    }

    .role-item-card:active[b-p54puswae9] {
        transform: scale(0.97) !important;
        background: #f1f5f9 !important;
    }



    /* Left Panel: Assigned Cards (Premium Selected State) */
    .roles-panel-card:first-of-type .role-item-card[b-p54puswae9] {
        border-left: 4px solid #4f46e5 !important;
        background: linear-gradient(90deg, rgba(79, 70, 229, 0.02) 0%, #ffffff 100%) !important;
    }

    .roles-panel-card:first-of-type .role-item-card.denied[b-p54puswae9] {
        background: #fef2f2 !important;
        border-left-color: #f87171 !important;
    }

    .roles-panel-card:first-of-type .role-item-card[b-p54puswae9]  .mud-icon-button {
        background: rgba(239, 68, 68, 0.08) !important;
        color: #ef4444 !important;
        border-radius: 8px !important;
        padding: 4px !important;
    }

    /* Right Panel: Available Cards (Premium Addable State) */
    .roles-panel-card:last-of-type .role-item-card[b-p54puswae9] {
        border-left: 4px solid #10b981 !important;
        background: linear-gradient(90deg, rgba(16, 185, 129, 0.02) 0%, #ffffff 100%) !important;
    }

    /* Reorder text and chevron for Available items on mobile to feel native */
    .roles-panel-card:last-of-type .role-item-info[b-p54puswae9] {
        text-align: left !important;
        padding-right: 0 !important;
        order: 1 !important;
    }

    .roles-panel-card:last-of-type .role-item-card[b-p54puswae9]  .mud-icon-button {
        order: 2 !important;
        background: rgba(16, 185, 129, 0.08) !important;
        color: #10b981 !important;
        border-radius: 8px !important;
        padding: 4px !important;
        transform: rotate(180deg) !important; /* Rotate ChevronLeft to point right */
    }

    /* Text Adjustments */
    .role-item-name[b-p54puswae9] {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
    }

    .role-item-desc[b-p54puswae9] {
        font-size: 0.75rem !important;
        color: #64748b !important;
        font-family: 'JetBrains Mono', monospace;
    }

    /* Position the action footer statically at the bottom of the list content to behave naturally on mobile */
    .navbar-fixed-bottom[b-p54puswae9] {
        position: static !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.015) !important;
        padding: 1rem 1.25rem !important;
        margin-top: 1.25rem !important;
        margin-bottom: 2rem !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 1rem !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.01) !important;
        z-index: 1 !important;
    }

    .RowsCount[b-p54puswae9] {
        font-size: 0.75rem !important;
        padding: 6px 12px !important;
        white-space: nowrap !important;
        background: #f1f5f9 !important;
        border-radius: 8px !important;
        color: #475569 !important;
        font-weight: 700 !important;
    }

    .navbar-fixed-bottom .action-btn[b-p54puswae9] {
        padding: 8px 16px !important;
        font-size: 0.825rem !important;
        flex-grow: 0 !important;
        width: auto !important;
    }
}

@media (max-width: 599.98px) {
    .header-title[b-p54puswae9] {
        font-size: 1.1rem !important;
    }

    .header-subtitle[b-p54puswae9] {
        font-size: 0.75rem !important;
    }

    /* Stacking filter fields vertically on very small mobile viewports */
    .pro-filter-bar[b-p54puswae9]  .mud-grid-spacing-xs-3 {
        margin: -4px !important;
    }

    .pro-filter-bar[b-p54puswae9]  .mud-grid-item {
        padding: 4px !important;
    }

    /* Vertical stacking of summary footer on mobile screens */
    .navbar-fixed-bottom[b-p54puswae9] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        text-align: center !important;
        padding: 1.25rem !important;
    }

    .navbar-fixed-bottom .action-btn[b-p54puswae9] {
        width: 100% !important;
        max-width: none !important;
        flex-grow: 1 !important;
    }
}


/* /Components/Pages/Vacancies/VacancysEdit.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Vacancies Edit - Scoped Styles
   ══════════════════════════════════════════════════════════ */

.header-avatar[b-642w1inwod] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-642w1inwod] {
    color: white !important;
    font-size: 22px !important;
}

.form-card[b-642w1inwod] {
    border-radius: 12px !important;
    border: 1px solid var(--slate-200, #e2e8f0) !important;
}

.vacancys-avatar[b-642w1inwod] {
    background-color: #f59e0b !important;
}

.vacancys-avatar-icon[b-642w1inwod] {
    color: white !important;
}
/* /Components/Pages/Vacancies/VacancysList.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Vacancies - Scoped Styles
   ══════════════════════════════════════════════════════════ */

.header-avatar[b-yw4908jokz] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-yw4908jokz] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-yw4908jokz] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-yw4908jokz] {
    align-items: center !important;
}

.search-field-full[b-yw4908jokz] {
    width: 100% !important;
}

.table-layout-wrapper[b-yw4908jokz] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow-x: auto !important;
    max-width: 100% !important;
}

/* 2. MODERN TABLE STRUCTURE & TYPOGRAPHY */
[b-yw4908jokz] .modern-table table {
    table-layout: auto !important;
    width: 100% !important;
}

[b-yw4908jokz] .modern-table th {
    background: white !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--slate-600, #475569) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    border-bottom: 2px solid var(--slate-100, #f1f5f9) !important;
    padding: 10px 12px !important;
    white-space: nowrap !important;
}

[b-yw4908jokz] .modern-table td {
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--slate-100, #f1f5f9) !important;
    vertical-align: middle !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: var(--slate-800, #1e293b) !important;
}

/* 3. IDENTITY & BADGES */
.id-pill[b-yw4908jokz] {
    padding: 2px 8px;
    background: var(--slate-100, #f1f5f9);
    color: var(--slate-500, #64748b);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.vacancys-avatar[b-yw4908jokz] {
    background-color: #f59e0b !important;
}

.vacancys-avatar-icon[b-yw4908jokz] {
    color: white !important;
}

/* 4. ACTION BUTTONS */
[b-yw4908jokz] .action-btn-edit {
    background: rgba(245, 158, 11, 0.08) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.18) !important;
    border-radius: 8px !important;
    padding: 6px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[b-yw4908jokz] .action-btn-edit:hover:not(:disabled) {
    background: #f59e0b !important;
    color: #ffffff !important;
    border-color: #f59e0b !important;
    transform: translateY(-1px) scale(1.06) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
}

[b-yw4908jokz] .action-btn-del {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.18) !important;
    border-radius: 8px !important;
    padding: 6px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[b-yw4908jokz] .action-btn-del:hover:not(:disabled) {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
    transform: translateY(-1px) scale(1.06) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
}
/* /Components/Shared/ChatBot/ChatBot.razor.rz.scp.css */
.erp-chatbot-container[b-wuhbq4tf4r] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1100;
    font-family: "Inter", "Roboto", "Segoe UI", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none; /* Let clicks pass through container to elements below when closed */
}

/* Enable pointer events on active elements */
.erp-chatbot-container *[b-wuhbq4tf4r] {
    pointer-events: auto;
}

/* Floating Action Button (FAB) */
.erp-chatbot-fab[b-wuhbq4tf4r] {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #ffffff;
    border: none;
    outline: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
}

/* Glowing radar ripple halo */
.erp-chatbot-fab:not(.active)[b-wuhbq4tf4r]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border: 1.5px solid #3b82f6;
    pointer-events: none;
    animation: botGlowRipple-b-wuhbq4tf4r 3s infinite cubic-bezier(0.24, 0, 0, 1);
}

@keyframes botGlowRipple-b-wuhbq4tf4r {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.erp-chatbot-fab:hover[b-wuhbq4tf4r] {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.5);
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.erp-chatbot-fab:active[b-wuhbq4tf4r] {
    transform: scale(0.95);
}

.erp-chatbot-fab.active[b-wuhbq4tf4r] {
    background: #1e293b;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.3);
}

.fab-icon[b-wuhbq4tf4r] {
    transition: transform 0.3s ease;
}

.erp-chatbot-fab:not(.active) .fab-icon[b-wuhbq4tf4r] {
    animation: botLiveLook-b-wuhbq4tf4r 6s infinite ease-in-out;
}

.erp-chatbot-fab.active .fab-icon[b-wuhbq4tf4r] {
    transform: rotate(90deg);
}

@keyframes botLiveLook-b-wuhbq4tf4r {
    0%, 85%, 100% {
        transform: rotate(0deg) scale(1) translate(0, 0);
    }
    88% {
        transform: rotate(-10deg) scale(1.05) translate(-2px, -1px);
    }
    92% {
        transform: rotate(10deg) scale(1.05) translate(2px, -1px);
    }
    96% {
        transform: rotate(0deg) scale(1.08) translate(0, -2px);
    }
}

/* Chat Window Panel */
.erp-chat-window[b-wuhbq4tf4r] {
    width: 380px;
    height: 520px;
    max-height: calc(100vh - 120px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.15);
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUpFade-b-wuhbq4tf4r 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: bottom right;
}

@keyframes slideUpFade-b-wuhbq4tf4r {
    0% {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Chat Window Header */
.erp-chat-header[b-wuhbq4tf4r] {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
}

.erp-chat-header-info[b-wuhbq4tf4r] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.erp-chat-avatar[b-wuhbq4tf4r] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.bot-icon[b-wuhbq4tf4r] {
    color: #60a5fa;
}

.erp-chat-title-container[b-wuhbq4tf4r] {
    display: flex;
    flex-direction: column;
}

.erp-chat-title[b-wuhbq4tf4r] {
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.erp-chat-status[b-wuhbq4tf4r] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.status-indicator[b-wuhbq4tf4r] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-indicator.online[b-wuhbq4tf4r] {
    background-color: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: pulse-b-wuhbq4tf4r 2s infinite;
}

@keyframes pulse-b-wuhbq4tf4r {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.status-text[b-wuhbq4tf4r] {
    font-size: 11px;
    color: #94a3b8;
}

.erp-chat-close-btn[b-wuhbq4tf4r] {
    background: transparent;
    border: none;
    outline: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.erp-chat-close-btn:hover[b-wuhbq4tf4r] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

/* Chat Body area */
.erp-chat-body[b-wuhbq4tf4r] {
    flex-grow: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: #f8fafc;
}

/* Guardrails Info Banner */
.erp-chat-banner[b-wuhbq4tf4r] {
    display: flex;
    gap: 8px;
    background-color: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
}

.banner-icon[b-wuhbq4tf4r] {
    font-size: 14px;
}

.banner-text[b-wuhbq4tf4r] {
    font-size: 11.5px;
    color: #1e3a5f;
    line-height: 1.4;
    font-weight: 500;
}

/* Chat Messages Bubble styling */
.chat-message-row[b-wuhbq4tf4r] {
    display: flex;
    width: 100%;
}

.user-row[b-wuhbq4tf4r] {
    justify-content: flex-end;
}

.bot-row[b-wuhbq4tf4r] {
    justify-content: flex-start;
}

.chat-message-bubble[b-wuhbq4tf4r] {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.45;
    position: relative;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.user-row .chat-message-bubble[b-wuhbq4tf4r] {
    background-color: #3b82f6;
    color: #ffffff;
    border-bottom-right-radius: 2px;
}

.bot-row .chat-message-bubble[b-wuhbq4tf4r] {
    background-color: #ffffff;
    color: #1e293b;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 2px;
    white-space: pre-wrap; /* Preserve line breaks */
}

.message-content[b-wuhbq4tf4r] {
    font-weight: 400;
}

.message-time[b-wuhbq4tf4r] {
    font-size: 9px;
    margin-top: 4px;
    text-align: right;
    opacity: 0.6;
}

.user-row .message-time[b-wuhbq4tf4r] {
    color: rgba(255, 255, 255, 0.85);
}

.bot-row .message-time[b-wuhbq4tf4r] {
    color: #64748b;
}

/* Typing Indicator bubble */
.typing-bubble[b-wuhbq4tf4r] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.typing-bubble .dot[b-wuhbq4tf4r] {
    width: 6px;
    height: 6px;
    background-color: #94a3b8;
    border-radius: 50%;
    display: inline-block;
    animation: bounce-b-wuhbq4tf4r 1.4s infinite ease-in-out both;
}

.typing-bubble .dot:nth-child(1)[b-wuhbq4tf4r] {
    animation-delay: -0.32s;
}

.typing-bubble .dot:nth-child(2)[b-wuhbq4tf4r] {
    animation-delay: -0.16s;
}

@keyframes bounce-b-wuhbq4tf4r {
    0%, 80%, 100% { 
        transform: scale(0);
    } 
    40% { 
        transform: scale(1.0);
    }
}

/* Quick starter prompts */
.erp-chat-prompts[b-wuhbq4tf4r] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    background-color: #f8fafc;
    border-top: 1px solid #f1f5f9;
}

.prompt-pill[b-wuhbq4tf4r] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 12px;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.prompt-pill:hover[b-wuhbq4tf4r] {
    border-color: #3b82f6;
    color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.03);
}

/* Footer Input styling */
.erp-chat-footer[b-wuhbq4tf4r] {
    padding: 12px 16px;
    background-color: #ffffff;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 10px;
    align-items: center;
}

.erp-chat-input[b-wuhbq4tf4r] {
    flex-grow: 1;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: #1e293b;
    background-color: #f8fafc;
}

.erp-chat-input:focus[b-wuhbq4tf4r] {
    border-color: #3b82f6;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.erp-chat-input[b-wuhbq4tf4r]::placeholder {
    color: #94a3b8;
}

.erp-chat-send-btn[b-wuhbq4tf4r] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #3b82f6;
    color: #ffffff;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.erp-chat-send-btn:hover:not(.disabled)[b-wuhbq4tf4r] {
    background-color: #1d4ed8;
    transform: scale(1.05);
}

.erp-chat-send-btn:active:not(.disabled)[b-wuhbq4tf4r] {
    transform: scale(0.95);
}

.erp-chat-send-btn.disabled[b-wuhbq4tf4r] {
    background-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
}

/* Responsiveness and Mobile adaptations */
@media (max-width: 1023.98px) {
    .erp-chatbot-container[b-wuhbq4tf4r] {
        /* Shift up to avoid bottom navigation bar on mobile/tablet */
        bottom: calc(76px + var(--safe-bottom));
        right: 16px;
    }

    .erp-chat-window[b-wuhbq4tf4r] {
        width: calc(100vw - 32px);
        height: 460px;
        right: 0;
    }
}

@media (max-width: 480px) {
    .erp-chat-window[b-wuhbq4tf4r] {
        height: 380px;
    }
}
/* /Components/Shared/Generative/GenEditForm.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   GenEditForm - Auto-generating Edit Form Component Styles
   ══════════════════════════════════════════════════════════ */

.header-avatar[b-e9eedbizrt] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-e9eedbizrt] {
    color: white !important;
    font-size: 22px !important;
}

.btn-success-outline[b-e9eedbizrt] {
    border-color: #10b981 !important;
    color: #10b981 !important;
}

[b-e9eedbizrt] .mud-autocomplete button.mud-icon-button {
    display: none !important;
}

[b-e9eedbizrt] .mud-autocomplete .mud-input-adornment-end button.mud-icon-button {
    display: inline-flex !important;
}

.id-pill[b-e9eedbizrt] {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    border-radius: 6px;
    padding: 2px 8px;
    font-weight: 700;
    font-size: 11px;
}

@media (max-width: 767.98px) {
    .header-section[b-e9eedbizrt] {
        border-radius: 0 !important;
        margin-bottom: 0 !important;
        padding: var(--space-3) !important;
    }

    .header-section > div[b-e9eedbizrt] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .progress-mini[b-e9eedbizrt] {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
        padding: 8px 12px !important;
    }

    .form-container[b-e9eedbizrt] {
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    [b-e9eedbizrt] .mud-input {
        font-size: 15px !important;
    }

    [b-e9eedbizrt] .mud-input-label {
        font-size: 13px !important;
    }

    [b-e9eedbizrt] .mud-grid-item[class*="sm-"],
    [b-e9eedbizrt] .mud-grid-item[class*="md-"] {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    [b-e9eedbizrt] .mud-tab {
        min-height: 44px !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    [b-e9eedbizrt] .scrolling-content-container {
        padding: 12px 12px 100px 12px !important;
    }

    [b-e9eedbizrt] .scroll-section .section-title {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }

    .fixed-footer[b-e9eedbizrt] {
        border-radius: 0 !important;
        padding: 12px 16px !important;
        background: #ffffff !important;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.05) !important;
    }

    .fixed-footer .footer-step[b-e9eedbizrt] {
        display: none !important;
    }

    .fixed-footer .footer-buttons[b-e9eedbizrt] {
        width: 100% !important;
    }

    [b-e9eedbizrt] .btn-next,
    [b-e9eedbizrt] .btn-prev,
    [b-e9eedbizrt] .btn-submit {
        min-height: 40px !important;
        font-size: 14px !important;
    }
}
/* /Components/Shared/Generative/GenListPage.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   GenListPage - Auto-generating List Component Styles
   ══════════════════════════════════════════════════════════ */

/* 1. LAYOUT WRAPPERS */
.header-avatar[b-xi0r0zyhhq] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-xi0r0zyhhq] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-xi0r0zyhhq] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-xi0r0zyhhq] {
    align-items: center !important;
}

.search-field-full[b-xi0r0zyhhq] {
    width: 100% !important;
}

.table-layout-wrapper[b-xi0r0zyhhq] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

/* 2. MODERN TABLE STRUCTURE */
[b-xi0r0zyhhq] .modern-table table {
    table-layout: auto !important;
    width: 100% !important;
}

[b-xi0r0zyhhq] .modern-table th {
    background: white !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--slate-600) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--slate-100) !important;
    padding: 10px 16px !important;
}

[b-xi0r0zyhhq] .modern-table td {
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--slate-100) !important;
    vertical-align: middle !important;
    font-size: 0.8rem !important;
}

[b-xi0r0zyhhq] .modern-table .col-actions {
    width: 120px !important;
}

[b-xi0r0zyhhq] .modern-table .mud-table-container {
    overflow-y: auto !important;
    height: 380px !important;
}

/* 3. IDENTITY & TYPOGRAPHY */
.id-pill[b-xi0r0zyhhq] {
    padding: 2px 8px;
    background: var(--slate-100);
    color: var(--slate-500);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.text-mono[b-xi0r0zyhhq] {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    color: #475569;
}

.profile-name[b-xi0r0zyhhq] {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--slate-900) !important;
}

.role-badge[b-xi0r0zyhhq] {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    border-radius: 6px;
    padding: 2px 8px;
    font-weight: 600;
    font-size: 11px;
}

/* 4. MODERN PAGER */
.modern-pager[b-xi0r0zyhhq] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.jump-to-container[b-xi0r0zyhhq] {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(0, 0, 0, 0.04) !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

.jump-label[b-xi0r0zyhhq] {
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.jump-input-wrapper[b-xi0r0zyhhq] {
    width: 36px !important;
    flex-shrink: 0 !important;
}

.jump-field[b-xi0r0zyhhq] {
    margin-top: 0 !important;
}

.jump-field[b-xi0r0zyhhq]  .mud-input {
    font-size: 11px !important;
    height: 20px !important;
}

.jump-field[b-xi0r0zyhhq]  input {
    text-align: center !important;
    font-weight: 700 !important;
    padding: 0 !important;
}

.jump-btn[b-xi0r0zyhhq] {
    padding: 1px !important;
    width: 22px !important;
    height: 22px !important;
}

.jump-btn[b-xi0r0zyhhq]  .mud-icon-root {
    font-size: 16px !important;
}

/* ── Responsive & Mobile/Tablet Optimizations ── */
@media (max-width: 1023.98px) {
    .header-section > div[b-xi0r0zyhhq] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
    }

    [b-xi0r0zyhhq] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
        margin-top: 12px;
    }

    [b-xi0r0zyhhq] .modern-table table {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }
    
    [b-xi0r0zyhhq] .modern-table thead {
        display: none !important;
    }
    
    [b-xi0r0zyhhq] .modern-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 4px !important;
        background: transparent !important;
    }
    
    [b-xi0r0zyhhq] .modern-table tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas: 
            "id name actions"
            !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.7) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01), inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
        gap: 12px !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    [b-xi0r0zyhhq] .modern-table tr:hover {
        transform: translateY(-2px) !important;
        border-color: var(--primary-300, #93c5fd) !important;
    }

    [b-xi0r0zyhhq] .modern-table td {
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    [b-xi0r0zyhhq] .modern-table tr td.col-id { grid-area: id !important; }

    [b-xi0r0zyhhq] .modern-table tr td.col-id .id-pill {
        background: rgba(37, 99, 235, 0.08) !important;
        color: var(--primary-600, #2563eb) !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        letter-spacing: 0.02em !important;
    }

    [b-xi0r0zyhhq] .modern-table tr td.col-name { grid-area: name !important; }

    [b-xi0r0zyhhq] .modern-table tr td.col-name .profile-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--slate-800, #1e293b) !important;
        letter-spacing: -0.01em !important;
    }

    [b-xi0r0zyhhq] .modern-table tr td.col-actions {
        grid-area: actions !important;
        justify-content: flex-end !important;
        width: 100% !important;
        align-self: start !important;
        justify-self: end !important;
        margin-top: -4px !important;
        margin-right: -6px !important;
    }

    [b-xi0r0zyhhq] .modern-table tr td.col-actions .mud-stack {
        justify-content: flex-end !important;
        width: auto !important;
        gap: 0 !important;
    }

    [b-xi0r0zyhhq] .modern-table tr td.col-actions .mud-icon-button {
        padding: 4px !important;
        width: 32px !important;
        height: 32px !important;
    }

    [b-xi0r0zyhhq] .modern-table .mud-table-container {
        overflow-x: hidden !important;
    }

    [b-xi0r0zyhhq] .modern-table tfoot {
        overflow: hidden !important;
    }

    .modern-pager[b-xi0r0zyhhq] {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 6px 12px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .modern-pager[b-xi0r0zyhhq]  .mud-table-pagination {
        margin-left: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }

    .modern-pager[b-xi0r0zyhhq]  .mud-table-pagination-toolbar {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 2px !important;
        height: 32px !important;
        min-height: 32px !important;
        display: flex !important;
        align-items: center !important;
    }

    .modern-pager[b-xi0r0zyhhq]  .mud-table-pagination-spacer {
        display: none !important;
    }

    .modern-pager[b-xi0r0zyhhq]  .mud-select {
        display: none !important;
    }

    .modern-pager[b-xi0r0zyhhq]  .mud-table-pagination-information {
        font-size: 12px !important;
        margin: 0 4px 0 0 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        color: var(--slate-600) !important;
        font-weight: 500 !important;
    }

    .modern-pager[b-xi0r0zyhhq]  .mud-table-pagination-actions {
        display: flex !important;
        align-items: center !important;
        gap: 0px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .modern-pager[b-xi0r0zyhhq]  .mud-icon-button {
        padding: 4px !important;
        width: 28px !important;
        height: 28px !important;
    }

    .modern-pager[b-xi0r0zyhhq]  .mud-icon-button .mud-icon-root {
        font-size: 18px !important;
    }

    .jump-to-container[b-xi0r0zyhhq] {
        margin-left: auto !important;
    }

    @media (max-width: 500px) {
        .jump-label[b-xi0r0zyhhq] { display: none !important; }
        .modern-pager[b-xi0r0zyhhq] { gap: 4px !important; padding: 4px !important; }
        .modern-pager[b-xi0r0zyhhq]  .mud-table-pagination-information {
            font-size: 10px !important;
            margin-right: 2px !important;
        }
    }
}

@media (max-width: 599.98px) {
    [b-xi0r0zyhhq] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    [b-xi0r0zyhhq] .control-panel-card .action-btn,
    [b-xi0r0zyhhq] .control-panel-card .mud-button-root {
        width: 100% !important;
    }
}

/* ══ 120FPS SMOOTHING ══ */
[b-xi0r0zyhhq] .modern-table tbody tr {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══ STAGGERED ENTRANCE ANIMATION ══ */
@keyframes rowEnter-b-xi0r0zyhhq {
    from { opacity: 0; transform: translateZ(0) translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateZ(0) translateY(0) scale(1); }
}

[b-xi0r0zyhhq] .modern-table tbody tr {
    animation: rowEnter-b-xi0r0zyhhq 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(1)  { animation-delay: 0.01s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(2)  { animation-delay: 0.03s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(3)  { animation-delay: 0.05s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(4)  { animation-delay: 0.07s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(5)  { animation-delay: 0.09s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(6)  { animation-delay: 0.11s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(7)  { animation-delay: 0.13s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(8)  { animation-delay: 0.15s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(9)  { animation-delay: 0.17s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(10) { animation-delay: 0.19s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(11) { animation-delay: 0.21s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(12) { animation-delay: 0.23s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(13) { animation-delay: 0.25s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(14) { animation-delay: 0.27s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(15) { animation-delay: 0.29s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(16) { animation-delay: 0.31s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(17) { animation-delay: 0.33s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(18) { animation-delay: 0.35s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(19) { animation-delay: 0.37s; }
[b-xi0r0zyhhq] .modern-table tbody tr:nth-child(20) { animation-delay: 0.39s; }

@media (prefers-reduced-motion: reduce) {
    [b-xi0r0zyhhq] .modern-table tbody tr {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    [b-xi0r0zyhhq] .modern-table tbody tr:hover { transform: none !important; }
    [b-xi0r0zyhhq] .modern-table tbody tr:active { transform: none !important; }
}
/* /Components/Shared/MasterGridPage.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Master Grid Page - Scoped Styles
   ══════════════════════════════════════════════════════════ */

.header-avatar[b-vps8mxzycf] {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 44px !important;
    height: 44px !important;
}

.header-icon[b-vps8mxzycf] {
    color: white !important;
    font-size: 22px !important;
}

.control-panel-card[b-vps8mxzycf] {
    margin-top: 16px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.centered-grid[b-vps8mxzycf] {
    align-items: center !important;
}

.search-field-full[b-vps8mxzycf] {
    width: 100% !important;
}

.table-layout-wrapper[b-vps8mxzycf] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 16px !important;
    overflow: hidden !important;
}

[b-vps8mxzycf] .modern-table {
    margin-bottom: 24px;
}

[b-vps8mxzycf] .shadow-btn {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
}

/* Make sure hover states on primary and secondary buttons within shadow-btn don't make text/icons invisible */
[b-vps8mxzycf] .shadow-btn.mud-button-filled-primary:hover,
[b-vps8mxzycf] .shadow-btn.mud-button-filled-primary:focus,
[b-vps8mxzycf] .shadow-btn.mud-button-filled-primary:active,
[b-vps8mxzycf] .shadow-btn .mud-button-filled-primary:hover,
[b-vps8mxzycf] .shadow-btn .mud-button-filled-primary:focus,
[b-vps8mxzycf] .shadow-btn .mud-button-filled-primary:active {
    background-color: var(--primary-600) !important;
    color: white !important;
}

[b-vps8mxzycf] .shadow-btn.mud-button-filled-secondary:hover,
[b-vps8mxzycf] .shadow-btn.mud-button-filled-secondary:focus,
[b-vps8mxzycf] .shadow-btn.mud-button-filled-secondary:active,
[b-vps8mxzycf] .shadow-btn .mud-button-filled-secondary:hover,
[b-vps8mxzycf] .shadow-btn .mud-button-filled-secondary:focus,
[b-vps8mxzycf] .shadow-btn .mud-button-filled-secondary:active,
[b-vps8mxzycf] .shadow-btn .mud-icon-button:hover,
[b-vps8mxzycf] .shadow-btn .mud-icon-button:focus,
[b-vps8mxzycf] .shadow-btn .mud-icon-button:focus-within,
[b-vps8mxzycf] .shadow-btn .mud-icon-button:active {
    background-color: #db2777 !important;
    color: white !important;
    opacity: 1 !important;
}

[b-vps8mxzycf] .shadow-btn:hover .mud-icon-root,
[b-vps8mxzycf] .shadow-btn:hover .mud-button-label,
[b-vps8mxzycf] .shadow-btn .mud-button-root:hover .mud-icon-root,
[b-vps8mxzycf] .shadow-btn .mud-button-root:hover .mud-button-label,
[b-vps8mxzycf] .shadow-btn .mud-icon-button:hover .mud-icon-root,
[b-vps8mxzycf] .shadow-btn .mud-icon-button:focus .mud-icon-root,
[b-vps8mxzycf] .shadow-btn .mud-icon-button:focus-within .mud-icon-root,
[b-vps8mxzycf] .shadow-btn .mud-icon-button:active .mud-icon-root {
    color: white !important;
}

.footer-spacer[b-vps8mxzycf] {
    height: 24px;
    flex-shrink: 0;
}

/* ── Responsive & Mobile Optimizations ── */
@media (max-width: 959.98px) {
    .header-section > div[b-vps8mxzycf] {
        justify-content: center !important;
        text-align: center;
        flex-direction: column;
    }

    [b-vps8mxzycf] .control-panel-card .d-flex.justify-end {
        justify-content: center !important;
        width: 100%;
    }
}

@media (max-width: 599.98px) {
    [b-vps8mxzycf] .control-panel-card .d-flex.justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
    }
    
    [b-vps8mxzycf] .control-panel-card .action-btn,
    [b-vps8mxzycf] .control-panel-card .shadow-btn,
    [b-vps8mxzycf] .control-panel-card .upload-btn,
    [b-vps8mxzycf] .control-panel-card .add-btn {
        width: 100% !important;
        margin: 0 !important;
        display: inline-flex !important;
    }

    [b-vps8mxzycf] .control-panel-card .mud-chip {
        align-self: center;
    }
}