@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.7t9tbfaemk.bundle.scp.css';
@import '_content/BlazorStrap/BlazorStrap.10v83wk5fb.bundle.scp.css';

/* /Components/Layout/AuthLayout.razor.rz.scp.css */
:root[b-v8qageoodo] {
    --primary-color: #4361ee;
    --secondary-color: #3a0ca3;
    --accent-color: #4895ef;
    --dark-color: #1b263b;
    --text-color: #2b2d42;
    --light-gray: #f8f9fa;
    --medium-gray: #e9ecef;
    --white: #ffffff;
    --success-color: #4cc9f0;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.16);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

*[b-v8qageoodo] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body[b-v8qageoodo] {
    color: var(--text-color);
    line-height: 1.7;
    background-color: var(--light-gray);
    overflow-x: hidden;
}

.container[b-v8qageoodo] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
}

/* Header Styles */
header[b-v8qageoodo] {
    background-color: var(--white);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.9);
}

.header-container[b-v8qageoodo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: px 0;
    position: relative;
}

.logo[b-v8qageoodo] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-img[b-v8qageoodo] {
    height: 96px;
    width: 96px;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.logo:hover .logo-img[b-v8qageoodo] {
    transform: rotate(15deg) scale(1.1);
}

.logo-text[b-v8qageoodo] {
    display: flex;
    flex-direction: column;
}

.logo h1[b-v8qageoodo] {
    font-size: 1.8rem;
    font-weight: 700;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.2;
}

.logo span[b-v8qageoodo] {
    font-size: 0.8rem;
    color: var(--accent-color);
    font-weight: 500;
}

/* Navigation */
nav ul[b-v8qageoodo] {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 8px;
}

    nav ul li a[b-v8qageoodo] {
        text-decoration: none;
        color: var(--text-color);
        font-weight: 500;
        padding: 10px 16px;
        border-radius: 8px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        overflow: hidden;
    }

        nav ul li a[b-v8qageoodo]::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: var(--gradient);
            transition: width 0.3s ease;
        }

        nav ul li a:hover[b-v8qageoodo] {
            color: var(--primary-color);
        }

            nav ul li a:hover[b-v8qageoodo]::before {
                width: 100%;
            }

.auth-buttons[b-v8qageoodo] {
    display: flex;
    gap: 12px;
    margin-left: 20px;
}


.main-content[b-v8qageoodo] {
    padding: 100px 0;
    position: relative;
}

    .auth-buttons .btn[b-v8qageoodo] {
        padding: 10px 22px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .auth-buttons .sign-in[b-v8qageoodo] {
        background: var(--gradient);
        color: white;
        box-shadow: 0 4px 14px rgba(67, 97, 238, 0.3);
    }

        .auth-buttons .sign-in:hover[b-v8qageoodo] {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
        }

    .auth-buttons .sign-out[b-v8qageoodo] {
        border: 2px solid var(--primary-color);
        color: var(--primary-color);
        background: transparent;
    }

        .auth-buttons .sign-out:hover[b-v8qageoodo] {
            background: rgba(67, 97, 238, 0.1);
            transform: translateY(-2px);
        }

/* Mobile Menu */
.mobile-menu-btn[b-v8qageoodo] {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--text-color);
    z-index: 1001;
    transition: transform 0.3s ease;
}

    .mobile-menu-btn.active[b-v8qageoodo] {
        transform: rotate(90deg);
    }


/* Footer */
footer[b-v8qageoodo] {
    background-color: var(--dark-color);
    color: var(--white);
    padding: 80px 0 30px;
    position: relative;
}

.footer-wave[b-v8qageoodo] {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%23f8f9fa" opacity=".25"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%23f8f9fa" opacity=".5"/><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="%23f8f9fa"/></svg>');
    background-size: cover;
}

.footer-content[b-v8qageoodo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    margin-bottom: 50px;
}

.footer-column h3[b-v8qageoodo] {
    margin-bottom: 25px;
    font-size: 1.3rem;
    position: relative;
    padding-bottom: 10px;
}

    .footer-column h3[b-v8qageoodo]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 3px;
        background: var(--gradient);
    }

.footer-column ul[b-v8qageoodo] {
    list-style: none;
}

    .footer-column ul li[b-v8qageoodo] {
        margin-bottom: 12px;
    }

        .footer-column ul li a[b-v8qageoodo] {
            color: #adb5bd;
            text-decoration: none;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

            .footer-column ul li a:hover[b-v8qageoodo] {
                color: var(--white);
                transform: translateX(5px);
            }

.footer-column p[b-v8qageoodo] {
    color: #adb5bd;
    margin-bottom: 20px;
}

.footer-social[b-v8qageoodo] {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

    .footer-social a[b-v8qageoodo] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        transition: all 0.3s ease;
    }

        .footer-social a:hover[b-v8qageoodo] {
            background: var(--gradient);
            transform: translateY(-3px);
        }

.copyright[b-v8qageoodo] {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #adb5bd;
    font-size: 0.9rem;
}

/* Responsive Styles */
@@media (max-width: 1024px) {
    .hero h2[b-v8qageoodo] {
        font-size: 2.8rem;
    }

    .features[b-v8qageoodo] {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@@media (max-width: 768px) {
    .header-container[b-v8qageoodo] {
        flex-direction: row;
    }

    nav[b-v8qageoodo] {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background-color: var(--white);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease;
        z-index: 1000;
        padding: 80px 30px 30px;
    }

        nav.active[b-v8qageoodo] {
            right: 0;
        }

        nav ul[b-v8qageoodo] {
            flex-direction: column;
            gap: 15px;
        }

            nav ul li a[b-v8qageoodo] {
                padding: 12px 0;
            }

    .auth-buttons[b-v8qageoodo] {
        flex-direction: column;
        margin-left: 0;
        gap: 15px;
        margin-top: 20px;
    }

    .mobile-menu-btn[b-v8qageoodo] {
        display: block;
    }

    .hero[b-v8qageoodo] {
        padding: 100px 0 60px;
    }

        .hero h2[b-v8qageoodo] {
            font-size: 2.2rem;
        }

        .hero p[b-v8qageoodo] {
            font-size: 1.1rem;
        }

    .hero-buttons[b-v8qageoodo] {
        flex-direction: column;
        gap: 15px;
    }

    .btn[b-v8qageoodo] {
        width: 100%;
        justify-content: center;
    }

    .section-header h2[b-v8qageoodo] {
        font-size: 2rem;
    }

    .email-search[b-v8qageoodo] {
        padding: 40px 20px;
    }

    .email-search-form[b-v8qageoodo] {
        flex-direction: column;
    }

        .email-search-form input[b-v8qageoodo] {
            border-radius: 8px 8px 0 0;
        }

        .email-search-form button[b-v8qageoodo] {
            border-radius: 0 0 8px 8px;
            padding: 16px;
            justify-content: center;
        }

    .auth-form-container[b-v8qageoodo] {
        padding: 40px 25px;
    }
}

@@media (max-width: 480px) {
    .logo h1[b-v8qageoodo] {
        font-size: 1.5rem;
    }

    .hero h2[b-v8qageoodo] {
        font-size: 1.8rem;
    }

    .features[b-v8qageoodo] {
        grid-template-columns: 1fr;
    }

    .section-header h2[b-v8qageoodo] {
        font-size: 1.8rem;
    }

    .stats-grid[b-v8qageoodo] {
        grid-template-columns: 1fr;
    }

    .footer-content[b-v8qageoodo] {
        grid-template-columns: 1fr;
    }
}

/* Animations */
@@keyframes fadeInUp {
    from[b-v8qageoodo] {
        opacity: 0;
        transform: translateY(20px);
    }

    to[b-v8qageoodo] {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp[b-v8qageoodo] {
    animation: fadeInUp 0.6s ease forwards;
}

.delay-100[b-v8qageoodo] {
    animation-delay: 0.1s;
}

.delay-200[b-v8qageoodo] {
    animation-delay: 0.2s;
}

.delay-300[b-v8qageoodo] {
    animation-delay: 0.3s;
}

.delay-400[b-v8qageoodo] {
    animation-delay: 0.4s;
}

.delay-500[b-v8qageoodo] {
    animation-delay: 0.5s;
}

/* Particle Animation */
.particles[b-v8qageoodo] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.particle[b-v8qageoodo] {
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: particle-animation linear infinite;
}

@@keyframes particle-animation {
    0%[b-v8qageoodo] {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100%[b-v8qageoodo] {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* styles.css - Modern Sidebar with Dual Theme Support */

:root[b-jzaxhreenm] {
    /* Light Theme Variables */
    --light-bg: rgba(255, 255, 255, 0.95);
    --light-sidebar-bg: rgba(255, 255, 255, 0.85);
    --light-text: #1e293b;
    --light-text-muted: #64748b;
    --light-hover: #f1f5f9;
    --light-border: rgba(0, 0, 0, 0.05);
    --light-active: #e2e8f0;
    --light-active-text: #0f172a;
    --light-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.15);
    --light-badge-bg: #e6edf5;
    --light-badge-text: #2c3e50;
    --scrollbar-thumb: #cbd5e1;
    --scrollbar-thumb-hover: #94a3b8;
}

[data-theme="dark"][b-jzaxhreenm] {
    /* Dark Theme Variables */
    --light-bg: #0f172a;
    --light-sidebar-bg: rgba(18, 25, 35, 0.95);
    --light-text: #eef2f6;
    --light-text-muted: #8fafcf;
    --light-hover: #253341;
    --light-border: rgba(255, 255, 255, 0.08);
    --light-active: #2d3b4c;
    --light-active-text: #ffffff;
    --light-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.5);
    --light-badge-bg: #1f2b36;
    --light-badge-text: #bdd3f0;
    --scrollbar-thumb: #334155;
    --scrollbar-thumb-hover: #475569;
}

*[b-jzaxhreenm] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---- Layout overflow + sidebar spacing fix ----
   Prevent double scrollbars (body + main) and fix horizontal overflow caused by
   global `.main-content { width: 100%; }` combined with margin-left in this file. */
:root[b-jzaxhreenm] {
    --desktop-sidebar-open-width: 300px;
    --desktop-sidebar-closed-width: 85px;
}

html[b-jzaxhreenm],
body[b-jzaxhreenm] {
    height: 100%;
    width: 100%;
    overflow: hidden; /* main scrolls, body does not */
}

body[b-jzaxhreenm] {
    font-family: 'Inter', sans-serif;
    transition: background 0.3s ease;
    min-height: 100vh;
    overflow-x: hidden;
}

[data-theme="dark"] body[b-jzaxhreenm] {
    background: #0f172a;
}

/* Desktop Sidebar - Enhanced Scrollbar */
#sidebar[b-jzaxhreenm] {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100vh;
    background: var(--light-sidebar-bg);
    backdrop-filter: blur(12px);
    border-right: 1px solid var(--light-border);
    color: var(--light-text);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: var(--light-shadow);
    padding: 20px 12px 20px 20px;
    display: flex;
    flex-direction: column;
    /* Enhanced Scrollbar Styling */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

    #sidebar[b-jzaxhreenm]::-webkit-scrollbar {
        width: 6px;
    }

    #sidebar[b-jzaxhreenm]::-webkit-scrollbar-track {
        background: transparent;
        margin: 4px 0;
    }

    #sidebar[b-jzaxhreenm]::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
        border-radius: 20px;
        border: 2px solid transparent;
        background-clip: padding-box;
        min-height: 40px;
    }

        #sidebar[b-jzaxhreenm]::-webkit-scrollbar-thumb:hover {
            background: var(--scrollbar-thumb-hover);
            border: 2px solid transparent;
            background-clip: padding-box;
        }

    #sidebar[b-jzaxhreenm]::-webkit-scrollbar-corner {
        background: transparent;
    }

    #sidebar.close[b-jzaxhreenm] {
        width: 85px;
        padding: 20px 12px;
    }

        #sidebar.close .logo-text[b-jzaxhreenm],
        #sidebar.close .profile-text[b-jzaxhreenm],
        #sidebar.close .section-title[b-jzaxhreenm],
        #sidebar.close .nav-item span:not(.badge)[b-jzaxhreenm],
        #sidebar.close .dropdown-btn span:not(.badge)[b-jzaxhreenm],
        #sidebar.close .copyright-container span:not(.copyright-icon)[b-jzaxhreenm] {
            display: none;
        }

        #sidebar.close .nav-item i[b-jzaxhreenm],
        #sidebar.close .dropdown-btn i[b-jzaxhreenm] {
            margin-right: 0;
            font-size: 1.3rem;
        }

        #sidebar.close .badge[b-jzaxhreenm] {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            min-width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
        }

        #sidebar.close .dropdown-btn[b-jzaxhreenm] {
            position: relative;
        }

        #sidebar.close .nav-item[b-jzaxhreenm],
        #sidebar.close .dropdown-btn[b-jzaxhreenm] {
            justify-content: center;
        }

        #sidebar.close .sub-menu[b-jzaxhreenm] {
            display: none !important;
            opacity: 0;
            visibility: hidden;
        }

    /* When sidebar is open: sub-menus are hidden by default, only .show is visible */
    #sidebar:not(.close) .sub-menu[b-jzaxhreenm] {
        display: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

        #sidebar:not(.close) .sub-menu.show[b-jzaxhreenm] {
            display: block;
            opacity: 1;
            visibility: visible;
        }

/* Logo Section */
.logo-section[b-jzaxhreenm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 24px;
    margin-bottom: 8px;
    border-bottom: 1.5px solid var(--light-border);
    position: relative;
    flex-shrink: 0;
}

.logo-image[b-jzaxhreenm] {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.logo-text[b-jzaxhreenm] {
    font-size: 18px;
    font-weight: 600;
    color: var(--light-text);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.2s ease;
}

.toggle-btn[b-jzaxhreenm] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--light-hover);
    border: none;
    color: var(--light-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .toggle-btn:hover[b-jzaxhreenm] {
        background: var(--light-active);
        transform: scale(1.05);
    }

#sidebar.close .toggle-btn i[b-jzaxhreenm] {
    transform: rotate(180deg);
}

/* Profile Section */
.profile-section[b-jzaxhreenm] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 8px;
    margin-bottom: 16px;
    border-bottom: 1.5px solid var(--light-border);
    flex-shrink: 0;
}

.avatar[b-jzaxhreenm] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.profile-text[b-jzaxhreenm] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.2s ease;
}

    .profile-text .role[b-jzaxhreenm] {
        font-size: 12px;
        font-weight: 500;
        opacity: 0.7;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }

    .profile-text .name[b-jzaxhreenm] {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Navigation Menu - Enhanced Scrolling */
.nav-menu[b-jzaxhreenm] {
    list-style: none;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin-right: -4px;
    padding-right: 4px;
    /* Enhanced Scrollbar Styling */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

    .nav-menu[b-jzaxhreenm]::-webkit-scrollbar {
        width: 6px;
    }

    .nav-menu[b-jzaxhreenm]::-webkit-scrollbar-track {
        background: transparent;
        margin: 4px 0;
    }

    .nav-menu[b-jzaxhreenm]::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
        border-radius: 20px;
        border: 2px solid transparent;
        background-clip: padding-box;
        min-height: 40px;
    }

        .nav-menu[b-jzaxhreenm]::-webkit-scrollbar-thumb:hover {
            background: var(--scrollbar-thumb-hover);
        }

    .nav-menu[b-jzaxhreenm]::-webkit-scrollbar-corner {
        background: transparent;
    }

.section-header[b-jzaxhreenm] {
    margin: 20px 0 8px 0;
    flex-shrink: 0;
}

.section-title[b-jzaxhreenm] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 600;
    color: var(--light-text-muted);
    padding-left: 12px;
    transition: opacity 0.2s ease;
}

.nav-item[b-jzaxhreenm] {
    margin-bottom: 2px;
    border-radius: 12px;
    transition: all 0.2s;
    flex-shrink: 0;
    position: relative;
}

    .nav-item a[b-jzaxhreenm],
    .dropdown-btn[b-jzaxhreenm] {
        display: flex;
        align-items: center;
        padding: 10px 12px;
        color: var(--light-text);
        text-decoration: none;
        font-weight: 500;
        font-size: 14px;
        border-radius: 12px;
        transition: all 0.2s;
        width: 100%;
        border: none;
        background: none;
        cursor: pointer;
        gap: 12px;
        position: relative;
    }

        .nav-item i[b-jzaxhreenm],
        .dropdown-btn i[b-jzaxhreenm] {
            width: 24px;
            font-size: 1.2rem;
            opacity: 0.8;
            flex-shrink: 0;
        }

        .nav-item:hover:not(.has-dropdown) a[b-jzaxhreenm],
        .dropdown-btn:hover[b-jzaxhreenm] {
            background: var(--light-hover);
        }

    .nav-item.active > a[b-jzaxhreenm],
    .nav-item.active-parent > .dropdown-btn[b-jzaxhreenm],
    .nav-item.menu-open > .dropdown-btn[b-jzaxhreenm] {
        background: var(--light-active);
        color: var(--light-active-text);
        font-weight: 600;
    }

        .nav-item.active > a i[b-jzaxhreenm],
        .nav-item.active-parent > .dropdown-btn i[b-jzaxhreenm],
        .nav-item.menu-open > .dropdown-btn i[b-jzaxhreenm] {
            opacity: 1;
        }

/* Dropdown */
.has-dropdown[b-jzaxhreenm] {
    position: relative;
}

.dropdown-btn[b-jzaxhreenm] {
    justify-content: flex-start;
    position: relative;
    width: 100%;
}

.dropdown-arrow[b-jzaxhreenm] {
    margin-left: auto;
    transition: transform 0.3s;
    font-size: 0.9rem;
    opacity: 0.7;
}

.dropdown-btn.active .dropdown-arrow[b-jzaxhreenm] {
    transform: rotate(180deg);
}

.sub-menu[b-jzaxhreenm] {
    list-style: none;
    padding-left: 36px;
    margin-top: 4px;
    margin-bottom: 4px;
    display: none;
    animation: slideDown-b-jzaxhreenm 0.3s ease;
}

@keyframes slideDown-b-jzaxhreenm {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sub-menu.show[b-jzaxhreenm] {
    display: block;
}

.sub-menu li a[b-jzaxhreenm] {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--light-text);
    opacity: 0.8;
    gap: 10px;
    border-radius: 8px;
}

    .sub-menu li a i[b-jzaxhreenm] {
        width: 20px;
        font-size: 1rem;
    }

.sub-menu li.active a[b-jzaxhreenm] {
    color: var(--light-active-text);
    font-weight: 600;
    opacity: 1;
    background: var(--light-hover);
}

/* Badge */
.badge[b-jzaxhreenm] {
    margin-left: auto;
    background: var(--light-badge-bg);
    color: var(--light-badge-text);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    transition: all 0.2s;
}

/* Logout Item */
.logout-item[b-jzaxhreenm] {
    margin-top: 20px;
    border-top: 1px solid var(--light-border);
    padding-top: 16px;
}

/* Sidebar Footer */
.sidebar-footer[b-jzaxhreenm] {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--light-border);
    flex-shrink: 0;
}

.copyright-container[b-jzaxhreenm] {
    font-size: 11px;
    color: var(--light-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.2s ease;
}

.company-name[b-jzaxhreenm] {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    transition: color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
}

    .company-name:hover[b-jzaxhreenm] {
        color: var(--light-text);
    }

a.company-name[b-jzaxhreenm] {
    color: var(--light-text-muted);
}

    a.company-name:hover[b-jzaxhreenm] {
        color: var(--light-text);
    }

/* Floating Toggle Button */
.floating-toggle[b-jzaxhreenm] {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: var(--light-sidebar-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--light-border);
    color: var(--light-text);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    box-shadow: var(--light-shadow);
    transition: all 0.2s;
}

    .floating-toggle.visible[b-jzaxhreenm] {
        display: flex;
        animation: fadeIn-b-jzaxhreenm 0.3s ease;
    }

@keyframes fadeIn-b-jzaxhreenm {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

.floating-toggle:hover[b-jzaxhreenm] {
    background: var(--light-hover);
    transform: scale(1.05);
}

/* Main Content */
.main-content[b-jzaxhreenm] {
    margin: 0;
    margin-left: var(--desktop-sidebar-open-width);
    width: calc(100% - var(--desktop-sidebar-open-width));
    max-width: none;
    height: 100vh;
    padding: 20px;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
}

/* `+` didn't work because `.floating-toggle` sits between sidebar and main */
#sidebar.close ~ .main-content[b-jzaxhreenm] {
    margin-left: var(--desktop-sidebar-closed-width);
    width: calc(100% - var(--desktop-sidebar-closed-width));
}

/* Theme Toggle */
.theme-toggle[b-jzaxhreenm] {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: var(--light-sidebar-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--light-border);
    color: var(--light-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    box-shadow: var(--light-shadow);
    transition: all 0.2s;
}

    .theme-toggle:hover[b-jzaxhreenm] {
        background: var(--light-hover);
        transform: scale(1.05) rotate(15deg);
    }

/* Mobile Sidebar - Enhanced */
.mobile-sidebar[b-jzaxhreenm] {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    background: var(--light-sidebar-bg);
    backdrop-filter: blur(12px);
    color: var(--light-text);
    z-index: 2000;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    /* Enhanced Mobile Scrollbar */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

    .mobile-sidebar.open[b-jzaxhreenm] {
        left: 0;
        box-shadow: var(--light-shadow);
    }

    .mobile-sidebar[b-jzaxhreenm]::-webkit-scrollbar {
        width: 4px;
    }

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

    .mobile-sidebar[b-jzaxhreenm]::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
        border-radius: 20px;
    }

        .mobile-sidebar[b-jzaxhreenm]::-webkit-scrollbar-thumb:hover {
            background: var(--scrollbar-thumb-hover);
        }

.mobile-overlay[b-jzaxhreenm] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    display: none;
    backdrop-filter: blur(2px);
    transition: opacity 0.3s ease;
}

    .mobile-overlay.open[b-jzaxhreenm] {
        display: block;
        animation: fadeIn-b-jzaxhreenm 0.3s ease;
    }

.mobile-header[b-jzaxhreenm] {
    display: none;
    background: var(--light-sidebar-bg);
    backdrop-filter: blur(8px);
    padding: 12px 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 998;
    border-bottom: 1px solid var(--light-border);
}

.mobile-header-content[b-jzaxhreenm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-header-logo[b-jzaxhreenm] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .mobile-header-logo img[b-jzaxhreenm] {
        width: 35px;
        height: 35px;
        border-radius: 8px;
        object-fit: cover;
    }

    .mobile-header-logo span[b-jzaxhreenm] {
        font-weight: 600;
        color: var(--light-text);
    }

.mobile-menu-toggle[b-jzaxhreenm] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--light-hover);
    border: none;
    color: var(--light-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .mobile-menu-toggle:hover[b-jzaxhreenm] {
        background: var(--light-active);
    }

/* Responsive Design */
@media (max-width: 992px) {
    #sidebar[b-jzaxhreenm] {
        left: -300px;
        box-shadow: none;
    }

        #sidebar.open[b-jzaxhreenm] {
            left: 0;
            box-shadow: var(--light-shadow);
        }

    .main-content[b-jzaxhreenm] {
        margin-left: 0;
        width: 100%;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding-top: 80px;
    }

    .mobile-header[b-jzaxhreenm] {
        display: block;
    }

    .floating-toggle[b-jzaxhreenm] {
        display: none;
    }

    .theme-toggle[b-jzaxhreenm] {
        top: 70px;
    }
}

/* Print Styles */
@media print {
    #sidebar[b-jzaxhreenm],
    .mobile-header[b-jzaxhreenm],
    .theme-toggle[b-jzaxhreenm],
    .floating-toggle[b-jzaxhreenm] {
        display: none;
    }

    .main-content[b-jzaxhreenm] {
        margin-left: 0;
        padding: 0;
    }
}

#sidebar.close .nav-item.has-dropdown > .dropdown-btn i:first-child[b-jzaxhreenm] {
    margin-right: 0;
    font-size: 1.3rem;
}

#sidebar.close .nav-item.has-dropdown .dropdown-arrow[b-jzaxhreenm],
#sidebar.close .nav-item.has-dropdown span:not(.badge)[b-jzaxhreenm] {
    display: none;
}

#sidebar.close .nav-item.has-dropdown .badge[b-jzaxhreenm] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}
/* /Components/Pages/About.razor.rz.scp.css */
/* /Components/Pages/AccessoryComponent/AccessoriesComponent.razor.rz.scp.css */
.accessories-container[b-d3t6uvdidx] {
    padding: var(--space-8);
    max-width: 1600px;
    margin: 0 auto;
    font-family: var(--font-family-sans);
    background: var(--color-bg-primary);
    min-height: 100vh;
    transition: background-color var(--transition-normal);
}

/* Header Styles */
.accessories-header[b-d3t6uvdidx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
    gap: var(--space-6);
    background: var(--color-bg-surface);
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-light);
}

.page-title[b-d3t6uvdidx] {
    color: var(--color-text-primary);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin: 0;
    line-height: var(--line-height-tight);
}

.header-actions[b-d3t6uvdidx] {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
}

/* Stats Overview */
.stats-overview[b-d3t6uvdidx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.stat-card[b-d3t6uvdidx] {
    background: var(--color-bg-surface);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    text-align: center;
    border-left: 4px solid;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-normal);
}

    .stat-card:hover[b-d3t6uvdidx] {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
    }

    .stat-card.total[b-d3t6uvdidx] {
        border-left-color: var(--color-info);
    }

    .stat-card.active[b-d3t6uvdidx] {
        border-left-color: var(--color-success);
    }

    .stat-card.inactive[b-d3t6uvdidx] {
        border-left-color: var(--color-danger);
    }

    .stat-card.low-stock[b-d3t6uvdidx] {
        border-left-color: var(--color-warning);
    }

    .stat-card.end-life[b-d3t6uvdidx] {
        border-left-color: var(--color-danger);
        background: var(--color-danger);
        color: var(--color-text-inverse);
    }

.stat-value[b-d3t6uvdidx] {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: var(--space-2) 0;
}

.stat-card.end-life .stat-value[b-d3t6uvdidx] {
    color: var(--color-text-inverse);
}

.stat-label[b-d3t6uvdidx] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card.end-life .stat-label[b-d3t6uvdidx] {
    color: var(--color-text-inverse);
}

/* Filters Section */
.filters-section[b-d3t6uvdidx] {
    background: var(--color-bg-surface);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
}

.search-box[b-d3t6uvdidx] {
    margin-bottom: var(--space-6);
}

.search-input-container[b-d3t6uvdidx] {
    position: relative;
    max-width: 500px;
}

.search-input[b-d3t6uvdidx] {
    width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

    .search-input:focus[b-d3t6uvdidx] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
        background: var(--color-bg-primary);
    }

.search-icon[b-d3t6uvdidx] {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
}

.clear-search[b-d3t6uvdidx] {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast);
}

    .clear-search:hover[b-d3t6uvdidx] {
        background: var(--color-bg-tertiary);
    }

.filter-controls[b-d3t6uvdidx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-6);
    align-items: end;
}

.filter-group[b-d3t6uvdidx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

    .filter-group label[b-d3t6uvdidx] {
        font-weight: 600;
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
    }

.filter-select[b-d3t6uvdidx] {
    padding: var(--space-3);
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    color: var(--color-text-primary);
}

    .filter-select:focus[b-d3t6uvdidx] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
    }

/* Grid Styles */
.accessories-grid-container[b-d3t6uvdidx] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
}

.grid-header[b-d3t6uvdidx] {
    padding: var(--space-6) var(--space-8);
    background: var(--color-primary);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.results-count[b-d3t6uvdidx] {
    color: var(--color-text-inverse);
    font-size: var(--font-size-base);
    font-weight: 500;
}

.grid-actions[b-d3t6uvdidx] {
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.accessories-grid[b-d3t6uvdidx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: var(--space-8);
    padding: var(--space-8);
}

.accessory-card[b-d3t6uvdidx] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

    .accessory-card[b-d3t6uvdidx]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    }

    .accessory-card:hover[b-d3t6uvdidx] {
        transform: translateY(-8px);
        box-shadow: var(--shadow-lg);
    }

    .accessory-card.inactive[b-d3t6uvdidx] {
        opacity: 0.7;
        background: var(--color-bg-secondary);
    }

        .accessory-card.inactive[b-d3t6uvdidx]::before {
            background: var(--color-text-tertiary);
        }

.card-header[b-d3t6uvdidx] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: var(--space-6);
}

.accessory-name[b-d3t6uvdidx] {
    color: var(--color-text-primary);
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin: 0;
    flex: 1;
    margin-right: var(--space-4);
    line-height: var(--line-height-tight);
}

.status-badge[b-d3t6uvdidx] {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .status-badge.active[b-d3t6uvdidx] {
        background: rgba(46, 204, 113, 0.15);
        color: var(--color-success);
        box-shadow: 0 2px 4px rgba(46, 204, 113, 0.1);
    }

    .status-badge.inactive[b-d3t6uvdidx] {
        background: rgba(231, 76, 60, 0.15);
        color: var(--color-danger);
        box-shadow: 0 2px 4px rgba(231, 76, 60, 0.1);
    }

    .status-badge.end-life[b-d3t6uvdidx] {
        background: var(--color-danger);
        color: var(--color-text-inverse);
    }

.status-badges[b-d3t6uvdidx] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.card-content[b-d3t6uvdidx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.detail-row[b-d3t6uvdidx] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text-secondary);
    padding: var(--space-2) 0;
}

    .detail-row i[b-d3t6uvdidx] {
        width: 20px;
        color: var(--color-primary);
        text-align: center;
    }

.label[b-d3t6uvdidx] {
    font-weight: 600;
    min-width: 100px;
    color: var(--color-text-secondary);
}

.value[b-d3t6uvdidx] {
    color: var(--color-text-primary);
    font-weight: 500;
}

.stock-info[b-d3t6uvdidx] {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-2);
}

.stock-badge[b-d3t6uvdidx] {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-align: center;
    flex: 1;
    box-shadow: var(--shadow-sm);
}

    .stock-badge.in-stock[b-d3t6uvdidx] {
        background: rgba(46, 204, 113, 0.15);
        color: var(--color-success);
    }

    .stock-badge.out-of-stock[b-d3t6uvdidx] {
        background: rgba(231, 76, 60, 0.15);
        color: var(--color-danger);
    }

    .stock-badge.low-stock[b-d3t6uvdidx] {
        background: rgba(243, 156, 18, 0.15);
        color: var(--color-warning);
    }

    .stock-badge.assigned[b-d3t6uvdidx] {
        background: rgba(52, 152, 219, 0.15);
        color: var(--color-info);
    }

    .stock-badge.all[b-d3t6uvdidx] {
        background: var(--color-bg-tertiary);
        color: var(--color-info);
    }

    .stock-badge.dead[b-d3t6uvdidx] {
        background: rgba(231, 76, 60, 0.3);
        color: var(--color-danger);
    }

.card-actions[b-d3t6uvdidx] {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
    justify-content: space-between;
}

/* Button Styles */
.btn[b-d3t6uvdidx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--font-size-sm);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

    .btn[b-d3t6uvdidx]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left var(--transition-normal);
    }

    .btn:hover[b-d3t6uvdidx]::before {
        left: 100%;
    }

    .btn:disabled[b-d3t6uvdidx] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
    }

.btn-primary[b-d3t6uvdidx] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
}

    .btn-primary:hover:not(:disabled)[b-d3t6uvdidx] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
        background: var(--color-primary-dark);
    }

.btn-success[b-d3t6uvdidx] {
    background: var(--color-success);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
}

    .btn-success:hover:not(:disabled)[b-d3t6uvdidx] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
    }

.btn-secondary[b-d3t6uvdidx] {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-medium);
}

    .btn-secondary:hover:not(:disabled)[b-d3t6uvdidx] {
        background: var(--color-bg-tertiary);
        transform: translateY(-2px);
    }

.btn-outline[b-d3t6uvdidx] {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

    .btn-outline:hover:not(:disabled)[b-d3t6uvdidx] {
        background: var(--color-primary);
        color: var(--color-text-inverse);
        transform: translateY(-2px);
    }

.btn-endlife[b-d3t6uvdidx] {
    background: transparent;
    border: 2px solid var(--color-danger);
    color: var(--color-danger);
}

    .btn-endlife:hover:not(:disabled)[b-d3t6uvdidx] {
        background: var(--color-danger);
        color: var(--color-text-inverse);
        transform: translateY(-2px);
    }

    .btn-endlife:disabled[b-d3t6uvdidx] {
        color: var(--color-text-tertiary);
        border-color: var(--color-text-tertiary);
        opacity: 0.6;
    }

.btn-warning[b-d3t6uvdidx] {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-gray-900);
}

    .btn-warning:hover[b-d3t6uvdidx] {
        background: var(--color-warning);
        opacity: 0.9;
    }

.btn-sm[b-d3t6uvdidx] {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
}

.btn-close[b-d3t6uvdidx] {
    background: none;
    border: none;
    font-size: var(--font-size-xl);
    color: var(--color-text-tertiary);
    padding: var(--space-2);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

    .btn-close:hover[b-d3t6uvdidx] {
        background: var(--color-bg-tertiary);
    }

.btn-export[b-d3t6uvdidx] {
    background: var(--color-success);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
}

    .btn-export:hover:not(:disabled)[b-d3t6uvdidx] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
    }

.btn-clear-selection[b-d3t6uvdidx] {
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: var(--space-1);
}

    .btn-clear-selection:hover[b-d3t6uvdidx] {
        color: var(--color-danger);
    }

/* Empty State */
.empty-state[b-d3t6uvdidx] {
    text-align: center;
    padding: var(--space-16) var(--space-8);
    color: var(--color-text-tertiary);
}

.empty-icon[b-d3t6uvdidx] {
    font-size: 5rem;
    color: var(--color-border-medium);
    margin-bottom: var(--space-6);
    opacity: 0.5;
}

.empty-state h3[b-d3t6uvdidx] {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-xl);
}

/* Modal Styles */
.modal-overlay[b-d3t6uvdidx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-modal-backdrop);
    padding: var(--space-4);
    backdrop-filter: blur(5px);
}

.modal-content[b-d3t6uvdidx] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: modalSlideIn-b-d3t6uvdidx 0.3s ease-out;
}

@keyframes modalSlideIn-b-d3t6uvdidx {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }

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

.modal-header[b-d3t6uvdidx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-8) var(--space-8) var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

    .modal-header h2[b-d3t6uvdidx] {
        margin: 0;
        color: var(--color-text-primary);
        font-size: var(--font-size-2xl);
        font-weight: 700;
    }

.modal-body[b-d3t6uvdidx] {
    padding: var(--space-8);
}

.modal-footer[b-d3t6uvdidx] {
    padding: var(--space-6) var(--space-8);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    gap: var(--space-4);
    justify-content: flex-end;
}

/* Form Styles */
.form-group[b-d3t6uvdidx] {
    margin-bottom: var(--space-6);
}

.form-row[b-d3t6uvdidx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.form-group label[b-d3t6uvdidx] {
    display: block;
    margin-bottom: var(--space-3);
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.form-control[b-d3t6uvdidx] {
    width: 100%;
    padding: var(--space-3);
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

    .form-control:focus[b-d3t6uvdidx] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
        background: var(--color-bg-surface);
    }

.input-validation-error[b-d3t6uvdidx] {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1) !important;
}

/* Searchable Select Styles */
.searchable-select[b-d3t6uvdidx] {
    position: relative;
}

.select-input-container[b-d3t6uvdidx] {
    position: relative;
}

.select-search-input[b-d3t6uvdidx] {
    padding-left: var(--space-8);
}

.select-icon[b-d3t6uvdidx] {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    z-index: 5;
}

.select-dropdown[b-d3t6uvdidx] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    max-height: 200px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-md);
}

.select-option[b-d3t6uvdidx] {
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    border-bottom: 1px solid var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

    .select-option:hover[b-d3t6uvdidx] {
        background-color: var(--color-bg-secondary);
    }

    .select-option.selected[b-d3t6uvdidx] {
        background-color: var(--color-primary);
        color: var(--color-text-inverse);
    }

.user-info[b-d3t6uvdidx] {
    display: flex;
    flex-direction: column;
}

.user-name[b-d3t6uvdidx] {
    font-weight: 500;
}

.user-department[b-d3t6uvdidx] {
    font-size: var(--font-size-sm);
    color: inherit;
    opacity: 0.8;
}

.selected-user[b-d3t6uvdidx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-bg-secondary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
}

/* Assign Modal Specific */
.assign-info[b-d3t6uvdidx] {
    background: var(--color-bg-secondary);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
    border: 1px solid var(--color-border-light);
}

    .assign-info h4[b-d3t6uvdidx] {
        margin: 0 0 var(--space-2) 0;
        color: var(--color-text-primary);
        font-size: var(--font-size-lg);
    }

    .assign-info p[b-d3t6uvdidx] {
        margin: 0;
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
    }

.endlife-info[b-d3t6uvdidx] {
    background-color: var(--color-bg-secondary);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.warning-message[b-d3t6uvdidx] {
    background-color: rgba(243, 156, 18, 0.15);
    border: 1px solid rgba(243, 156, 18, 0.3);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

    .warning-message h4[b-d3t6uvdidx] {
        color: var(--color-warning);
        margin-bottom: var(--space-2);
    }

.success-message[b-d3t6uvdidx] {
    background-color: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.3);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

    .success-message h4[b-d3t6uvdidx] {
        color: var(--color-success);
        margin-bottom: var(--space-2);
    }

.warning-consequences[b-d3t6uvdidx],
.success-benefits[b-d3t6uvdidx] {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
}

    .warning-consequences ul[b-d3t6uvdidx],
    .success-benefits ul[b-d3t6uvdidx] {
        margin: var(--space-4) 0 0 0;
        padding-left: var(--space-8);
    }

    .warning-consequences li[b-d3t6uvdidx],
    .success-benefits li[b-d3t6uvdidx] {
        margin-bottom: var(--space-2);
        line-height: 1.4;
    }

.text-warning[b-d3t6uvdidx] {
    color: var(--color-warning) !important;
}

.text-success[b-d3t6uvdidx] {
    color: var(--color-success) !important;
}

/* Toast Notification */
.toast-container[b-d3t6uvdidx] {
    position: fixed;
    top: var(--space-8);
    right: var(--space-8);
    z-index: var(--z-tooltip);
    max-width: 400px;
}

.toast[b-d3t6uvdidx] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid;
    animation: toastSlideIn-b-d3t6uvdidx 0.3s ease-out;
}

    .toast.success[b-d3t6uvdidx] {
        border-left-color: var(--color-success);
    }

    .toast.error[b-d3t6uvdidx] {
        border-left-color: var(--color-danger);
    }

    .toast.info[b-d3t6uvdidx] {
        border-left-color: var(--color-info);
    }

@keyframes toastSlideIn-b-d3t6uvdidx {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Loading state */
.loading[b-d3t6uvdidx] {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

    .loading[b-d3t6uvdidx]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
    }

/* Validation Styles */
.validation-message[b-d3t6uvdidx] {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
    font-weight: 500;
}

/* Modal header icons */
.modal-header .fa-exclamation-triangle[b-d3t6uvdidx],
.modal-header .fa-check-circle[b-d3t6uvdidx] {
    margin-right: var(--space-4);
    color: var(--color-text-secondary);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .accessories-grid[b-d3t6uvdidx] {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
}

@media (max-width: 768px) {
    .accessories-container[b-d3t6uvdidx] {
        padding: var(--space-4);
    }

    .accessories-header[b-d3t6uvdidx] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .page-title[b-d3t6uvdidx] {
        font-size: var(--font-size-2xl);
    }

    .header-actions[b-d3t6uvdidx] {
        justify-content: center;
    }

    .filter-controls[b-d3t6uvdidx] {
        grid-template-columns: 1fr;
    }

    .accessories-grid[b-d3t6uvdidx] {
        grid-template-columns: 1fr;
        padding: var(--space-4);
        gap: var(--space-6);
    }

    .form-row[b-d3t6uvdidx] {
        grid-template-columns: 1fr;
    }

    .modal-content[b-d3t6uvdidx] {
        margin: var(--space-4);
        max-height: calc(100vh - var(--space-8));
    }

    .modal-footer[b-d3t6uvdidx] {
        flex-direction: column;
    }

    .card-header[b-d3t6uvdidx] {
        flex-direction: column;
        gap: var(--space-4);
        align-items: start;
    }

    .accessory-name[b-d3t6uvdidx] {
        margin-right: 0;
    }

    .card-actions[b-d3t6uvdidx] {
        flex-direction: column;
    }

    .stats-overview[b-d3t6uvdidx] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .page-title[b-d3t6uvdidx] {
        font-size: var(--font-size-xl);
    }

    .accessory-card[b-d3t6uvdidx] {
        padding: var(--space-6);
    }

    .stats-overview[b-d3t6uvdidx] {
        grid-template-columns: 1fr;
    }

    .btn[b-d3t6uvdidx] {
        width: 100%;
        justify-content: center;
    }

    .grid-actions[b-d3t6uvdidx] {
        flex-direction: column;
        width: 100%;
    }
}
/* /Components/Pages/AccessoryComponent/AccessoryAssignmentComponent.razor.rz.scp.css */
.assignments-container[b-puxe2mt7le] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-8);
    margin: var(--space-6);
    font-family: var(--font-family-sans);
}

.assignments-header[b-puxe2mt7le] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
}

    .assignments-header h2[b-puxe2mt7le] {
        color: var(--color-text-primary);
        font-size: var(--font-size-2xl);
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

.header-actions[b-puxe2mt7le] {
    display: flex;
    gap: var(--space-4);
}

/* Loading State */
.loading-container[b-puxe2mt7le] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-6);
    color: var(--color-text-tertiary);
}

.loading-spinner[b-puxe2mt7le] {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-6);
    color: var(--color-primary);
}

/* Summary Cards */
.summary-cards[b-puxe2mt7le] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.summary-card[b-puxe2mt7le] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-fast);
}

    .summary-card:hover[b-puxe2mt7le] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.summary-icon[b-puxe2mt7le] {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
}

    .summary-icon.total[b-puxe2mt7le] {
        background: rgba(52, 152, 219, 0.15);
        color: var(--color-info);
    }

    .summary-icon.active[b-puxe2mt7le] {
        background: rgba(46, 204, 113, 0.15);
        color: var(--color-success);
    }

    .summary-icon.reclaimed[b-puxe2mt7le] {
        background: rgba(52, 152, 219, 0.15);
        color: var(--color-info);
    }

.summary-content h3[b-puxe2mt7le] {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
}

.summary-content p[b-puxe2mt7le] {
    margin: var(--space-1) 0 0 0;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

/* Filters Section */
.filters-section[b-puxe2mt7le] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    padding: var(--space-6);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
}

.filter-group[b-puxe2mt7le] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

    .filter-group label[b-puxe2mt7le] {
        font-weight: 500;
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

.form-control[b-puxe2mt7le] {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}

    .form-control:focus[b-puxe2mt7le] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
    }

.filter-actions[b-puxe2mt7le] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
}

/* Buttons */
.btn[b-puxe2mt7le] {
    padding: var(--space-2) var(--space-6);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

    .btn:disabled[b-puxe2mt7le] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
    }

.btn-primary[b-puxe2mt7le] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

    .btn-primary:hover:not(:disabled)[b-puxe2mt7le] {
        background: var(--color-primary-dark);
        transform: translateY(-1px);
    }

.btn-secondary[b-puxe2mt7le] {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-medium);
}

    .btn-secondary:hover:not(:disabled)[b-puxe2mt7le] {
        background: var(--color-bg-tertiary);
    }

.btn-danger[b-puxe2mt7le] {
    background: var(--color-danger);
    color: var(--color-text-inverse);
}

    .btn-danger:hover:not(:disabled)[b-puxe2mt7le] {
        background: #dc2626;
        transform: translateY(-1px);
    }

.btn-pagination[b-puxe2mt7le] {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-medium);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: var(--font-size-sm);
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-pagination:hover:not(:disabled)[b-puxe2mt7le] {
        background: var(--color-bg-tertiary);
        border-color: var(--color-border-heavy);
    }

    .btn-pagination.active[b-puxe2mt7le] {
        background: var(--color-primary);
        color: var(--color-text-inverse);
        border-color: var(--color-primary);
    }

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

/* Table Styles */
.table-container[b-puxe2mt7le] {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
}

.assignments-table[b-puxe2mt7le] {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-surface);
}

    .assignments-table th[b-puxe2mt7le] {
        background: var(--color-bg-secondary);
        padding: var(--space-4) var(--space-6);
        text-align: left;
        font-weight: 600;
        color: var(--color-text-secondary);
        border-bottom: 1px solid var(--color-border-light);
        font-size: var(--font-size-sm);
        cursor: pointer;
        user-select: none;
        text-align: center;
    }

    .assignments-table td[b-puxe2mt7le] {
        padding: var(--space-6);
        border-bottom: 1px solid var(--color-bg-tertiary);
        color: var(--color-text-tertiary);
    }

    .assignments-table tr:hover[b-puxe2mt7le] {
        background: var(--color-bg-tertiary);
    }

    .assignments-table tr.row-reclaimed[b-puxe2mt7le] {
        background: rgba(52, 152, 219, 0.05);
    }

        .assignments-table tr.row-reclaimed:hover[b-puxe2mt7le] {
            background: rgba(52, 152, 219, 0.1);
        }

.sortable[b-puxe2mt7le] {
    transition: background-color var(--transition-fast);
}

    .sortable:hover[b-puxe2mt7le] {
        background: var(--color-border-light);
    }

.sort-icon[b-puxe2mt7le] {
    margin-left: var(--space-1);
    font-size: var(--font-size-xs);
}

/* User Cell */
.user-cell[b-puxe2mt7le] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.user-avatar[b-puxe2mt7le] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    color: var(--color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-base);
    flex-shrink: 0;
    background: var(--color-primary);
}

.user-info[b-puxe2mt7le] {
    display: flex;
    flex-direction: column;
}

.user-name[b-puxe2mt7le] {
    font-weight: 500;
    color: var(--color-text-primary);
}

.user-email[b-puxe2mt7le] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* Date Cell */
.date-cell[b-puxe2mt7le] {
    display: flex;
    flex-direction: column;
}

.date[b-puxe2mt7le] {
    font-weight: 500;
    color: var(--color-text-primary);
}

.days-ago[b-puxe2mt7le] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* Badges */
.accessory-type-badge[b-puxe2mt7le] {
    background: rgba(67, 97, 238, 0.15);
    color: var(--color-primary);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: fit-content;
}

.status-badge[b-puxe2mt7le] {
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: fit-content;
}

.status-assigned[b-puxe2mt7le] {
    background: rgba(46, 204, 113, 0.15);
    color: var(--color-success);
}

.status-reclaimed[b-puxe2mt7le] {
    background: rgba(52, 152, 219, 0.15);
    color: var(--color-info);
}

/* Serial Number */
.serial-number[b-puxe2mt7le] {
    background: var(--color-bg-tertiary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Action Buttons */
.action-buttons[b-puxe2mt7le] {
    display: flex;
    gap: var(--space-1);
}

.btn-action[b-puxe2mt7le] {
    padding: var(--space-2);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: transparent;
    color: var(--color-text-tertiary);
}

    .btn-action:hover[b-puxe2mt7le] {
        transform: scale(1.1);
    }

.btn-reclaim[b-puxe2mt7le] {
    background: rgba(162, 184, 252, 0.3);
    color: var(--color-text-primary);
}

    .btn-reclaim:hover[b-puxe2mt7le] {
        background: rgba(67, 97, 238, 0.15);
        color: var(--color-primary);
    }

.btn-view:hover[b-puxe2mt7le] {
    background: rgba(67, 97, 238, 0.15);
    color: var(--color-primary);
}

.btn-edit:hover[b-puxe2mt7le] {
    background: rgba(243, 156, 18, 0.15);
    color: var(--color-warning);
}

.btn-delete:hover[b-puxe2mt7le] {
    background: rgba(231, 76, 60, 0.15);
    color: var(--color-danger);
}

/* No Data State */
.no-data[b-puxe2mt7le] {
    text-align: center;
    padding: var(--space-16) var(--space-6);
}

.no-data-content[b-puxe2mt7le] {
    color: var(--color-text-tertiary);
}

.no-data-icon[b-puxe2mt7le] {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-6);
    display: block;
    color: var(--color-border-medium);
}

.no-data h3[b-puxe2mt7le] {
    margin: 0 0 var(--space-2) 0;
    color: var(--color-text-secondary);
}

.no-data p[b-puxe2mt7le] {
    margin: 0 0 var(--space-6) 0;
    color: var(--color-text-tertiary);
}

/* Enhanced Pagination */
.pagination-container[b-puxe2mt7le] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-8);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--color-border-light);
}

.pagination-info[b-puxe2mt7le] {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    text-align: center;
}

.pagination-controls[b-puxe2mt7le] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.pagination-buttons[b-puxe2mt7le] {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    justify-content: center;
}

.pagination-ellipsis[b-puxe2mt7le] {
    padding: var(--space-2) var(--space-1);
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-size-selector[b-puxe2mt7le] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

    .page-size-selector select[b-puxe2mt7le] {
        padding: var(--space-1) var(--space-2);
        border: 1px solid var(--color-border-medium);
        border-radius: var(--radius-sm);
        background: var(--color-bg-surface);
        color: var(--color-text-primary);
    }

/* Modal Styles */
.modal-overlay[b-puxe2mt7le] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
}

.modal-content[b-puxe2mt7le] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    box-shadow: var(--shadow-xl);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-puxe2mt7le] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6) var(--space-8);
    border-bottom: 1px solid var(--color-border-light);
}

    .modal-header h3[b-puxe2mt7le] {
        margin: 0;
        color: var(--color-text-primary);
        font-size: var(--font-size-lg);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

.btn-close[b-puxe2mt7le] {
    background: none;
    border: none;
    font-size: var(--font-size-base);
    cursor: pointer;
    color: var(--color-text-tertiary);
    padding: var(--space-2);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

    .btn-close:hover[b-puxe2mt7le] {
        background: var(--color-bg-tertiary);
        color: var(--color-text-secondary);
    }

.modal-body[b-puxe2mt7le] {
    padding: var(--space-8);
}

.modal-footer[b-puxe2mt7le] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-8);
    border-top: 1px solid var(--color-border-light);
}

.reclaim-details[b-puxe2mt7le] {
    background: var(--color-bg-secondary);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    margin: var(--space-6) 0;
}

    .reclaim-details p[b-puxe2mt7le] {
        margin: var(--space-2) 0;
        color: var(--color-text-primary);
    }

.form-group[b-puxe2mt7le] {
    margin-bottom: var(--space-6);
}

    .form-group label[b-puxe2mt7le] {
        display: block;
        margin-bottom: var(--space-2);
        font-weight: 500;
        color: var(--color-text-secondary);
    }

/* Searchable Select Styles */
.searchable-select-container[b-puxe2mt7le] {
    position: relative;
}

.searchable-select[b-puxe2mt7le] {
    position: relative;
    cursor: pointer;
}

.select-header[b-puxe2mt7le] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-surface);
    min-height: 38px;
}

    .select-header:hover[b-puxe2mt7le] {
        border-color: var(--color-primary);
    }

.selected-value[b-puxe2mt7le] {
    flex: 1;
    color: var(--color-text-primary);
}

.select-dropdown[b-puxe2mt7le] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    margin-top: var(--space-1);
}

.search-input-container[b-puxe2mt7le] {
    position: relative;
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border-light);
}

.search-input[b-puxe2mt7le] {
    padding-left: var(--space-8);
}

.search-icon[b-puxe2mt7le] {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
}

.dropdown-options[b-puxe2mt7le] {
    max-height: 200px;
    overflow-y: auto;
}

.option[b-puxe2mt7le] {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    border-bottom: 1px solid var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

    .option:hover[b-puxe2mt7le] {
        background-color: var(--color-bg-secondary);
    }

    .option.selected[b-puxe2mt7le] {
        background-color: var(--color-primary);
        color: var(--color-text-inverse);
    }

.user-option[b-puxe2mt7le] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.user-avatar-small[b-puxe2mt7le] {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: bold;
    background: var(--color-primary);
}

.user-details[b-puxe2mt7le] {
    flex: 1;
}

.user-name[b-puxe2mt7le] {
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.user-email[b-puxe2mt7le] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.option.selected .user-email[b-puxe2mt7le] {
    color: var(--color-border-light);
}

.no-results[b-puxe2mt7le] {
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-tertiary);
    font-style: italic;
}

    .no-results i[b-puxe2mt7le] {
        margin-right: var(--space-2);
    }

/* Truncated Text Styles */
.truncate-text[b-puxe2mt7le] {
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-block;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

    .truncate-text:hover[b-puxe2mt7le] {
        background-color: var(--color-bg-tertiary);
        border-radius: var(--radius-sm);
        padding: var(--space-1) var(--space-2);
        margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
    }

    .truncate-text.expanded[b-puxe2mt7le] {
        white-space: normal;
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        word-wrap: break-word;
        background-color: var(--color-bg-tertiary);
        border-radius: var(--radius-sm);
        padding: var(--space-1) var(--space-2);
        margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
    }

/* User info specific styles */
.user-info .truncate-text[b-puxe2mt7le] {
    max-width: 120px;
}

    .user-info .truncate-text.expanded[b-puxe2mt7le] {
        max-width: 200px;
    }

/* Table cell adjustments for expanded content */
.assignments-table td[b-puxe2mt7le] {
    vertical-align: top;
}

/* Ensure table cells don't break layout when expanded */
.assignments-table .truncate-text.expanded[b-puxe2mt7le] {
    min-width: 150px;
}

.text-muted[b-puxe2mt7le] {
    color: var(--color-text-tertiary) !important;
}

/* Animation for row updates */
@keyframes fadeIn-b-puxe2mt7le {
    from {
        opacity: 0;
        transform: translateY(var(--space-4));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.assignments-table tr[b-puxe2mt7le] {
    animation: fadeIn-b-puxe2mt7le var(--transition-slow) ease;
}

/* Responsive Design */
@media (max-width: 768px) {
    .assignments-container[b-puxe2mt7le] {
        margin: var(--space-4);
        padding: var(--space-6);
    }

    .filters-section[b-puxe2mt7le] {
        grid-template-columns: 1fr;
    }

    .assignments-header[b-puxe2mt7le] {
        flex-direction: column;
        gap: var(--space-6);
        align-items: flex-start;
    }

    .summary-cards[b-puxe2mt7le] {
        grid-template-columns: repeat(2, 1fr);
    }

    .pagination-container[b-puxe2mt7le] {
        flex-direction: column;
        gap: var(--space-6);
        align-items: stretch;
    }

    .pagination-controls[b-puxe2mt7le] {
        justify-content: center;
    }

    .action-buttons[b-puxe2mt7le] {
        flex-direction: column;
    }

    .user-cell[b-puxe2mt7le] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .user-info[b-puxe2mt7le] {
        align-items: flex-start;
    }
}

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

    .action-buttons[b-puxe2mt7le] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .btn[b-puxe2mt7le] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/AccessoryTypesComponents/AccessoryTypesComponent.razor.rz.scp.css */
/* Enhanced Accessory Types Styles - Premium Design System */

/* Container & Header - Enhanced */
.accessories-container[b-evgv3vsz34] {
    padding: var(--space-6) var(--space-4);
    max-width: var(--max-content-width);
    margin: 0 auto;
    background: var(--color-bg-primary);
    min-height: 100vh;
}

.accessories-header[b-evgv3vsz34] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-8);
    color: var(--color-text-inverse);
    position: relative;
    overflow: hidden;
}

    .accessories-header[b-evgv3vsz34]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    }

.page-icon[b-evgv3vsz34] {
    font-size: var(--font-size-3xl);
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.page-title[b-evgv3vsz34] {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-text-inverse);
    margin: 0 0 var(--space-2) 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.page-subtitle[b-evgv3vsz34] {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* Stats Overview - Premium Cards */
.stats-overview[b-evgv3vsz34] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.stat-card[b-evgv3vsz34] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-evgv3vsz34]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: currentColor;
        opacity: 0.15;
    }

    .stat-card:hover[b-evgv3vsz34] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

    .stat-card .stat-value[b-evgv3vsz34] {
        font-size: var(--font-size-3xl);
        font-weight: 800;
        margin: var(--space-2) 0;
        line-height: 1;
    }

    .stat-card .stat-label[b-evgv3vsz34] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--color-text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .stat-card.total[b-evgv3vsz34]::before {
        color: var(--color-primary);
    }

    .stat-card.active[b-evgv3vsz34]::before {
        color: var(--color-success);
    }

    .stat-card.inactive[b-evgv3vsz34]::before {
        color: var(--color-danger);
    }

    .stat-card.total .stat-value[b-evgv3vsz34] {
        color: var(--color-primary);
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-card.active .stat-value[b-evgv3vsz34] {
        color: var(--color-success);
        background: linear-gradient(135deg, var(--color-success), #2ecc71);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-card.inactive .stat-value[b-evgv3vsz34] {
        color: var(--color-danger);
        background: linear-gradient(135deg, var(--color-danger), #e74c3c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/* Accessory Cards - Premium Design */
.accessories-grid-container[b-evgv3vsz34] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-light);
    margin-top: var(--space-4);
    overflow: hidden;
}

.grid-header[b-evgv3vsz34] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-light);
}

.results-count[b-evgv3vsz34] {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

    .results-count strong[b-evgv3vsz34] {
        color: var(--color-text-primary);
        font-weight: 600;
    }

.accessories-grid[b-evgv3vsz34] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-6);
    padding: var(--space-6);
}

.accessory-card[b-evgv3vsz34] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

    .accessory-card[b-evgv3vsz34]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
        opacity: 0;
        transition: opacity var(--transition-fast);
    }

    .accessory-card:hover[b-evgv3vsz34] {
        transform: translateY(-8px);
        box-shadow: var(--shadow-xl);
        border-color: var(--color-primary);
    }

        .accessory-card:hover[b-evgv3vsz34]::before {
            opacity: 1;
        }

    .accessory-card.inactive[b-evgv3vsz34] {
        border-color: var(--color-border-medium);
        background: linear-gradient(135deg, rgba(231, 76, 60, 0.03), var(--color-bg-surface));
    }

        .accessory-card.inactive[b-evgv3vsz34]::before {
            background: var(--color-danger);
        }

.card-header[b-evgv3vsz34] {
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    background: linear-gradient(135deg, rgba(67, 97, 238, 0.04) 0%, transparent 100%);
}

.accessory-name[b-evgv3vsz34] {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

    .accessory-name i[b-evgv3vsz34] {
        color: var(--color-primary);
        font-size: var(--font-size-base);
    }

.status-badge[b-evgv3vsz34] {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-sm);
}

    .status-badge.active[b-evgv3vsz34] {
        background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(46, 204, 113, 0.25));
        color: var(--color-success);
        border: 1px solid rgba(46, 204, 113, 0.3);
    }

    .status-badge.inactive[b-evgv3vsz34] {
        background: linear-gradient(135deg, rgba(231, 76, 60, 0.15), rgba(231, 76, 60, 0.25));
        color: var(--color-danger);
        border: 1px solid rgba(231, 76, 60, 0.3);
    }

.card-content[b-evgv3vsz34] {
    padding: var(--space-6);
    flex: 1;
}

.detail-row[b-evgv3vsz34] {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
}

    .detail-row:last-child[b-evgv3vsz34] {
        border-bottom: none;
    }

    .detail-row i[b-evgv3vsz34] {
        color: var(--color-primary);
        font-size: var(--font-size-base);
        text-align: center;
    }

.detail-label[b-evgv3vsz34] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.label[b-evgv3vsz34] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.value[b-evgv3vsz34] {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

.detail-row.warning i[b-evgv3vsz34] {
    color: var(--color-warning);
}

.detail-row.warning .value[b-evgv3vsz34] {
    color: var(--color-warning);
}

.card-actions[b-evgv3vsz34] {
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-secondary);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* Buttons - Enhanced */
.btn[b-evgv3vsz34] {
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 2px solid transparent;
    transition: all var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

    .btn[b-evgv3vsz34]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .btn:hover[b-evgv3vsz34]::before {
        width: 300px;
        height: 300px;
    }

.btn-primary[b-evgv3vsz34] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

    .btn-primary:hover:not(:disabled)[b-evgv3vsz34] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
    }

.btn-outline[b-evgv3vsz34] {
    background: transparent;
    border-color: var(--color-border-medium);
    color: var(--color-text-secondary);
}

    .btn-outline:hover:not(:disabled)[b-evgv3vsz34] {
        background: var(--color-bg-tertiary);
        border-color: var(--color-border-medium);
        color: var(--color-text-primary);
        transform: translateY(-2px);
    }

.btn-danger[b-evgv3vsz34] {
    background: linear-gradient(135deg, var(--color-danger), #e74c3c);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

    .btn-danger:hover:not(:disabled)[b-evgv3vsz34] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
    }

.btn-success[b-evgv3vsz34] {
    background: linear-gradient(135deg, var(--color-success), #2ecc71);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

    .btn-success:hover:not(:disabled)[b-evgv3vsz34] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
    }

.btn-secondary[b-evgv3vsz34] {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border-medium);
}

    .btn-secondary:hover:not(:disabled)[b-evgv3vsz34] {
        background: var(--color-bg-tertiary);
        color: var(--color-text-primary);
    }

.btn-sm[b-evgv3vsz34] {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
}

/* Search - Enhanced */
.search-container[b-evgv3vsz34] {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.search-input[b-evgv3vsz34] {
    border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-6) var(--space-3) var(--space-12);
    border: 2px solid var(--color-border-medium);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text-primary);
    backdrop-filter: blur(10px);
}

    .search-input:focus[b-evgv3vsz34] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15);
        background: var(--color-bg-surface);
    }

.search-icon[b-evgv3vsz34] {
    position: absolute;
    left: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    z-index: 2;
}

.clear-search[b-evgv3vsz34] {
    position: absolute;
    right: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    z-index: 2;
}

    .clear-search:hover[b-evgv3vsz34] {
        background: var(--color-bg-tertiary);
        color: var(--color-danger);
    }

/* Loading Skeletons - Enhanced */
.skeleton[b-evgv3vsz34] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-evgv3vsz34 1.5s infinite;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

@keyframes shimmer-b-evgv3vsz34 {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.skeleton-text[b-evgv3vsz34] {
    height: var(--space-4);
    margin-bottom: var(--space-3);
}

.skeleton-btn[b-evgv3vsz34] {
    width: 80px;
    height: 38px;
    border-radius: var(--radius-md);
}

/* Empty State - Enhanced */
.empty-state[b-evgv3vsz34] {
    padding: var(--space-16) var(--space-8);
    text-align: center;
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    border: 2px dashed var(--color-border-light);
    margin: var(--space-8) 0;
}

.empty-icon[b-evgv3vsz34] {
    font-size: var(--font-size-4xl);
    color: var(--color-border-medium);
    margin-bottom: var(--space-6);
    opacity: 0.5;
}

.empty-state h3[b-evgv3vsz34] {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.empty-state p[b-evgv3vsz34] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-6);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Header Actions */
.header-actions[b-evgv3vsz34] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.header-actions-container[b-evgv3vsz34] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

/* Responsive Design - Enhanced */
@media (max-width: 1024px) {
    .accessories-grid[b-evgv3vsz34] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .accessories-container[b-evgv3vsz34] {
        padding: var(--space-4);
    }

    .accessories-header[b-evgv3vsz34] {
        padding: var(--space-6);
    }

    .page-title[b-evgv3vsz34] {
        font-size: var(--font-size-2xl);
    }

    .stats-overview[b-evgv3vsz34] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .header-actions-container[b-evgv3vsz34] {
        flex-direction: column;
        gap: var(--space-4);
        width: 100%;
    }

    .search-container[b-evgv3vsz34] {
        max-width: 100%;
    }

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

    .accessories-grid[b-evgv3vsz34] {
        padding: var(--space-4);
        gap: var(--space-4);
    }

    .card-header[b-evgv3vsz34],
    .card-content[b-evgv3vsz34],
    .card-actions[b-evgv3vsz34] {
        padding: var(--space-4);
    }
}

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

    .accessories-grid[b-evgv3vsz34] {
        grid-template-columns: 1fr;
    }

    .btn span:not(.sr-only)[b-evgv3vsz34] {
        display: none;
    }

    .btn i[b-evgv3vsz34] {
        margin-right: 0;
    }

    .card-actions[b-evgv3vsz34] {
        flex-direction: column;
    }

    .btn[b-evgv3vsz34] {
        width: 100%;
        justify-content: center;
    }
}

/* Animations */
@keyframes fadeInUp-b-evgv3vsz34 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.accessory-card[b-evgv3vsz34] {
    animation: fadeInUp-b-evgv3vsz34 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
}

    .accessory-card:nth-child(1)[b-evgv3vsz34] {
        animation-delay: 0.1s;
    }

    .accessory-card:nth-child(2)[b-evgv3vsz34] {
        animation-delay: 0.2s;
    }

    .accessory-card:nth-child(3)[b-evgv3vsz34] {
        animation-delay: 0.3s;
    }

    .accessory-card:nth-child(4)[b-evgv3vsz34] {
        animation-delay: 0.4s;
    }

    .accessory-card:nth-child(5)[b-evgv3vsz34] {
        animation-delay: 0.5s;
    }

    .accessory-card:nth-child(6)[b-evgv3vsz34] {
        animation-delay: 0.6s;
    }

    .accessory-card:nth-child(7)[b-evgv3vsz34] {
        animation-delay: 0.7s;
    }

    .accessory-card:nth-child(8)[b-evgv3vsz34] {
        animation-delay: 0.8s;
    }

/* Scrollbar Styling */
.accessories-grid-container[b-evgv3vsz34]::-webkit-scrollbar {
    width: 8px;
}

.accessories-grid-container[b-evgv3vsz34]::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-full);
}

.accessories-grid-container[b-evgv3vsz34]::-webkit-scrollbar-thumb {
    background: var(--color-border-medium);
    border-radius: var(--radius-full);
}

    .accessories-grid-container[b-evgv3vsz34]::-webkit-scrollbar-thumb:hover {
        background: var(--color-primary);
    }

/* Utility Classes */
.sr-only[b-evgv3vsz34] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-muted[b-evgv3vsz34] {
    color: var(--color-text-tertiary) !important;
}

.text-warning[b-evgv3vsz34] {
    color: var(--color-warning) !important;
}

.text-success[b-evgv3vsz34] {
    color: var(--color-success) !important;
}

.text-danger[b-evgv3vsz34] {
    color: var(--color-danger) !important;
}

.text-primary[b-evgv3vsz34] {
    color: var(--color-primary) !important;
}

/* Glow Effects */
.stat-card:hover .stat-value[b-evgv3vsz34] {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.accessory-card:hover .accessory-name[b-evgv3vsz34] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Focus States */
:focus-visible[b-evgv3vsz34] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Print Styles */
@media print {
    .accessories-header[b-evgv3vsz34],
    .header-actions[b-evgv3vsz34],
    .card-actions[b-evgv3vsz34],
    .search-container[b-evgv3vsz34] {
        display: none;
    }

    .accessories-container[b-evgv3vsz34] {
        padding: 0;
        background: white;
    }

    .accessory-card[b-evgv3vsz34] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/AccessoryTypesComponents/UpsertAccessoryTypeComponent.razor.rz.scp.css */
.accessories-container[b-kkv290k9ey] {
    padding: var(--space-8);
    max-width: 800px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-card[b-kkv290k9ey] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    width: 100%;
    animation: slideInUp-b-kkv290k9ey var(--transition-slow) ease-out;
}

.form-card-header[b-kkv290k9ey] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-8) var(--space-8);
    color: var(--color-text-inverse);
    position: relative;
    overflow: hidden;
}

    .form-card-header[b-kkv290k9ey]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    }

.form-header-content[b-kkv290k9ey] {
    position: relative;
    z-index: 1;
    text-align: center;
}

.form-header-icon[b-kkv290k9ey] {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-4);
    opacity: 0.9;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.form-title[b-kkv290k9ey] {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0 0 var(--space-2) 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.form-subtitle[b-kkv290k9ey] {
    font-size: var(--font-size-sm);
    opacity: 0.9;
    margin: 0;
    max-width: 500px;
    margin: 0 auto;
}

.form-card-body[b-kkv290k9ey] {
    padding: var(--space-8);
}

.form-alerts[b-kkv290k9ey] {
    margin-bottom: var(--space-6);
}

.alert[b-kkv290k9ey] {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    border-left: 4px solid;
    animation: slideInRight-b-kkv290k9ey var(--transition-normal) ease-out;
}

.alert-danger[b-kkv290k9ey] {
    background: rgba(231, 76, 60, 0.1);
    border-left-color: var(--color-danger);
    color: var(--color-danger);
}

.alert i[b-kkv290k9ey] {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.alert span[b-kkv290k9ey] {
    flex: 1;
    line-height: 1.5;
}

.form-grid[b-kkv290k9ey] {
    display: grid;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.form-group[b-kkv290k9ey] {
    position: relative;
}

.form-label[b-kkv290k9ey] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .form-label i[b-kkv290k9ey] {
        color: var(--color-primary);
        font-size: var(--font-size-base);
    }

.required-indicator[b-kkv290k9ey] {
    color: var(--color-danger);
    margin-left: var(--space-1);
}

.input-with-validation[b-kkv290k9ey] {
    position: relative;
}

.form-input[b-kkv290k9ey] {
    width: 100%;
    padding: var(--space-4) var(--space-6) var(--space-4) var(--space-12);
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-family: var(--font-family-sans);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

    .form-input:focus[b-kkv290k9ey] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15);
        background: var(--color-bg-surface);
    }

    .form-input[b-kkv290k9ey]::placeholder {
        color: var(--color-text-tertiary);
        opacity: 0.7;
    }

.input-icon[b-kkv290k9ey] {
    position: absolute;
    left: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    pointer-events: none;
    transition: color var(--transition-fast);
}

.form-input:focus + .input-icon[b-kkv290k9ey] {
    color: var(--color-primary);
}

.validation-message[b-kkv290k9ey] {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-danger);
    font-weight: 500;
    animation: fadeIn-b-kkv290k9ey var(--transition-fast) ease-out;
}

.form-hint[b-kkv290k9ey] {
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    line-height: 1.5;
}

.form-actions[b-kkv290k9ey] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
}

.btn[b-kkv290k9ey] {
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    min-height: 44px;
}

.btn-primary[b-kkv290k9ey] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

    .btn-primary:hover:not(:disabled)[b-kkv290k9ey] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
    }

    .btn-primary:disabled[b-kkv290k9ey] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
    }

.btn-secondary[b-kkv290k9ey] {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border-medium);
}

    .btn-secondary:hover[b-kkv290k9ey] {
        background: var(--color-bg-tertiary);
        color: var(--color-text-primary);
        border-color: var(--color-border-heavy);
    }

.btn i[b-kkv290k9ey] {
    font-size: var(--font-size-base);
}

.loading-overlay[b-kkv290k9ey] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
}

.loading-container[b-kkv290k9ey] {
    text-align: center;
    animation: fadeIn-b-kkv290k9ey var(--transition-normal) ease-out;
}

.loading-spinner[b-kkv290k9ey] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--color-border-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-kkv290k9ey 1s linear infinite;
    margin: 0 auto var(--space-4);
}

.loading-text[b-kkv290k9ey] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
    animation: pulse-b-kkv290k9ey 2s infinite;
}

.spinner-border-sm[b-kkv290k9ey] {
    width: 16px;
    height: 16px;
    border-width: 2px;
    margin-right: var(--space-3);
}

/* Animations */
@keyframes slideInUp-b-kkv290k9ey {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight-b-kkv290k9ey {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn-b-kkv290k9ey {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

@keyframes pulse-b-kkv290k9ey {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .accessories-container[b-kkv290k9ey] {
        padding: var(--space-4);
    }

    .form-card-header[b-kkv290k9ey] {
        padding: var(--space-6);
    }

    .form-card-body[b-kkv290k9ey] {
        padding: var(--space-6);
    }

    .form-grid[b-kkv290k9ey] {
        gap: var(--space-6);
    }

    .form-title[b-kkv290k9ey] {
        font-size: var(--font-size-xl);
    }

    .form-actions[b-kkv290k9ey] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .btn[b-kkv290k9ey] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .form-input[b-kkv290k9ey] {
        padding-left: var(--space-10);
    }

    .input-icon[b-kkv290k9ey] {
        left: var(--space-4);
    }
}

/* Focus Accessibility */
:focus-visible[b-kkv290k9ey] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Print Styles */
@media print {
    .form-actions[b-kkv290k9ey],
    .loading-overlay[b-kkv290k9ey] {
        display: none;
    }

    .form-card[b-kkv290k9ey] {
        box-shadow: none;
        border: 1px solid var(--color-border-medium);
    }

    .form-card-header[b-kkv290k9ey] {
        background: none;
        color: var(--color-text-primary);
    }
}
/* /Components/Pages/ActiveDirectory/AdDisabledUsers.razor.rz.scp.css */
/* /Components/Pages/AssetsDashboard/AssetsDashboard.razor.rz.scp.css */
/* ========== DASHBOARD CONTAINER ========== */
.dashboard-container[b-7yuuzte3dr] {
    padding: var(--space-6);
    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
    min-height: 100vh;
    font-family: var(--font-family-sans);
}

/* ========== HEADER & FILTERS ========== */
.dashboard-header[b-7yuuzte3dr] {
    background: var(--color-primary);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    margin-bottom: var(--space-8);
    color: var(--color-white);
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
}

    .dashboard-header[b-7yuuzte3dr]::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
        background-size: 20px 20px;
        opacity: 0.3;
    }

.page-title[b-7yuuzte3dr] {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--font-size-3xl);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--color-white);
}

.page-subtitle[b-7yuuzte3dr] {
    font-size: var(--font-size-base);
    opacity: 0.9;
    font-weight: 400;
    margin-bottom: var(--space-6);
    color: rgba(255, 255, 255, 0.9);
}

.dashboard-filters[b-7yuuzte3dr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-8);
    align-items: flex-end;
    position: relative;
    z-index: 1;
}

.filter-group[b-7yuuzte3dr] {
    flex: 1;
    min-width: 200px;
}

    .filter-group label[b-7yuuzte3dr] {
        display: block;
        margin-bottom: var(--space-2);
        font-weight: 500;
        color: rgba(255, 255, 255, 0.95);
        font-size: var(--font-size-sm);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

.form-control[b-7yuuzte3dr] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
    backdrop-filter: blur(10px);
}

    .form-control:focus[b-7yuuzte3dr] {
        outline: none;
        border-color: var(--color-white);
        background: rgba(255, 255, 255, 0.25);
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
    }

    .form-control option[b-7yuuzte3dr] {
        background: var(--color-gray-800);
        color: var(--color-white);
    }

/* ========== BUTTONS ========== */
.btn[b-7yuuzte3dr] {
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.btn-primary[b-7yuuzte3dr] {
    background: var(--color-white);
    color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

    .btn-primary:hover:not(:disabled)[b-7yuuzte3dr] {
        background: var(--color-gray-50);
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

.btn-outline-secondary[b-7yuuzte3dr] {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
}

    .btn-outline-secondary:hover:not(:disabled)[b-7yuuzte3dr] {
        background: rgba(255, 255, 255, 0.1);
        border-color: var(--color-white);
        transform: translateY(-2px);
    }

.btn:disabled[b-7yuuzte3dr] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.spinner-border[b-7yuuzte3dr] {
    width: var(--font-size-base);
    height: var(--font-size-base);
    border-width: 2px;
    border-color: currentColor transparent currentColor currentColor;
    border-radius: 50%;
    animation: spinner-border-b-7yuuzte3dr 0.75s linear infinite;
}

@keyframes spinner-border-b-7yuuzte3dr {
    to {
        transform: rotate(360deg);
    }
}

/* ========== SUMMARY CARDS ========== */
.summary-cards[b-7yuuzte3dr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.summary-card[b-7yuuzte3dr] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
}

    .summary-card[b-7yuuzte3dr]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    }

    .summary-card:hover[b-7yuuzte3dr] {
        transform: translateY(-6px);
        box-shadow: var(--shadow-2xl);
        border-color: transparent;
    }

    .summary-card.total-devices[b-7yuuzte3dr]::before {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    }

    .summary-card.in-stock[b-7yuuzte3dr]::before {
        background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    }

    .summary-card.assigned[b-7yuuzte3dr]::before {
        background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
    }

    .summary-card.maintenance[b-7yuuzte3dr]::before {
        background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
    }

    .summary-card.users[b-7yuuzte3dr]::before {
        background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    }

    .summary-card.accessories[b-7yuuzte3dr]::before {
        background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
    }

    .summary-card.device-types[b-7yuuzte3dr]::before {
        background: linear-gradient(135deg, #06b6d4 0%, var(--color-info) 100%);
    }

    .summary-card.locations[b-7yuuzte3dr]::before {
        background: linear-gradient(135deg, var(--color-success) 0%, #84cc16 100%);
    }

.card-content[b-7yuuzte3dr] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.card-icon[b-7yuuzte3dr] {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    color: var(--color-white);
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
}

.total-devices .card-icon[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.in-stock .card-icon[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
}

.assigned .card-icon[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
}

.maintenance .card-icon[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
}

.users .card-icon[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
}

.accessories .card-icon[b-7yuuzte3dr] {
    background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
}

.device-types .card-icon[b-7yuuzte3dr] {
    background: linear-gradient(135deg, #06b6d4 0%, var(--color-info) 100%);
}

.locations .card-icon[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-success) 0%, #84cc16 100%);
}

.card-text h3[b-7yuuzte3dr] {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.card-value[b-7yuuzte3dr] {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin: var(--space-1) 0;
    line-height: 1;
    letter-spacing: -0.025em;
}

.card-subtext[b-7yuuzte3dr] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-2);
}

/* ========== PROGRESS BARS ========== */
.progress-container[b-7yuuzte3dr] {
    width: 100%;
    height: 8px;
    background-color: var(--color-gray-200);
    border-radius: var(--radius-sm);
    margin-top: var(--space-4);
    position: relative;
    overflow: hidden;
}

.progress-bar[b-7yuuzte3dr] {
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

    .progress-bar[b-7yuuzte3dr]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        animation: shimmer-b-7yuuzte3dr 2s infinite;
    }

@keyframes shimmer-b-7yuuzte3dr {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.progress-text[b-7yuuzte3dr] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-white);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* ========== CHARTS SECTION ========== */
.charts-grid[b-7yuuzte3dr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.chart-card[b-7yuuzte3dr] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border-light);
    transition: transform var(--transition-normal);
}

    .chart-card:hover[b-7yuuzte3dr] {
        transform: translateY(-4px);
    }

    .chart-card.full-width[b-7yuuzte3dr] {
        grid-column: 1 / -1;
    }

.chart-card-header[b-7yuuzte3dr] {
    margin-bottom: var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .chart-card-header h3[b-7yuuzte3dr] {
        margin: 0;
        font-size: var(--font-size-xl);
        color: var(--color-text-primary);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

        .chart-card-header h3[b-7yuuzte3dr]::before {
            content: '';
            width: 4px;
            height: 24px;
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
            border-radius: 2px;
        }

.chart-container[b-7yuuzte3dr] {
    height: 320px;
    position: relative;
}

.chart-card-body[b-7yuuzte3dr] {
    padding: 1.5rem;
    flex: 1;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chart-card.full-width .chart-card-body[b-7yuuzte3dr] {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.chart-card.full-width .chart-card-body[b-7yuuzte3dr]::-webkit-scrollbar {
    width: 6px;
}

.chart-card.full-width .chart-card-body[b-7yuuzte3dr]::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
}

.chart-card.full-width .chart-card-body[b-7yuuzte3dr]::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-400);
    border-radius: var(--radius-sm);
}

.chart-card.full-width .chart-card-body[b-7yuuzte3dr]::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-gray-500);
}

/* ========== DATA TABLES - TWO CARD LAYOUT ========== */
.data-section-full[b-7yuuzte3dr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.data-column[b-7yuuzte3dr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.data-card-full[b-7yuuzte3dr] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-normal);
    position: relative;
    height: fit-content;
    max-height: 600px;
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

    .data-card-full[b-7yuuzte3dr]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
        z-index: 2;
    }

    .data-card-full:hover[b-7yuuzte3dr] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-xl);
        border-color: var(--color-primary-light);
    }

.data-card-header[b-7yuuzte3dr] {
    padding: var(--space-6) var(--space-8);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex-shrink: 0;
}

.data-card-title[b-7yuuzte3dr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

    .data-card-title h3[b-7yuuzte3dr] {
        margin: 0;
        font-size: var(--font-size-lg);
        color: var(--color-text-primary);
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

.card-title-icon[b-7yuuzte3dr] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

.data-card-subtitle[b-7yuuzte3dr] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.data-card-actions[b-7yuuzte3dr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

.action-badge[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.btn-action[b-7yuuzte3dr] {
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-surface);
    color: var(--color-primary);
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

    .btn-action:hover[b-7yuuzte3dr] {
        background: var(--color-primary);
        color: var(--color-white);
        border-color: var(--color-primary);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        text-decoration: none;
    }

.data-card-body[b-7yuuzte3dr] {
    padding: 0;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.table-responsive-full[b-7yuuzte3dr] {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    max-height: 100%;
    position: relative;
}

    .table-responsive-full[b-7yuuzte3dr]::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .table-responsive-full[b-7yuuzte3dr]::-webkit-scrollbar-track {
        background: var(--color-bg-secondary);
        border-radius: var(--radius-sm);
    }

    .table-responsive-full[b-7yuuzte3dr]::-webkit-scrollbar-thumb {
        background-color: var(--color-gray-400);
        border-radius: var(--radius-sm);
    }

        .table-responsive-full[b-7yuuzte3dr]::-webkit-scrollbar-thumb:hover {
            background-color: var(--color-gray-500);
        }

.table[b-7yuuzte3dr] {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 700px;
}

.table-head[b-7yuuzte3dr] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-bg-tertiary);
}

    .table-head th[b-7yuuzte3dr] {
        padding: var(--space-4) var(--space-3);
        border-bottom: 2px solid var(--color-border-light);
        color: var(--color-text-secondary);
        font-weight: 600;
        text-transform: uppercase;
        font-size: var(--font-size-xs);
        letter-spacing: 0.05em;
        vertical-align: middle;
        white-space: nowrap;
        text-align: center;
    }

        .table-head th i[b-7yuuzte3dr] {
            margin-right: var(--space-2);
            font-size: 0.9em;
            color: var(--color-gray-500);
        }

.table-striped tbody tr:nth-of-type(odd)[b-7yuuzte3dr] {
    background-color: var(--color-bg-secondary);
}

.table-row-hover[b-7yuuzte3dr] {
    transition: all var(--transition-fast);
    cursor: pointer;
}

    .table-row-hover:hover[b-7yuuzte3dr] {
        background-color: var(--color-primary-lighter) !important;
        transform: translateX(4px);
        box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.1);
    }

.table td[b-7yuuzte3dr] {
    padding: var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
    transition: background-color var(--transition-fast);
    text-align: center;
}

/* Device/Accessory Info Cells */
.device-info[b-7yuuzte3dr],
.accessory-info[b-7yuuzte3dr],
.user-info[b-7yuuzte3dr],
.date-info[b-7yuuzte3dr],
.issue-info[b-7yuuzte3dr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    align-items: center;
    text-align: center;
}

.device-name[b-7yuuzte3dr],
.accessory-name[b-7yuuzte3dr],
.user-name[b-7yuuzte3dr],
.date-day[b-7yuuzte3dr],
.issue-title[b-7yuuzte3dr] {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.device-serial[b-7yuuzte3dr],
.device-type[b-7yuuzte3dr],
.user-email[b-7yuuzte3dr],
.date-time[b-7yuuzte3dr],
.issue-description[b-7yuuzte3dr] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Status Badges */
.status-badge[b-7yuuzte3dr] {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 90px;
    justify-content: center;
}

.status-dot[b-7yuuzte3dr] {
    font-size: 0.5em;
    margin-right: var(--space-1);
}

.status-active[b-7yuuzte3dr],
.status-assigned[b-7yuuzte3dr],
.status-completed[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    color: var(--color-white);
    border: 1px solid rgba(var(--color-success-rgb), 0.3);
}

.status-pending[b-7yuuzte3dr],
.status-in-progress[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
    color: var(--color-white);
    border: 1px solid rgba(var(--color-warning-rgb), 0.3);
}

.status-waiting[b-7yuuzte3dr],
.status-in-review[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
    color: var(--color-white);
    border: 1px solid rgba(var(--color-info-rgb), 0.3);
}

.status-inactive[b-7yuuzte3dr],
.status-cancelled[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-gray-600) 0%, var(--color-gray-700) 100%);
    color: var(--color-white);
    border: 1px solid var(--color-gray-500);
}

.status-failed[b-7yuuzte3dr],
.status-critical[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
    color: var(--color-white);
    border: 1px solid rgba(var(--color-danger-rgb), 0.3);
}

/* Type Badges */
.device-type-badge[b-7yuuzte3dr],
.accessory-type-badge[b-7yuuzte3dr],
.department-badge[b-7yuuzte3dr] {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}
.device-type-badge[b-7yuuzte3dr], .accessory-type-badge[b-7yuuzte3dr] {
    color: var(--color-white) !important;
}

    .device-type-badge i[b-7yuuzte3dr],
    .accessory-type-badge i[b-7yuuzte3dr],
    .department-badge i[b-7yuuzte3dr] {
        font-size: 0.9em;
    }

/* Quantity Display */
.quantity-display[b-7yuuzte3dr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.quantity-badge[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: var(--font-size-sm);
    min-width: 40px;
}

/* Cost Display */
.cost-display[b-7yuuzte3dr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.cost-value[b-7yuuzte3dr] {
    font-weight: 700;
    font-size: var(--font-size-sm);
}

.cost-label[b-7yuuzte3dr] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Duration Display */
.duration-display[b-7yuuzte3dr] {
    display: flex;
    justify-content: center;
}

.duration-badge[b-7yuuzte3dr] {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-white);
    min-width: 70px;
}

.duration-normal[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
}

.duration-warning[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
}

.duration-critical[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
}

/* Table Footer */
.table-footer[b-7yuuzte3dr] {
    position: sticky;
    bottom: 0;
    background: var(--color-bg-secondary);
    border-top: 2px solid var(--color-border-light);
    z-index: 9;
}

    .table-footer td[b-7yuuzte3dr] {
        padding: var(--space-4) var(--space-3);
    }

.table-summary[b-7yuuzte3dr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--font-size-sm);
}

.summary-item[b-7yuuzte3dr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
}

    .summary-item i[b-7yuuzte3dr] {
        color: var(--color-primary);
        font-size: 0.9em;
    }

/* No Data Row */
.no-data-row td[b-7yuuzte3dr] {
    padding: var(--space-12) !important;
    text-align: center;
    background: var(--color-bg-secondary);
}

.no-data-message[b-7yuuzte3dr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

    .no-data-message i[b-7yuuzte3dr] {
        color: var(--color-gray-400);
    }

    .no-data-message h4[b-7yuuzte3dr] {
        color: var(--color-text-secondary);
        font-size: var(--font-size-lg);
        margin: 0;
    }

    .no-data-message p[b-7yuuzte3dr] {
        color: var(--color-text-tertiary);
        font-size: var(--font-size-sm);
        margin: 0;
    }

/* ========== BADGES ========== */
.badge[b-7yuuzte3dr] {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-success[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    color: var(--color-white);
}

.badge-warning[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
    color: var(--color-white);
}

.badge-info[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
    color: var(--color-white);
}

.badge-danger[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
    color: var(--color-white);
}

/* ========== ALERTS SECTION ========== */
.alerts-section[b-7yuuzte3dr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.alert-card[b-7yuuzte3dr] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border-light);
    transition: transform var(--transition-normal);
    display: flex;
    flex-direction: column;
    max-height: 600px;
    min-height: 400px;
}

    .alert-card:hover[b-7yuuzte3dr] {
        transform: translateY(-4px);
    }

.alert-card-header[b-7yuuzte3dr] {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

    .alert-card-header h3[b-7yuuzte3dr] {
        margin: 0;
        font-size: var(--font-size-lg);
        color: var(--color-text-primary);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

.alert-card-body[b-7yuuzte3dr] {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 500px;
}

.alerts-list[b-7yuuzte3dr] {
    max-height: 400px; /* 5 rows max: ~80px per row */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-400) var(--color-bg-secondary);
    flex: 1;
    min-height: 0;
    padding-right: var(--space-2); /* Add padding for scrollbar */
}

    .alerts-list[b-7yuuzte3dr]::-webkit-scrollbar {
        width: 6px;
    }

    .alerts-list[b-7yuuzte3dr]::-webkit-scrollbar-track {
        background: var(--color-bg-secondary);
        border-radius: var(--radius-sm);
    }

    .alerts-list[b-7yuuzte3dr]::-webkit-scrollbar-thumb {
        background-color: var(--color-gray-400);
        border-radius: var(--radius-sm);
    }

.alert-item[b-7yuuzte3dr] {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
    border-left: 4px solid;
}

    .alert-item:last-child[b-7yuuzte3dr] {
        margin-bottom: 0;
    }

    .alert-item:hover[b-7yuuzte3dr] {
        background-color: var(--color-bg-tertiary);
        transform: translateX(4px);
    }

    .alert-item.critical[b-7yuuzte3dr] {
        border-left-color: var(--color-danger);
        background: linear-gradient(90deg, rgba(var(--color-danger-rgb), 0.05) 0%, transparent 100%);
    }

    .alert-item.warning[b-7yuuzte3dr] {
        border-left-color: var(--color-warning);
        background: linear-gradient(90deg, rgba(var(--color-warning-rgb), 0.05) 0%, transparent 100%);
    }

    .alert-item.danger[b-7yuuzte3dr] {
        border-left-color: var(--color-danger-dark);
        background: linear-gradient(90deg, rgba(var(--color-danger-dark-rgb), 0.05) 0%, transparent 100%);
    }

.alert-content[b-7yuuzte3dr] {
    flex: 1;
}

.alert-title[b-7yuuzte3dr] {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
    font-size: var(--font-size-base);
}

.alert-subtitle[b-7yuuzte3dr] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.alert-meta[b-7yuuzte3dr] {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

/* ========== UTILIZATION ========== */
.utilization-list[b-7yuuzte3dr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-height: 480px; /* 5 rows max: ~96px per row */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-400) var(--color-bg-secondary);
    flex: 1;
    min-height: 0;
    padding-right: var(--space-2); /* Add padding for scrollbar */
}

.utilization-list[b-7yuuzte3dr]::-webkit-scrollbar {
    width: 6px;
}

.utilization-list[b-7yuuzte3dr]::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
}

.utilization-list[b-7yuuzte3dr]::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-400);
    border-radius: var(--radius-sm);
}

.utilization-list[b-7yuuzte3dr]::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-gray-500);
}

.utilization-item[b-7yuuzte3dr] {
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    border: 1px solid var(--color-border-light);
}

.utilization-header[b-7yuuzte3dr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.dept-name[b-7yuuzte3dr] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.dept-stats[b-7yuuzte3dr] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.utilization-progress[b-7yuuzte3dr] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.progress[b-7yuuzte3dr] {
    flex: 1;
    height: 8px;
    background-color: var(--color-gray-300);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.utilization-percentage[b-7yuuzte3dr] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    min-width: 50px;
    text-align: right;
}

/* ========== NO DATA STATE ========== */
.no-data-container[b-7yuuzte3dr] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    background: var(--color-bg-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

    .no-data-container[b-7yuuzte3dr]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 20% 80%, rgba(var(--color-primary-rgb), 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(var(--color-success-rgb), 0.05) 0%, transparent 50%);
    }

.no-data-content[b-7yuuzte3dr] {
    text-align: center;
    padding: var(--space-12);
    position: relative;
    z-index: 1;
}

    .no-data-content i[b-7yuuzte3dr] {
        font-size: var(--font-size-4xl);
        color: var(--color-gray-500);
        margin-bottom: var(--space-6);
        opacity: 0.5;
    }

    .no-data-content h3[b-7yuuzte3dr] {
        color: var(--color-text-primary);
        margin-bottom: var(--space-3);
        font-size: var(--font-size-xl);
        font-weight: 600;
    }

    .no-data-content p[b-7yuuzte3dr] {
        color: var(--color-text-secondary);
        margin-bottom: var(--space-8);
        font-size: var(--font-size-base);
        max-width: 400px;
    }

/* ========== LOCATION ACCORDION ========== */
.location-header[b-7yuuzte3dr] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.percentage-badge[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.device-list[b-7yuuzte3dr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.device-badge[b-7yuuzte3dr] {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    border: 1px solid var(--color-gray-300);
    transition: all var(--transition-fast);
}

    .device-badge:hover[b-7yuuzte3dr] {
        background: var(--color-gray-200);
        transform: translateY(-1px);
    }

/* ========== MODAL ========== */
.modal[b-7yuuzte3dr] {
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.5) !important;
}

.modal-content[b-7yuuzte3dr] {
    border: none;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    background: var(--color-bg-surface);
    overflow: hidden;
}

.modal-header[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    border-bottom: none;
    padding: var(--space-6);
}

.modal-title[b-7yuuzte3dr] {
    font-weight: 600;
    font-size: var(--font-size-xl);
}

.close[b-7yuuzte3dr] {
    color: var(--color-white);
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

    .close:hover[b-7yuuzte3dr] {
        opacity: 1;
    }

.modal-body[b-7yuuzte3dr] {
    padding: var(--space-6);
}

.modal-footer[b-7yuuzte3dr] {
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-5) var(--space-6);
    background: var(--color-bg-secondary);
}

.btn-secondary[b-7yuuzte3dr] {
    background: var(--color-gray-600);
    color: var(--color-white);
    border: none;
}

    .btn-secondary:hover[b-7yuuzte3dr] {
        background: var(--color-gray-700);
    }

/* ========== RESPONSIVE DESIGN ========== */
@media (min-width: 1200px) {
    .data-section-full[b-7yuuzte3dr] {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }

    .data-column[b-7yuuzte3dr] {
        gap: var(--space-6);
    }
}

@media (max-width: 1199px) {
    .data-section-full[b-7yuuzte3dr] {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .data-column[b-7yuuzte3dr] {
        gap: var(--space-4);
    }

    .data-card-full[b-7yuuzte3dr] {
        max-height: 550px;
    }
}

@media (max-width: 768px) {
    .dashboard-container[b-7yuuzte3dr] {
        padding: var(--space-4);
    }

    .dashboard-header[b-7yuuzte3dr] {
        padding: var(--space-6) var(--space-5);
    }

    .page-title[b-7yuuzte3dr] {
        font-size: var(--font-size-2xl);
    }

    .dashboard-filters[b-7yuuzte3dr] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group[b-7yuuzte3dr] {
        min-width: 100%;
    }

    .summary-cards[b-7yuuzte3dr] {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .chart-card[b-7yuuzte3dr] {
        padding: var(--space-5);
    }

    .chart-container[b-7yuuzte3dr] {
        height: 280px;
    }

    .data-card-header[b-7yuuzte3dr] {
        padding: var(--space-4) var(--space-5);
    }

    .card-title-icon[b-7yuuzte3dr] {
        width: 36px;
        height: 36px;
        font-size: var(--font-size-sm);
    }

    .data-card-title h3[b-7yuuzte3dr] {
        font-size: var(--font-size-base);
        gap: var(--space-2);
    }

    .data-card-subtitle[b-7yuuzte3dr] {
        font-size: var(--font-size-xs);
    }

    .data-card-actions[b-7yuuzte3dr] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }

    .btn-action[b-7yuuzte3dr] {
        justify-content: center;
    }

    .table-head th[b-7yuuzte3dr],
    .table td[b-7yuuzte3dr] {
        padding: var(--space-3) var(--space-2);
        font-size: var(--font-size-xs);
    }

    .device-name[b-7yuuzte3dr],
    .accessory-name[b-7yuuzte3dr],
    .user-name[b-7yuuzte3dr],
    .date-day[b-7yuuzte3dr],
    .issue-title[b-7yuuzte3dr] {
        font-size: var(--font-size-xs);
    }

    .device-serial[b-7yuuzte3dr],
    .device-type[b-7yuuzte3dr],
    .user-email[b-7yuuzte3dr],
    .date-time[b-7yuuzte3dr],
    .issue-description[b-7yuuzte3dr] {
        font-size: 0.75rem;
    }

    .status-badge[b-7yuuzte3dr],
    .device-type-badge[b-7yuuzte3dr],
    .accessory-type-badge[b-7yuuzte3dr],
    .department-badge[b-7yuuzte3dr] {
        font-size: 0.75rem;
        padding: var(--space-0-5) var(--space-2);
        min-width: 80px;
    }

    .quantity-badge[b-7yuuzte3dr] {
        font-size: var(--font-size-xs);
        min-width: 36px;
    }

    .cost-value[b-7yuuzte3dr] {
        font-size: var(--font-size-xs);
    }

    .duration-badge[b-7yuuzte3dr] {
        font-size: 0.75rem;
        min-width: 60px;
    }

    .table-summary[b-7yuuzte3dr] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        font-size: var(--font-size-xs);
    }

    .card-value[b-7yuuzte3dr] {
        font-size: var(--font-size-2xl);
    }

    .card-icon[b-7yuuzte3dr] {
        width: 56px;
        height: 56px;
        font-size: var(--font-size-xl);
    }

    .alerts-section[b-7yuuzte3dr] {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .location-header[b-7yuuzte3dr] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

@media (max-width: 480px) {
    .dashboard-header[b-7yuuzte3dr] {
        padding: var(--space-5) var(--space-4);
    }

    .page-title[b-7yuuzte3dr] {
        font-size: var(--font-size-xl);
    }

    .chart-card[b-7yuuzte3dr] {
        padding: var(--space-4);
    }

    .chart-container[b-7yuuzte3dr] {
        height: 240px;
    }

    .card-content[b-7yuuzte3dr] {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }

    .card-icon[b-7yuuzte3dr] {
        margin: 0 auto;
    }

    .data-card-full[b-7yuuzte3dr] {
        max-height: 500px;
    }

    .table-responsive-full[b-7yuuzte3dr] {
        max-height: 350px;
    }

    .no-data-row td[b-7yuuzte3dr] {
        padding: var(--space-8) !important;
    }

    .no-data-message i[b-7yuuzte3dr] {
        font-size: var(--font-size-2xl);
    }

    .no-data-message h4[b-7yuuzte3dr] {
        font-size: var(--font-size-base);
    }

    .no-data-message p[b-7yuuzte3dr] {
        font-size: var(--font-size-xs);
        text-align: center;
    }
}

/* ========== ANIMATIONS ========== */
@keyframes fadeIn-b-7yuuzte3dr {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-container > *[b-7yuuzte3dr] {
    animation: fadeIn-b-7yuuzte3dr 0.5s ease-out;
}

.summary-card[b-7yuuzte3dr] {
    animation: fadeIn-b-7yuuzte3dr 0.6s ease-out;
}

.chart-card[b-7yuuzte3dr] {
    animation: fadeIn-b-7yuuzte3dr 0.7s ease-out;
}

.data-card-full[b-7yuuzte3dr] {
    animation: fadeIn-b-7yuuzte3dr 0.8s ease-out;
}

/* ========== SCROLLBAR STYLING ========== */
[b-7yuuzte3dr]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[b-7yuuzte3dr]::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
}

[b-7yuuzte3dr]::-webkit-scrollbar-thumb {
    background: var(--color-gray-400);
    border-radius: var(--radius-sm);
}

    [b-7yuuzte3dr]::-webkit-scrollbar-thumb:hover {
        background: var(--color-gray-500);
    }

/* ========== LOADING STATES ========== */
.loading-shimmer[b-7yuuzte3dr] {
    background: linear-gradient(90deg, var(--color-gray-200) 25%, var(--color-gray-300) 50%, var(--color-gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-7yuuzte3dr 1.5s infinite;
}

@keyframes shimmer-b-7yuuzte3dr {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* ========== TOOLTIP STYLES ========== */
[data-tooltip][b-7yuuzte3dr] {
    position: relative;
}

    [data-tooltip][b-7yuuzte3dr]:before {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: var(--color-gray-900);
        color: var(--color-white);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        font-size: var(--font-size-xs);
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-fast);
        z-index: var(--z-tooltip);
        box-shadow: var(--shadow-md);
    }

    [data-tooltip]:hover[b-7yuuzte3dr]:before {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(-4px);
    }

/* ========== PRINT STYLES ========== */
@media print {
    .dashboard-container[b-7yuuzte3dr] {
        background: var(--color-white);
        padding: 0;
    }

    .dashboard-header[b-7yuuzte3dr],
    .dashboard-filters[b-7yuuzte3dr],
    .btn[b-7yuuzte3dr],
    .alert-card-header a[b-7yuuzte3dr],
    .data-card-header a[b-7yuuzte3dr] {
        display: none;
    }

    .summary-card[b-7yuuzte3dr],
    .chart-card[b-7yuuzte3dr],
    .data-card-full[b-7yuuzte3dr],
    .alert-card[b-7yuuzte3dr] {
        box-shadow: none;
        border: 1px solid var(--color-gray-300);
        break-inside: avoid;
    }

    .chart-container[b-7yuuzte3dr] {
        height: 250px;
    }
}

/* ========== DARK THEME ADJUSTMENTS ========== */
[data-theme="dark"] .dashboard-container[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
}

[data-theme="dark"] .summary-card[b-7yuuzte3dr] {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

    [data-theme="dark"] .summary-card:hover[b-7yuuzte3dr] {
        border-color: var(--color-primary-light);
    }

[data-theme="dark"] .form-control option[b-7yuuzte3dr] {
    background: var(--color-gray-700);
    color: var(--color-text-primary);
}

[data-theme="dark"] .alert-item:hover[b-7yuuzte3dr] {
    background-color: var(--color-gray-800);
}

[data-theme="dark"] .utilization-item[b-7yuuzte3dr] {
    background: var(--color-gray-800);
}

[data-theme="dark"] .no-data-content i[b-7yuuzte3dr] {
    color: var(--color-gray-400);
}

[data-theme="dark"] .data-card-full[b-7yuuzte3dr] {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .data-card-header[b-7yuuzte3dr] {
    background: var(--color-gray-900);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .table-head[b-7yuuzte3dr] {
    background: var(--color-gray-900);
}

    [data-theme="dark"] .table-head th[b-7yuuzte3dr] {
        color: var(--color-gray-300);
        border-color: var(--color-gray-700);
    }

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd)[b-7yuuzte3dr] {
    background-color: var(--color-gray-900);
}

[data-theme="dark"] .table-row-hover:hover[b-7yuuzte3dr] {
    background-color: var(--color-primary-darker) !important;
}

[data-theme="dark"] .table td[b-7yuuzte3dr] {
    border-color: var(--color-gray-700);
    background:var(--color-gray-900) !important;
}

[data-theme="dark"] .device-name[b-7yuuzte3dr],
[data-theme="dark"] .accessory-name[b-7yuuzte3dr],
[data-theme="dark"] .user-name[b-7yuuzte3dr],
[data-theme="dark"] .date-day[b-7yuuzte3dr],
[data-theme="dark"] .issue-title[b-7yuuzte3dr] {
    color: var(--color-gray-200);
}

[data-theme="dark"] .device-serial[b-7yuuzte3dr],
[data-theme="dark"] .device-type[b-7yuuzte3dr],
[data-theme="dark"] .user-email[b-7yuuzte3dr],
[data-theme="dark"] .date-time[b-7yuuzte3dr],
[data-theme="dark"] .issue-description[b-7yuuzte3dr] {
    color: var(--color-gray-400);
}

[data-theme="dark"] .table-footer[b-7yuuzte3dr] {
    background: var(--color-gray-900);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .summary-item[b-7yuuzte3dr] {
    color: var(--color-gray-300);
}

[data-theme="dark"] .no-data-row td[b-7yuuzte3dr] {
    background: var(--color-gray-900);
}

[data-theme="dark"] .no-data-message i[b-7yuuzte3dr] {
    color: var(--color-gray-600);
}

[data-theme="dark"] .no-data-message h4[b-7yuuzte3dr] {
    color: var(--color-gray-300);
}

[data-theme="dark"] .no-data-message p[b-7yuuzte3dr] {
    color: var(--color-gray-500);
}

[data-theme="dark"] .chart-card[b-7yuuzte3dr] {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .alert-card[b-7yuuzte3dr] {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

/* ========== ACCESSIBILITY ========== */
@media (prefers-reduced-motion: reduce) {
    *[b-7yuuzte3dr],
    *[b-7yuuzte3dr]::before,
    *[b-7yuuzte3dr]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .summary-card:hover[b-7yuuzte3dr],
    .chart-card:hover[b-7yuuzte3dr],
    .data-card-full:hover[b-7yuuzte3dr],
    .alert-card:hover[b-7yuuzte3dr] {
        transform: none;
    }
}

/* ========== HIGH CONTRAST MODE ========== */
@media (prefers-contrast: high) {
    .dashboard-header[b-7yuuzte3dr] {
        border: 2px solid var(--color-black);
    }

    .summary-card[b-7yuuzte3dr],
    .chart-card[b-7yuuzte3dr],
    .data-card-full[b-7yuuzte3dr],
    .alert-card[b-7yuuzte3dr] {
        border: 2px solid var(--color-black) !important;
    }

    .btn[b-7yuuzte3dr] {
        border: 2px solid var(--color-black);
    }
}
/* ========== LOCATION ACCORDION DETAILS ========== */
.location-details-accordion[b-7yuuzte3dr] {
    margin-top: var(--space-6);
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-light);
    max-height: 500px; /* 5 rows max: ~100px per row */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-400) var(--color-bg-secondary);
    padding-right: var(--space-2); /* Add padding for scrollbar */
}

.location-details-accordion[b-7yuuzte3dr]::-webkit-scrollbar {
    width: 6px;
}

.location-details-accordion[b-7yuuzte3dr]::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
}

.location-details-accordion[b-7yuuzte3dr]::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-400);
    border-radius: var(--radius-sm);
}

.location-details-accordion[b-7yuuzte3dr]::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-gray-500);
}

.location-accordion-item[b-7yuuzte3dr] {
    border: none;
    border-bottom: 1px solid var(--color-border-light);
    background: transparent;
}

    .location-accordion-item:last-child[b-7yuuzte3dr] {
        border-bottom: none;
    }

.location-accordion-header[b-7yuuzte3dr] {
    padding: 0;
    background: var(--color-bg-secondary);
    border: none;
}

.location-accordion-button[b-7yuuzte3dr] {
    width: 100%;
    padding: var(--space-5) var(--space-6);
    text-align: left;
    background: var(--color-bg-surface);
    border: none;
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: var(--font-size-base);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

    .location-accordion-button:not(.collapsed)[b-7yuuzte3dr] {
        background: var(--color-bg-tertiary);
        box-shadow: inset 0 0 0 2px var(--color-primary);
    }

    .location-accordion-button:hover[b-7yuuzte3dr] {
        background: var(--color-bg-tertiary);
    }

    .location-accordion-button[b-7yuuzte3dr]::after {
        content: '\f078';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: var(--font-size-sm);
        transition: transform var(--transition-fast);
    }

    .location-accordion-button.collapsed[b-7yuuzte3dr]::after {
        content: '\f054';
    }

    .location-accordion-button:not(.collapsed)[b-7yuuzte3dr]::after {
        transform: rotate(180deg);
    }

.location-header-details[b-7yuuzte3dr] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    flex: 1;
}

.location-name[b-7yuuzte3dr] {
    font-weight: 700;
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    min-width: 180px;
}

.location-stats[b-7yuuzte3dr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.location-badge[b-7yuuzte3dr] {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 80px;
    justify-content: center;
}

.location-badge-devices[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    border: 1px solid rgba(var(--color-primary-rgb), 0.3);
}

.location-badge-users[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    color: var(--color-white);
    border: 1px solid rgba(var(--color-success-rgb), 0.3);
}

.location-badge-assignments[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
    color: var(--color-white);
    border: 1px solid rgba(var(--color-info-rgb), 0.3);
}

.location-percentage-badge[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
    color: var(--color-white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    min-width: 60px;
    text-align: center;
}

.location-accordion-collapse[b-7yuuzte3dr] {
    background: var(--color-bg-secondary);
}

.location-accordion-body[b-7yuuzte3dr] {
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--color-border-light);
}

/* User Devices Table */
.user-devices-table[b-7yuuzte3dr] {
    width: 100%;
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
}

    .user-devices-table thead[b-7yuuzte3dr] {
        background: var(--color-bg-tertiary);
    }

        .user-devices-table thead th[b-7yuuzte3dr] {
            padding: var(--space-3) var(--space-4);
            color: var(--color-text-secondary);
            font-weight: 600;
            font-size: var(--font-size-xs);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-bottom: 2px solid var(--color-border-light);
            text-align: left;
        }

    .user-devices-table tbody tr[b-7yuuzte3dr] {
        border-bottom: 1px solid var(--color-border-light);
        transition: background-color var(--transition-fast);
    }

        .user-devices-table tbody tr:hover[b-7yuuzte3dr] {
            background-color: var(--color-bg-tertiary);
        }

        .user-devices-table tbody tr:last-child[b-7yuuzte3dr] {
            border-bottom: none;
        }

    .user-devices-table tbody td[b-7yuuzte3dr] {
        padding: var(--space-3) var(--space-4);
        color: var(--color-text-primary);
        font-size: var(--font-size-sm);
        vertical-align: middle;
    }

.user-device-count-badge[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
    color: var(--color-white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    min-width: 40px;
    text-align: center;
    display: inline-block;
}

.location-device-list[b-7yuuzte3dr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}

.location-device-badge[b-7yuuzte3dr] {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    border: 1px solid var(--color-gray-300);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .location-device-badge:hover[b-7yuuzte3dr] {
        background: var(--color-gray-200);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

.location-device-more[b-7yuuzte3dr] {
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
    color: var(--color-white);
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border: 1px solid rgba(var(--color-info-rgb), 0.3);
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .location-device-more:hover[b-7yuuzte3dr] {
        background: linear-gradient(135deg, var(--color-info-dark) 0%, var(--color-info-darker) 100%);
        transform: translateY(-1px);
    }

/* Responsive Design for Accordion */
@media (max-width: 768px) {
    .location-accordion-button[b-7yuuzte3dr] {
        padding: var(--space-4) var(--space-5);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .location-header-details[b-7yuuzte3dr] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .location-name[b-7yuuzte3dr] {
        min-width: 100%;
    }

    .location-stats[b-7yuuzte3dr] {
        width: 100%;
        justify-content: flex-start;
    }

    .location-badge[b-7yuuzte3dr],
    .location-percentage-badge[b-7yuuzte3dr] {
        font-size: 0.75rem;
        padding: var(--space-0-5) var(--space-2);
        min-width: 70px;
    }

    .location-accordion-body[b-7yuuzte3dr] {
        padding: var(--space-4) var(--space-5);
    }

    .user-devices-table[b-7yuuzte3dr] {
        font-size: var(--font-size-xs);
    }

        .user-devices-table thead th[b-7yuuzte3dr],
        .user-devices-table tbody td[b-7yuuzte3dr] {
            padding: var(--space-2) var(--space-3);
        }

    .location-device-badge[b-7yuuzte3dr] {
        font-size: 0.75rem;
        max-width: 150px;
    }
}

@media (max-width: 480px) {
    .location-accordion-button[b-7yuuzte3dr] {
        padding: var(--space-3) var(--space-4);
    }

    .location-accordion-body[b-7yuuzte3dr] {
        padding: var(--space-3) var(--space-4);
    }

    .user-devices-table[b-7yuuzte3dr] {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .location-device-list[b-7yuuzte3dr] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .location-device-badge[b-7yuuzte3dr] {
        max-width: 100%;
        width: 100%;
    }
}

/* Dark Theme Adjustments */
[data-theme="dark"] .location-details-accordion[b-7yuuzte3dr] {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .location-accordion-item[b-7yuuzte3dr] {
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .location-accordion-header[b-7yuuzte3dr] {
    background: var(--color-gray-900);
}

[data-theme="dark"] .location-accordion-button[b-7yuuzte3dr] {
    background: var(--color-gray-800);
    color: var(--color-gray-100);
}

    [data-theme="dark"] .location-accordion-button:not(.collapsed)[b-7yuuzte3dr] {
        background: var(--color-gray-700);
        box-shadow: inset 0 0 0 2px var(--color-primary);
    }

    [data-theme="dark"] .location-accordion-button:hover[b-7yuuzte3dr] {
        background: var(--color-gray-700);
    }

[data-theme="dark"] .location-accordion-collapse[b-7yuuzte3dr] {
    background: var(--color-gray-900);
}

[data-theme="dark"] .location-accordion-body[b-7yuuzte3dr] {
    border-top-color: var(--color-gray-700);
}

[data-theme="dark"] .user-devices-table[b-7yuuzte3dr] {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

    [data-theme="dark"] .user-devices-table thead[b-7yuuzte3dr] {
        background: var(--color-gray-900);
    }

        [data-theme="dark"] .user-devices-table thead th[b-7yuuzte3dr] {
            color: var(--color-gray-300);
            border-color: var(--color-gray-700);
        }

    [data-theme="dark"] .user-devices-table tbody tr[b-7yuuzte3dr] {
        border-color: var(--color-gray-700);
    }

        [data-theme="dark"] .user-devices-table tbody tr:hover[b-7yuuzte3dr] {
            background-color: var(--color-gray-900);
        }

    [data-theme="dark"] .user-devices-table tbody td[b-7yuuzte3dr] {
        color: var(--color-gray-200);
    }

[data-theme="dark"] .location-device-badge[b-7yuuzte3dr] {
    background: var(--color-gray-700);
    color: var(--color-gray-300);
    border-color: var(--color-gray-600);
}

    [data-theme="dark"] .location-device-badge:hover[b-7yuuzte3dr] {
        background: var(--color-gray-600);
    }

/* Add to your CSS file */
.location-accordion-button[b-7yuuzte3dr] {
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: 1rem;
}

    .location-accordion-button:hover[b-7yuuzte3dr] {
        background-color: rgba(0, 0, 0, 0.02);
    }

    .location-accordion-button.collapsed[b-7yuuzte3dr]::after {
        content: "▼";
        float: right;
        transition: transform 0.3s ease;
        transform: rotate(0deg);
    }

    .location-accordion-button:not(.collapsed)[b-7yuuzte3dr]::after {
        content: "▼";
        float: right;
        transition: transform 0.3s ease;
        transform: rotate(180deg);
    }

.location-accordion-collapse[b-7yuuzte3dr] {
    transition: all 0.3s ease;
}

    .location-accordion-collapse.collapse:not(.show)[b-7yuuzte3dr] {
        display: none;
    }

    .location-accordion-collapse.collapsing[b-7yuuzte3dr] {
        height: 0;
        overflow: hidden;
        transition: height 0.35s ease;
    }

.location-accordion-body[b-7yuuzte3dr] {
    padding: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
/* /Components/Pages/AssetUsersComponents/AssetUsersComponent.razor.rz.scp.css */
/* Using your existing CSS variables - no need to redefine them */
.asset-users-container[b-8ffw56xpqk] {
    max-width: 100%;
    margin: 0 auto;
    padding: var(--space-6);
}

/* Header Section */
.header-section[b-8ffw56xpqk] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-lg);
}

.header-content[b-8ffw56xpqk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.title-section h1[b-8ffw56xpqk] {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-white);
}

.title-section p[b-8ffw56xpqk] {
    margin: 0;
    opacity: 0.9;
    font-size: var(--font-size-lg);
    color: var(--color-text-inverse);
}

.title-section h1 i[b-8ffw56xpqk] {
    margin-right: var(--space-3);
    opacity: 0.9;
}

.action-buttons[b-8ffw56xpqk] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Stats Cards */
.stats-container[b-8ffw56xpqk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}

.stat-card[b-8ffw56xpqk] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    transition: transform var(--transition-fast);
    border: 1px solid rgba(255, 255, 255, 0.1);

}

    .stat-card:hover[b-8ffw56xpqk] {
        transform: translateY(-4px);
        background: rgba(255, 255, 255, 0.2);
        box-shadow: var(--shadow-md);
    }

.stat-icon[b-8ffw56xpqk] {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    background: rgba(255, 255, 255, 0.2);
}

.stat-info h3[b-8ffw56xpqk] {
    margin: 0;
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-white);
}

.stat-info p[b-8ffw56xpqk] {
    margin: 0;
    opacity: 0.9;
    font-size: var(--font-size-sm);
    color: var(--color-text-inverse);
}

/* Filters Section */
.filters-section[b-8ffw56xpqk] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
}

.filters-header[b-8ffw56xpqk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-4);
}

    .filters-header h3[b-8ffw56xpqk] {
        margin: 0;
        color: var(--color-text-inverse);
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

.basic-filters[b-8ffw56xpqk] {
    display: flex;
    gap: var(--space-6);
    align-items: flex-end;
    flex-wrap: wrap;
}

.search-container[b-8ffw56xpqk] {
    flex: 1;
    min-width: 300px;
}

.search-box[b-8ffw56xpqk] {
    position: relative;
    display: flex;
    align-items: center;
}

    .search-box i:first-child[b-8ffw56xpqk] {
        position: absolute;
        left: var(--space-4);
        color: var(--color-gray-500);
    }

    .search-box input[b-8ffw56xpqk] {
        width: 100%;
        padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) * 3);
        border: 2px solid var(--color-border-medium);
        border-radius: var(--radius-md);
        font-size: var(--font-size-base);
        background: var(--color-bg-primary);
        color: var(--color-text-primary);
        transition: all var(--transition-fast);
    }

        .search-box input:focus[b-8ffw56xpqk] {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
        }

.btn-clear[b-8ffw56xpqk] {
    position: absolute;
    right: var(--space-3);
    background: none;
    border: none;
    color: var(--color-gray-500);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

    .btn-clear:hover[b-8ffw56xpqk] {
        background: var(--color-gray-200);
        color: var(--color-danger);
    }

.quick-filters[b-8ffw56xpqk] {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
}

.filter-checkbox[b-8ffw56xpqk] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.checkmark[b-8ffw56xpqk] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    display: inline-block;
    position: relative;
    transition: all var(--transition-fast);
}

input[type="checkbox"][b-8ffw56xpqk] {
    display: none;
}

    input[type="checkbox"]:checked + .checkmark[b-8ffw56xpqk] {
        background: var(--color-primary);
        border-color: var(--color-primary);
    }

        input[type="checkbox"]:checked + .checkmark[b-8ffw56xpqk]:after {
            content: "";
            position: absolute;
            left: 5px;
            top: 2px;
            width: 6px;
            height: 10px;
            border: solid var(--color-white);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

.filter-select select[b-8ffw56xpqk] {
    padding: var(--space-3);
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 160px;
}

    .filter-select select:focus[b-8ffw56xpqk] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
    }

/* Advanced Filters */
.advanced-filters[b-8ffw56xpqk] {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 2px solid var(--color-border-light);
}

.filter-grid[b-8ffw56xpqk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.filter-group[b-8ffw56xpqk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

    .filter-group label[b-8ffw56xpqk] {
        font-weight: 600;
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
    }

    .filter-group input[b-8ffw56xpqk],
    .filter-group select[b-8ffw56xpqk] {
        padding: var(--space-3);
        border: 2px solid var(--color-border-medium);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        background: var(--color-bg-primary);
        color: var(--color-text-primary);
        transition: all var(--transition-fast);
    }

        .filter-group input:focus[b-8ffw56xpqk],
        .filter-group select:focus[b-8ffw56xpqk] {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
        }

.filter-actions[b-8ffw56xpqk] {
    display: flex;
    gap: var(--space-4);
    justify-content: flex-end;
    margin-top: var(--space-4);
}

/* Buttons - Enhanced with your variables */
.btn[b-8ffw56xpqk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--font-size-sm);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    min-height: 44px;
}

.btn-primary[b-8ffw56xpqk] {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-sm);
}

    .btn-primary:hover[b-8ffw56xpqk] {
        background-color: var(--color-primary-dark);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.btn-success[b-8ffw56xpqk] {
    background-color: var(--color-success);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-sm);
}

    .btn-success:hover[b-8ffw56xpqk] {
        background-color: #27a844;
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.btn-secondary[b-8ffw56xpqk] {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border-medium);
}

    .btn-secondary:hover[b-8ffw56xpqk] {
        background-color: var(--color-bg-tertiary);
        transform: translateY(-2px);
        border-color: var(--color-border-heavy);
    }

.btn-outline[b-8ffw56xpqk] {
    background: transparent;
    border: 2px solid var(--color-border-medium);
    color: var(--color-text-secondary);
}

    .btn-outline:hover[b-8ffw56xpqk] {
        background: var(--color-bg-secondary);
        border-color: var(--color-border-heavy);
        transform: translateY(-2px);
    }

.btn-warning[b-8ffw56xpqk] {
    background-color: var(--color-warning);
    color: var(--color-gray-900);
    box-shadow: var(--shadow-sm);
}

    .btn-warning:hover[b-8ffw56xpqk] {
        background-color: #e0a800;
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

/* Table Section */
.table-section[b-8ffw56xpqk] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
}

.loading-state[b-8ffw56xpqk],
.empty-state[b-8ffw56xpqk] {
    padding: var(--space-16);
    text-align: center;
    color: var(--color-text-tertiary);
}

.spinner[b-8ffw56xpqk] {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-4);
    color: var(--color-primary);
}

.empty-state i[b-8ffw56xpqk] {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-4);
    color: var(--color-gray-400);
}

.empty-state h3[b-8ffw56xpqk] {
    margin: 0 0 var(--space-2) 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-xl);
}

.empty-state p[b-8ffw56xpqk] {
    margin: 0 0 var(--space-6) 0;
    color: var(--color-text-tertiary);
}

/* Table Styles */
.table-container[b-8ffw56xpqk] {
    overflow-x: auto;
    border-radius: var(--radius-lg);
}

.users-table[b-8ffw56xpqk] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

    .users-table thead[b-8ffw56xpqk] {
        background: var(--color-bg-secondary);
        border-bottom: 2px solid var(--color-border-light);
    }

    .users-table th[b-8ffw56xpqk] {
        padding: var(--space-4);
        text-align: center;
        font-weight: 600;
        color: var(--color-text-secondary);
        white-space: nowrap;
        border-right: 1px solid var(--color-border-light);
    }

        .users-table th:last-child[b-8ffw56xpqk] {
            border-right: none;
        }

    .users-table td[b-8ffw56xpqk] {
        padding: var(--space-4);
        border-bottom: 1px solid var(--color-border-light);
        vertical-align: middle;
        text-align: center;
        border-right: 1px solid var(--color-border-light);
    }

        .users-table td:last-child[b-8ffw56xpqk] {
            border-right: none;
        }

    .users-table tbody tr[b-8ffw56xpqk] {
        transition: background-color var(--transition-fast);
    }

        .users-table tbody tr:hover[b-8ffw56xpqk] {
            background-color: var(--color-bg-secondary);
        }

/* Active/Inactive User Styles */
.user-active[b-8ffw56xpqk] {
    background-color: rgba(40, 167, 69, 0.02);
}

.user-inactive[b-8ffw56xpqk] {
    background-color: rgba(220, 53, 69, 0.02);
}

.avatar-active[b-8ffw56xpqk] {
    background: var(--color-success);
}

.avatar-inactive[b-8ffw56xpqk] {
    background: var(--color-danger);
}

.status-badge[b-8ffw56xpqk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    min-width: 80px;
}

.status-active[b-8ffw56xpqk] {
    background: rgba(40, 167, 69, 0.15);
    color: var(--color-success);
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.status-inactive[b-8ffw56xpqk] {
    background: rgba(220, 53, 69, 0.15);
    color: var(--color-danger);
    border: 1px solid rgba(220, 53, 69, 0.3);
}

/* Sortable headers */
.sortable[b-8ffw56xpqk] {
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast);
}

    .sortable:hover[b-8ffw56xpqk] {
        background-color: var(--color-bg-tertiary);
    }

    .sortable span[b-8ffw56xpqk] {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
    }

/* Table Cell Styles */
.user-id[b-8ffw56xpqk] {
    font-family: var(--font-family-mono);
    font-weight: 700;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

.fingerprint-cell[b-8ffw56xpqk] {
    font-family: var(--font-family-mono);
}

.fingerprint-container[b-8ffw56xpqk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.fingerprint[b-8ffw56xpqk] {
    background: var(--color-bg-secondary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-family: var(--font-family-mono);
}

.btn-icon[b-8ffw56xpqk] {
    background: none;
    border: none;
    color: var(--color-gray-500);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-icon:hover[b-8ffw56xpqk] {
        background: var(--color-bg-tertiary);
        color: var(--color-primary);
    }

.email-link[b-8ffw56xpqk],
.phone-link[b-8ffw56xpqk] {
    color: var(--color-primary);
    text-decoration: none;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 500;
}

    .email-link:hover[b-8ffw56xpqk],
    .phone-link:hover[b-8ffw56xpqk] {
        color: var(--color-primary-dark);
        text-decoration: underline;
    }

.user-name[b-8ffw56xpqk] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: center;
}

.avatar[b-8ffw56xpqk] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.name-info strong[b-8ffw56xpqk] {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-text-primary);
}

.name-info .job-title[b-8ffw56xpqk] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    display: block;
}

.department-badge[b-8ffw56xpqk] {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    display: inline-block;
    border: 1px solid var(--color-border-light);
}

.location[b-8ffw56xpqk] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.manager-indicator[b-8ffw56xpqk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    min-width: 80px;
}

    .manager-indicator.manager[b-8ffw56xpqk] {
        background: rgba(40, 167, 69, 0.15);
        color: var(--color-success);
        border: 1px solid rgba(40, 167, 69, 0.3);
    }

    .manager-indicator.non-manager[b-8ffw56xpqk] {
        background: var(--color-bg-secondary);
        color: var(--color-text-tertiary);
        border: 1px solid var(--color-border-light);
    }

.no-data[b-8ffw56xpqk] {
    color: var(--color-gray-500);
    font-style: italic;
    font-size: var(--font-size-sm);
}

/* Action Buttons */
.action-buttons[b-8ffw56xpqk] {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
}

.btn-action[b-8ffw56xpqk] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    color: var(--color-white);
    font-size: var(--font-size-sm);
}

.btn-view[b-8ffw56xpqk] {
    background: var(--color-info);
}

    .btn-view:hover[b-8ffw56xpqk] {
        background: #138496;
        transform: scale(1.05);
        box-shadow: var(--shadow-sm);
    }

.btn-edit[b-8ffw56xpqk] {
    background: var(--color-warning);
}

    .btn-edit:hover[b-8ffw56xpqk] {
        background: #e0a800;
        transform: scale(1.05);
        box-shadow: var(--shadow-sm);
    }

.btn-activate[b-8ffw56xpqk] {
    background: var(--color-success);
}

    .btn-activate:hover[b-8ffw56xpqk] {
        background: #218838;
        transform: scale(1.05);
        box-shadow: var(--shadow-sm);
    }

.btn-deactivate[b-8ffw56xpqk] {
    background: var(--color-warning);
    color: var(--color-gray-900);
}

    .btn-deactivate:hover[b-8ffw56xpqk] {
        background: #e0a800;
        transform: scale(1.05);
        box-shadow: var(--shadow-sm);
    }

/* Mobile Cards */
.mobile-cards[b-8ffw56xpqk] {
    display: none;
    padding: var(--space-4);
    gap: var(--space-4);
}

.user-card[b-8ffw56xpqk] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--transition-fast);
    border: 1px solid var(--color-border-light);
}

    .user-card:hover[b-8ffw56xpqk] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

    .user-card.user-active[b-8ffw56xpqk] {
        border-left: 4px solid var(--color-success);
    }

    .user-card.user-inactive[b-8ffw56xpqk] {
        border-left: 4px solid var(--color-danger);
    }

.card-header[b-8ffw56xpqk] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
}

.user-avatar[b-8ffw56xpqk] {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.user-info[b-8ffw56xpqk] {
    flex: 1;
}

    .user-info h4[b-8ffw56xpqk] {
        margin: 0 0 var(--space-1) 0;
        color: var(--color-text-primary);
        font-size: var(--font-size-lg);
    }

.user-email[b-8ffw56xpqk] {
    margin: 0 0 var(--space-2) 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.user-status[b-8ffw56xpqk] {
    display: flex;
    gap: var(--space-2);
}

.manager-badge[b-8ffw56xpqk] {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

    .manager-badge.manager[b-8ffw56xpqk] {
        background: rgba(67, 97, 238, 0.15);
        color: var(--color-primary);
        border: 1px solid rgba(67, 97, 238, 0.3);
    }

    .manager-badge.non-manager[b-8ffw56xpqk] {
        background: var(--color-bg-secondary);
        color: var(--color-text-tertiary);
        border: 1px solid var(--color-border-light);
    }

.card-body[b-8ffw56xpqk] {
    padding: var(--space-5);
}

.card-details[b-8ffw56xpqk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.detail-row[b-8ffw56xpqk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-light);
}

    .detail-row:last-child[b-8ffw56xpqk] {
        border-bottom: none;
    }

    .detail-row .label[b-8ffw56xpqk] {
        font-weight: 600;
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
    }

    .detail-row .value[b-8ffw56xpqk] {
        color: var(--color-text-primary);
        font-weight: 500;
        font-size: var(--font-size-sm);
    }

.card-footer[b-8ffw56xpqk] {
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-light);
}

    .card-footer .action-buttons[b-8ffw56xpqk] {
        justify-content: space-between;
    }

    .card-footer .btn-action[b-8ffw56xpqk] {
        flex: 1;
        margin: 0 var(--space-1);
        border-radius: var(--radius-md);
        font-size: var(--font-size-xs);
        gap: var(--space-2);
        height: 36px;
        min-width: 0;
        padding: 0 var(--space-2);
    }

/* Pagination */
.pagination-container[b-8ffw56xpqk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5);
    border-top: 1px solid var(--color-border-light);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.pagination-info[b-8ffw56xpqk] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.pagination-controls[b-8ffw56xpqk] {
    display: flex;
    gap: var(--space-1);
}

.btn-pagination[b-8ffw56xpqk] {
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border-medium);
    background: var(--color-bg-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-weight: 500;
}

    .btn-pagination:hover:not(:disabled)[b-8ffw56xpqk] {
        background: var(--color-primary);
        color: var(--color-text-inverse);
        border-color: var(--color-primary);
        transform: translateY(-1px);
    }

    .btn-pagination.active[b-8ffw56xpqk] {
        background: var(--color-primary);
        color: var(--color-text-inverse);
        border-color: var(--color-primary);
    }

    .btn-pagination:disabled[b-8ffw56xpqk] {
        opacity: 0.5;
        cursor: not-allowed;
        background: var(--color-bg-secondary);
    }

.page-size-selector[b-8ffw56xpqk] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

    .page-size-selector select[b-8ffw56xpqk] {
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--color-border-medium);
        border-radius: var(--radius-md);
        background: var(--color-bg-primary);
        color: var(--color-text-primary);
        font-size: var(--font-size-sm);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

        .page-size-selector select:focus[b-8ffw56xpqk] {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
        }

/* Modal */
.modal-overlay[b-8ffw56xpqk] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: var(--space-4);
    backdrop-filter: blur(4px);
}

.modal-container[b-8ffw56xpqk] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 500px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
}

.modal-header[b-8ffw56xpqk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
}

    .modal-header h3[b-8ffw56xpqk] {
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--color-text-primary);
        font-size: var(--font-size-xl);
    }

.btn-close[b-8ffw56xpqk] {
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    cursor: pointer;
    color: var(--color-gray-500);
    transition: color var(--transition-fast);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
}

    .btn-close:hover[b-8ffw56xpqk] {
        background: var(--color-bg-secondary);
        color: var(--color-text-primary);
    }

.modal-body[b-8ffw56xpqk] {
    padding: var(--space-6);
}

    .modal-body p[b-8ffw56xpqk] {
        margin: 0 0 var(--space-4) 0;
        color: var(--color-text-secondary);
        line-height: var(--line-height-relaxed);
    }

.text-info[b-8ffw56xpqk] {
    color: var(--color-info);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 500;
}

.text-warning[b-8ffw56xpqk] {
    color: var(--color-warning);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 500;
}

.modal-footer[b-8ffw56xpqk] {
    padding: var(--space-6);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-4);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .basic-filters[b-8ffw56xpqk] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-container[b-8ffw56xpqk] {
        min-width: 100%;
    }

    .quick-filters[b-8ffw56xpqk] {
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 992px) {
    .header-content[b-8ffw56xpqk] {
        flex-direction: column;
        text-align: center;
    }

    .action-buttons[b-8ffw56xpqk] {
        width: 100%;
        justify-content: center;
    }

    .stats-container[b-8ffw56xpqk] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-grid[b-8ffw56xpqk] {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-details[b-8ffw56xpqk] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .asset-users-container[b-8ffw56xpqk] {
        padding: var(--space-4);
    }

    .header-section[b-8ffw56xpqk] {
        padding: var(--space-5);
        border-radius: var(--radius-lg);
    }

    .stats-container[b-8ffw56xpqk] {
        grid-template-columns: 1fr;
    }

    .filters-header[b-8ffw56xpqk] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

        .filters-header h3[b-8ffw56xpqk] {
            justify-content: center;
        }

    .filter-grid[b-8ffw56xpqk] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-8ffw56xpqk] {
        justify-content: center;
    }

    .users-table[b-8ffw56xpqk] {
        display: none;
    }

    .mobile-cards[b-8ffw56xpqk] {
        display: flex;
        flex-direction: column;
    }

    .pagination-container[b-8ffw56xpqk] {
        flex-direction: column;
        text-align: center;
    }

    .pagination-controls[b-8ffw56xpqk] {
        order: -1;
    }
}

@media (max-width: 576px) {
    .action-buttons[b-8ffw56xpqk] {
        flex-direction: column;
        width: 100%;
    }

    .btn[b-8ffw56xpqk] {
        width: 100%;
        justify-content: center;
    }

    .quick-filters[b-8ffw56xpqk] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-checkbox[b-8ffw56xpqk] {
        justify-content: center;
        margin-bottom: var(--space-2);
    }

    .filter-select select[b-8ffw56xpqk] {
        width: 100%;
    }

    .modal-footer[b-8ffw56xpqk] {
        flex-direction: column;
    }

        .modal-footer .btn[b-8ffw56xpqk] {
            width: 100%;
        }

    .card-footer .action-buttons[b-8ffw56xpqk] {
        flex-direction: column;
        gap: var(--space-2);
    }

    .card-footer .btn-action[b-8ffw56xpqk] {
        width: 100%;
        margin: 0;
    }
}

/* Dark theme specific adjustments */
[data-theme="dark"] .stat-card[b-8ffw56xpqk] {
    background: rgba(255, 255, 255, 0.1);
}

    [data-theme="dark"] .stat-card:hover[b-8ffw56xpqk] {
        background: rgba(255, 255, 255, 0.15);
    }

[data-theme="dark"] .fingerprint[b-8ffw56xpqk] {
    background: var(--color-gray-800);
    color: var(--color-gray-300);
}

[data-theme="dark"] .department-badge[b-8ffw56xpqk] {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

/* Print styles */
@media print {
    .action-buttons[b-8ffw56xpqk],
    .filters-section[b-8ffw56xpqk],
    .pagination-container[b-8ffw56xpqk],
    .btn-action[b-8ffw56xpqk],
    .card-footer[b-8ffw56xpqk] {
        display: none !important;
    }

    .table-section[b-8ffw56xpqk] {
        box-shadow: none;
        border: 1px solid #000;
    }

    .users-table[b-8ffw56xpqk] {
        display: table;
    }

    .mobile-cards[b-8ffw56xpqk] {
        display: none;
    }
}
/* /Components/Pages/AssetUsersComponents/UpsertAssetUserComponent.razor.rz.scp.css */
/* /Components/Pages/AssignedDevicesComponents/AssignedDevicesByLocation.razor.rz.scp.css */
/* Modern Dashboard Layout */
.locations-dashboard[b-x3ce2llfus] {
    padding: var(--space-6);
    min-height: 100vh;
    animation: fadeIn-b-x3ce2llfus 0.8s ease-out;
}

@keyframes fadeIn-b-x3ce2llfus {
    from {
        opacity: 0;
        transform: translateY(var(--space-5));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modern Statistics Cards with Hover Effects */
.stats-container[b-x3ce2llfus] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    perspective: 1000px;
}

.stat-card[b-x3ce2llfus] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: var(--space-5);
    transition: all var(--transition-normal);
    border: 1px solid var(--color-border-light);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

    .stat-card[b-x3ce2llfus]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        transition: left var(--transition-slow);
    }

    .stat-card:hover[b-x3ce2llfus] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: var(--shadow-lg);
    }

        .stat-card:hover[b-x3ce2llfus]::before {
            left: 100%;
        }

.stat-icon[b-x3ce2llfus] {
    width: 70px;
    height: 70px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--color-white);
    position: relative;
    transition: all var(--transition-normal);
}

.stat-card:hover .stat-icon[b-x3ce2llfus] {
    transform: scale(1.1) rotate(5deg);
}

.stat-icon[b-x3ce2llfus]::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.6), transparent);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: subtract;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.stat-card:hover .stat-icon[b-x3ce2llfus]::after {
    opacity: 1;
}

.stat-icon.total-assignments[b-x3ce2llfus] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

.stat-icon.current-assignments[b-x3ce2llfus] {
    background: linear-gradient(135deg, var(--color-success), #66bb6a);
}

.stat-icon.reclaimed-assignments[b-x3ce2llfus] {
    background: linear-gradient(135deg, var(--color-warning), #ffb74d);
}

.stat-icon.locations-count[b-x3ce2llfus] {
    background: linear-gradient(135deg, var(--color-secondary), #ba68c8);
}

.stat-info[b-x3ce2llfus] {
    flex: 1;
}

.stat-value[b-x3ce2llfus] {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-1);
    background: linear-gradient(135deg, var(--color-text-primary), var(--color-text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-x3ce2llfus] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Enhanced Main Container */
.locations-table-container[b-x3ce2llfus] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    animation: slideUp-b-x3ce2llfus 0.6s ease-out;
}

@keyframes slideUp-b-x3ce2llfus {
    from {
        opacity: 0;
        transform: translateY(var(--space-8));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Premium Header Section */
.table-header[b-x3ce2llfus] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: var(--color-white);
    padding: var(--space-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

    .table-header[b-x3ce2llfus]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

.header-left[b-x3ce2llfus] {
    position: relative;
    z-index: 1;
}

    .header-left h2[b-x3ce2llfus] {
        margin: 0 0 var(--space-2) 0;
        font-size: var(--font-size-3xl);
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }

        .header-left h2 i[b-x3ce2llfus] {
            font-size: var(--font-size-4xl);
            color: rgba(255,255,255,0.9);
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }

.subtitle[b-x3ce2llfus] {
    margin: 0;
    opacity: 0.9;
    font-size: var(--font-size-base);
    font-weight: 400;
}

.header-actions[b-x3ce2llfus] {
    display: flex;
    gap: var(--space-4);
    position: relative;
    z-index: 1;
}

/* Enhanced Button Styles */
.btn[b-x3ce2llfus] {
    padding: var(--space-3) var(--space-5);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .btn[b-x3ce2llfus]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left var(--transition-slow);
    }

    .btn:hover[b-x3ce2llfus]::before {
        left: 100%;
    }



    .btn-primary:hover[b-x3ce2llfus] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-xl);
    }


    .btn-secondary:hover[b-x3ce2llfus] {
        transform: translateY(-2px);
    }

.btn-success[b-x3ce2llfus] {
    background: rgba(var(--color-success-rgb), 0.9);
    color: var(--color-white);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

    .btn-success:hover[b-x3ce2llfus] {
        background: var(--color-success);
        transform: translateY(-2px);
    }

.btn-warning[b-x3ce2llfus] {
    background: rgba(var(--color-warning-rgb), 0.9);
    color: var(--color-white);
    border: 1px solid rgba(245, 124, 0, 0.3);
}

    .btn-warning:hover[b-x3ce2llfus] {
        background: var(--color-warning);
        transform: translateY(-2px);
    }

.btn-info[b-x3ce2llfus] {
    background: rgba(var(--color-info-rgb), 0.9);
    color: var(--color-white);
    border: 1px solid rgba(2, 136, 209, 0.3);
}

    .btn-info:hover[b-x3ce2llfus] {
        background: var(--color-info);
        transform: translateY(-2px);
    }

/* Advanced Controls Section */
.controls-section[b-x3ce2llfus] {
    padding: var(--space-6) var(--space-8);
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-5);
    backdrop-filter: blur(10px);
}

.controls-left[b-x3ce2llfus] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

/* Enhanced Search Box */
.search-box[b-x3ce2llfus] {
    position: relative;
    min-width: 320px;
}

    .search-box i[b-x3ce2llfus] {
        position: absolute;
        left: var(--space-4);
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-text-tertiary);
        z-index: 2;
        transition: color var(--transition-fast);
    }

.search-input[b-x3ce2llfus] {
    width: 100%;
    padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) * 3);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    background: var(--color-bg-surface);
    transition: all var(--transition-normal);
    position: relative;
}

    .search-input:focus[b-x3ce2llfus] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.1);
        transform: translateY(-1px);
    }

        .search-input:focus + i[b-x3ce2llfus] {
            color: var(--color-primary);
        }

/* Modern Filter Chips */
.quick-filters[b-x3ce2llfus] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.filter-chip[b-x3ce2llfus] {
    padding: var(--space-2) var(--space-5);
    border: 2px solid var(--color-border-light);
    background: var(--color-bg-surface);
    border-radius: 25px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    overflow: hidden;
    color: var( --color-text-primary);
}

    .filter-chip[b-x3ce2llfus]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(67, 97, 238, 0.1), transparent);
        transition: left var(--transition-slow);
    }

    .filter-chip:hover[b-x3ce2llfus]::before {
        left: 100%;
    }

    .filter-chip:hover[b-x3ce2llfus] {
        border-color: var(--color-primary);
        background: rgba(67, 97, 238, 0.05);
        transform: translateY(-2px);
    }

    .filter-chip.active[b-x3ce2llfus] {
        background: var(--color-primary);
        color: var(--color-white);
        border-color: var(--color-primary);
        box-shadow: var(--shadow-md);
    }

.assigned-dot[b-x3ce2llfus], .reclaimed-dot[b-x3ce2llfus] {
    font-size: 8px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

.controls-right[b-x3ce2llfus] {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    flex-wrap: wrap;
}

.filter-group[b-x3ce2llfus] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

    .filter-group label[b-x3ce2llfus] {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--color-text-secondary);
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

.filter-select[b-x3ce2llfus] {
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    font-size: var(--font-size-sm);
    min-width: 140px;
    transition: all var(--transition-normal);
    cursor: pointer;
    color: var( --color-text-primary);
}
.title[b-x3ce2llfus] {
    color: var( --color-text-inverse)
}
    .filter-select:focus[b-x3ce2llfus] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
    }

/* Premium Table Styles */
.table-wrapper[b-x3ce2llfus] {
    overflow-x: auto;
    position: relative;
}

.locations-table[b-x3ce2llfus] {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-surface);
    position: relative;
}

    .locations-table th[b-x3ce2llfus] {
        padding: var(--space-5) var(--space-4);
        text-align: left;
        font-weight: 700;
        color: var(--color-text-secondary);
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border-bottom: 2px solid var(--color-border-light);
        position: relative;
        white-space: nowrap;
        text-align: center !important;
    }

        .locations-table th i[b-x3ce2llfus] {
            margin-right: var(--space-2);
            color: var(--color-primary);
            font-size: var(--font-size-sm);
        }

    .locations-table td[b-x3ce2llfus] {
        padding: var(--space-5) var(--space-4);
        border-bottom: 1px solid var(--color-border-light);
        vertical-align: middle;
        transition: background-color var(--transition-fast);
        text-align: center !important;
    }

.location-row[b-x3ce2llfus] {
    transition: all var(--transition-normal);
    position: relative;
    text-align: center !important;
}

    .location-row[b-x3ce2llfus]::before {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--color-primary);
        transform: scaleX(0);
        transition: transform var(--transition-normal);
    }

    .location-row:hover[b-x3ce2llfus]::before {
        transform: scaleX(1);
    }

    .location-row:hover[b-x3ce2llfus] {
        transform: translateX(4px);
    }

/* Enhanced Sortable Columns */
.sortable[b-x3ce2llfus] {
    cursor: pointer;
    transition: all var(--transition-normal);
    user-select: none;
    position: relative;
}

    .sortable i:last-child[b-x3ce2llfus] {
        margin-left: var(--space-2);
        font-size: var(--font-size-xs);
        color: var(--color-text-tertiary);
        transition: transform var(--transition-normal);
    }

    .sortable:hover i:last-child[b-x3ce2llfus] {
        color: var(--color-primary);
    }

/* Enhanced Device Column */
.device-cell[b-x3ce2llfus], .location-cell[b-x3ce2llfus] {
    min-width: 220px;
}

.device-info[b-x3ce2llfus], .location-info[b-x3ce2llfus] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.device-name[b-x3ce2llfus], .location-name[b-x3ce2llfus] {
    font-weight: 700;
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
}

.device-meta[b-x3ce2llfus], .location-meta[b-x3ce2llfus] {
    display: flex;
    gap: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center !important;
}

.device-type[b-x3ce2llfus] {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    color: var(--color-white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--font-size-xs);
    box-shadow: var(--shadow-sm);
    text-align: center !important;
}

.location-code[b-x3ce2llfus] {
    background: linear-gradient(135deg, rgba(123, 31, 162, 0.2), rgba(123, 31, 162, 0.3));
    color: var(--color-secondary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--font-size-xs);
    box-shadow: var(--shadow-sm);
    text-align: center !important;
}

.serial-number[b-x3ce2llfus] {
    font-family: var(--font-family-mono);
    background: var(--color-bg-tertiary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.location-row:hover .device-type[b-x3ce2llfus],
.location-row:hover .location-code[b-x3ce2llfus] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-align: center !important;
}

/* Enhanced Date Column */
.assignment-date[b-x3ce2llfus] {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
    font-size: var(--font-size-sm);
}

.days-assigned[b-x3ce2llfus] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.reclaim-date[b-x3ce2llfus] {
    font-size: var(--font-size-xs);
    color: var(--color-warning);
    font-weight: 600;
}

/* Premium Status Column */
.status-badge[b-x3ce2llfus] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: 25px;
    font-size: var(--font-size-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

    .status-badge[b-x3ce2llfus]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        transition: left var(--transition-slow);
    }

    .status-badge:hover[b-x3ce2llfus]::before {
        left: 100%;
    }

    .status-badge.assigned[b-x3ce2llfus] {
        background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(46, 204, 113, 0.25));
        color: var(--color-success);
        border: 2px solid rgba(46, 204, 113, 0.3);
    }

    .status-badge.reclaimed[b-x3ce2llfus] {
        background: linear-gradient(135deg, rgba(243, 156, 18, 0.15), rgba(243, 156, 18, 0.25));
        color: var(--color-warning);
        border: 2px solid rgba(243, 156, 18, 0.3);
    }

.location-row:hover .status-badge[b-x3ce2llfus] {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

/* Premium Action Buttons */
.action-buttons[b-x3ce2llfus] {
    display: flex;
    gap: var(--space-2);
}

.btn-action[b-x3ce2llfus] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: var(--font-size-sm);
    position: relative;
    overflow: hidden;
}

    .btn-action[b-x3ce2llfus]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
        transition: left var(--transition-slow);
    }

    .btn-action:hover[b-x3ce2llfus]::before {
        left: 100%;
    }

.btn-view[b-x3ce2llfus] {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

    .btn-view:hover[b-x3ce2llfus] {
        background: var(--color-primary-dark);
        color: var(--color-white);
        transform: translateY(-2px) scale(1.1);
        box-shadow: var(--shadow-lg);
    }

.btn-reclaim[b-x3ce2llfus] {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.2), rgba(243, 156, 18, 0.3));
    color: var(--color-warning);
    box-shadow: var(--shadow-md);
}

    .btn-reclaim:hover[b-x3ce2llfus] {
        background: var(--color-warning);
        color: var(--color-white);
        transform: translateY(-2px) scale(1.1);
        box-shadow: var(--shadow-lg);
    }

.btn-pdf[b-x3ce2llfus] {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), rgba(220, 53, 69, 0.25));
    color: #dc3545;
    box-shadow: var(--shadow-md);
}

    .btn-pdf:hover[b-x3ce2llfus] {
        background: #dc3545;
        color: var(--color-white);
        transform: translateY(-2px) scale(1.1);
        box-shadow: var(--shadow-lg);
    }

    .btn-pdf:disabled[b-x3ce2llfus] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

.btn-edit[b-x3ce2llfus] {
    background: linear-gradient(135deg, rgba(123, 31, 162, 0.2), rgba(123, 31, 162, 0.3));
    color: var(--color-secondary);
    box-shadow: var(--shadow-md);
}

    .btn-edit:hover[b-x3ce2llfus] {
        background: var(--color-secondary);
        color: var(--color-white);
        transform: translateY(-2px) scale(1.1);
        box-shadow: var(--shadow-lg);
    }

/* Enhanced No Data State */
.no-data-row td[b-x3ce2llfus] {
    padding: var(--space-16) var(--space-5);
    text-align: center;
}

.no-locations[b-x3ce2llfus] {
    animation: pulse-b-x3ce2llfus 2s ease-in-out infinite;
}

@keyframes pulse-b-x3ce2llfus {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.no-locations i[b-x3ce2llfus] {
    font-size: var(--font-size-4xl);
    color: var(--color-border-medium);
    margin-bottom: var(--space-5);
    display: block;
}

.no-locations h3[b-x3ce2llfus] {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-xl);
}

.no-locations p[b-x3ce2llfus] {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-base);
}

/* Premium Table Footer */
.table-footer[b-x3ce2llfus] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5) var(--space-8);
    background: var(--color-bg-tertiary);
    border-top: 1px solid var(--color-border-light);
}

.footer-info[b-x3ce2llfus] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 600;
}

.pagination[b-x3ce2llfus] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.btn-pagination[b-x3ce2llfus] {
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-border-light);
    background: var(--color-bg-surface);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

    .btn-pagination[b-x3ce2llfus]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(67, 97, 238, 0.2), transparent);
        transition: left var(--transition-slow);
    }

    .btn-pagination:hover[b-x3ce2llfus]::before {
        left: 100%;
    }

    .btn-pagination:hover:not(:disabled)[b-x3ce2llfus] {
        border-color: var(--color-primary);
        color: var(--color-primary);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .btn-pagination:disabled[b-x3ce2llfus] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
    }

.page-info[b-x3ce2llfus] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 600;
}

.page-size-select[b-x3ce2llfus] {
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
}

    .page-size-select:focus[b-x3ce2llfus] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
    }

/* Premium Modal Styles */
.modal-overlay[b-x3ce2llfus] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
    padding: var(--space-5);
    backdrop-filter: blur(8px);
    animation: modalFadeIn-b-x3ce2llfus 0.4s ease-out;
}

@keyframes modalFadeIn-b-x3ce2llfus {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

.modal-content[b-x3ce2llfus] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: modalSlideUp-b-x3ce2llfus 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid var(--color-border-light);
}

@keyframes modalSlideUp-b-x3ce2llfus {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.9);
    }

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

.large-modal[b-x3ce2llfus] {
    max-width: 1000px;
}

.modal-header[b-x3ce2llfus] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6) var(--space-8);
    border-bottom: 1px solid var(--color-border-light);
    background: ;
}

    .modal-header h3[b-x3ce2llfus] {
        margin: 0;
        color: var(--color-text-primary);
        display: flex;
        align-items: center;
        gap: var(--space-3);
        font-size: var(--font-size-2xl);
        font-weight: 700;
    }

        .modal-header h3 i[b-x3ce2llfus] {
            color: var(--color-primary);
            font-size: var(--font-size-3xl);
        }

.btn-close[b-x3ce2llfus] {
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-close:hover[b-x3ce2llfus] {
        background: var(--color-bg-tertiary);
        color: var(--color-danger);
        transform: rotate(90deg);
    }

.modal-body[b-x3ce2llfus] {
    padding: var(--space-8);
}

.modal-footer[b-x3ce2llfus] {
    padding: var(--space-6) var(--space-8);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    background: linear-gradient(135deg, var(--color-gray-50), var(--color-gray-100));
}

/* Enhanced Detail Tabs */
.detail-tabs[b-x3ce2llfus] {
    height: 100%;
}

.tab-headers[b-x3ce2llfus] {
    display: flex;
    border-bottom: 2px solid var(--color-border-light);
    margin-bottom: var(--space-6);
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 0 var(--space-2);
}

.tab-header[b-x3ce2llfus] {
    padding: var(--space-4) var(--space-6);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all var(--transition-normal);
    font-weight: 600;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    overflow: hidden;
}

    .tab-header[b-x3ce2llfus]::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 3px;
        background: var(--color-primary);
        transition: all var(--transition-normal);
        transform: translateX(-50%);
    }

    .tab-header.active[b-x3ce2llfus] {
        color: var(--color-primary);
    }

        .tab-header.active[b-x3ce2llfus]::before {
            width: 100%;
        }

    .tab-header:hover:not(.active)[b-x3ce2llfus] {
        background-color: var(--color-bg-tertiary);
        color: var(--color-primary);
        transform: translateY(-2px);
    }

    .tab-header i[b-x3ce2llfus] {
        font-size: var(--font-size-base);
        transition: transform var(--transition-normal);
    }

    .tab-header:hover i[b-x3ce2llfus] {
        transform: scale(1.2);
    }

.tab-content[b-x3ce2llfus] {
    min-height: 400px;
    animation: tabFadeIn-b-x3ce2llfus 0.4s ease-out;
}

@keyframes tabFadeIn-b-x3ce2llfus {
    from {
        opacity: 0;
        transform: translateY(var(--space-5));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Premium Detail Sections */
.detail-section h4[b-x3ce2llfus] {
    color: var(--color-primary);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border-light);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.detail-grid[b-x3ce2llfus] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-5);
}

.detail-item[b-x3ce2llfus] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-normal);
}

    .detail-item:hover[b-x3ce2llfus] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--color-primary-light);
    }

    .detail-item label[b-x3ce2llfus] {
        font-weight: 700;
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .detail-item span[b-x3ce2llfus] {
        color: var(--color-text-primary);
        font-size: var(--font-size-base);
        font-weight: 600;
    }

    .detail-item.full-width[b-x3ce2llfus] {
        grid-column: 1 / -1;
    }

/* Enhanced Specifications View */
.specs-view[b-x3ce2llfus] {
    padding: var(--space-4) 0;
}

.specs-grid-view[b-x3ce2llfus] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.spec-card-view[b-x3ce2llfus] {
    background: linear-gradient(135deg, var(--color-bg-surface), var(--color-bg-tertiary));
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

    .spec-card-view[b-x3ce2llfus]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(67, 97, 238, 0.1), transparent);
        transition: left var(--transition-slow);
    }

    .spec-card-view:hover[b-x3ce2llfus]::before {
        left: 100%;
    }

    .spec-card-view:hover[b-x3ce2llfus] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: var(--color-primary-light);
    }

.spec-header[b-x3ce2llfus] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

    .spec-header i[b-x3ce2llfus] {
        font-size: var(--font-size-lg);
        color: var(--color-primary);
        width: 24px;
    }

.spec-label[b-x3ce2llfus] {
    font-weight: 700;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.spec-value[b-x3ce2llfus] {
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: var(--line-height-normal);
}

/* Enhanced Status Badges in Modal */
.status-badge.modal-badge[b-x3ce2llfus] {
    padding: var(--space-2) var(--space-5);
    font-size: var(--font-size-sm);
    border-radius: 25px;
    box-shadow: var(--shadow-md);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .stats-container[b-x3ce2llfus] {
        grid-template-columns: repeat(2, 1fr);
    }

    .detail-grid[b-x3ce2llfus] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .locations-dashboard[b-x3ce2llfus] {
        padding: var(--space-4);
    }

    .stats-container[b-x3ce2llfus] {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .table-header[b-x3ce2llfus] {
        padding: var(--space-6);
        flex-direction: column;
        gap: var(--space-5);
        align-items: stretch;
    }

    .header-actions[b-x3ce2llfus] {
        justify-content: center;
    }

    .controls-section[b-x3ce2llfus] {
        padding: var(--space-5) var(--space-6);
        flex-direction: column;
        gap: var(--space-4);
    }

    .controls-left[b-x3ce2llfus], .controls-right[b-x3ce2llfus] {
        width: 100%;
    }

    .search-box[b-x3ce2llfus] {
        min-width: 100%;
    }

    .quick-filters[b-x3ce2llfus] {
        justify-content: center;
    }

    .modal-content[b-x3ce2llfus] {
        margin: var(--space-2);
        width: calc(100% - var(--space-4));
    }

    .modal-body[b-x3ce2llfus] {
        padding: var(--space-6);
    }

    .tab-headers[b-x3ce2llfus] {
        flex-direction: column;
    }

    .tab-header[b-x3ce2llfus] {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .locations-dashboard[b-x3ce2llfus] {
        padding: var(--space-3);
    }

    .stat-card[b-x3ce2llfus] {
        padding: var(--space-5);
        flex-direction: column;
        text-align: center;
    }

    .stat-icon[b-x3ce2llfus] {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .header-left h2[b-x3ce2llfus] {
        font-size: var(--font-size-2xl);
        flex-direction: column;
        gap: var(--space-2);
        text-align: center;
    }

    .btn[b-x3ce2llfus] {
        padding: var(--space-2) var(--space-4);
        font-size: var(--font-size-xs);
    }

    .filter-chip[b-x3ce2llfus] {
        padding: var(--space-2) var(--space-4);
    }

    .pagination[b-x3ce2llfus] {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Loading Animation */
.loading-skeleton[b-x3ce2llfus] {
    animation: skeleton-loading-b-x3ce2llfus 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading-b-x3ce2llfus {
    0% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.6;
    }
}

/* Print Styles */
@media print {
    .locations-dashboard[b-x3ce2llfus] {
        padding: 0;
        background: var(--color-white);
    }

    .table-header[b-x3ce2llfus], .controls-section[b-x3ce2llfus], .modal-footer[b-x3ce2llfus], .btn[b-x3ce2llfus] {
        display: none;
    }

    .locations-table-container[b-x3ce2llfus] {
        box-shadow: none;
        border: 1px solid var(--color-black);
    }

    .stat-card[b-x3ce2llfus] {
        break-inside: avoid;
    }
}

/* Scrollbar Styling */
[b-x3ce2llfus]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[b-x3ce2llfus]::-webkit-scrollbar-track {
    background: var(--color-bg-tertiary);
    border-radius: 4px;
}

[b-x3ce2llfus]::-webkit-scrollbar-thumb {
    background: var(--color-border-medium);
    border-radius: 4px;
    transition: background var(--transition-normal);
}

    [b-x3ce2llfus]::-webkit-scrollbar-thumb:hover {
        background: var(--color-text-tertiary);
    }

/* Focus Styles for Accessibility */
.btn:focus-visible[b-x3ce2llfus],
.filter-chip:focus-visible[b-x3ce2llfus],
.search-input:focus-visible[b-x3ce2llfus],
.filter-select:focus-visible[b-x3ce2llfus] {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root[b-x3ce2llfus] {
        --border-light: var(--color-black);
        --text-secondary: var(--color-black);
        --bg-tertiary: var(--color-white);
    }

    .stat-card[b-x3ce2llfus], .locations-table-container[b-x3ce2llfus], .modal-content[b-x3ce2llfus] {
        border: 2px solid var(--color-black);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-x3ce2llfus], *[b-x3ce2llfus]::before, *[b-x3ce2llfus]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/AssignedDevicesComponents/AssignedDevicesComponent.razor.rz.scp.css */
.searchable-select-container[b-uscnmih801] {
    position: relative;
}

.search-input-group[b-uscnmih801] {
    position: relative;
}

.input-icon[b-uscnmih801] {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-600);
    z-index: 3;
}

.search-input[b-uscnmih801] {
    padding-left: calc(var(--space-3) * 3);
}

.dropdown-options[b-uscnmih801] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 300px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
    margin-top: var(--space-1);
}

.dropdown-option[b-uscnmih801] {
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    border-bottom: 1px solid var(--color-gray-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--transition-fast);
}

    .dropdown-option:hover[b-uscnmih801] {
        background-color: var(--color-gray-50);
    }

    .dropdown-option.selected[b-uscnmih801] {
        background-color: var(--color-primary-light);
        opacity: 0.1;
    }

.selected-item[b-uscnmih801] {
    margin-top: var(--space-2);
    padding: var(--space-3);
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.selected-item-content[b-uscnmih801] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-remove-item[b-uscnmih801] {
    background: none;
    border: none;
    color: var(--color-gray-600);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

    .btn-remove-item:hover[b-uscnmih801] {
        background-color: var(--color-gray-100);
        color: var(--color-danger);
    }

.device-info[b-uscnmih801], .employee-info[b-uscnmih801] {
    flex: 1;
}

.device-name[b-uscnmih801], .employee-name[b-uscnmih801] {
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.device-details[b-uscnmih801], .employee-details[b-uscnmih801] {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.device-brand[b-uscnmih801], .employee-fingerprint[b-uscnmih801] {
    margin-top: var(--space-1);
}

.assignment-summary-card[b-uscnmih801] {
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.summary-title[b-uscnmih801] {
    color: var(--color-gray-700);
    margin-bottom: var(--space-3);
    font-weight: 600;
}

.summary-content[b-uscnmih801] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.summary-item[b-uscnmih801] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-1) 0;
}

.summary-label[b-uscnmih801] {
    font-weight: 500;
    color: var(--color-gray-700);
}

.summary-value[b-uscnmih801] {
    color: var(--color-gray-900);
}

.form-group-enhanced[b-uscnmih801] {
    margin-bottom: var(--space-4);
}

.form-label.required[b-uscnmih801]::after {
    content: " *";
    color: var(--color-danger);
}

.form-hint[b-uscnmih801] {
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    margin-top: var(--space-1);
}

.validation-error[b-uscnmih801] {
    font-size: var(--font-size-sm);
    color: var(--color-danger);
    margin-top: var(--space-1);
}

.enhanced-input[b-uscnmih801], .enhanced-select[b-uscnmih801], .enhanced-textarea[b-uscnmih801] {
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .enhanced-input:focus[b-uscnmih801], .enhanced-select:focus[b-uscnmih801], .enhanced-textarea:focus[b-uscnmih801] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
    }

.modal-title-container[b-uscnmih801] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Enhanced Dashboard Layout */
.devices-dashboard[b-uscnmih801] {
    padding: var(--space-6);
    min-height: 100vh;
    animation: fadeIn-b-uscnmih801 0.8s ease-out;
}

@keyframes fadeIn-b-uscnmih801 {
    from {
        opacity: 0;
        transform: translateY(var(--space-4));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modern Statistics Cards with Hover Effects */
.stats-container[b-uscnmih801] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    perspective: 1000px;
}

.stat-card[b-uscnmih801] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: var(--space-5);
    transition: all var(--transition-normal);
    border: 1px solid var(--color-border-light);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

    .stat-card[b-uscnmih801]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        transition: left var(--transition-slow);
    }

    .stat-card:hover[b-uscnmih801] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: var(--shadow-lg);
    }

        .stat-card:hover[b-uscnmih801]::before {
            left: 100%;
        }

.stat-icon[b-uscnmih801] {
    width: 70px;
    height: 70px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--color-white);
    position: relative;
    transition: all var(--transition-normal);
}

.stat-card:hover .stat-icon[b-uscnmih801] {
    transform: scale(1.1) rotate(5deg);
}

.stat-icon[b-uscnmih801]::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.6), transparent);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: subtract;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.stat-card:hover .stat-icon[b-uscnmih801]::after {
    opacity: 1;
}

.total-devices[b-uscnmih801] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

.assigned-devices[b-uscnmih801] {
    background: linear-gradient(135deg, var(--color-success), #66bb6a);
}

.reclaimed-devices[b-uscnmih801] {
    background: linear-gradient(135deg, var(--color-warning), #ffb74d);
}

.departments[b-uscnmih801] {
    background: linear-gradient(135deg, var(--color-secondary), #ba68c8);
}

.stat-info[b-uscnmih801] {
    flex: 1;
}

.stat-value[b-uscnmih801] {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-1);
    background: linear-gradient(135deg, var(--color-text-primary), var(--color-text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-uscnmih801] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Enhanced Main Container */
.devices-table-container[b-uscnmih801] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    animation: slideUp-b-uscnmih801 0.6s ease-out;
}

@keyframes slideUp-b-uscnmih801 {
    from {
        opacity: 0;
        transform: translateY(var(--space-8));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Premium Header Section */
.table-header[b-uscnmih801] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: var(--color-white);
    padding: var(--space-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

    .table-header[b-uscnmih801]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

.header-left[b-uscnmih801] {
    position: relative;
    z-index: 1;
}

    .header-left h2[b-uscnmih801] {
        margin: 0 0 var(--space-2) 0;
        font-size: var(--font-size-3xl);
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }

        .header-left h2 i[b-uscnmih801] {
            font-size: var(--font-size-4xl);
            color: rgba(255,255,255,0.9);
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }

.subtitle[b-uscnmih801] {
    margin: 0;
    opacity: 0.9;
    font-size: var(--font-size-base);
    font-weight: 400;
}

.header-actions[b-uscnmih801] {
    display: flex;
    gap: var(--space-4);
    position: relative;
    z-index: 1;
}

/* Enhanced Button Styles */
.btn[b-uscnmih801] {
    padding: var(--space-3) var(--space-5);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .btn[b-uscnmih801]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left var(--transition-slow);
    }

    .btn:hover[b-uscnmih801]::before {
        left: 100%;
    }



    .btn-primary:hover[b-uscnmih801] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-xl);
    }





.btn-success[b-uscnmih801] {
    background: rgba(var(--color-success-rgb), 0.9);
    color: var(--color-white);
    border: 1px solid rgba(76, 175, 80, 0.3);
}



/* Advanced Controls Section */
.controls-section[b-uscnmih801] {
    padding: var(--space-6) var(--space-8);
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-5);
    backdrop-filter: blur(10px);
}

.controls-left[b-uscnmih801] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

/* Enhanced Search Box */
.search-box[b-uscnmih801] {
    position: relative;
    min-width: 320px;
}

    .search-box i[b-uscnmih801] {
        position: absolute;
        left: var(--space-4);
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-text-tertiary);
        z-index: 2;
        transition: color var(--transition-fast);
    }

.search-input[b-uscnmih801] {
    width: 100%;
    padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) * 3);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    background: var(--color-bg-surface);
    transition: all var(--transition-normal);
    position: relative;
}

    .search-input:focus[b-uscnmih801] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.1);
        transform: translateY(-1px);
    }

        .search-input:focus + i[b-uscnmih801] {
            color: var(--color-primary);
        }

/* Modern Filter Chips */
.quick-filters[b-uscnmih801] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.filter-chip[b-uscnmih801] {
    padding: var(--space-2) var(--space-5);
    border: 2px solid var(--color-border-light);
    background: var(--color-bg-surface);
    border-radius: 25px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    overflow: hidden;
    color: var( --color-text-primary);
}

    .filter-chip[b-uscnmih801]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(67, 97, 238, 0.1), transparent);
        transition: left var(--transition-slow);
    }

    .filter-chip:hover[b-uscnmih801]::before {
        left: 100%;
    }

    .filter-chip:hover[b-uscnmih801] {
        border-color: var(--color-primary);
        background: rgba(67, 97, 238, 0.05);
        transform: translateY(-2px);
    }

    .filter-chip.active[b-uscnmih801] {
        background: var(--color-primary);
        color: var(--color-white);
        border-color: var(--color-primary);
        box-shadow: var(--shadow-md);
    }

.assigned-dot[b-uscnmih801], .reclaimed-dot[b-uscnmih801] {
    font-size: 8px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

.controls-right[b-uscnmih801] {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    flex-wrap: wrap;
}

.filter-group[b-uscnmih801] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

    .filter-group label[b-uscnmih801] {
        font-size: var(--font-size-sm);
        font-weight: 600;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

.filter-select[b-uscnmih801] {
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    font-size: var(--font-size-sm);
    min-width: 140px;
    color: var( --color-text-primary);
    transition: all var(--transition-normal);
    cursor: pointer;
}

    .filter-select:focus[b-uscnmih801] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
    }

/* Premium Table Styles */
.table-wrapper[b-uscnmih801] {
    overflow-x: auto;
    position: relative;
}

.devices-table[b-uscnmih801] {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-surface);
    position: relative;
}

    .devices-table th[b-uscnmih801] {
        padding: var(--space-5) var(--space-4);
        text-align: left;
        font-weight: 700;
        color: var(--color-text-secondary);
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border-bottom: 2px solid var(--color-border-light);
        position: relative;
        white-space: nowrap;
        text-align: center !important;
    }

        .devices-table th i[b-uscnmih801] {
            margin-right: var(--space-2);
            color: var(--color-primary);
            font-size: var(--font-size-sm);
        }

    .devices-table td[b-uscnmih801] {
        padding: var(--space-5) var(--space-4);
        border-bottom: 1px solid var(--color-border-light);
        vertical-align: middle;
        transition: background-color var(--transition-fast);
        text-align: center !important;
    }

.device-row[b-uscnmih801] {
    transition: all var(--transition-normal);
    position: relative;
}

    .device-row[b-uscnmih801]::before {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--color-primary);
        transform: scaleX(0);
        transition: transform var(--transition-normal);
    }

    .device-row:hover[b-uscnmih801]::before {
        transform: scaleX(1);
    }

    .device-row:hover[b-uscnmih801] {
        transform: translateX(4px);
    }

/* Enhanced Sortable Columns */
.sortable[b-uscnmih801] {
    cursor: pointer;
    transition: all var(--transition-normal);
    user-select: none;
    position: relative;
}
.title[b-uscnmih801] {
    color: var( --color-text-inverse)
}



.sortable i:last-child[b-uscnmih801] {
    margin-left: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    transition: transform var(--transition-normal);
}

    .sortable:hover i:last-child[b-uscnmih801] {
        color: var(--color-primary);
    }

/* Premium User Column */
.user-info[b-uscnmih801] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.user-avatar[b-uscnmih801] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: var(--font-size-base);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

.device-row:hover .user-avatar[b-uscnmih801] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: var(--shadow-lg);
}

.user-details[b-uscnmih801] {
    display: flex;
    flex-direction: column;
}

.user-name[b-uscnmih801] {
    font-weight: 700;
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
}

.user-email[b-uscnmih801] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}

.user-id[b-uscnmih801] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-family: var(--font-family-mono);
    margin-top: var(--space-1);
}

/* Enhanced Device Column */
.device-name[b-uscnmih801] {
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
    font-size: var(--font-size-base);
}

.device-meta[b-uscnmih801] {
    display: flex;
    gap: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.device-type[b-uscnmih801] {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    color: var(--color-white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--font-size-xs);
    box-shadow: var(--shadow-sm);
}

.serial-number[b-uscnmih801] {
    font-family: var(--font-family-mono);
    background: var(--color-bg-tertiary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

/* Premium Department Column */
.department-badge[b-uscnmih801] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(46, 204, 113, 0.2));
    color: var(--color-success);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.device-row:hover .department-badge[b-uscnmih801] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.department-badge i[b-uscnmih801] {
    color: var(--color-success);
    font-size: var(--font-size-sm);
}

/* Enhanced Date Column */
.assignment-date[b-uscnmih801] {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
    font-size: var(--font-size-sm);
}

.days-assigned[b-uscnmih801] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.reclaim-date[b-uscnmih801] {
    font-size: var(--font-size-xs);
    color: var(--color-warning);
    font-weight: 600;
}

/* Premium Status Column */
.status-badge[b-uscnmih801] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: 25px;
    font-size: var(--font-size-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

    .status-badge[b-uscnmih801]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        transition: left var(--transition-slow);
    }

    .status-badge:hover[b-uscnmih801]::before {
        left: 100%;
    }

    .status-badge.assigned[b-uscnmih801] {
        background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(46, 204, 113, 0.25));
        color: var(--color-success);
        border: 2px solid rgba(46, 204, 113, 0.3);
    }

    .status-badge.reclaimed[b-uscnmih801] {
        background: linear-gradient(135deg, rgba(243, 156, 18, 0.15), rgba(243, 156, 18, 0.25));
        color: var(--color-warning);
        border: 2px solid rgba(243, 156, 18, 0.3);
    }

.device-row:hover .status-badge[b-uscnmih801] {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

/* Premium Action Buttons */
.action-buttons[b-uscnmih801] {
    display: flex;
    gap: var(--space-2);
}

.btn-action[b-uscnmih801] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: var(--font-size-sm);
    position: relative;
    overflow: hidden;
}

    .btn-action[b-uscnmih801]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
        transition: left var(--transition-slow);
    }

    .btn-action:hover[b-uscnmih801]::before {
        left: 100%;
    }

.btn-view[b-uscnmih801] {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

    .btn-view:hover[b-uscnmih801] {
        background: var(--color-primary-dark);
        transform: translateY(-2px) scale(1.1);
        box-shadow: var(--shadow-lg);
    }

.btn-reclaim[b-uscnmih801] {
    background: linear-gradient(135deg, var(--color-danger-light), var(--color-danger));
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

    .btn-reclaim:hover[b-uscnmih801] {
        background: var(--color-danger-dark);
        color: var(--color-white);
        transform: translateY(-2px) scale(1.1);
        box-shadow: var(--shadow-lg);
    }

/* Enhanced No Data State */
.no-data-row td[b-uscnmih801] {
    padding: var(--space-16) var(--space-5);
    text-align: center;
}

.no-devices[b-uscnmih801] {
    animation: pulse-b-uscnmih801 2s ease-in-out infinite;
}

@keyframes pulse-b-uscnmih801 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.no-devices i[b-uscnmih801] {
    font-size: var(--font-size-4xl);
    color: var(--color-border-medium);
    margin-bottom: var(--space-5);
    display: block;
}

.no-devices h3[b-uscnmih801] {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-xl);
}

.no-devices p[b-uscnmih801] {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-base);
}

/* Premium Table Footer */
.table-footer[b-uscnmih801] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5) var(--space-8);
    background: var(--color-bg-tertiary);
    border-top: 1px solid var(--color-border-light);
}

.footer-info[b-uscnmih801] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 600;
}

.pagination[b-uscnmih801] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.btn-pagination[b-uscnmih801] {
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-border-light);
    background: var(--color-bg-surface);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

    .btn-pagination[b-uscnmih801]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(67, 97, 238, 0.2), transparent);
        transition: left var(--transition-slow);
    }

    .btn-pagination:hover[b-uscnmih801]::before {
        left: 100%;
    }

    .btn-pagination:hover:not(:disabled)[b-uscnmih801] {
        border-color: var(--color-primary);
        color: var(--color-primary);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .btn-pagination:disabled[b-uscnmih801] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
    }

.page-info[b-uscnmih801] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 600;
}

.page-size-select[b-uscnmih801] {
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
}

    .page-size-select:focus[b-uscnmih801] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
    }

/* Premium Modal Styles */
.modal-overlay[b-uscnmih801] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
    padding: var(--space-5);
    backdrop-filter: blur(8px);
    animation: modalFadeIn-b-uscnmih801 0.4s ease-out;
}

@keyframes modalFadeIn-b-uscnmih801 {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

.modal-content[b-uscnmih801] {
    background: var(--c);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: modalSlideUp-b-uscnmih801 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid var(--color-border-light);
}

@keyframes modalSlideUp-b-uscnmih801 {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.9);
    }

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

.large-modal[b-uscnmih801] {
    max-width: 1000px;
}

.modal-header[b-uscnmih801] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6) var(--space-8);
    border-bottom: 1px solid var(--color-border-light);
}

    .modal-header h3[b-uscnmih801] {
        margin: 0;
        color: var(--color-text-primary);
        display: flex;
        align-items: center;
        gap: var(--space-3);
        font-size: var(--font-size-2xl);
        font-weight: 700;
    }

        .modal-header h3 i[b-uscnmih801] {
            color: var(--color-primary);
            font-size: var(--font-size-3xl);
        }

.btn-close[b-uscnmih801] {
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-close:hover[b-uscnmih801] {
        background: var(--color-bg-tertiary);
        color: var(--color-danger);
        transform: rotate(90deg);
    }

.modal-body[b-uscnmih801] {
    padding: var(--space-8);
    background-color: var(--color-bg-surface)
}

.modal-footer[b-uscnmih801] {
    padding: var(--space-6) var(--space-8);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    background: linear-gradient(135deg, var(--color-gray-50), var(--color-gray-100));
}

/* Enhanced Detail Tabs */
.detail-tabs[b-uscnmih801] {
    height: 100%;
}

.tab-headers[b-uscnmih801] {
    display: flex;
    border-bottom: 2px solid var(--color-border-light);
    margin-bottom: var(--space-6);
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 0 var(--space-2);
}

.tab-header[b-uscnmih801] {
    padding: var(--space-4) var(--space-6);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all var(--transition-normal);
    font-weight: 600;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    overflow: hidden;
}

    .tab-header[b-uscnmih801]::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 3px;
        background: var(--color-primary);
        transition: all var(--transition-normal);
        transform: translateX(-50%);
    }

    .tab-header.active[b-uscnmih801] {
        color: var(--color-primary);
    }

        .tab-header.active[b-uscnmih801]::before {
            width: 100%;
        }

    .tab-header:hover:not(.active)[b-uscnmih801] {
        background-color: var(--color-bg-tertiary);
        color: var(--color-primary);
        transform: translateY(-2px);
    }

    .tab-header i[b-uscnmih801] {
        font-size: var(--font-size-base);
        transition: transform var(--transition-normal);
    }

    .tab-header:hover i[b-uscnmih801] {
        transform: scale(1.2);
    }

.tab-content[b-uscnmih801] {
    min-height: 400px;
    animation: tabFadeIn-b-uscnmih801 0.4s ease-out;
}

@keyframes tabFadeIn-b-uscnmih801 {
    from {
        opacity: 0;
        transform: translateY(var(--space-5));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Premium Detail Sections */
.detail-section h4[b-uscnmih801] {
    color: var(--color-primary);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border-light);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.detail-grid[b-uscnmih801] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-5);
}

.detail-item[b-uscnmih801] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-normal);
}

    .detail-item:hover[b-uscnmih801] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--color-primary-light);
    }

    .detail-item label[b-uscnmih801] {
        font-weight: 700;
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .detail-item span[b-uscnmih801] {
        color: var(--color-text-primary);
        font-size: var(--font-size-base);
        font-weight: 600;
    }

    .detail-item.full-width[b-uscnmih801] {
        grid-column: 1 / -1;
    }

/* Enhanced Specifications View */
.specs-view[b-uscnmih801] {
    padding: var(--space-4) 0;
}

.specs-grid-view[b-uscnmih801] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.spec-card-view[b-uscnmih801] {
    background: linear-gradient(135deg, var(--color-bg-surface), var(--color-bg-tertiary));
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

    .spec-card-view[b-uscnmih801]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(67, 97, 238, 0.1), transparent);
        transition: left var(--transition-slow);
    }

    .spec-card-view:hover[b-uscnmih801]::before {
        left: 100%;
    }

    .spec-card-view:hover[b-uscnmih801] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: var(--color-primary-light);
    }

.spec-header[b-uscnmih801] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

    .spec-header i[b-uscnmih801] {
        font-size: var(--font-size-lg);
        color: var(--color-primary);
        width: 24px;
    }

.spec-label[b-uscnmih801] {
    font-weight: 700;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.spec-value[b-uscnmih801] {
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: var(--line-height-normal);
}

/* VM Items Styling */
.vm-view-item[b-uscnmih801] {
    background: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border-light);
    border-left: 4px solid var(--color-primary);
    transition: all var(--transition-normal);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

    .vm-view-item:hover[b-uscnmih801] {
        border-color: var(--color-primary);
        transform: translateX(4px);
        box-shadow: var(--shadow-md);
    }

.vm-name[b-uscnmih801] {
    font-weight: 700;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-1);
}

.vm-details[b-uscnmih801] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
}

/* Enhanced Status Badges in Modal */
.status-badge.modal-badge[b-uscnmih801] {
    padding: var(--space-2) var(--space-5);
    font-size: var(--font-size-sm);
    border-radius: 25px;
    box-shadow: var(--shadow-md);
}

/* Loading Animation */
.loading-skeleton[b-uscnmih801] {
    animation: skeleton-loading-b-uscnmih801 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading-b-uscnmih801 {
    0% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.6;
    }
}

/* Scrollbar Styling */
[b-uscnmih801]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[b-uscnmih801]::-webkit-scrollbar-track {
    background: var(--color-bg-tertiary);
    border-radius: 4px;
}

[b-uscnmih801]::-webkit-scrollbar-thumb {
    background: var(--color-border-medium);
    border-radius: 4px;
    transition: background var(--transition-normal);
}

    [b-uscnmih801]::-webkit-scrollbar-thumb:hover {
        background: var(--color-text-tertiary);
    }

/* Focus Styles for Accessibility */
.btn:focus-visible[b-uscnmih801],
.filter-chip:focus-visible[b-uscnmih801],
.search-input:focus-visible[b-uscnmih801],
.filter-select:focus-visible[b-uscnmih801] {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root[b-uscnmih801] {
        --border-light: #000000;
        --text-secondary: #000000;
        --bg-tertiary: #ffffff;
    }

    .stat-card[b-uscnmih801], .devices-table-container[b-uscnmih801], .modal-content[b-uscnmih801] {
        border: 2px solid #000000;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-uscnmih801], *[b-uscnmih801]::before, *[b-uscnmih801]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

btn-primary[b-uscnmih801] {
    background: var(--color-primary-dark) !important;
}
/* /Components/Pages/Authentication/ForgetPasswordComponent.razor.rz.scp.css */
/* /Components/Pages/Authentication/LoginComponent.razor.rz.scp.css */
/* /Components/Pages/Authentication/SignUpComponent.razor.rz.scp.css */
/* /Components/Pages/CategoryComponents/CategoryComponent.razor.rz.scp.css */
/* Categories Styles - Using Design System Variables */

.accessories-container[b-7xg8ozxava] {
    padding: var(--space-6);
    max-width: var(--max-content-width);
    margin: 0 auto;
    background: var(--color-bg-primary);
    min-height: 100vh;
}

.accessories-header[b-7xg8ozxava] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-8);
    color: var(--color-text-inverse);
    position: relative;
    overflow: hidden;
}

    .accessories-header[b-7xg8ozxava]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    }

.page-icon[b-7xg8ozxava] {
    font-size: var(--font-size-3xl);
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.page-title[b-7xg8ozxava] {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-text-inverse);
    margin: 0 0 var(--space-2) 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Stats Overview */
.stats-overview[b-7xg8ozxava] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.stat-card[b-7xg8ozxava] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-7xg8ozxava]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: currentColor;
        opacity: 0.15;
    }

    .stat-card:hover[b-7xg8ozxava] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

    .stat-card .stat-value[b-7xg8ozxava] {
        font-size: var(--font-size-3xl);
        font-weight: 800;
        margin: var(--space-2) 0;
        line-height: 1;
    }

    .stat-card .stat-label[b-7xg8ozxava] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--color-text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .stat-card.total[b-7xg8ozxava]::before {
        color: var(--color-primary);
    }

    .stat-card.active[b-7xg8ozxava]::before {
        color: var(--color-success);
    }

    .stat-card.inactive[b-7xg8ozxava]::before {
        color: var(--color-danger);
    }

    .stat-card.total .stat-value[b-7xg8ozxava] {
        color: var(--color-primary);
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-card.active .stat-value[b-7xg8ozxava] {
        color: var(--color-success);
        background: linear-gradient(135deg, var(--color-success), #2ecc71);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-card.inactive .stat-value[b-7xg8ozxava] {
        color: var(--color-danger);
        background: linear-gradient(135deg, var(--color-danger), #e74c3c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/* Cards Container */
.accessories-grid-container[b-7xg8ozxava] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-light);
    margin-top: var(--space-4);
    overflow: hidden;
}

.grid-header[b-7xg8ozxava] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-light);
}

.results-count[b-7xg8ozxava] {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

    .results-count strong[b-7xg8ozxava] {
        color: var(--color-text-primary);
        font-weight: 600;
    }

/* Cards Grid */
.accessories-grid[b-7xg8ozxava] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-6);
    padding: var(--space-6);
}

.accessory-card[b-7xg8ozxava] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

    .accessory-card[b-7xg8ozxava]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
        opacity: 0;
        transition: opacity var(--transition-fast);
    }

    .accessory-card:hover[b-7xg8ozxava] {
        transform: translateY(-8px);
        box-shadow: var(--shadow-xl);
        border-color: var(--color-primary);
    }

        .accessory-card:hover[b-7xg8ozxava]::before {
            opacity: 1;
        }

    .accessory-card.inactive[b-7xg8ozxava] {
        border-color: var(--color-border-medium);
        background: linear-gradient(135deg, rgba(231, 76, 60, 0.03), var(--color-bg-surface));
    }

        .accessory-card.inactive[b-7xg8ozxava]::before {
            background: var(--color-danger);
        }

/* Card Header */
.card-header[b-7xg8ozxava] {
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    background: linear-gradient(135deg, rgba(67, 97, 238, 0.04) 0%, transparent 100%);
}

.accessory-name[b-7xg8ozxava] {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

    .accessory-name i[b-7xg8ozxava] {
        color: var(--color-primary);
        font-size: var(--font-size-base);
    }

/* Status Badge */
.status-badge[b-7xg8ozxava] {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-sm);
}

    .status-badge.active[b-7xg8ozxava] {
        background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(46, 204, 113, 0.25));
        color: var(--color-success);
        border: 1px solid rgba(46, 204, 113, 0.3);
    }

    .status-badge.inactive[b-7xg8ozxava] {
        background: linear-gradient(135deg, rgba(231, 76, 60, 0.15), rgba(231, 76, 60, 0.25));
        color: var(--color-danger);
        border: 1px solid rgba(231, 76, 60, 0.3);
    }

/* Card Content */
.card-content[b-7xg8ozxava] {
    padding: var(--space-6);
    flex: 1;
}

.detail-row[b-7xg8ozxava] {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
}

    .detail-row:last-child[b-7xg8ozxava] {
        border-bottom: none;
    }

    .detail-row i[b-7xg8ozxava] {
        color: var(--color-primary);
        font-size: var(--font-size-base);
        text-align: center;
    }

.detail-label[b-7xg8ozxava] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.label[b-7xg8ozxava] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.value[b-7xg8ozxava] {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

.detail-row.warning i[b-7xg8ozxava] {
    color: var(--color-warning);
}

.detail-row.warning .value[b-7xg8ozxava] {
    color: var(--color-warning);
}

/* Card Actions */
.card-actions[b-7xg8ozxava] {
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-secondary);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* Buttons */
.btn[b-7xg8ozxava] {
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 2px solid transparent;
    transition: all var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

    .btn[b-7xg8ozxava]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .btn:hover[b-7xg8ozxava]::before {
        width: 300px;
        height: 300px;
    }

.btn-primary[b-7xg8ozxava] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

    .btn-primary:hover:not(:disabled)[b-7xg8ozxava] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
    }

.btn-outline[b-7xg8ozxava] {
    background: transparent;
    border-color: var(--color-border-medium);
    color: var(--color-text-secondary);
}

    .btn-outline:hover:not(:disabled)[b-7xg8ozxava] {
        background: var(--color-bg-tertiary);
        border-color: var(--color-border-medium);
        color: var(--color-text-primary);
        transform: translateY(-2px);
    }

.btn-danger[b-7xg8ozxava] {
    background: linear-gradient(135deg, var(--color-danger), #e74c3c);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

    .btn-danger:hover:not(:disabled)[b-7xg8ozxava] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
    }

.btn-success[b-7xg8ozxava] {
    background: linear-gradient(135deg, var(--color-success), #2ecc71);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

    .btn-success:hover:not(:disabled)[b-7xg8ozxava] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
    }

.btn-secondary[b-7xg8ozxava] {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border-medium);
}

    .btn-secondary:hover:not(:disabled)[b-7xg8ozxava] {
        background: var(--color-bg-tertiary);
        color: var(--color-text-primary);
    }

.btn-sm[b-7xg8ozxava] {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
}

/* Search */
.search-container[b-7xg8ozxava] {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.search-input[b-7xg8ozxava] {
    border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-6) var(--space-3) var(--space-12);
    border: 2px solid var(--color-border-medium);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text-primary);
    backdrop-filter: blur(10px);
}

    .search-input:focus[b-7xg8ozxava] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15);
        background: var(--color-bg-surface);
    }

.search-icon[b-7xg8ozxava] {
    position: absolute;
    left: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    z-index: 2;
}

.clear-search[b-7xg8ozxava] {
    position: absolute;
    right: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    z-index: 2;
}

    .clear-search:hover[b-7xg8ozxava] {
        background: var(--color-bg-tertiary);
        color: var(--color-danger);
    }

/* Loading Skeletons */
.skeleton[b-7xg8ozxava] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-7xg8ozxava 1.5s infinite;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

@keyframes shimmer-b-7xg8ozxava {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.skeleton-text[b-7xg8ozxava] {
    height: var(--space-4);
    margin-bottom: var(--space-3);
}

.skeleton-btn[b-7xg8ozxava] {
    width: 80px;
    height: 38px;
    border-radius: var(--radius-md);
}

/* Empty State */
.empty-state[b-7xg8ozxava] {
    padding: var(--space-16) var(--space-8);
    text-align: center;
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    border: 2px dashed var(--color-border-light);
    margin: var(--space-8) 0;
}

.empty-icon[b-7xg8ozxava] {
    font-size: var(--font-size-4xl);
    color: var(--color-border-medium);
    margin-bottom: var(--space-6);
    opacity: 0.5;
}

.empty-state h3[b-7xg8ozxava] {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.empty-state p[b-7xg8ozxava] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-6);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Header Actions */
.header-actions[b-7xg8ozxava] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.header-actions-container[b-7xg8ozxava] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .accessories-grid[b-7xg8ozxava] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .accessories-container[b-7xg8ozxava] {
        padding: var(--space-4);
    }

    .accessories-header[b-7xg8ozxava] {
        padding: var(--space-6);
    }

    .page-title[b-7xg8ozxava] {
        font-size: var(--font-size-2xl);
    }

    .stats-overview[b-7xg8ozxava] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .header-actions-container[b-7xg8ozxava] {
        flex-direction: column;
        gap: var(--space-4);
        width: 100%;
    }

    .search-container[b-7xg8ozxava] {
        max-width: 100%;
    }

    .header-actions[b-7xg8ozxava] {
        width: 100%;
        justify-content: space-between;
    }

    .accessories-grid[b-7xg8ozxava] {
        padding: var(--space-4);
        gap: var(--space-4);
    }

    .card-header[b-7xg8ozxava],
    .card-content[b-7xg8ozxava],
    .card-actions[b-7xg8ozxava] {
        padding: var(--space-4);
    }
}

@media (max-width: 480px) {
    .stats-overview[b-7xg8ozxava] {
        grid-template-columns: 1fr;
    }

    .accessories-grid[b-7xg8ozxava] {
        grid-template-columns: 1fr;
    }

    .btn span:not(.sr-only)[b-7xg8ozxava] {
        display: none;
    }

    .btn i[b-7xg8ozxava] {
        margin-right: 0;
    }

    .card-actions[b-7xg8ozxava] {
        flex-direction: column;
    }

    .btn[b-7xg8ozxava] {
        width: 100%;
        justify-content: center;
    }
}

/* Animations */
@keyframes fadeInUp-b-7xg8ozxava {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.accessory-card[b-7xg8ozxava] {
    animation: fadeInUp-b-7xg8ozxava 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
}

    .accessory-card:nth-child(1)[b-7xg8ozxava] {
        animation-delay: 0.1s;
    }

    .accessory-card:nth-child(2)[b-7xg8ozxava] {
        animation-delay: 0.2s;
    }

    .accessory-card:nth-child(3)[b-7xg8ozxava] {
        animation-delay: 0.3s;
    }

    .accessory-card:nth-child(4)[b-7xg8ozxava] {
        animation-delay: 0.4s;
    }

    .accessory-card:nth-child(5)[b-7xg8ozxava] {
        animation-delay: 0.5s;
    }

    .accessory-card:nth-child(6)[b-7xg8ozxava] {
        animation-delay: 0.6s;
    }

    .accessory-card:nth-child(7)[b-7xg8ozxava] {
        animation-delay: 0.7s;
    }

    .accessory-card:nth-child(8)[b-7xg8ozxava] {
        animation-delay: 0.8s;
    }

/* Text Utilities */
.text-muted[b-7xg8ozxava] {
    color: var(--color-text-tertiary) !important;
}

/* Focus States */
:focus-visible[b-7xg8ozxava] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Print Styles */
@media print {
    .accessories-header[b-7xg8ozxava],
    .header-actions[b-7xg8ozxava],
    .card-actions[b-7xg8ozxava],
    .search-container[b-7xg8ozxava] {
        display: none;
    }

    .accessories-container[b-7xg8ozxava] {
        padding: 0;
        background: white;
    }

    .accessory-card[b-7xg8ozxava] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/CategoryComponents/UpsertComponent.razor.rz.scp.css */

/* Category Form Styles - Premium Design */

.accessories-container[b-p65b7rfzat] {
    padding: var(--space-8);
    max-width: 800px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-card[b-p65b7rfzat] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    width: 100%;
    animation: slideInUp-b-p65b7rfzat var(--transition-slow) ease-out;
}

.form-card-header[b-p65b7rfzat] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-8) var(--space-8);
    color: var(--color-text-inverse);
    position: relative;
    overflow: hidden;
}

    .form-card-header[b-p65b7rfzat]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    }

.form-header-content[b-p65b7rfzat] {
    position: relative;
    z-index: 1;
    text-align: center;
}

.form-header-icon[b-p65b7rfzat] {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-4);
    opacity: 0.9;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.form-title[b-p65b7rfzat] {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0 0 var(--space-2) 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.form-subtitle[b-p65b7rfzat] {
    font-size: var(--font-size-sm);
    opacity: 0.9;
    margin: 0;
    max-width: 500px;
    margin: 0 auto;
}

.form-card-body[b-p65b7rfzat] {
    padding: var(--space-8);
}

.form-alerts[b-p65b7rfzat] {
    margin-bottom: var(--space-6);
}

.alert[b-p65b7rfzat] {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    border-left: 4px solid;
    animation: slideInRight-b-p65b7rfzat var(--transition-normal) ease-out;
}

.alert-danger[b-p65b7rfzat] {
    background: rgba(231, 76, 60, 0.1);
    border-left-color: var(--color-danger);
    color: var(--color-danger);
}

.alert i[b-p65b7rfzat] {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.alert span[b-p65b7rfzat] {
    flex: 1;
    line-height: 1.5;
}

.form-grid[b-p65b7rfzat] {
    display: grid;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.form-group[b-p65b7rfzat] {
    position: relative;
}

.form-label[b-p65b7rfzat] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .form-label i[b-p65b7rfzat] {
        color: var(--color-primary);
        font-size: var(--font-size-base);
    }

.required-indicator[b-p65b7rfzat] {
    color: var(--color-danger);
    margin-left: var(--space-1);
}

.input-with-validation[b-p65b7rfzat] {
    position: relative;
}

.form-input[b-p65b7rfzat] {
    width: 100%;
    padding: var(--space-4) var(--space-6) var(--space-4) var(--space-12);
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-family: var(--font-family-sans);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

    .form-input:focus[b-p65b7rfzat] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15);
        background: var(--color-bg-surface);
    }

    .form-input[b-p65b7rfzat]::placeholder {
        color: var(--color-text-tertiary);
        opacity: 0.7;
    }

.input-icon[b-p65b7rfzat] {
    position: absolute;
    left: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    pointer-events: none;
    transition: color var(--transition-fast);
}

.form-input:focus + .input-icon[b-p65b7rfzat] {
    color: var(--color-primary);
}

.validation-message[b-p65b7rfzat] {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-danger);
    font-weight: 500;
    animation: fadeIn-b-p65b7rfzat var(--transition-fast) ease-out;
}

.form-hint[b-p65b7rfzat] {
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    line-height: 1.5;
}

.form-actions[b-p65b7rfzat] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
}

.btn[b-p65b7rfzat] {
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    min-height: 44px;
}

.btn-primary[b-p65b7rfzat] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

    .btn-primary:hover:not(:disabled)[b-p65b7rfzat] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
    }

    .btn-primary:disabled[b-p65b7rfzat] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
    }

.btn-secondary[b-p65b7rfzat] {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border-medium);
}

    .btn-secondary:hover[b-p65b7rfzat] {
        background: var(--color-bg-tertiary);
        color: var(--color-text-primary);
        border-color: var(--color-border-heavy);
    }

.btn i[b-p65b7rfzat] {
    font-size: var(--font-size-base);
}

.loading-overlay[b-p65b7rfzat] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
}

.loading-container[b-p65b7rfzat] {
    text-align: center;
    animation: fadeIn-b-p65b7rfzat var(--transition-normal) ease-out;
}

.loading-spinner[b-p65b7rfzat] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--color-border-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-p65b7rfzat 1s linear infinite;
    margin: 0 auto var(--space-4);
}

.loading-text[b-p65b7rfzat] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
    animation: pulse-b-p65b7rfzat 2s infinite;
}

.spinner-border-sm[b-p65b7rfzat] {
    width: 16px;
    height: 16px;
    border-width: 2px;
    margin-right: var(--space-3);
}

/* Animations */
@keyframes slideInUp-b-p65b7rfzat {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight-b-p65b7rfzat {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn-b-p65b7rfzat {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

@keyframes pulse-b-p65b7rfzat {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .accessories-container[b-p65b7rfzat] {
        padding: var(--space-4);
    }

    .form-card-header[b-p65b7rfzat] {
        padding: var(--space-6);
    }

    .form-card-body[b-p65b7rfzat] {
        padding: var(--space-6);
    }

    .form-grid[b-p65b7rfzat] {
        gap: var(--space-6);
    }

    .form-title[b-p65b7rfzat] {
        font-size: var(--font-size-xl);
    }

    .form-actions[b-p65b7rfzat] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .btn[b-p65b7rfzat] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .form-input[b-p65b7rfzat] {
        padding-left: var(--space-10);
    }

    .input-icon[b-p65b7rfzat] {
        left: var(--space-4);
    }
}

/* Focus Accessibility */
:focus-visible[b-p65b7rfzat] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Print Styles */
@media print {
    .form-actions[b-p65b7rfzat],
    .loading-overlay[b-p65b7rfzat] {
        display: none;
    }

    .form-card[b-p65b7rfzat] {
        box-shadow: none;
        border: 1px solid var(--color-border-medium);
    }

    .form-card-header[b-p65b7rfzat] {
        background: none;
        color: var(--color-text-primary);
    }
}
/* /Components/Pages/DashboardComponent/DashboardComponent.razor.rz.scp.css */
/* ============================================================
   Dashboard.razor.css
   Blue → purple slate design system, with dark-theme support.
   Blazor CSS isolation — scoped automatically to Dashboard.razor.
   Colors are exposed as CSS custom properties on .dashboard-container
   so [data-theme="dark"] only needs to override variables once,
   instead of repeating every rule.
   ============================================================ */

.dashboard-container *[b-1ktaniekj6] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.filter-overlay[b-1ktaniekj6] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.55));
    border-radius: var(--radius-md);
    backdrop-filter: blur(3px);
    transition: opacity 0.18s ease;
    z-index: 5;
}

.overlay-spinner[b-1ktaniekj6] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
}

.overlay-spinner .overlay-text[b-1ktaniekj6] {
    font-size: 0.95rem;
}

.filter-inline-spinner[b-1ktaniekj6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dashboard-container[b-1ktaniekj6] {
    /* ---- palette (light) ---- */
    --grad-start: #3b82f6;
    --grad-end: #8b5cf6;
    --surface: #ffffff;
    --page-bg-start: #f8fafc;
    --page-bg-end: #f1f5f9;
    --header-strip: #f8fafc;
    --border: #e2e8f0;
    --border-soft: #f1f5f9;
    --text-strong: #1e293b;
    --text-muted: #64748b;
    --text-faint: #94a3b8;
    --success: #10b981;
    --success-dark: #059669;
    --warning: #f59e0b;
    --warning-dark: #d97706;
    --danger: #ef4444;
    --danger-dark: #dc2626;
    --info: #0ea5e9;
    --info-dark: #0284c7;
    --cyan: #06b6d4;
    --purple: #8b5cf6;
    --purple-dark: #7c3aed;
    --violet: #a855f7;
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --slate: #64748b;
    --slate-dark: #475569;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--page-bg-start) 0%, var(--page-bg-end) 100%);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    color: var(--text-strong);
}

/* ---- palette (dark) — every rule below just keeps working ---- */
[data-theme="dark"] .dashboard-container[b-1ktaniekj6] {
    --surface: #1e293b;
    --page-bg-start: #0f172a;
    --page-bg-end: #0f172a;
    --header-strip: #0f172a;
    --border: #334155;
    --border-soft: #334155;
    --text-strong: #f1f5f9;
    --text-muted: #cbd5e1;
    --text-faint: #94a3b8;
}

/* ============================================================
   Header
   ============================================================ */

.dashboard-header[b-1ktaniekj6] {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.75rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border);
}

.header-content[b-1ktaniekj6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-titles[b-1ktaniekj6] {
    min-width: 0;
}

.dashboard-title[b-1ktaniekj6] {
    font-size: 1.7rem;
    font-weight: 800;
    margin: 0 0 0.35rem;
    background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dashboard-subtitle[b-1ktaniekj6] {
    color: var(--text-muted);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

    .dashboard-subtitle .badge.bg-primary[b-1ktaniekj6] {
        background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
        color: #fff;
    }

.header-stats[b-1ktaniekj6] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-item[b-1ktaniekj6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    white-space: nowrap;
}

.user-profile[b-1ktaniekj6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--header-strip);
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--border);
}

    .user-profile:hover[b-1ktaniekj6] {
        background: var(--border-soft);
    }

.user-avatar[b-1ktaniekj6] {
    font-size: 1.5rem;
    color: var(--primary);
}

.user-details[b-1ktaniekj6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-name[b-1ktaniekj6] {
    font-weight: 600;
    color: var(--text-strong);
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.user-role[b-1ktaniekj6] {
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    font-weight: 500;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: fit-content;
    margin-top: 2px;
    color: #fff;
}

/* GetRoleBadgeClass() outputs */
.badge-primary[b-1ktaniekj6] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #fff;
}

.badge-secondary[b-1ktaniekj6] {
    background: linear-gradient(135deg, var(--slate), var(--slate-dark)) !important;
    color: #fff;
}

.badge-success[b-1ktaniekj6] {
    background: linear-gradient(135deg, var(--success), var(--success-dark)) !important;
    color: #fff;
}

.badge-warning[b-1ktaniekj6] {
    background: linear-gradient(135deg, var(--warning), var(--warning-dark)) !important;
    color: #fff;
}

.badge-danger[b-1ktaniekj6] {
    background: linear-gradient(135deg, var(--danger), var(--danger-dark)) !important;
    color: #fff;
}

/* ============================================================
   Loading state
   ============================================================ */

.loading-container[b-1ktaniekj6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    min-height: 60vh;
    color: var(--text-muted);
    gap: 1rem;
}

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

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

/* ============================================================
   Summary cards
   ============================================================ */

.summary-cards-grid[b-1ktaniekj6] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.summary-card[b-1ktaniekj6] {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.1rem;
    min-height: 100px;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    animation: dashboard-fade-in-b-1ktaniekj6 0.6s ease-out forwards;
    opacity: 0;
}

    .summary-card:nth-child(1)[b-1ktaniekj6] {
        animation-delay: 0.05s;
    }

    .summary-card:nth-child(2)[b-1ktaniekj6] {
        animation-delay: 0.1s;
    }

    .summary-card:nth-child(3)[b-1ktaniekj6] {
        animation-delay: 0.15s;
    }

    .summary-card:nth-child(4)[b-1ktaniekj6] {
        animation-delay: 0.2s;
    }

    .summary-card:nth-child(5)[b-1ktaniekj6] {
        animation-delay: 0.25s;
    }

    .summary-card:nth-child(6)[b-1ktaniekj6] {
        animation-delay: 0.3s;
    }

    .summary-card:nth-child(7)[b-1ktaniekj6] {
        animation-delay: 0.35s;
    }

    .summary-card:nth-child(8)[b-1ktaniekj6] {
        animation-delay: 0.4s;
    }

@keyframes dashboard-fade-in-b-1ktaniekj6 {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.summary-card:hover[b-1ktaniekj6] {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.card-icon[b-1ktaniekj6] {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.summary-card.total .card-icon[b-1ktaniekj6] {
    background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(59,130,246,.22));
    color: var(--primary);
}

.summary-card.open .card-icon[b-1ktaniekj6] {
    background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(245,158,11,.22));
    color: var(--warning);
}

.summary-card.closed .card-icon[b-1ktaniekj6] {
    background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(16,185,129,.22));
    color: var(--success);
}

.summary-card.resolution .card-icon[b-1ktaniekj6] {
    background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(139,92,246,.22));
    color: var(--purple);
}

.summary-card.assigned .card-icon[b-1ktaniekj6] {
    background: linear-gradient(135deg, rgba(14,165,233,.12), rgba(14,165,233,.22));
    color: var(--info);
}

.summary-card.escalated .card-icon[b-1ktaniekj6] {
    background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(239,68,68,.22));
    color: var(--danger);
}

.summary-card.avg-time .card-icon[b-1ktaniekj6] {
    background: linear-gradient(135deg, rgba(6,182,212,.12), rgba(6,182,212,.22));
    color: var(--cyan);
}

.summary-card.sla .card-icon[b-1ktaniekj6] {
    background: linear-gradient(135deg, rgba(168,85,247,.12), rgba(168,85,247,.22));
    color: var(--violet);
}

.card-content[b-1ktaniekj6] {
    flex: 1;
    min-width: 0;
}

    .card-content h3[b-1ktaniekj6] {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--text-muted);
        margin: 0 0 0.25rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

.card-value[b-1ktaniekj6] {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--text-strong);
    line-height: 1;
    margin-bottom: 0.4rem;
}

.card-trend[b-1ktaniekj6] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.trend-up[b-1ktaniekj6] {
    color: var(--success);
}

.trend-down[b-1ktaniekj6] {
    color: var(--success);
}

.card-progress[b-1ktaniekj6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-bar-bg[b-1ktaniekj6] {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill[b-1ktaniekj6] {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
    transition: width 1s ease-in-out;
}

    .progress-bar-fill.bg-success[b-1ktaniekj6] {
        background: linear-gradient(90deg, var(--success), var(--success-dark));
    }

    .progress-bar-fill.bg-info[b-1ktaniekj6] {
        background: linear-gradient(90deg, var(--info), var(--info-dark));
    }

.card-progress span[b-1ktaniekj6] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ============================================================
   Main content grid
   ============================================================ */

.main-content-grid[b-1ktaniekj6] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    align-items: start;
}

.charts-section[b-1ktaniekj6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.chart-row[b-1ktaniekj6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
}

.chart-card[b-1ktaniekj6] {
    background: var(--surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    animation: dashboard-fade-in-b-1ktaniekj6 0.7s ease-out forwards;
    opacity: 0;
}

.chart-header[b-1ktaniekj6] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--header-strip);
    flex-shrink: 0;
}

    .chart-header h3[b-1ktaniekj6] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-strong);
        margin: 0;
        display: flex;
        align-items: center;
    }

        .chart-header h3 i[b-1ktaniekj6] {
            color: var(--primary);
        }

.chart-body[b-1ktaniekj6] {
    flex: 1 1 auto;
    padding: 0.6rem 0.85rem 0.85rem;
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chart-body--centered[b-1ktaniekj6] {
    align-items: center;
    justify-content: center;
}

.chart-container[b-1ktaniekj6] {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 260px;
}

.chart-container--fill[b-1ktaniekj6] {
    min-height: 260px;
}

    .chart-container--fill[b-1ktaniekj6]  > * {
        position: absolute !important;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
    }

.chart-container--compact[b-1ktaniekj6] {
    flex: 0 1 auto;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1;
    min-height: 220px;
    align-self: center;
}

    .chart-container--compact[b-1ktaniekj6]  > * {
        width: 100% !important;
        height: 100% !important;
    }

.dashboard-container[b-1ktaniekj6]  .dashboard-chart {
    width: 100% !important;
    height: 100% !important;
}

/* ============================================================
   Sidebar
   ============================================================ */

.sidebar-section[b-1ktaniekj6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.quick-actions-card[b-1ktaniekj6],
.activity-card[b-1ktaniekj6],
.stats-card[b-1ktaniekj6] {
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    animation: dashboard-fade-in-b-1ktaniekj6 0.8s ease-out forwards;
    opacity: 0;
}

.card-header[b-1ktaniekj6] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--header-strip);
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 52px;
}

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

        .card-header h3 i[b-1ktaniekj6] {
            color: var(--primary);
        }

/* Quick actions */
.action-buttons[b-1ktaniekj6] {
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.action-btn[b-1ktaniekj6] {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    color: #fff;
    text-align: left;
    justify-content: flex-start;
    width: 100%;
}

    .action-btn i[b-1ktaniekj6] {
        font-size: 1rem;
        width: 20px;
        text-align: center;
    }

    .action-btn span:nth-of-type(1)[b-1ktaniekj6] {
        flex: 1;
    }

    .action-btn .badge[b-1ktaniekj6],
    .action-btn .badge-sm[b-1ktaniekj6] {
        margin-left: auto;
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
        padding: 0.2rem 0.55rem;
        border-radius: 1rem;
        font-size: 0.72rem;
        font-weight: 700;
        min-width: 24px;
        text-align: center;
        backdrop-filter: blur(4px);
    }

    .action-btn.primary[b-1ktaniekj6] {
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    }

    .action-btn.warning[b-1ktaniekj6] {
        background: linear-gradient(135deg, var(--warning), var(--warning-dark));
    }

    .action-btn.success[b-1ktaniekj6] {
        background: linear-gradient(135deg, var(--success), var(--success-dark));
    }

    .action-btn.info[b-1ktaniekj6] {
        background: linear-gradient(135deg, var(--info), var(--info-dark));
    }

    .action-btn.danger[b-1ktaniekj6] {
        background: linear-gradient(135deg, var(--danger), var(--danger-dark));
    }

    .action-btn.secondary[b-1ktaniekj6] {
        background: linear-gradient(135deg, var(--slate), var(--slate-dark));
    }

    .action-btn:hover[b-1ktaniekj6] {
        transform: translateX(4px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

/* Activity */
.activity-list[b-1ktaniekj6] {
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}

.activity-item[b-1ktaniekj6] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-soft);
    transition: all 0.2s;
    cursor: pointer;
}

    .activity-item:last-child[b-1ktaniekj6] {
        border-bottom: none;
    }

    .activity-item:hover[b-1ktaniekj6] {
        background: var(--border-soft);
    }

.activity-icon[b-1ktaniekj6] {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
    color: #fff;
}

.activity-content[b-1ktaniekj6] {
    flex: 1;
    min-width: 0;
}

.activity-title[b-1ktaniekj6] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

    .activity-title strong[b-1ktaniekj6] {
        color: var(--text-strong);
        font-size: 0.875rem;
        font-weight: 600;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.activity-details[b-1ktaniekj6] {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}

    .activity-details span[b-1ktaniekj6] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        white-space: nowrap;
    }

.activity-action[b-1ktaniekj6] {
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empty-state[b-1ktaniekj6] {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-faint);
}

    .empty-state i[b-1ktaniekj6] {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        opacity: 0.5;
        display: block;
    }

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

/* Stats */
.stats-grid[b-1ktaniekj6] {
    padding: 1.1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}

.stat-box[b-1ktaniekj6] {
    background: var(--header-strip);
    border-radius: var(--radius-md);
    padding: 1.1rem 0.9rem;
    text-align: center;
    border: 1px solid var(--border);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 88px;
}

    .stat-box:hover[b-1ktaniekj6] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

.stat-value[b-1ktaniekj6] {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-strong);
    line-height: 1;
    margin-bottom: 0.3rem;
}

.stat-label[b-1ktaniekj6] {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* ============================================================
   Priority + role badges
   ============================================================ */

.badge[b-1ktaniekj6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 9999px;
    white-space: nowrap;
    transition: transform 0.15s ease;
}

    .badge:hover[b-1ktaniekj6] {
        transform: scale(1.05);
    }

.badge-sm[b-1ktaniekj6] {
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
}

.priority-low[b-1ktaniekj6] {
    background: linear-gradient(135deg, var(--success), var(--success-dark));
    color: #fff;
}

.priority-medium[b-1ktaniekj6] {
    background: linear-gradient(135deg, var(--warning), var(--warning-dark));
    color: #fff;
}

.priority-high[b-1ktaniekj6] {
    background: linear-gradient(135deg, var(--danger), var(--danger-dark));
    color: #fff;
}

.priority-urgent[b-1ktaniekj6] {
    background: linear-gradient(135deg, var(--purple), var(--purple-dark));
    color: #fff;
}

.priority-default[b-1ktaniekj6] {
    background: #e5e7eb;
    color: #374151;
}

/* ============================================================
   Tables
   ============================================================ */

.tables-section[b-1ktaniekj6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.table-card[b-1ktaniekj6] {
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    animation: dashboard-fade-in-b-1ktaniekj6 0.9s ease-out forwards;
    opacity: 0;
}

.table-header[b-1ktaniekj6] {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border);
    background: var(--header-strip);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .table-header h3[b-1ktaniekj6] {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-strong);
        margin: 0;
        display: flex;
        align-items: center;
    }

        .table-header h3 i[b-1ktaniekj6] {
            color: var(--primary);
        }

.table-actions[b-1ktaniekj6] {
    display: flex;
    gap: 0.5rem;
}

.btn-table-action[b-1ktaniekj6] {
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-table-action:hover[b-1ktaniekj6] {
        background: var(--border-soft);
        color: var(--primary);
    }

.table-body[b-1ktaniekj6] {
    padding: 0.5rem;
    max-height: 320px;
    overflow: auto;
}

.data-table[b-1ktaniekj6] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8rem;
}

    .data-table thead[b-1ktaniekj6] {
        background: var(--header-strip);
    }

    .data-table th[b-1ktaniekj6] {
        padding: 0.6rem 0.85rem;
        text-align: left;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

    .data-table td[b-1ktaniekj6] {
        padding: 0.75rem 0.85rem;
        color: var(--text-strong);
        border-bottom: 1px solid var(--border-soft);
        white-space: nowrap;
    }

    .data-table tbody tr:last-child td[b-1ktaniekj6] {
        border-bottom: none;
    }

    .data-table tbody tr:hover[b-1ktaniekj6] {
        background: var(--border-soft);
    }

    .data-table td i[b-1ktaniekj6] {
        margin-right: 0.4rem;
    }

.empty-row[b-1ktaniekj6] {
    text-align: center !important;
    color: var(--text-faint) !important;
    font-style: italic;
    padding: 1.5rem !important;
    white-space: normal !important;
}

.progress-container[b-1ktaniekj6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
}

    .progress-container .progress-bar[b-1ktaniekj6] {
        flex: 1;
        height: 6px;
        background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
        border-radius: 3px;
    }

        .progress-container .progress-bar.bg-warning[b-1ktaniekj6] {
            background: linear-gradient(90deg, var(--warning), var(--warning-dark));
        }

    .progress-container span[b-1ktaniekj6] {
        font-size: 0.75rem;
        color: var(--text-muted);
        min-width: 3rem;
        text-align: right;
    }

.agent-info[b-1ktaniekj6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.agent-avatar[b-1ktaniekj6] {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(139,92,246,.18));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1rem;
}

.rating[b-1ktaniekj6] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--warning);
    font-weight: 600;
}

.text-muted[b-1ktaniekj6] {
    color: var(--text-faint) !important;
}

.text-success[b-1ktaniekj6] {
    color: var(--success) !important;
}

.text-primary[b-1ktaniekj6] {
    color: var(--primary) !important;
}

.text-warning[b-1ktaniekj6] {
    color: var(--warning) !important;
}

.text-danger[b-1ktaniekj6] {
    color: var(--danger) !important;
}

/* ============================================================
   Scrollbars
   ============================================================ */

.dashboard-container [b-1ktaniekj6]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.dashboard-container [b-1ktaniekj6]::-webkit-scrollbar-track {
    background: var(--border-soft);
    border-radius: 3px;
}

.dashboard-container [b-1ktaniekj6]::-webkit-scrollbar-thumb {
    background: var(--text-faint);
    border-radius: 3px;
}

    .dashboard-container [b-1ktaniekj6]::-webkit-scrollbar-thumb:hover {
        background: var(--text-muted);
    }

/* ============================================================
   Responsive breakpoints
   ============================================================ */

@media (max-width: 1200px) {
    .summary-cards-grid[b-1ktaniekj6] {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-content-grid[b-1ktaniekj6] {
        grid-template-columns: 1fr;
    }

    .sidebar-section[b-1ktaniekj6] {
        order: 2;
    }

    .chart-row[b-1ktaniekj6] {
        grid-template-columns: 1fr;
    }

    .tables-section[b-1ktaniekj6] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-container[b-1ktaniekj6] {
        padding: 1rem;
    }

    .dashboard-header[b-1ktaniekj6] {
        padding: 1rem 1.15rem;
    }

    .dashboard-title[b-1ktaniekj6] {
        font-size: 1.3rem;
    }

    .header-content[b-1ktaniekj6] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-stats[b-1ktaniekj6] {
        gap: 0.75rem;
    }

    .tables-section[b-1ktaniekj6] {
        grid-template-columns: 1fr;
    }

    .chart-container[b-1ktaniekj6],
    .chart-container--fill[b-1ktaniekj6] {
        min-height: 220px;
    }

    .chart-container--compact[b-1ktaniekj6] {
        min-height: 190px;
    }

    .data-table[b-1ktaniekj6] {
        font-size: 0.75rem;
    }

        .data-table th[b-1ktaniekj6],
        .data-table td[b-1ktaniekj6] {
            padding: 0.5rem 0.65rem;
        }
}

@media (max-width: 640px) {
    .summary-cards-grid[b-1ktaniekj6] {
        grid-template-columns: 1fr;
    }

    .stats-grid[b-1ktaniekj6] {
        grid-template-columns: 1fr 1fr;
    }

    .user-details[b-1ktaniekj6] {
        display: none;
    }

    .activity-title strong[b-1ktaniekj6] {
        max-width: 130px;
    }
}
.filter-bar[b-1ktaniekj6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px 18px;
    align-items: center;
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 20px;
    box-shadow: 0 1px 6px rgba(16,24,40,0.04);
    border: 1px solid var(--border);
    position: relative;
}

.filter-item[b-1ktaniekj6] {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

    .filter-item label[b-1ktaniekj6] {
        font-size: .75rem;
        font-weight: 600;
        color: var(--text-muted);
        margin-bottom: 6px;
        letter-spacing: 0.02em;
    }

/* make inputs and selects visually consistent with dashboard theme */
.filter-item input[type="date"][b-1ktaniekj6],
.filter-item select[b-1ktaniekj6],
.filter-item input[type="text"][b-1ktaniekj6],
.filter-item .form-control[b-1ktaniekj6] {
    background: transparent;
    border: 1px solid var(--border);
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-strong);
    height: 40px;
    box-shadow: none;
}

.filter-item .form-control-sm[b-1ktaniekj6], .filter-item .form-select-sm[b-1ktaniekj6] {
    min-width: 140px;
}

.filter-actions[b-1ktaniekj6] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.filter-actions .btn[b-1ktaniekj6] {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.filter-actions .btn-primary[b-1ktaniekj6] {
    background: linear-gradient(90deg, var(--primary), var(--purple));
    border: none;
    color: #fff;
    padding: 8px 14px;
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(59,130,246,0.12);
}

.filter-actions .btn-outline-secondary[b-1ktaniekj6] {
    border-radius: 12px;
}

.filter-actions[b-1ktaniekj6] {
    flex-direction: row;
    align-items: center;
    min-width: auto;
}
/* /Components/Pages/DepartmentComponent/DepartmentComponent.razor.rz.scp.css */
/* Reusing the exact same CSS from Locations page */
.accessories-container[b-1k00n6s4c0] {
    padding: var(--space-6);
    max-width: var(--max-content-width);
    margin: 0 auto;
    background: var(--color-bg-primary);
    min-height: 100vh;
}

.accessories-header[b-1k00n6s4c0] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-8);
    color: var(--color-text-inverse);
    position: relative;
    overflow: hidden;
}

    .accessories-header[b-1k00n6s4c0]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    }

.page-icon[b-1k00n6s4c0] {
    font-size: var(--font-size-3xl);
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.page-title[b-1k00n6s4c0] {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-text-inverse);
    margin: 0 0 var(--space-2) 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Stats Overview */
.stats-overview[b-1k00n6s4c0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.stat-card[b-1k00n6s4c0] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-1k00n6s4c0]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: currentColor;
        opacity: 0.15;
    }

    .stat-card:hover[b-1k00n6s4c0] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

    .stat-card .stat-value[b-1k00n6s4c0] {
        font-size: var(--font-size-3xl);
        font-weight: 800;
        margin: var(--space-2) 0;
        line-height: 1;
    }

    .stat-card .stat-label[b-1k00n6s4c0] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--color-text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .stat-card.total[b-1k00n6s4c0]::before {
        color: var(--color-primary);
    }

    .stat-card.active[b-1k00n6s4c0]::before {
        color: var(--color-success);
    }

    .stat-card.inactive[b-1k00n6s4c0]::before {
        color: var(--color-danger);
    }

    .stat-card.total .stat-value[b-1k00n6s4c0] {
        color: var(--color-primary);
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-card.active .stat-value[b-1k00n6s4c0] {
        color: var(--color-success);
        background: linear-gradient(135deg, var(--color-success), #2ecc71);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-card.inactive .stat-value[b-1k00n6s4c0] {
        color: var(--color-danger);
        background: linear-gradient(135deg, var(--color-danger), #e74c3c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/* Cards Container */
.accessories-grid-container[b-1k00n6s4c0] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-light);
    margin-top: var(--space-4);
    overflow: hidden;
}

.grid-header[b-1k00n6s4c0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-light);
}

.results-count[b-1k00n6s4c0] {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

    .results-count strong[b-1k00n6s4c0] {
        color: var(--color-text-primary);
        font-weight: 600;
    }

/* Cards Grid */
.accessories-grid[b-1k00n6s4c0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-6);
    padding: var(--space-6);
}

.accessory-card[b-1k00n6s4c0] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

    .accessory-card[b-1k00n6s4c0]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
        opacity: 0;
        transition: opacity var(--transition-fast);
    }

    .accessory-card:hover[b-1k00n6s4c0] {
        transform: translateY(-8px);
        box-shadow: var(--shadow-xl);
        border-color: var(--color-primary);
    }

        .accessory-card:hover[b-1k00n6s4c0]::before {
            opacity: 1;
        }

    .accessory-card.inactive[b-1k00n6s4c0] {
        border-color: var(--color-border-medium);
        background: linear-gradient(135deg, rgba(231, 76, 60, 0.03), var(--color-bg-surface));
    }

        .accessory-card.inactive[b-1k00n6s4c0]::before {
            background: var(--color-danger);
        }

/* Card Header */
.card-header[b-1k00n6s4c0] {
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    background: linear-gradient(135deg, rgba(67, 97, 238, 0.04) 0%, transparent 100%);
}

.accessory-name[b-1k00n6s4c0] {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

    .accessory-name i[b-1k00n6s4c0] {
        color: var(--color-primary);
        font-size: var(--font-size-base);
    }

/* Status Badge */
.status-badge[b-1k00n6s4c0] {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-sm);
}

    .status-badge.active[b-1k00n6s4c0] {
        background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(46, 204, 113, 0.25));
        color: var(--color-success);
        border: 1px solid rgba(46, 204, 113, 0.3);
    }

    .status-badge.inactive[b-1k00n6s4c0] {
        background: linear-gradient(135deg, rgba(231, 76, 60, 0.15), rgba(231, 76, 60, 0.25));
        color: var(--color-danger);
        border: 1px solid rgba(231, 76, 60, 0.3);
    }

/* Card Content */
.card-content[b-1k00n6s4c0] {
    padding: var(--space-6);
    flex: 1;
}

.detail-row[b-1k00n6s4c0] {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
}

    .detail-row:last-child[b-1k00n6s4c0] {
        border-bottom: none;
    }

    .detail-row i[b-1k00n6s4c0] {
        color: var(--color-primary);
        font-size: var(--font-size-base);
        text-align: center;
    }

.detail-label[b-1k00n6s4c0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.label[b-1k00n6s4c0] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.value[b-1k00n6s4c0] {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

.detail-row.warning i[b-1k00n6s4c0] {
    color: var(--color-warning);
}

.detail-row.warning .value[b-1k00n6s4c0] {
    color: var(--color-warning);
}

/* Card Actions */
.card-actions[b-1k00n6s4c0] {
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-secondary);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* Buttons */
.btn[b-1k00n6s4c0] {
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 2px solid transparent;
    transition: all var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

    .btn[b-1k00n6s4c0]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .btn:hover[b-1k00n6s4c0]::before {
        width: 300px;
        height: 300px;
    }

.btn-primary[b-1k00n6s4c0] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

    .btn-primary:hover:not(:disabled)[b-1k00n6s4c0] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
    }

.btn-outline[b-1k00n6s4c0] {
    background: transparent;
    border-color: var(--color-border-medium);
    color: var(--color-text-secondary);
}

    .btn-outline:hover:not(:disabled)[b-1k00n6s4c0] {
        background: var(--color-bg-tertiary);
        border-color: var(--color-border-medium);
        color: var(--color-text-primary);
        transform: translateY(-2px);
    }

.btn-danger[b-1k00n6s4c0] {
    background: linear-gradient(135deg, var(--color-danger), #e74c3c);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

    .btn-danger:hover:not(:disabled)[b-1k00n6s4c0] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
    }

.btn-success[b-1k00n6s4c0] {
    background: linear-gradient(135deg, var(--color-success), #2ecc71);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

    .btn-success:hover:not(:disabled)[b-1k00n6s4c0] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
    }

.btn-secondary[b-1k00n6s4c0] {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border-medium);
}

    .btn-secondary:hover:not(:disabled)[b-1k00n6s4c0] {
        background: var(--color-bg-tertiary);
        color: var(--color-text-primary);
    }

.btn-sm[b-1k00n6s4c0] {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
}

/* Search */
.search-container[b-1k00n6s4c0] {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.search-input[b-1k00n6s4c0] {
    border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-6) var(--space-3) var(--space-12);
    border: 2px solid var(--color-border-medium);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text-primary);
    backdrop-filter: blur(10px);
}

    .search-input:focus[b-1k00n6s4c0] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15);
        background: var(--color-bg-surface);
    }

.search-icon[b-1k00n6s4c0] {
    position: absolute;
    left: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    z-index: 2;
}

.clear-search[b-1k00n6s4c0] {
    position: absolute;
    right: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    z-index: 2;
}

    .clear-search:hover[b-1k00n6s4c0] {
        background: var(--color-bg-tertiary);
        color: var(--color-danger);
    }

/* Loading Skeletons */
.skeleton[b-1k00n6s4c0] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-1k00n6s4c0 1.5s infinite;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

@keyframes shimmer-b-1k00n6s4c0 {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.skeleton-text[b-1k00n6s4c0] {
    height: var(--space-4);
    margin-bottom: var(--space-3);
}

.skeleton-btn[b-1k00n6s4c0] {
    width: 80px;
    height: 38px;
    border-radius: var(--radius-md);
}

/* Empty State */
.empty-state[b-1k00n6s4c0] {
    padding: var(--space-16) var(--space-8);
    text-align: center;
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    border: 2px dashed var(--color-border-light);
    margin: var(--space-8) 0;
}

.empty-icon[b-1k00n6s4c0] {
    font-size: var(--font-size-4xl);
    color: var(--color-border-medium);
    margin-bottom: var(--space-6);
    opacity: 0.5;
}

.empty-state h3[b-1k00n6s4c0] {
    font-size: var(--space-4xl);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.empty-state p[b-1k00n6s4c0] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-6);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Header Actions */
.header-actions[b-1k00n6s4c0] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.header-actions-container[b-1k00n6s4c0] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .accessories-grid[b-1k00n6s4c0] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .accessories-container[b-1k00n6s4c0] {
        padding: var(--space-4);
    }

    .accessories-header[b-1k00n6s4c0] {
        padding: var(--space-6);
    }

    .page-title[b-1k00n6s4c0] {
        font-size: var(--font-size-2xl);
    }

    .stats-overview[b-1k00n6s4c0] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .header-actions-container[b-1k00n6s4c0] {
        flex-direction: column;
        gap: var(--space-4);
        width: 100%;
    }

    .search-container[b-1k00n6s4c0] {
        max-width: 100%;
    }

    .header-actions[b-1k00n6s4c0] {
        width: 100%;
        justify-content: space-between;
    }

    .accessories-grid[b-1k00n6s4c0] {
        padding: var(--space-4);
        gap: var(--space-4);
    }

    .card-header[b-1k00n6s4c0],
    .card-content[b-1k00n6s4c0],
    .card-actions[b-1k00n6s4c0] {
        padding: var(--space-4);
    }
}

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

    .accessories-grid[b-1k00n6s4c0] {
        grid-template-columns: 1fr;
    }

    .btn span:not(.sr-only)[b-1k00n6s4c0] {
        display: none;
    }

    .btn i[b-1k00n6s4c0] {
        margin-right: 0;
    }

    .card-actions[b-1k00n6s4c0] {
        flex-direction: column;
    }

    .btn[b-1k00n6s4c0] {
        width: 100%;
        justify-content: center;
    }
}

/* Animations */
@keyframes fadeInUp-b-1k00n6s4c0 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.accessory-card[b-1k00n6s4c0] {
    animation: fadeInUp-b-1k00n6s4c0 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
}

    .accessory-card:nth-child(1)[b-1k00n6s4c0] {
        animation-delay: 0.1s;
    }

    .accessory-card:nth-child(2)[b-1k00n6s4c0] {
        animation-delay: 0.2s;
    }

    .accessory-card:nth-child(3)[b-1k00n6s4c0] {
        animation-delay: 0.3s;
    }

    .accessory-card:nth-child(4)[b-1k00n6s4c0] {
        animation-delay: 0.4s;
    }

    .accessory-card:nth-child(5)[b-1k00n6s4c0] {
        animation-delay: 0.5s;
    }

    .accessory-card:nth-child(6)[b-1k00n6s4c0] {
        animation-delay: 0.6s;
    }

    .accessory-card:nth-child(7)[b-1k00n6s4c0] {
        animation-delay: 0.7s;
    }

    .accessory-card:nth-child(8)[b-1k00n6s4c0] {
        animation-delay: 0.8s;
    }

/* Text Utilities */
.text-muted[b-1k00n6s4c0] {
    color: var(--color-text-tertiary) !important;
}

/* Focus States */
:focus-visible[b-1k00n6s4c0] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Print Styles */
@media print {
    .accessories-header[b-1k00n6s4c0],
    .header-actions[b-1k00n6s4c0],
    .card-actions[b-1k00n6s4c0],
    .search-container[b-1k00n6s4c0] {
        display: none;
    }

    .accessories-container[b-1k00n6s4c0] {
        padding: 0;
        background: white;
    }

    .accessory-card[b-1k00n6s4c0] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/DepartmentComponent/UpsertDepartmentComponent.razor.rz.scp.css */
/* Reusing the exact same CSS from Locations Create/Update page */
.accessories-container[b-9w9meuw4a2] {
    padding: var(--space-8);
    max-width: 800px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-card[b-9w9meuw4a2] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    width: 100%;
    animation: slideInUp-b-9w9meuw4a2 var(--transition-slow) ease-out;
}

.form-card-header[b-9w9meuw4a2] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-8) var(--space-8);
    color: var(--color-text-inverse);
    position: relative;
    overflow: hidden;
}

    .form-card-header[b-9w9meuw4a2]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    }

.form-header-content[b-9w9meuw4a2] {
    position: relative;
    z-index: 1;
    text-align: center;
}

.form-header-icon[b-9w9meuw4a2] {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-4);
    opacity: 0.9;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.form-title[b-9w9meuw4a2] {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0 0 var(--space-2) 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.form-subtitle[b-9w9meuw4a2] {
    font-size: var(--font-size-sm);
    opacity: 0.9;
    margin: 0;
    max-width: 500px;
    margin: 0 auto;
}

.form-card-body[b-9w9meuw4a2] {
    padding: var(--space-8);
}

.form-alerts[b-9w9meuw4a2] {
    margin-bottom: var(--space-6);
}

.alert[b-9w9meuw4a2] {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    border-left: 4px solid;
    animation: slideInRight-b-9w9meuw4a2 var(--transition-normal) ease-out;
}

.alert-danger[b-9w9meuw4a2] {
    background: rgba(231, 76, 60, 0.1);
    border-left-color: var(--color-danger);
    color: var(--color-danger);
}

.alert i[b-9w9meuw4a2] {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.alert span[b-9w9meuw4a2] {
    flex: 1;
    line-height: 1.5;
}

.form-grid[b-9w9meuw4a2] {
    display: grid;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.form-group[b-9w9meuw4a2] {
    position: relative;
}

.form-label[b-9w9meuw4a2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .form-label i[b-9w9meuw4a2] {
        color: var(--color-primary);
        font-size: var(--font-size-base);
    }

.required-indicator[b-9w9meuw4a2] {
    color: var(--color-danger);
    margin-left: var(--space-1);
}

.input-with-validation[b-9w9meuw4a2] {
    position: relative;
}

.form-input[b-9w9meuw4a2] {
    width: 100%;
    padding: var(--space-4) var(--space-6) var(--space-4) var(--space-12);
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-family: var(--font-family-sans);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

    .form-input:focus[b-9w9meuw4a2] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15);
        background: var(--color-bg-surface);
    }

    .form-input:disabled[b-9w9meuw4a2] {
        background: var(--color-bg-secondary);
        color: var(--color-text-tertiary);
        cursor: not-allowed;
        border-color: var(--color-border-light);
    }

    .form-input[b-9w9meuw4a2]::placeholder {
        color: var(--color-text-tertiary);
        opacity: 0.7;
    }

.input-icon[b-9w9meuw4a2] {
    position: absolute;
    left: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    pointer-events: none;
    transition: color var(--transition-fast);
}

.form-input:focus + .input-icon[b-9w9meuw4a2] {
    color: var(--color-primary);
}

.form-input:disabled + .input-icon[b-9w9meuw4a2] {
    color: var(--color-text-tertiary);
}

.validation-message[b-9w9meuw4a2] {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-danger);
    font-weight: 500;
    animation: fadeIn-b-9w9meuw4a2 var(--transition-fast) ease-out;
}

.form-hint[b-9w9meuw4a2] {
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    line-height: 1.5;
}

.text-warning[b-9w9meuw4a2] {
    color: var(--color-warning) !important;
    font-weight: 500;
}

.form-actions[b-9w9meuw4a2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
}

.btn[b-9w9meuw4a2] {
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    min-height: 44px;
}

.btn-primary[b-9w9meuw4a2] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

    .btn-primary:hover:not(:disabled)[b-9w9meuw4a2] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
    }

    .btn-primary:disabled[b-9w9meuw4a2] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
    }

.btn-secondary[b-9w9meuw4a2] {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border-medium);
}

    .btn-secondary:hover[b-9w9meuw4a2] {
        background: var(--color-bg-tertiary);
        color: var(--color-text-primary);
        border-color: var(--color-border-heavy);
    }

.btn i[b-9w9meuw4a2] {
    font-size: var(--font-size-base);
}

.loading-overlay[b-9w9meuw4a2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
}

.loading-container[b-9w9meuw4a2] {
    text-align: center;
    animation: fadeIn-b-9w9meuw4a2 var(--transition-normal) ease-out;
}

.loading-spinner[b-9w9meuw4a2] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--color-border-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-9w9meuw4a2 1s linear infinite;
    margin: 0 auto var(--space-4);
}

.loading-text[b-9w9meuw4a2] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
    animation: pulse-b-9w9meuw4a2 2s infinite;
}

.spinner-border-sm[b-9w9meuw4a2] {
    width: 16px;
    height: 16px;
    border-width: 2px;
    margin-right: var(--space-3);
}

/* Manager Select Custom Styles */
.manager-select-container[b-9w9meuw4a2] {
    position: relative;
    width: 100%;
}

.manager-search-input[b-9w9meuw4a2] {
    width: 100%;
    padding: var(--space-4) var(--space-6);
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .manager-search-input:hover[b-9w9meuw4a2] {
        border-color: var(--color-border-heavy);
    }

    .manager-search-input:focus-within[b-9w9meuw4a2] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15);
    }

.selected-manager-preview[b-9w9meuw4a2] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
}

.manager-avatar[b-9w9meuw4a2] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.manager-info[b-9w9meuw4a2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.manager-name[b-9w9meuw4a2] {
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.manager-email[b-9w9meuw4a2] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.manager-clear[b-9w9meuw4a2] {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

    .manager-clear:hover[b-9w9meuw4a2] {
        background: var(--color-danger);
        color: white;
    }

.placeholder[b-9w9meuw4a2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-base);
    width: 100%;
}

    .placeholder i[b-9w9meuw4a2] {
        color: var(--color-text-tertiary);
    }

.dropdown-indicator[b-9w9meuw4a2] {
    color: var(--color-text-tertiary);
    margin-left: var(--space-2);
    flex-shrink: 0;
}

.manager-dropdown[b-9w9meuw4a2] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-surface);
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    margin-top: var(--space-2);
    z-index: var(--z-dropdown);
    animation: slideInDown-b-9w9meuw4a2 var(--transition-fast) ease-out;
    overflow: hidden;
}

@keyframes slideInDown-b-9w9meuw4a2 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-search[b-9w9meuw4a2] {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-bg-secondary);
}

    .dropdown-search i[b-9w9meuw4a2] {
        color: var(--color-text-tertiary);
        flex-shrink: 0;
    }

.search-input[b-9w9meuw4a2] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    padding: var(--space-2) 0;
    outline: none;
}

    .search-input[b-9w9meuw4a2]::placeholder {
        color: var(--color-text-tertiary);
    }

.clear-search-btn[b-9w9meuw4a2] {
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

    .clear-search-btn:hover[b-9w9meuw4a2] {
        background: var(--color-bg-tertiary);
        color: var(--color-danger);
    }

.dropdown-results[b-9w9meuw4a2] {
    max-height: 300px;
    overflow-y: auto;
    padding: var(--space-2);
}

.results-count[b-9w9meuw4a2] {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-weight: 500;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--space-2);
}

.manager-option[b-9w9meuw4a2] {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: var(--space-1);
}

    .manager-option:hover[b-9w9meuw4a2] {
        background: var(--color-bg-tertiary);
    }

    .manager-option.selected[b-9w9meuw4a2] {
        background: rgba(67, 97, 238, 0.1);
        border: 1px solid rgba(67, 97, 238, 0.3);
    }

.manager-details[b-9w9meuw4a2] {
    flex: 1;
    min-width: 0;
}

    .manager-details .manager-name[b-9w9meuw4a2] {
        font-weight: 600;
        color: var(--color-text-primary);
        margin-bottom: var(--space-1);
    }

    .manager-details .manager-email[b-9w9meuw4a2] {
        font-size: var(--font-size-xs);
        color: var(--color-text-tertiary);
        margin-bottom: var(--space-1);
    }

.manager-phone[b-9w9meuw4a2] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

    .manager-phone i[b-9w9meuw4a2] {
        font-size: var(--font-size-xs);
    }

.selected-indicator[b-9w9meuw4a2] {
    color: var(--color-primary);
    flex-shrink: 0;
}

.no-results[b-9w9meuw4a2] {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-text-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

    .no-results i[b-9w9meuw4a2] {
        font-size: var(--font-size-2xl);
        opacity: 0.5;
    }

/* Dropdown Scrollbar */
.dropdown-results[b-9w9meuw4a2]::-webkit-scrollbar {
    width: 8px;
}

.dropdown-results[b-9w9meuw4a2]::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-full);
}

.dropdown-results[b-9w9meuw4a2]::-webkit-scrollbar-thumb {
    background: var(--color-border-medium);
    border-radius: var(--radius-full);
}

    .dropdown-results[b-9w9meuw4a2]::-webkit-scrollbar-thumb:hover {
        background: var(--color-border-heavy);
    }

/* Animations */
@keyframes slideInUp-b-9w9meuw4a2 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight-b-9w9meuw4a2 {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn-b-9w9meuw4a2 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

@keyframes pulse-b-9w9meuw4a2 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .accessories-container[b-9w9meuw4a2] {
        padding: var(--space-4);
    }

    .form-card-header[b-9w9meuw4a2] {
        padding: var(--space-6);
    }

    .form-card-body[b-9w9meuw4a2] {
        padding: var(--space-6);
    }

    .form-grid[b-9w9meuw4a2] {
        gap: var(--space-6);
    }

    .form-title[b-9w9meuw4a2] {
        font-size: var(--font-size-xl);
    }

    .form-actions[b-9w9meuw4a2] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .btn[b-9w9meuw4a2] {
        width: 100%;
        justify-content: center;
    }

    .manager-search-input[b-9w9meuw4a2] {
        padding: var(--space-3) var(--space-4);
    }

    .manager-option[b-9w9meuw4a2] {
        padding: var(--space-2) var(--space-3);
    }
}

@media (max-width: 480px) {
    .form-input[b-9w9meuw4a2] {
        padding-left: var(--space-10);
    }

    .input-icon[b-9w9meuw4a2] {
        left: var(--space-4);
    }

    .selected-manager-preview[b-9w9meuw4a2] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .manager-info[b-9w9meuw4a2] {
        width: 100%;
    }
}

/* Focus Accessibility */
:focus-visible[b-9w9meuw4a2] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Print Styles */
@media print {
    .form-actions[b-9w9meuw4a2],
    .loading-overlay[b-9w9meuw4a2],
    .manager-dropdown[b-9w9meuw4a2] {
        display: none;
    }

    .form-card[b-9w9meuw4a2] {
        box-shadow: none;
        border: 1px solid var(--color-border-medium);
    }

    .form-card-header[b-9w9meuw4a2] {
        background: none;
        color: var(--color-text-primary);
    }

    .manager-search-input[b-9w9meuw4a2] {
        border: 1px solid var(--color-border-medium);
    }
}
/* /Components/Pages/DevicesComponents/DevicesListComponent.razor.rz.scp.css */
/* Device Management - Modern Design */
.device-management-page[b-hutynq5z71] {
    min-height: 100vh;
    background: var(--color-bg-primary);
    font-family: var(--font-family-sans);
    color: var(--color-text-primary);
}

.page-container[b-hutynq5z71] {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: var(--space-6);
    animation: fadeIn-b-hutynq5z71 0.6s ease-out;
}

@keyframes fadeIn-b-hutynq5z71 {
    from {
        opacity: 0;
        transform: translateY(var(--space-4));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header Stats */
.stats-grid[b-hutynq5z71] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.stat-card[b-hutynq5z71] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

    .stat-card:hover[b-hutynq5z71] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-xl);
        border-color: var(--color-primary-light);
    }

    .stat-card[b-hutynq5z71]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 6px;
        height: 100%;
        background: var(--color-primary);
    }

.stat-content[b-hutynq5z71] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
}

.stat-icon[b-hutynq5z71] {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: var(--font-size-2xl);
    flex-shrink: 0;
}

.stat-info[b-hutynq5z71] {
    flex: 1;
    min-width: 0;
}

.stat-number[b-hutynq5z71] {
    font-size: clamp(1.375rem, 1.1rem + 1vw, var(--font-size-3xl));
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
    line-height: 1;
}

.stat-label[b-hutynq5z71] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Page Header */
.page-header[b-hutynq5z71] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    padding: var(--space-6);
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-md);
}

.header-title[b-hutynq5z71] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.header-icon[b-hutynq5z71] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.header-text[b-hutynq5z71] {
    min-width: 0;
}

    .header-text h1[b-hutynq5z71] {
        font-size: clamp(1.25rem, 1rem + 1vw, var(--font-size-3xl));
        font-weight: 800;
        color: var(--color-text-primary);
        margin: 0 0 var(--space-1) 0;
        line-height: 1.2;
    }

.header-subtitle[b-hutynq5z71] {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
}

.header-actions[b-hutynq5z71] {
    display: flex;
    gap: var(--space-3);
}

/* Main Action Button */
.main-action-btn[b-hutynq5z71] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-8);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border: none;
    border-radius: var(--radius-lg);
    color: var(--color-white);
    font-weight: 600;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
}

    .main-action-btn:hover[b-hutynq5z71] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .main-action-btn i[b-hutynq5z71] {
        font-size: var(--font-size-lg);
    }

/* Filters Section */
.filters-section[b-hutynq5z71] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-8);
    overflow: hidden;
}

.filters-header[b-hutynq5z71] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5) var(--space-6);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-light);
}

    .filters-header h2[b-hutynq5z71] {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--color-text-primary);
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

        .filters-header h2 i[b-hutynq5z71] {
            color: var(--color-primary);
        }

.filters-content[b-hutynq5z71] {
    padding: var(--space-6);
}

.filters-grid[b-hutynq5z71] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.filter-group[b-hutynq5z71] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.filter-label[b-hutynq5z71] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

    .filter-label i[b-hutynq5z71] {
        color: var(--color-primary);
        width: 16px;
    }

.filter-input[b-hutynq5z71], .filter-select[b-hutynq5z71] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-family: var(--font-family-sans);
    transition: all var(--transition-fast);
    box-sizing: border-box;
}

    .filter-input:focus[b-hutynq5z71], .filter-select:focus[b-hutynq5z71] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
    }

.search-input-container[b-hutynq5z71] {
    position: relative;
}

.search-icon[b-hutynq5z71] {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
}

.search-input-container .filter-input[b-hutynq5z71] {
    padding-left: var(--space-12);
}

.filters-actions[b-hutynq5z71] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-light);
}

.filter-btn[b-hutynq5z71] {
    padding: var(--space-3) var(--space-6);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

.filter-btn-primary[b-hutynq5z71] {
    background: var(--color-primary);
    color: var(--color-white);
}

    .filter-btn-primary:hover[b-hutynq5z71] {
        background: var(--color-primary-dark);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.filter-btn-secondary[b-hutynq5z71] {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border-color: var(--color-border-medium);
}

    .filter-btn-secondary:hover[b-hutynq5z71] {
        background: var(--color-bg-tertiary);
        border-color: var(--color-border-heavy);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

.filter-btn-success[b-hutynq5z71] {
    background: var(--color-success);
    color: var(--color-white);
}

    .filter-btn-success:hover[b-hutynq5z71] {
        background: var(--color-success);
        filter: brightness(90%);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

/* Table Container */
.table-container[b-hutynq5z71] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: var(--space-8);
    max-width: 100%;
}

.table-header[b-hutynq5z71] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-6);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-light);
}

    .table-header h2[b-hutynq5z71] {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--color-text-primary);
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

        .table-header h2 i[b-hutynq5z71] {
            color: var(--color-primary);
        }

.table-count[b-hutynq5z71] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

/* Table wrapper - THIS makes the table scroll horizontally instead of
   getting clipped or overflowing the page when the browser is zoomed
   in/out (ctrl +/-) or the viewport is narrow. Without this rule the
   data was being cut off by .table-container's overflow:hidden. */
.table-responsive[b-hutynq5z71] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

    .table-responsive[b-hutynq5z71]::-webkit-scrollbar {
        height: 8px;
    }

    .table-responsive[b-hutynq5z71]::-webkit-scrollbar-thumb {
        background: var(--color-border-heavy);
        border-radius: var(--radius-full);
    }

    .table-responsive[b-hutynq5z71]::-webkit-scrollbar-track {
        background: var(--color-bg-secondary);
    }

/* Devices Table */
.devices-table[b-hutynq5z71] {
    width: 100%;
    min-width: 1100px; /* keeps columns legible; wrapper scrolls instead of squashing content */
    border-collapse: separate;
    border-spacing: 0;
}

    .devices-table thead[b-hutynq5z71] {
        background: var(--color-bg-secondary);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .devices-table th[b-hutynq5z71] {
        padding: var(--space-4) var(--space-6);
        text-align: left;
        font-weight: 600;
        color: var(--color-text-secondary);
        border-bottom: 2px solid var(--color-border-light);
        cursor: pointer;
        user-select: none;
        transition: all var(--transition-fast);
        white-space: nowrap;
    }

        .devices-table th:hover[b-hutynq5z71] {
            background: var(--color-bg-tertiary);
        }

.table-column-header[b-hutynq5z71] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sort-icon[b-hutynq5z71] {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
    transition: transform var(--transition-fast);
}

    .sort-icon.active[b-hutynq5z71] {
        color: var(--color-primary);
    }

    .sort-icon.desc[b-hutynq5z71] {
        transform: rotate(180deg);
    }

.devices-table tbody tr[b-hutynq5z71] {
    transition: background-color var(--transition-fast);
    border-bottom: 1px solid var(--color-border-light);
}

    .devices-table tbody tr:hover[b-hutynq5z71] {
        background: var(--color-bg-tertiary);
    }

.devices-table td[b-hutynq5z71] {
    padding: var(--space-4) var(--space-6);
    vertical-align: middle;
}

/* Device ID Column */
.device-id[b-hutynq5z71] {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-tertiary);
}

/* Device Number Badge */
.device-number[b-hutynq5z71] {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    font-family: var(--font-family-mono);
}

/* Device Name */
.device-name[b-hutynq5z71] {
    font-weight: 600;
    color: var(--color-text-primary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Device Type Badge */
.device-type-badge[b-hutynq5z71] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.badge-laptop[b-hutynq5z71] {
    background: rgba(67, 97, 238, 0.15);
    color: var(--color-primary);
    border: 1px solid rgba(67, 97, 238, 0.3);
}

.badge-desktop[b-hutynq5z71] {
    background: rgba(247, 37, 133, 0.15);
    color: var(--color-secondary);
    border: 1px solid rgba(247, 37, 133, 0.3);
}

.badge-server[b-hutynq5z71] {
    background: rgba(46, 204, 113, 0.15);
    color: var(--color-success);
    border: 1px solid rgba(46, 204, 113, 0.3);
}

.badge-switch[b-hutynq5z71] {
    background: rgba(243, 156, 18, 0.15);
    color: var(--color-warning);
    border: 1px solid rgba(243, 156, 18, 0.3);
}

.badge-firewall[b-hutynq5z71] {
    background: rgba(155, 89, 182, 0.15);
    color: #9b59b6;
    border: 1px solid rgba(155, 89, 182, 0.3);
}

.badge-printer[b-hutynq5z71] {
    background: rgba(52, 152, 219, 0.15);
    color: var(--color-info);
    border: 1px solid rgba(52, 152, 219, 0.3);
}

.badge-default[b-hutynq5z71] {
    background: var(--color-bg-secondary);
    color: var(--color-text-tertiary);
    border: 1px solid var(--color-border-medium);
}

/* Brand & Version */
.device-brand[b-hutynq5z71], .device-version[b-hutynq5z71] {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-secondary);
}

/* Serial Number */
.serial-number[b-hutynq5z71] {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    background: var(--color-bg-secondary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

/* Status Badge */
.status-badge[b-hutynq5z71] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.status-active[b-hutynq5z71] {
    background: rgba(46, 204, 113, 0.15);
    color: var(--color-success);
    border-color: rgba(46, 204, 113, 0.3);
}

.status-inactive[b-hutynq5z71] {
    background: rgba(231, 76, 60, 0.15);
    color: var(--color-danger);
    border-color: rgba(231, 76, 60, 0.3);
}

.status-assigned[b-hutynq5z71] {
    background: rgba(52, 152, 219, 0.15);
    color: var(--color-info);
    border-color: rgba(52, 152, 219, 0.3);
}

.status-repair[b-hutynq5z71] {
    background: rgba(243, 156, 18, 0.15);
    color: var(--color-warning);
    border-color: rgba(243, 156, 18, 0.3);
}

.status-lost[b-hutynq5z71] {
    background: rgba(127, 140, 141, 0.15);
    color: #7f8c8d;
    border-color: rgba(127, 140, 141, 0.3);
}

.status-stock[b-hutynq5z71] {
    background: rgba(155, 89, 182, 0.15);
    color: #9b59b6;
    border-color: rgba(155, 89, 182, 0.3);
}

.status-endlife[b-hutynq5z71] {
    background: rgba(44, 62, 80, 0.15);
    color: #2c3e50;
    border-color: rgba(44, 62, 80, 0.3);
}

.status-default[b-hutynq5z71] {
    background: var(--color-bg-secondary);
    color: var(--color-text-tertiary);
    border-color: var(--color-border-medium);
}

/* Specifications Preview */
.specs-preview[b-hutynq5z71] {
    max-width: 250px;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Active State */
.active-state[b-hutynq5z71] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

    .active-state.active[b-hutynq5z71] {
        background: rgba(46, 204, 113, 0.15);
        color: var(--color-success);
        border: 1px solid rgba(46, 204, 113, 0.3);
    }

    .active-state.inactive[b-hutynq5z71] {
        background: rgba(231, 76, 60, 0.15);
        color: var(--color-danger);
        border: 1px solid rgba(231, 76, 60, 0.3);
    }

/* Actions Column */
.actions-cell[b-hutynq5z71] {
    text-align: center;
    white-space: nowrap;
}

.actions-container[b-hutynq5z71],
.action-buttons[b-hutynq5z71] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: nowrap;
}

.action-btn[b-hutynq5z71],
.btn-action[b-hutynq5z71] {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

    .action-btn:hover[b-hutynq5z71],
    .btn-action:hover[b-hutynq5z71] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .action-btn:active[b-hutynq5z71],
    .btn-action:active[b-hutynq5z71] {
        transform: translateY(0);
    }

/* Action Button Variants */
.btn-view[b-hutynq5z71], .action-btn.view[b-hutynq5z71] {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    color: var(--color-white);
}

    .btn-view:hover[b-hutynq5z71], .action-btn.view:hover[b-hutynq5z71] {
        background: var(--color-primary-dark);
        color: var(--color-white);
    }

.btn-edit[b-hutynq5z71], .action-btn.edit[b-hutynq5z71] {
    background: linear-gradient(135deg, var(--color-warning-light), var(--color-warning));
    color: var(--color-white);
}

    .btn-edit:hover[b-hutynq5z71], .action-btn.edit:hover[b-hutynq5z71] {
        background: var(--color-warning-dark);
        color: var(--color-white);
    }

.btn-specs[b-hutynq5z71], .action-btn.specs[b-hutynq5z71] {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    color: var(--color-white);
}

    .btn-specs:hover[b-hutynq5z71], .action-btn.specs:hover[b-hutynq5z71] {
        background: #6d28d9;
        color: var(--color-white);
    }

.btn-assign[b-hutynq5z71], .action-btn.assign[b-hutynq5z71] {
    background: linear-gradient(135deg, var(--color-info-light), var(--color-info));
    color: var(--color-white);
}

    .btn-assign:hover[b-hutynq5z71], .action-btn.assign:hover[b-hutynq5z71] {
        background: var(--color-info-dark);
        color: var(--color-white);
    }

.btn-reclaim[b-hutynq5z71], .action-btn.reclaim[b-hutynq5z71] {
    background: linear-gradient(135deg, #fb923c, #ea580c);
    color: var(--color-white);
}

    .btn-reclaim:hover[b-hutynq5z71], .action-btn.reclaim:hover[b-hutynq5z71] {
        background: #c2410c;
        color: var(--color-white);
    }

.btn-activate[b-hutynq5z71], .action-btn.activate[b-hutynq5z71] {
    background: linear-gradient(135deg, var(--color-success-light), var(--color-success));
    color: var(--color-white);
}

    .btn-activate:hover[b-hutynq5z71], .action-btn.activate:hover[b-hutynq5z71] {
        background: var(--color-success-dark);
        color: var(--color-white);
    }

.btn-deactivate[b-hutynq5z71], .action-btn.deactivate[b-hutynq5z71] {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    color: var(--color-white);
}

    .btn-deactivate:hover[b-hutynq5z71], .action-btn.deactivate:hover[b-hutynq5z71] {
        background: #4b5563;
        color: var(--color-white);
    }

.btn-scrap[b-hutynq5z71], .action-btn.scrap[b-hutynq5z71] {
    background: linear-gradient(135deg, var(--color-danger-light), var(--color-danger));
    color: var(--color-white);
}

    .btn-scrap:hover[b-hutynq5z71], .action-btn.scrap:hover[b-hutynq5z71] {
        background: var(--color-danger-dark);
        color: var(--color-white);
    }

.btn-pdf[b-hutynq5z71], .action-btn.pdf[b-hutynq5z71] {
    background: linear-gradient(135deg, #f87171, #dc2626);
    color: var(--color-white);
}

    .btn-pdf:hover[b-hutynq5z71], .action-btn.pdf:hover[b-hutynq5z71] {
        background: #b91c1c;
        color: var(--color-white);
    }

.btn-retrieve[b-hutynq5z71], .action-btn.retrieve[b-hutynq5z71] {
    background: linear-gradient(135deg, #34d399, #059669);
    color: var(--color-white);
}

    .btn-retrieve:hover[b-hutynq5z71], .action-btn.retrieve:hover[b-hutynq5z71] {
        background: #047857;
        color: var(--color-white);
    }

/* Pagination */
.pagination-section[b-hutynq5z71] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-light);
}

.pagination-info[b-hutynq5z71] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

    .pagination-info strong[b-hutynq5z71] {
        color: var(--color-text-primary);
    }

.pagination-controls[b-hutynq5z71] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.page-size-selector[b-hutynq5z71] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.page-size-label[b-hutynq5z71] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.page-size-select[b-hutynq5z71] {
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-sans);
}

.pagination-buttons[b-hutynq5z71] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.page-btn[b-hutynq5z71] {
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

    .page-btn:hover:not(.disabled)[b-hutynq5z71] {
        border-color: var(--color-primary);
        color: var(--color-primary);
        transform: translateY(-1px);
    }

    .page-btn.active[b-hutynq5z71] {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-white);
    }

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

/* Empty State */
.empty-state[b-hutynq5z71] {
    text-align: center;
    padding: var(--space-16) var(--space-8);
}

.empty-icon[b-hutynq5z71] {
    font-size: var(--font-size-4xl);
    color: var(--color-gray-300);
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.empty-title[b-hutynq5z71] {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
    font-weight: 600;
}

.empty-description[b-hutynq5z71] {
    font-size: var(--font-size-base);
    color: var(--color-text-tertiary);
    max-width: 400px;
    margin: 0 auto var(--space-4);
    line-height: var(--line-height-normal);
}

/* Loading Overlay */
.loading-overlay[b-hutynq5z71] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
}

[data-theme="dark"] .loading-overlay[b-hutynq5z71] {
    background: rgba(0, 0, 0, 0.95);
}

.loading-content[b-hutynq5z71] {
    text-align: center;
    padding: var(--space-8);
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-lg);
}

.loading-spinner[b-hutynq5z71] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--color-border-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-hutynq5z71 1s linear infinite;
    margin: 0 auto var(--space-4);
}

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

.loading-text[b-hutynq5z71] {
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: var(--font-size-base);
}

/* Responsive Design
   These breakpoints react the same way to a narrow physical window
   as they do to browser zoom (ctrl +/-), since both shrink the
   effective CSS layout width. Combined with .table-responsive above,
   content scrolls into view instead of being clipped/hidden. */
@media (max-width: 1200px) {
    .page-container[b-hutynq5z71] {
        padding: var(--space-4);
    }

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

    .devices-table td[b-hutynq5z71], .devices-table th[b-hutynq5z71] {
        padding: var(--space-3) var(--space-4);
    }
}

@media (max-width: 992px) {
    .devices-table[b-hutynq5z71] {
        min-width: 950px;
    }
}

@media (max-width: 768px) {
    .page-header[b-hutynq5z71] {
        flex-direction: column;
        gap: var(--space-4);
        align-items: flex-start;
    }

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

    .stats-grid[b-hutynq5z71] {
        grid-template-columns: 1fr;
    }

    .filters-grid[b-hutynq5z71] {
        grid-template-columns: 1fr;
    }

    .filters-actions[b-hutynq5z71] {
        flex-direction: column;
    }

    .filter-btn[b-hutynq5z71] {
        width: 100%;
        justify-content: center;
    }

    .devices-table[b-hutynq5z71] {
        min-width: 900px;
    }

    .pagination-section[b-hutynq5z71] {
        flex-direction: column;
        gap: var(--space-4);
        align-items: stretch;
    }

    .pagination-controls[b-hutynq5z71] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .page-size-selector[b-hutynq5z71] {
        justify-content: space-between;
        width: 100%;
    }

    .pagination-buttons[b-hutynq5z71] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .page-container[b-hutynq5z71] {
        padding: var(--space-2);
    }

    .stat-content[b-hutynq5z71] {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }

    .stat-icon[b-hutynq5z71] {
        width: 56px;
        height: 56px;
    }

    .header-text h1[b-hutynq5z71] {
        font-size: var(--font-size-2xl);
    }

    .main-action-btn[b-hutynq5z71] {
        padding: var(--space-3) var(--space-6);
        font-size: var(--font-size-sm);
    }

    .action-btn[b-hutynq5z71], .btn-action[b-hutynq5z71] {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-xs);
    }
}

/* Animation Classes */
.fade-in[b-hutynq5z71] {
    animation: fadeIn-b-hutynq5z71 0.6s ease-out;
}

.slide-up[b-hutynq5z71] {
    animation: slideUp-b-hutynq5z71 0.6s ease-out;
}

.stagger-children > *[b-hutynq5z71] {
    opacity: 0;
    animation: slideUp-b-hutynq5z71 0.5s ease-out forwards;
}

    .stagger-children > *:nth-child(1)[b-hutynq5z71] {
        animation-delay: 0.1s;
    }

    .stagger-children > *:nth-child(2)[b-hutynq5z71] {
        animation-delay: 0.2s;
    }

    .stagger-children > *:nth-child(3)[b-hutynq5z71] {
        animation-delay: 0.3s;
    }

    .stagger-children > *:nth-child(4)[b-hutynq5z71] {
        animation-delay: 0.4s;
    }

    .stagger-children > *:nth-child(5)[b-hutynq5z71] {
        animation-delay: 0.5s;
    }

@keyframes slideUp-b-hutynq5z71 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark Theme */
[data-theme="dark"] .stat-card[b-hutynq5z71] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-medium);
}

[data-theme="dark"] .page-header[b-hutynq5z71],
[data-theme="dark"] .filters-section[b-hutynq5z71],
[data-theme="dark"] .table-container[b-hutynq5z71] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-medium);
}

[data-theme="dark"] .serial-number[b-hutynq5z71] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-medium);
}

[data-theme="dark"] .device-number[b-hutynq5z71] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-medium);
}

/* Focus States for Accessibility */
.filter-input:focus-visible[b-hutynq5z71],
.filter-select:focus-visible[b-hutynq5z71],
.page-size-select:focus-visible[b-hutynq5z71],
.page-btn:focus-visible[b-hutynq5z71],
.action-btn:focus-visible[b-hutynq5z71],
.btn-action:focus-visible[b-hutynq5z71],
.main-action-btn:focus-visible[b-hutynq5z71] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
/* /Components/Pages/DeviceTypesComponents/DeviceTypesComponent.razor.rz.scp.css */
/* Device Types Styles - Using Design System Variables */

.accessories-container[b-8alxuje65k] {
    padding: var(--space-6);
    max-width: var(--max-content-width);
    margin: 0 auto;
    background: var(--color-bg-primary);
    min-height: 100vh;
}

.accessories-header[b-8alxuje65k] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-8);
    color: var(--color-text-inverse);
    position: relative;
    overflow: hidden;
}

    .accessories-header[b-8alxuje65k]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    }

.page-icon[b-8alxuje65k] {
    font-size: var(--font-size-3xl);
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.page-title[b-8alxuje65k] {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-text-inverse);
    margin: 0 0 var(--space-2) 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Stats Overview */
.stats-overview[b-8alxuje65k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.stat-card[b-8alxuje65k] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-8alxuje65k]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: currentColor;
        opacity: 0.15;
    }

    .stat-card:hover[b-8alxuje65k] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

    .stat-card .stat-value[b-8alxuje65k] {
        font-size: var(--font-size-3xl);
        font-weight: 800;
        margin: var(--space-2) 0;
        line-height: 1;
    }

    .stat-card .stat-label[b-8alxuje65k] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--color-text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .stat-card.total[b-8alxuje65k]::before {
        color: var(--color-primary);
    }

    .stat-card.active[b-8alxuje65k]::before {
        color: var(--color-success);
    }

    .stat-card.inactive[b-8alxuje65k]::before {
        color: var(--color-danger);
    }

    .stat-card.total .stat-value[b-8alxuje65k] {
        color: var(--color-primary);
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-card.active .stat-value[b-8alxuje65k] {
        color: var(--color-success);
        background: linear-gradient(135deg, var(--color-success), #2ecc71);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-card.inactive .stat-value[b-8alxuje65k] {
        color: var(--color-danger);
        background: linear-gradient(135deg, var(--color-danger), #e74c3c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/* Cards Container */
.accessories-grid-container[b-8alxuje65k] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-light);
    margin-top: var(--space-4);
    overflow: hidden;
}

.grid-header[b-8alxuje65k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-light);
}

.results-count[b-8alxuje65k] {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

    .results-count strong[b-8alxuje65k] {
        color: var(--color-text-primary);
        font-weight: 600;
    }

/* Cards Grid */
.accessories-grid[b-8alxuje65k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-6);
    padding: var(--space-6);
}

.accessory-card[b-8alxuje65k] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

    .accessory-card[b-8alxuje65k]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
        opacity: 0;
        transition: opacity var(--transition-fast);
    }

    .accessory-card:hover[b-8alxuje65k] {
        transform: translateY(-8px);
        box-shadow: var(--shadow-xl);
        border-color: var(--color-primary);
    }

        .accessory-card:hover[b-8alxuje65k]::before {
            opacity: 1;
        }

    .accessory-card.inactive[b-8alxuje65k] {
        border-color: var(--color-border-medium);
        background: linear-gradient(135deg, rgba(231, 76, 60, 0.03), var(--color-bg-surface));
    }

        .accessory-card.inactive[b-8alxuje65k]::before {
            background: var(--color-danger);
        }

/* Card Header */
.card-header[b-8alxuje65k] {
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    background: linear-gradient(135deg, rgba(67, 97, 238, 0.04) 0%, transparent 100%);
}

.accessory-name[b-8alxuje65k] {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

    .accessory-name i[b-8alxuje65k] {
        color: var(--color-primary);
        font-size: var(--font-size-base);
    }

/* Status Badge */
.status-badge[b-8alxuje65k] {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-sm);
}

    .status-badge.active[b-8alxuje65k] {
        background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(46, 204, 113, 0.25));
        color: var(--color-success);
        border: 1px solid rgba(46, 204, 113, 0.3);
    }

    .status-badge.inactive[b-8alxuje65k] {
        background: linear-gradient(135deg, rgba(231, 76, 60, 0.15), rgba(231, 76, 60, 0.25));
        color: var(--color-danger);
        border: 1px solid rgba(231, 76, 60, 0.3);
    }

/* Card Content */
.card-content[b-8alxuje65k] {
    padding: var(--space-6);
    flex: 1;
}

.detail-row[b-8alxuje65k] {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
}

    .detail-row:last-child[b-8alxuje65k] {
        border-bottom: none;
    }

    .detail-row i[b-8alxuje65k] {
        color: var(--color-primary);
        font-size: var(--font-size-base);
        text-align: center;
    }

.detail-label[b-8alxuje65k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.label[b-8alxuje65k] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.value[b-8alxuje65k] {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

.detail-row.warning i[b-8alxuje65k] {
    color: var(--color-warning);
}

.detail-row.warning .value[b-8alxuje65k] {
    color: var(--color-warning);
}

/* Card Actions */
.card-actions[b-8alxuje65k] {
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-secondary);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* Buttons */
.btn[b-8alxuje65k] {
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 2px solid transparent;
    transition: all var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

    .btn[b-8alxuje65k]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .btn:hover[b-8alxuje65k]::before {
        width: 300px;
        height: 300px;
    }

.btn-primary[b-8alxuje65k] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

    .btn-primary:hover:not(:disabled)[b-8alxuje65k] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
    }

.btn-outline[b-8alxuje65k] {
    background: transparent;
    border-color: var(--color-border-medium);
    color: var(--color-text-secondary);
}

    .btn-outline:hover:not(:disabled)[b-8alxuje65k] {
        background: var(--color-bg-tertiary);
        border-color: var(--color-border-medium);
        color: var(--color-text-primary);
        transform: translateY(-2px);
    }

.btn-danger[b-8alxuje65k] {
    background: linear-gradient(135deg, var(--color-danger), #e74c3c);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

    .btn-danger:hover:not(:disabled)[b-8alxuje65k] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
    }

.btn-success[b-8alxuje65k] {
    background: linear-gradient(135deg, var(--color-success), #2ecc71);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

    .btn-success:hover:not(:disabled)[b-8alxuje65k] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
    }

.btn-secondary[b-8alxuje65k] {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border-medium);
}

    .btn-secondary:hover:not(:disabled)[b-8alxuje65k] {
        background: var(--color-bg-tertiary);
        color: var(--color-text-primary);
    }

.btn-sm[b-8alxuje65k] {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
}

/* Search */
.search-container[b-8alxuje65k] {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.search-input[b-8alxuje65k] {
    border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-6) var(--space-3) var(--space-12);
    border: 2px solid var(--color-border-medium);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text-primary);
    backdrop-filter: blur(10px);
}

    .search-input:focus[b-8alxuje65k] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15);
        background: var(--color-bg-surface);
    }

.search-icon[b-8alxuje65k] {
    position: absolute;
    left: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    z-index: 2;
}

.clear-search[b-8alxuje65k] {
    position: absolute;
    right: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    z-index: 2;
}

    .clear-search:hover[b-8alxuje65k] {
        background: var(--color-bg-tertiary);
        color: var(--color-danger);
    }

/* Loading Skeletons */
.skeleton[b-8alxuje65k] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-8alxuje65k 1.5s infinite;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

@keyframes shimmer-b-8alxuje65k {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.skeleton-text[b-8alxuje65k] {
    height: var(--space-4);
    margin-bottom: var(--space-3);
}

.skeleton-btn[b-8alxuje65k] {
    width: 80px;
    height: 38px;
    border-radius: var(--radius-md);
}

/* Empty State */
.empty-state[b-8alxuje65k] {
    padding: var(--space-16) var(--space-8);
    text-align: center;
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    border: 2px dashed var(--color-border-light);
    margin: var(--space-8) 0;
}

.empty-icon[b-8alxuje65k] {
    font-size: var(--font-size-4xl);
    color: var(--color-border-medium);
    margin-bottom: var(--space-6);
    opacity: 0.5;
}

.empty-state h3[b-8alxuje65k] {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.empty-state p[b-8alxuje65k] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-6);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Header Actions */
.header-actions[b-8alxuje65k] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.header-actions-container[b-8alxuje65k] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .accessories-grid[b-8alxuje65k] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .accessories-container[b-8alxuje65k] {
        padding: var(--space-4);
    }

    .accessories-header[b-8alxuje65k] {
        padding: var(--space-6);
    }

    .page-title[b-8alxuje65k] {
        font-size: var(--font-size-2xl);
    }

    .stats-overview[b-8alxuje65k] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .header-actions-container[b-8alxuje65k] {
        flex-direction: column;
        gap: var(--space-4);
        width: 100%;
    }

    .search-container[b-8alxuje65k] {
        max-width: 100%;
    }

    .header-actions[b-8alxuje65k] {
        width: 100%;
        justify-content: space-between;
    }

    .accessories-grid[b-8alxuje65k] {
        padding: var(--space-4);
        gap: var(--space-4);
    }

    .card-header[b-8alxuje65k],
    .card-content[b-8alxuje65k],
    .card-actions[b-8alxuje65k] {
        padding: var(--space-4);
    }
}

@media (max-width: 480px) {
    .stats-overview[b-8alxuje65k] {
        grid-template-columns: 1fr;
    }

    .accessories-grid[b-8alxuje65k] {
        grid-template-columns: 1fr;
    }

    .btn span:not(.sr-only)[b-8alxuje65k] {
        display: none;
    }

    .btn i[b-8alxuje65k] {
        margin-right: 0;
    }

    .card-actions[b-8alxuje65k] {
        flex-direction: column;
    }

    .btn[b-8alxuje65k] {
        width: 100%;
        justify-content: center;
    }
}

/* Animations */
@keyframes fadeInUp-b-8alxuje65k {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.accessory-card[b-8alxuje65k] {
    animation: fadeInUp-b-8alxuje65k 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
}

    .accessory-card:nth-child(1)[b-8alxuje65k] {
        animation-delay: 0.1s;
    }

    .accessory-card:nth-child(2)[b-8alxuje65k] {
        animation-delay: 0.2s;
    }

    .accessory-card:nth-child(3)[b-8alxuje65k] {
        animation-delay: 0.3s;
    }

    .accessory-card:nth-child(4)[b-8alxuje65k] {
        animation-delay: 0.4s;
    }

    .accessory-card:nth-child(5)[b-8alxuje65k] {
        animation-delay: 0.5s;
    }

    .accessory-card:nth-child(6)[b-8alxuje65k] {
        animation-delay: 0.6s;
    }

    .accessory-card:nth-child(7)[b-8alxuje65k] {
        animation-delay: 0.7s;
    }

    .accessory-card:nth-child(8)[b-8alxuje65k] {
        animation-delay: 0.8s;
    }

/* Text Utilities */
.text-muted[b-8alxuje65k] {
    color: var(--color-text-tertiary) !important;
}

/* Focus States */
:focus-visible[b-8alxuje65k] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Print Styles */
@media print {
    .accessories-header[b-8alxuje65k],
    .header-actions[b-8alxuje65k],
    .card-actions[b-8alxuje65k],
    .search-container[b-8alxuje65k] {
        display: none;
    }

    .accessories-container[b-8alxuje65k] {
        padding: 0;
        background: white;
    }

    .accessory-card[b-8alxuje65k] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/DeviceTypesComponents/UpsertDeviceTypeComponent.razor.rz.scp.css */
/* Device Type Form Styles - Premium Design */

.accessories-container[b-zj0p2epncp] {
    padding: var(--space-8);
    max-width: 800px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-card[b-zj0p2epncp] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    width: 100%;
    animation: slideInUp-b-zj0p2epncp var(--transition-slow) ease-out;
}

.form-card-header[b-zj0p2epncp] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-8) var(--space-8);
    color: var(--color-text-inverse);
    position: relative;
    overflow: hidden;
}

    .form-card-header[b-zj0p2epncp]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    }

.form-header-content[b-zj0p2epncp] {
    position: relative;
    z-index: 1;
    text-align: center;
}

.form-header-icon[b-zj0p2epncp] {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-4);
    opacity: 0.9;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.form-title[b-zj0p2epncp] {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0 0 var(--space-2) 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.form-subtitle[b-zj0p2epncp] {
    font-size: var(--font-size-sm);
    opacity: 0.9;
    margin: 0;
    max-width: 500px;
    margin: 0 auto;
}

.form-card-body[b-zj0p2epncp] {
    padding: var(--space-8);
}

.form-alerts[b-zj0p2epncp] {
    margin-bottom: var(--space-6);
}

.alert[b-zj0p2epncp] {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    border-left: 4px solid;
    animation: slideInRight-b-zj0p2epncp var(--transition-normal) ease-out;
}

.alert-danger[b-zj0p2epncp] {
    background: rgba(231, 76, 60, 0.1);
    border-left-color: var(--color-danger);
    color: var(--color-danger);
}

.alert i[b-zj0p2epncp] {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.alert span[b-zj0p2epncp] {
    flex: 1;
    line-height: 1.5;
}

.form-grid[b-zj0p2epncp] {
    display: grid;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.form-group[b-zj0p2epncp] {
    position: relative;
}

.form-label[b-zj0p2epncp] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .form-label i[b-zj0p2epncp] {
        color: var(--color-primary);
        font-size: var(--font-size-base);
    }

.required-indicator[b-zj0p2epncp] {
    color: var(--color-danger);
    margin-left: var(--space-1);
}

.input-with-validation[b-zj0p2epncp] {
    position: relative;
}

.form-input[b-zj0p2epncp] {
    width: 100%;
    padding: var(--space-4) var(--space-6) var(--space-4) var(--space-12);
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-family: var(--font-family-sans);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

    .form-input:focus[b-zj0p2epncp] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15);
        background: var(--color-bg-surface);
    }

    .form-input[b-zj0p2epncp]::placeholder {
        color: var(--color-text-tertiary);
        opacity: 0.7;
    }

.input-icon[b-zj0p2epncp] {
    position: absolute;
    left: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    pointer-events: none;
    transition: color var(--transition-fast);
}

.form-input:focus + .input-icon[b-zj0p2epncp] {
    color: var(--color-primary);
}

.validation-message[b-zj0p2epncp] {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-danger);
    font-weight: 500;
    animation: fadeIn-b-zj0p2epncp var(--transition-fast) ease-out;
}

.form-hint[b-zj0p2epncp] {
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    line-height: 1.5;
}

.form-actions[b-zj0p2epncp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
}

.btn[b-zj0p2epncp] {
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    min-height: 44px;
}

.btn-primary[b-zj0p2epncp] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

    .btn-primary:hover:not(:disabled)[b-zj0p2epncp] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
    }

    .btn-primary:disabled[b-zj0p2epncp] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
    }

.btn-secondary[b-zj0p2epncp] {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border-medium);
}

    .btn-secondary:hover[b-zj0p2epncp] {
        background: var(--color-bg-tertiary);
        color: var(--color-text-primary);
        border-color: var(--color-border-heavy);
    }

.btn i[b-zj0p2epncp] {
    font-size: var(--font-size-base);
}

.loading-overlay[b-zj0p2epncp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
}

.loading-container[b-zj0p2epncp] {
    text-align: center;
    animation: fadeIn-b-zj0p2epncp var(--transition-normal) ease-out;
}

.loading-spinner[b-zj0p2epncp] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--color-border-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-zj0p2epncp 1s linear infinite;
    margin: 0 auto var(--space-4);
}

.loading-text[b-zj0p2epncp] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
    animation: pulse-b-zj0p2epncp 2s infinite;
}

.spinner-border-sm[b-zj0p2epncp] {
    width: 16px;
    height: 16px;
    border-width: 2px;
    margin-right: var(--space-3);
}

/* Animations */
@keyframes slideInUp-b-zj0p2epncp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight-b-zj0p2epncp {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn-b-zj0p2epncp {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

@keyframes pulse-b-zj0p2epncp {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .accessories-container[b-zj0p2epncp] {
        padding: var(--space-4);
    }

    .form-card-header[b-zj0p2epncp] {
        padding: var(--space-6);
    }

    .form-card-body[b-zj0p2epncp] {
        padding: var(--space-6);
    }

    .form-grid[b-zj0p2epncp] {
        gap: var(--space-6);
    }

    .form-title[b-zj0p2epncp] {
        font-size: var(--font-size-xl);
    }

    .form-actions[b-zj0p2epncp] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .btn[b-zj0p2epncp] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .form-input[b-zj0p2epncp] {
        padding-left: var(--space-10);
    }

    .input-icon[b-zj0p2epncp] {
        left: var(--space-4);
    }
}

/* Focus Accessibility */
:focus-visible[b-zj0p2epncp] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Print Styles */
@media print {
    .form-actions[b-zj0p2epncp],
    .loading-overlay[b-zj0p2epncp] {
        display: none;
    }

    .form-card[b-zj0p2epncp] {
        box-shadow: none;
        border: 1px solid var(--color-border-medium);
    }

    .form-card-header[b-zj0p2epncp] {
        background: none;
        color: var(--color-text-primary);
    }
}
/* /Components/Pages/LocationComponents/LocationComponent.razor.rz.scp.css */
/* Locations Styles - Using Design System Variables */

.accessories-container[b-rohp2mrd4q] {
    padding: var(--space-6);
    max-width: var(--max-content-width);
    margin: 0 auto;
    background: var(--color-bg-primary);
    min-height: 100vh;
}

.accessories-header[b-rohp2mrd4q] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-8);
    color: var(--color-text-inverse);
    position: relative;
    overflow: hidden;
}

    .accessories-header[b-rohp2mrd4q]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    }

.page-icon[b-rohp2mrd4q] {
    font-size: var(--font-size-3xl);
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.page-title[b-rohp2mrd4q] {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-text-inverse);
    margin: 0 0 var(--space-2) 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Stats Overview */
.stats-overview[b-rohp2mrd4q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.stat-card[b-rohp2mrd4q] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-rohp2mrd4q]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: currentColor;
        opacity: 0.15;
    }

    .stat-card:hover[b-rohp2mrd4q] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

    .stat-card .stat-value[b-rohp2mrd4q] {
        font-size: var(--font-size-3xl);
        font-weight: 800;
        margin: var(--space-2) 0;
        line-height: 1;
    }

    .stat-card .stat-label[b-rohp2mrd4q] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--color-text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .stat-card.total[b-rohp2mrd4q]::before {
        color: var(--color-primary);
    }

    .stat-card.active[b-rohp2mrd4q]::before {
        color: var(--color-success);
    }

    .stat-card.inactive[b-rohp2mrd4q]::before {
        color: var(--color-danger);
    }

    .stat-card.total .stat-value[b-rohp2mrd4q] {
        color: var(--color-primary);
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-card.active .stat-value[b-rohp2mrd4q] {
        color: var(--color-success);
        background: linear-gradient(135deg, var(--color-success), #2ecc71);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-card.inactive .stat-value[b-rohp2mrd4q] {
        color: var(--color-danger);
        background: linear-gradient(135deg, var(--color-danger), #e74c3c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/* Cards Container */
.accessories-grid-container[b-rohp2mrd4q] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-light);
    margin-top: var(--space-4);
    overflow: hidden;
}

.grid-header[b-rohp2mrd4q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-light);
}

.results-count[b-rohp2mrd4q] {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

    .results-count strong[b-rohp2mrd4q] {
        color: var(--color-text-primary);
        font-weight: 600;
    }

/* Cards Grid */
.accessories-grid[b-rohp2mrd4q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-6);
    padding: var(--space-6);
}

.accessory-card[b-rohp2mrd4q] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

    .accessory-card[b-rohp2mrd4q]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
        opacity: 0;
        transition: opacity var(--transition-fast);
    }

    .accessory-card:hover[b-rohp2mrd4q] {
        transform: translateY(-8px);
        box-shadow: var(--shadow-xl);
        border-color: var(--color-primary);
    }

        .accessory-card:hover[b-rohp2mrd4q]::before {
            opacity: 1;
        }

    .accessory-card.inactive[b-rohp2mrd4q] {
        border-color: var(--color-border-medium);
        background: linear-gradient(135deg, rgba(231, 76, 60, 0.03), var(--color-bg-surface));
    }

        .accessory-card.inactive[b-rohp2mrd4q]::before {
            background: var(--color-danger);
        }

/* Card Header */
.card-header[b-rohp2mrd4q] {
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    background: linear-gradient(135deg, rgba(67, 97, 238, 0.04) 0%, transparent 100%);
}

.accessory-name[b-rohp2mrd4q] {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

    .accessory-name i[b-rohp2mrd4q] {
        color: var(--color-primary);
        font-size: var(--font-size-base);
    }

/* Status Badge */
.status-badge[b-rohp2mrd4q] {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-sm);
}

    .status-badge.active[b-rohp2mrd4q] {
        background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(46, 204, 113, 0.25));
        color: var(--color-success);
        border: 1px solid rgba(46, 204, 113, 0.3);
    }

    .status-badge.inactive[b-rohp2mrd4q] {
        background: linear-gradient(135deg, rgba(231, 76, 60, 0.15), rgba(231, 76, 60, 0.25));
        color: var(--color-danger);
        border: 1px solid rgba(231, 76, 60, 0.3);
    }

/* Card Content */
.card-content[b-rohp2mrd4q] {
    padding: var(--space-6);
    flex: 1;
}

.detail-row[b-rohp2mrd4q] {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
}

    .detail-row:last-child[b-rohp2mrd4q] {
        border-bottom: none;
    }

    .detail-row i[b-rohp2mrd4q] {
        color: var(--color-primary);
        font-size: var(--font-size-base);
        text-align: center;
    }

.detail-label[b-rohp2mrd4q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.label[b-rohp2mrd4q] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.value[b-rohp2mrd4q] {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

.detail-row.warning i[b-rohp2mrd4q] {
    color: var(--color-warning);
}

.detail-row.warning .value[b-rohp2mrd4q] {
    color: var(--color-warning);
}

/* Card Actions */
.card-actions[b-rohp2mrd4q] {
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-secondary);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* Buttons */
.btn[b-rohp2mrd4q] {
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 2px solid transparent;
    transition: all var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

    .btn[b-rohp2mrd4q]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .btn:hover[b-rohp2mrd4q]::before {
        width: 300px;
        height: 300px;
    }

.btn-primary[b-rohp2mrd4q] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

    .btn-primary:hover:not(:disabled)[b-rohp2mrd4q] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
    }

.btn-outline[b-rohp2mrd4q] {
    background: transparent;
    border-color: var(--color-border-medium);
    color: var(--color-text-secondary);
}

    .btn-outline:hover:not(:disabled)[b-rohp2mrd4q] {
        background: var(--color-bg-tertiary);
        border-color: var(--color-border-medium);
        color: var(--color-text-primary);
        transform: translateY(-2px);
    }

.btn-danger[b-rohp2mrd4q] {
    background: linear-gradient(135deg, var(--color-danger), #e74c3c);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

    .btn-danger:hover:not(:disabled)[b-rohp2mrd4q] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
    }

.btn-success[b-rohp2mrd4q] {
    background: linear-gradient(135deg, var(--color-success), #2ecc71);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

    .btn-success:hover:not(:disabled)[b-rohp2mrd4q] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
    }

.btn-secondary[b-rohp2mrd4q] {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border-medium);
}

    .btn-secondary:hover:not(:disabled)[b-rohp2mrd4q] {
        background: var(--color-bg-tertiary);
        color: var(--color-text-primary);
    }

.btn-sm[b-rohp2mrd4q] {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
}

/* Search */
.search-container[b-rohp2mrd4q] {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.search-input[b-rohp2mrd4q] {
    border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-6) var(--space-3) var(--space-12);
    border: 2px solid var(--color-border-medium);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text-primary);
    backdrop-filter: blur(10px);
}

    .search-input:focus[b-rohp2mrd4q] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15);
        background: var(--color-bg-surface);
    }

.search-icon[b-rohp2mrd4q] {
    position: absolute;
    left: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    z-index: 2;
}

.clear-search[b-rohp2mrd4q] {
    position: absolute;
    right: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    z-index: 2;
}

    .clear-search:hover[b-rohp2mrd4q] {
        background: var(--color-bg-tertiary);
        color: var(--color-danger);
    }

/* Loading Skeletons */
.skeleton[b-rohp2mrd4q] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-rohp2mrd4q 1.5s infinite;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

@keyframes shimmer-b-rohp2mrd4q {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.skeleton-text[b-rohp2mrd4q] {
    height: var(--space-4);
    margin-bottom: var(--space-3);
}

.skeleton-btn[b-rohp2mrd4q] {
    width: 80px;
    height: 38px;
    border-radius: var(--radius-md);
}

/* Empty State */
.empty-state[b-rohp2mrd4q] {
    padding: var(--space-16) var(--space-8);
    text-align: center;
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    border: 2px dashed var(--color-border-light);
    margin: var(--space-8) 0;
}

.empty-icon[b-rohp2mrd4q] {
    font-size: var(--font-size-4xl);
    color: var(--color-border-medium);
    margin-bottom: var(--space-6);
    opacity: 0.5;
}

.empty-state h3[b-rohp2mrd4q] {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.empty-state p[b-rohp2mrd4q] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-6);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Header Actions */
.header-actions[b-rohp2mrd4q] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.header-actions-container[b-rohp2mrd4q] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .accessories-grid[b-rohp2mrd4q] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .accessories-container[b-rohp2mrd4q] {
        padding: var(--space-4);
    }

    .accessories-header[b-rohp2mrd4q] {
        padding: var(--space-6);
    }

    .page-title[b-rohp2mrd4q] {
        font-size: var(--font-size-2xl);
    }

    .stats-overview[b-rohp2mrd4q] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .header-actions-container[b-rohp2mrd4q] {
        flex-direction: column;
        gap: var(--space-4);
        width: 100%;
    }

    .search-container[b-rohp2mrd4q] {
        max-width: 100%;
    }

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

    .accessories-grid[b-rohp2mrd4q] {
        padding: var(--space-4);
        gap: var(--space-4);
    }

    .card-header[b-rohp2mrd4q],
    .card-content[b-rohp2mrd4q],
    .card-actions[b-rohp2mrd4q] {
        padding: var(--space-4);
    }
}

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

    .accessories-grid[b-rohp2mrd4q] {
        grid-template-columns: 1fr;
    }

    .btn span:not(.sr-only)[b-rohp2mrd4q] {
        display: none;
    }

    .btn i[b-rohp2mrd4q] {
        margin-right: 0;
    }

    .card-actions[b-rohp2mrd4q] {
        flex-direction: column;
    }

    .btn[b-rohp2mrd4q] {
        width: 100%;
        justify-content: center;
    }
}

/* Animations */
@keyframes fadeInUp-b-rohp2mrd4q {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.accessory-card[b-rohp2mrd4q] {
    animation: fadeInUp-b-rohp2mrd4q 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
}

    .accessory-card:nth-child(1)[b-rohp2mrd4q] {
        animation-delay: 0.1s;
    }

    .accessory-card:nth-child(2)[b-rohp2mrd4q] {
        animation-delay: 0.2s;
    }

    .accessory-card:nth-child(3)[b-rohp2mrd4q] {
        animation-delay: 0.3s;
    }

    .accessory-card:nth-child(4)[b-rohp2mrd4q] {
        animation-delay: 0.4s;
    }

    .accessory-card:nth-child(5)[b-rohp2mrd4q] {
        animation-delay: 0.5s;
    }

    .accessory-card:nth-child(6)[b-rohp2mrd4q] {
        animation-delay: 0.6s;
    }

    .accessory-card:nth-child(7)[b-rohp2mrd4q] {
        animation-delay: 0.7s;
    }

    .accessory-card:nth-child(8)[b-rohp2mrd4q] {
        animation-delay: 0.8s;
    }

/* Text Utilities */
.text-muted[b-rohp2mrd4q] {
    color: var(--color-text-tertiary) !important;
}

/* Focus States */
:focus-visible[b-rohp2mrd4q] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Print Styles */
@media print {
    .accessories-header[b-rohp2mrd4q],
    .header-actions[b-rohp2mrd4q],
    .card-actions[b-rohp2mrd4q],
    .search-container[b-rohp2mrd4q] {
        display: none;
    }

    .accessories-container[b-rohp2mrd4q] {
        padding: 0;
        background: white;
    }

    .accessory-card[b-rohp2mrd4q] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/LocationComponents/UpsertLocationComponent.razor.rz.scp.css */
/* Location Form Styles - Premium Design */

.accessories-container[b-s2qfno2irh] {
    padding: var(--space-8);
    max-width: 800px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-card[b-s2qfno2irh] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    width: 100%;
    animation: slideInUp-b-s2qfno2irh var(--transition-slow) ease-out;
}

.form-card-header[b-s2qfno2irh] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-8) var(--space-8);
    color: var(--color-text-inverse);
    position: relative;
    overflow: hidden;
}

    .form-card-header[b-s2qfno2irh]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    }

.form-header-content[b-s2qfno2irh] {
    position: relative;
    z-index: 1;
    text-align: center;
}


.form-header-icon[b-s2qfno2irh] {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-4);
    opacity: 0.9;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.form-title[b-s2qfno2irh] {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0 0 var(--space-2) 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.form-subtitle[b-s2qfno2irh] {
    font-size: var(--font-size-sm);
    opacity: 0.9;
    margin: 0;
    max-width: 500px;
    margin: 0 auto;
}

.form-card-body[b-s2qfno2irh] {
    padding: var(--space-8);
}

.form-alerts[b-s2qfno2irh] {
    margin-bottom: var(--space-6);
}

.alert[b-s2qfno2irh] {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    border-left: 4px solid;
    animation: slideInRight-b-s2qfno2irh var(--transition-normal) ease-out;
}

.alert-danger[b-s2qfno2irh] {
    background: rgba(231, 76, 60, 0.1);
    border-left-color: var(--color-danger);
    color: var(--color-danger);
}

.alert i[b-s2qfno2irh] {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.alert span[b-s2qfno2irh] {
    flex: 1;
    line-height: 1.5;
}

.form-grid[b-s2qfno2irh] {
    display: grid;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.form-group[b-s2qfno2irh] {
    position: relative;
}

.form-label[b-s2qfno2irh] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .form-label i[b-s2qfno2irh] {
        color: var(--color-primary);
        font-size: var(--font-size-base);
    }

.required-indicator[b-s2qfno2irh] {
    color: var(--color-danger);
    margin-left: var(--space-1);
}

.input-with-validation[b-s2qfno2irh] {
    position: relative;
}

.form-input[b-s2qfno2irh] {
    width: 100%;
    padding: var(--space-4) var(--space-6) var(--space-4) var(--space-12);
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-family: var(--font-family-sans);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

    .form-input:focus[b-s2qfno2irh] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15);
        background: var(--color-bg-surface);
    }

    .form-input:disabled[b-s2qfno2irh] {
        background: var(--color-bg-secondary);
        color: var(--color-text-tertiary);
        cursor: not-allowed;
        border-color: var(--color-border-light);
    }

    .form-input[b-s2qfno2irh]::placeholder {
        color: var(--color-text-tertiary);
        opacity: 0.7;
    }

.input-icon[b-s2qfno2irh] {
    position: absolute;
    left: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    pointer-events: none;
    transition: color var(--transition-fast);
}

.form-input:focus + .input-icon[b-s2qfno2irh] {
    color: var(--color-primary);
}

.form-input:disabled + .input-icon[b-s2qfno2irh] {
    color: var(--color-text-tertiary);
}

.validation-message[b-s2qfno2irh] {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-danger);
    font-weight: 500;
    animation: fadeIn-b-s2qfno2irh var(--transition-fast) ease-out;
}

.form-hint[b-s2qfno2irh] {
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    line-height: 1.5;
}

.text-warning[b-s2qfno2irh] {
    color: var(--color-warning) !important;
    font-weight: 500;
}

.form-actions[b-s2qfno2irh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
}

.btn[b-s2qfno2irh] {
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    min-height: 44px;
}

.btn-primary[b-s2qfno2irh] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

    .btn-primary:hover:not(:disabled)[b-s2qfno2irh] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
    }

    .btn-primary:disabled[b-s2qfno2irh] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
    }

.btn-secondary[b-s2qfno2irh] {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border-medium);
}

    .btn-secondary:hover[b-s2qfno2irh] {
        background: var(--color-bg-tertiary);
        color: var(--color-text-primary);
        border-color: var(--color-border-heavy);
    }

.btn i[b-s2qfno2irh] {
    font-size: var(--font-size-base);
}

.loading-overlay[b-s2qfno2irh] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
}

.loading-container[b-s2qfno2irh] {
    text-align: center;
    animation: fadeIn-b-s2qfno2irh var(--transition-normal) ease-out;
}

.loading-spinner[b-s2qfno2irh] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--color-border-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-s2qfno2irh 1s linear infinite;
    margin: 0 auto var(--space-4);
}

.loading-text[b-s2qfno2irh] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
    animation: pulse-b-s2qfno2irh 2s infinite;
}

.spinner-border-sm[b-s2qfno2irh] {
    width: 16px;
    height: 16px;
    border-width: 2px;
    margin-right: var(--space-3);
}

/* Animations */
@keyframes slideInUp-b-s2qfno2irh {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight-b-s2qfno2irh {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn-b-s2qfno2irh {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

@keyframes pulse-b-s2qfno2irh {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .accessories-container[b-s2qfno2irh] {
        padding: var(--space-4);
    }

    .form-card-header[b-s2qfno2irh] {
        padding: var(--space-6);
    }

    .form-card-body[b-s2qfno2irh] {
        padding: var(--space-6);
    }

    .form-grid[b-s2qfno2irh] {
        gap: var(--space-6);
    }

    .form-title[b-s2qfno2irh] {
        font-size: var(--font-size-xl);
    }

    .form-actions[b-s2qfno2irh] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .btn[b-s2qfno2irh] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .form-input[b-s2qfno2irh] {
        padding-left: var(--space-10);
    }

    .input-icon[b-s2qfno2irh] {
        left: var(--space-4);
    }
}

/* Focus Accessibility */
:focus-visible[b-s2qfno2irh] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Print Styles */
@media print {
    .form-actions[b-s2qfno2irh],
    .loading-overlay[b-s2qfno2irh] {
        display: none;
    }

    .form-card[b-s2qfno2irh] {
        box-shadow: none;
        border: 1px solid var(--color-border-medium);
    }

    .form-card-header[b-s2qfno2irh] {
        background: none;
        color: var(--color-text-primary);
    }
}
/* /Components/Pages/MaintainanceComponents/DeviceMaintenance.razor.rz.scp.css */
/* Modern Dashboard Layout - Enhanced with Variables */
.enhanced-device-maintenance[b-ap38jda34x] {
    padding: var(--space-6);
    animation: fadeIn-b-ap38jda34x var(--transition-slow);
}

@keyframes fadeIn-b-ap38jda34x {
    from {
        opacity: 0;
        transform: translateY(var(--space-4));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Dashboard Header */
.dashboard-header[b-ap38jda34x] {
    background: linear-gradient( 135deg, var(--color-primary) 0%, var(--color-primary-dark) 100% );
    color: var(--color-white);
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

    .dashboard-header[b-ap38jda34x]::before {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient( 90deg, var(--color-primary-light), var(--color-secondary-light) );
    }

.header-content[b-ap38jda34x] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-8);
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

@media (max-width: 1200px) {
    .header-content[b-ap38jda34x] {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

.title-section[b-ap38jda34x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.main-title[b-ap38jda34x] {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.title-icon[b-ap38jda34x] {
    font-size: var(--font-size-2xl);
    background: rgba(255, 255, 255, 0.2);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
}

.subtitle[b-ap38jda34x] {
    margin: 0;
    opacity: 0.9;
    font-size: var(--font-size-base);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
}

/* Enhanced Statistics Overview */
.stats-overview[b-ap38jda34x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}

.stat-card[b-ap38jda34x] {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    transition: all var(--transition-normal);
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .stat-card[b-ap38jda34x]::before {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient( 135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100% );
        opacity: 0;
        transition: opacity var(--transition-normal);
    }

    .stat-card:hover[b-ap38jda34x] {
        transform: translateY(-4px);
        background: rgba(255, 255, 255, 0.18);
        box-shadow: var(--shadow-lg);
        border-color: rgba(255, 255, 255, 0.25);
    }

        .stat-card:hover[b-ap38jda34x]::before {
            opacity: 1;
        }

.stat-icon[b-ap38jda34x] {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    color: var(--color-white);
    position: relative;
    transition: all var(--transition-normal);
    flex-shrink: 0;
}

.stat-card:hover .stat-icon[b-ap38jda34x] {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.stat-icon.in-progress[b-ap38jda34x] {
    background: linear-gradient(135deg, var(--color-warning), #ff9800);
}

.stat-icon.waiting[b-ap38jda34x] {
    background: linear-gradient(135deg, var(--color-danger), #f44336);
}

.stat-icon.completed[b-ap38jda34x] {
    background: linear-gradient(135deg, var(--color-success), #4caf50);
}

.stat-icon.ready[b-ap38jda34x] {
    background: linear-gradient(135deg, var(--color-info), #2196f3);
}

.stat-info[b-ap38jda34x] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.stat-number[b-ap38jda34x] {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--color-white);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-1);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.stat-label[b-ap38jda34x] {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Enhanced Filters Section */
.enhanced-filters[b-ap38jda34x] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border-light);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.filters-header[b-ap38jda34x] {
    padding: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border-light);
    transition: background-color var(--transition-fast);
}

    .filters-header:hover[b-ap38jda34x] {
        background: var(--color-gray-100);
    }

[data-theme="dark"] .filters-header:hover[b-ap38jda34x] {
    background: var(--color-gray-800);
}

.filters-header h3[b-ap38jda34x] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.filter-toggle[b-ap38jda34x] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-medium);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all var(--transition-normal);
}

    .filter-toggle:hover[b-ap38jda34x] {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-white);
        transform: rotate(90deg);
    }

.filters-content[b-ap38jda34x] {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .filters-content.show[b-ap38jda34x] {
        padding: var(--space-6);
        max-height: 600px;
        overflow: visible;
    }

.filter-grid[b-ap38jda34x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.filter-group.enhanced[b-ap38jda34x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.filter-label[b-ap38jda34x] {
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

    .filter-label i[b-ap38jda34x] {
        color: var(--color-primary);
    }

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

.enhanced-search[b-ap38jda34x] {
    width: 100%;
    padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) * 3.5);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    transition: all var(--transition-normal);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-family: var(--font-family-sans);
}

    .enhanced-search:focus[b-ap38jda34x] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb, 67, 97, 238), 0.15);
        transform: translateY(-2px);
    }

.search-icon[b-ap38jda34x] {
    position: absolute;
    left: var(--space-4);
    color: var(--color-text-tertiary);
    pointer-events: none;
    transition: color var(--transition-fast);
}

.enhanced-search:focus + .search-icon[b-ap38jda34x] {
    color: var(--color-primary);
}

.enhanced-select[b-ap38jda34x] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-normal);
    font-family: var(--font-family-sans);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px;
    padding-right: var(--space-8);
}

    .enhanced-select:focus[b-ap38jda34x] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb, 67, 97, 238), 0.15);
        transform: translateY(-2px);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234361ee' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    }

.filter-actions[b-ap38jda34x] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-light);
}

/* Enhanced Button System */
.btn[b-ap38jda34x] {
    padding: var(--space-3) var(--space-8);
    border: none;
    border-radius: var(--radius-xl);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-family-sans);
    min-height: 44px;
}

    .btn[b-ap38jda34x]::before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .btn:hover[b-ap38jda34x]::before {
        width: 300px;
        height: 300px;
    }

    .btn i[b-ap38jda34x] {
        position: relative;
        z-index: 1;
    }

    .btn span[b-ap38jda34x] {
        position: relative;
        z-index: 1;
    }

.btn-primary[b-ap38jda34x] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-md);
}

    .btn-primary:hover[b-ap38jda34x] {
        background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
        transform: translateY(-2px) scale(1.02);
        box-shadow: var(--shadow-lg);
    }

.btn-secondary[b-ap38jda34x] {
    background: var(--color-gray-100);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-medium);
}

    .btn-secondary:hover[b-ap38jda34x] {
        background: var(--color-gray-200);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

[data-theme="dark"] .btn-secondary[b-ap38jda34x] {
    background: var(--color-gray-800);
    color: var(--color-text-secondary);
}

    [data-theme="dark"] .btn-secondary:hover[b-ap38jda34x] {
        background: var(--color-gray-700);
    }

.btn-tertiary[b-ap38jda34x] {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

    .btn-tertiary:hover[b-ap38jda34x] {
        background: var(--color-primary);
        color: var(--color-white);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

/* Action Buttons */
.btn-icon[b-ap38jda34x] {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-normal);
}

    .btn-icon:hover[b-ap38jda34x] {
        background: var(--color-primary);
        color: var(--color-white);
        transform: rotate(15deg);
    }

/* Enhanced Table Section */
.table-section[b-ap38jda34x] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border-light);
    overflow: hidden;
    transition: all var(--transition-normal);
}

    .table-section:hover[b-ap38jda34x] {
        box-shadow: var(--shadow-xl);
    }

.table-header[b-ap38jda34x] {
    padding: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border-light);
}

.table-info[b-ap38jda34x] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

    .table-info h3[b-ap38jda34x] {
        margin: 0;
        color: var(--color-text-primary);
        font-size: var(--font-size-xl);
        font-weight: 700;
    }

.record-count[b-ap38jda34x] {
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.table-actions[b-ap38jda34x] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* Enhanced Table Container */
.enhanced-table-container[b-ap38jda34x] {
    overflow-x: auto;
    padding: var(--space-1);
}

.enhanced-table[b-ap38jda34x] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1200px;
    font-family: var(--font-family-sans);
}

    .enhanced-table th[b-ap38jda34x] {
        background: var(--color-bg-secondary);
        padding: var(--space-4) var(--space-6);
        font-weight: 700;
        color: var(--color-text-secondary);
        border-bottom: 2px solid var(--color-border-light);
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        letter-spacing: 1px;
        white-space: nowrap;
        text-align: left;
        position: sticky;
        top: 0;
        z-index: 10;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

.sortable[b-ap38jda34x] {
    cursor: pointer;
    transition: all var(--transition-normal);
    user-select: none;
    position: relative;
}

    .sortable:hover[b-ap38jda34x] {
        background: var(--color-bg-tertiary);
        color: var(--color-primary);
    }

.th-content[b-ap38jda34x] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    justify-content: space-between;
}

.sort-indicators[b-ap38jda34x] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.sortable:hover .sort-indicators[b-ap38jda34x] {
    opacity: 1;
}

.sort-indicators i[b-ap38jda34x] {
    font-size: var(--font-size-xs);
    color: var(--color-border-medium);
    transition: all var(--transition-normal);
    line-height: 0.8;
}

    .sort-indicators i.active[b-ap38jda34x] {
        color: var(--color-primary);
    }

.enhanced-table td[b-ap38jda34x] {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
    transition: all var(--transition-fast);
    background: var(--color-bg-surface);
}

.table-row[b-ap38jda34x] {
    transition: all var(--transition-normal);
    cursor: pointer;
    position: relative;
}

    .table-row[b-ap38jda34x]::before {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: transparent;
        transition: background-color var(--transition-normal);
    }

    .table-row:hover[b-ap38jda34x] {
        background: var(--color-bg-tertiary);
    }

        .table-row:hover[b-ap38jda34x]::before {
            background: var(--color-primary);
        }

        .table-row:hover td[b-ap38jda34x] {
            transform: translateX(4px);
        }

    .table-row:last-child td[b-ap38jda34x] {
        border-bottom: none;
    }

/* Table Cell Styles - Enhanced */
.device-id[b-ap38jda34x] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 600;
    color: var(--color-text-primary);
}

.serial-number[b-ap38jda34x] {
    background: var(--color-gray-100);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    color: var(--color-danger);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-normal);
}

.table-row:hover .serial-number[b-ap38jda34x] {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* Enhanced Device Type Tags */
.type-tag[b-ap38jda34x] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
    transition: all var(--transition-normal);
}

.type-laptop[b-ap38jda34x] {
    background: rgba(var(--color-primary-rgb, 67, 97, 238), 0.1);
    color: var(--color-primary);
    border-color: rgba(var(--color-primary-rgb, 67, 97, 238), 0.2);
}

.type-desktop[b-ap38jda34x] {
    background: rgba(var(--color-secondary-rgb, 123, 31, 162), 0.1);
    color: var(--color-secondary);
    border-color: rgba(var(--color-secondary-rgb, 123, 31, 162), 0.2);
}

.type-server[b-ap38jda34x] {
    background: rgba(var(--color-warning-rgb, 243, 156, 18), 0.1);
    color: var(--color-warning);
    border-color: rgba(var(--color-warning-rgb, 243, 156, 18), 0.2);
}

.type-printer[b-ap38jda34x] {
    background: rgba(var(--color-success-rgb, 46, 204, 113), 0.1);
    color: var(--color-success);
    border-color: rgba(var(--color-success-rgb, 46, 204, 113), 0.2);
}

.type-monitor[b-ap38jda34x] {
    background: rgba(var(--color-info-rgb, 52, 152, 219), 0.1);
    color: var(--color-info);
    border-color: rgba(var(--color-info-rgb, 52, 152, 219), 0.2);
}

.type-unknown[b-ap38jda34x] {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    border-color: var(--color-gray-300);
}

.brand-badge[b-ap38jda34x] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: var(--color-white);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.table-row:hover .brand-badge[b-ap38jda34x] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Issue Description - Enhanced */
.issue-description[b-ap38jda34x] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    max-width: 300px;
    padding: var(--space-2) 0;
}

.issue-icon[b-ap38jda34x] {
    color: var(--color-warning);
    flex-shrink: 0;
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    transition: transform var(--transition-normal);
}

.table-row:hover .issue-icon[b-ap38jda34x] {
    transform: scale(1.2);
    color: var(--color-danger);
}

.issue-description span[b-ap38jda34x] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    transition: color var(--transition-fast);
}

.table-row:hover .issue-description span[b-ap38jda34x] {
    color: var(--color-text-secondary);
}

/* Enhanced Status Badges */
.status-container[b-ap38jda34x] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.status-pill[b-ap38jda34x] {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 2px solid transparent;
    transition: all var(--transition-normal);
    min-width: 140px;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

    .status-pill:hover[b-ap38jda34x] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.status-in-progress[b-ap38jda34x] {
    background: rgba(var(--color-warning-rgb, 243, 156, 18), 0.15);
    color: var(--color-warning);
    border-color: rgba(var(--color-warning-rgb, 243, 156, 18), 0.3);
}

.status-waiting-approval[b-ap38jda34x] {
    background: rgba(var(--color-danger-rgb, 231, 76, 60), 0.15);
    color: var(--color-danger);
    border-color: rgba(var(--color-danger-rgb, 231, 76, 60), 0.3);
}

.status-approved-out[b-ap38jda34x] {
    background: rgba(var(--color-info-rgb, 52, 152, 219), 0.15);
    color: var(--color-info);
    border-color: rgba(var(--color-info-rgb, 52, 152, 219), 0.3);
}

.status-ready-for-reclaim[b-ap38jda34x] {
    background: rgba(var(--color-success-rgb, 46, 204, 113), 0.15);
    color: var(--color-success);
    border-color: rgba(var(--color-success-rgb, 46, 204, 113), 0.3);
}

.status-reclaimed[b-ap38jda34x] {
    background: rgba(var(--color-secondary-rgb, 123, 31, 162), 0.15);
    color: var(--color-secondary);
    border-color: rgba(var(--color-secondary-rgb, 123, 31, 162), 0.3);
}

.status-completed[b-ap38jda34x] {
    background: rgba(var(--color-success-rgb, 46, 204, 113), 0.15);
    color: var(--color-success);
    border-color: rgba(var(--color-success-rgb, 46, 204, 113), 0.3);
}

.status-unknown[b-ap38jda34x] {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    border-color: var(--color-border-light);
}

.pulse-dot[b-ap38jda34x] {
    width: 10px;
    height: 10px;
    background: var(--color-warning);
    border-radius: 50%;
    animation: pulse-b-ap38jda34x 2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(var(--color-warning-rgb, 243, 156, 18), 0.7);
}

@keyframes pulse-b-ap38jda34x {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(var(--color-warning-rgb, 243, 156, 18), 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(var(--color-warning-rgb, 243, 156, 18), 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(var(--color-warning-rgb, 243, 156, 18), 0);
    }
}

/* Action Needed Badge - Enhanced */
.action-needed .action-badge[b-ap38jda34x] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    background: linear-gradient(135deg, rgba(var(--color-warning-rgb, 243, 156, 18), 0.15), rgba(var(--color-warning-rgb, 243, 156, 18), 0.1) );
    color: var(--color-warning);
    border: 2px solid rgba(var(--color-warning-rgb, 243, 156, 18), 0.2);
    transition: all var(--transition-normal);
}

.table-row:hover .action-badge[b-ap38jda34x] {
    transform: translateX(4px);
    border-color: var(--color-warning);
}

/* Enhanced Date Cell */
.date-cell[b-ap38jda34x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) 0;
}

.date[b-ap38jda34x] {
    font-weight: 700;
    color: var(--color-secondary-light) !important;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.table-row:hover .date[b-ap38jda34x] {
    color: var(--color-primary);
}

.time[b-ap38jda34x] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-family: var(--font-family-mono);
    transition: color var(--transition-fast);
}

.table-row:hover .time[b-ap38jda34x] {
    color: var(--color-text-secondary);
}

/* Enhanced Action Menu */
.action-menu[b-ap38jda34x] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

.action-btn[b-ap38jda34x] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: var(--font-size-base);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

    .action-btn[b-ap38jda34x]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        transition: width 0.3s, height 0.3s;
    }

    .action-btn:hover[b-ap38jda34x]::before {
        width: 120px;
        height: 120px;
    }

    .action-btn i[b-ap38jda34x] {
        position: relative;
        z-index: 2;
        transition: transform var(--transition-normal);
    }

    .action-btn:hover i[b-ap38jda34x] {
        transform: scale(1.2);
    }

    /* Specific Action Button Colors */
    .action-btn.approve[b-ap38jda34x] {
        background: linear-gradient(135deg, var(--color-info), #2980b9);
        color: var(--color-white);
    }

    .action-btn.reclaim[b-ap38jda34x] {
        background: linear-gradient(135deg, var(--color-success), #27ae60);
        color: var(--color-white);
    }

    .action-btn.approve-in[b-ap38jda34x] {
        background: linear-gradient(135deg, var(--color-secondary), #8e44ad);
        color: var(--color-white);
    }

    .action-btn.complete[b-ap38jda34x] {
        background: linear-gradient(135deg, #2ecc71, #27ae60);
        color: var(--color-white);
    }

    .action-btn.view[b-ap38jda34x] {
        background: linear-gradient(135deg, var(--color-gray-600), var(--color-gray-700));
        color: var(--color-white);
    }

    .action-btn.edit[b-ap38jda34x] {
        background: linear-gradient(135deg, var(--color-warning), #d35400);
        color: var(--color-white);
    }

    .action-btn.pdf[b-ap38jda34x] {
        background: linear-gradient(135deg, var(--color-danger), #c0392b);
        color: var(--color-white);
    }

    .action-btn:hover[b-ap38jda34x] {
        transform: translateY(-3px) scale(1.05);
        box-shadow: var(--shadow-lg);
    }

/* Enhanced Empty State */
.empty-state[b-ap38jda34x] {
    text-align: center;
    padding: var(--space-16) var(--space-8);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-xl);
    margin: var(--space-4);
}

.empty-icon[b-ap38jda34x] {
    font-size: var(--font-size-4xl);
    color: var(--color-border-medium);
    margin-bottom: var(--space-6);
    display: block;
    opacity: 0.5;
    transition: all var(--transition-normal);
}

.empty-state:hover .empty-icon[b-ap38jda34x] {
    opacity: 1;
    color: var(--color-primary);
    transform: scale(1.1);
}

.empty-state h3[b-ap38jda34x] {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-2xl);
    font-weight: 700;
}

.empty-state p[b-ap38jda34x] {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-8);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: var(--line-height-relaxed);
}

/* Enhanced Pagination */
.enhanced-pagination[b-ap38jda34x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6);
    background: var(--color-bg-tertiary);
    border-top: 1px solid var(--color-border-light);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.pagination-info[b-ap38jda34x] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

    .pagination-info strong[b-ap38jda34x] {
        color: var(--color-primary);
        font-weight: 800;
    }

.pagination-controls[b-ap38jda34x] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.page-size-select[b-ap38jda34x] {
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    font-family: var(--font-family-sans);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 12px;
    padding-right: var(--space-8);
    min-width: 120px;
}

    .page-size-select:focus[b-ap38jda34x] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 67, 97, 238), 0.15);
        transform: translateY(-2px);
    }

.pagination-arrow[b-ap38jda34x],
.pagination-number[b-ap38jda34x] {
    width: 44px;
    height: 44px;
    border: 2px solid var(--color-border-light);
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    position: relative;
    overflow: hidden;
}

    .pagination-arrow[b-ap38jda34x]::before,
    .pagination-number[b-ap38jda34x]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, transparent, rgba(var(--color-primary-rgb, 67, 97, 238), 0.1));
        opacity: 0;
        transition: opacity var(--transition-normal);
    }

    .pagination-arrow:hover:not(:disabled)[b-ap38jda34x],
    .pagination-number:hover:not(.active)[b-ap38jda34x] {
        border-color: var(--color-primary);
        color: var(--color-primary);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

        .pagination-arrow:hover:not(:disabled)[b-ap38jda34x]::before,
        .pagination-number:hover:not(.active)[b-ap38jda34x]::before {
            opacity: 1;
        }

    .pagination-number.active[b-ap38jda34x] {
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
        color: var(--color-white);
        border-color: var(--color-primary);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .pagination-arrow:disabled[b-ap38jda34x] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

.pagination-ellipsis[b-ap38jda34x] {
    padding: 0 var(--space-3);
    color: var(--color-text-tertiary);
    font-weight: 600;
    user-select: none;
}

/* Focus Styles for Accessibility */
.btn:focus-visible[b-ap38jda34x],
.action-btn:focus-visible[b-ap38jda34x],
.pagination-number:focus-visible[b-ap38jda34x],
.pagination-arrow:focus-visible[b-ap38jda34x],
.enhanced-search:focus-visible[b-ap38jda34x],
.enhanced-select:focus-visible[b-ap38jda34x],
.page-size-select:focus-visible[b-ap38jda34x] {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb, 67, 97, 238), 0.2);
}

/* Loading Animation - Enhanced */
.loading-skeleton[b-ap38jda34x] {
    animation: skeleton-loading-b-ap38jda34x 1.5s ease-in-out infinite;
    background: linear-gradient( 90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75% );
    background-size: 200% 100%;
}

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

    100% {
        background-position: -200% 0;
    }
}

/* Print Styles - Enhanced */
@media print {
    .enhanced-device-maintenance[b-ap38jda34x] {
        padding: 0;
        background: var(--color-white);
    }

    .dashboard-header[b-ap38jda34x],
    .enhanced-filters[b-ap38jda34x],
    .table-header[b-ap38jda34x],
    .table-actions[b-ap38jda34x],
    .enhanced-pagination[b-ap38jda34x],
    .action-menu[b-ap38jda34x] {
        display: none !important;
    }

    .table-section[b-ap38jda34x] {
        box-shadow: none;
        border: 1px solid var(--color-black);
        border-radius: 0;
    }

    .table-row:hover[b-ap38jda34x] {
        background: none !important;
    }

    .enhanced-table th[b-ap38jda34x],
    .enhanced-table td[b-ap38jda34x] {
        border: 1px solid var(--color-black);
        padding: var(--space-2);
    }

    .status-pill[b-ap38jda34x],
    .type-tag[b-ap38jda34x],
    .brand-badge[b-ap38jda34x] {
        border: 1px solid var(--color-black) !important;
        background: none !important;
        color: var(--color-black) !important;
        box-shadow: none !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root[b-ap38jda34x] {
        --color-border-light: var(--color-black);
        --color-text-secondary: var(--color-black);
        --color-bg-tertiary: var(--color-white);
    }

    .stat-card[b-ap38jda34x],
    .enhanced-filters[b-ap38jda34x],
    .table-section[b-ap38jda34x] {
        border: 3px solid var(--color-black) !important;
    }

    .action-btn[b-ap38jda34x],
    .btn[b-ap38jda34x] {
        border: 2px solid var(--color-black) !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-ap38jda34x],
    *[b-ap38jda34x]::before,
    *[b-ap38jda34x]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .stat-card:hover[b-ap38jda34x],
    .table-row:hover[b-ap38jda34x],
    .action-btn:hover[b-ap38jda34x],
    .btn:hover[b-ap38jda34x] {
        transform: none !important;
    }

    .pulse-dot[b-ap38jda34x] {
        animation: none;
    }
}

/* Mobile Responsive Design */
@media (max-width: 1024px) {
    .enhanced-device-maintenance[b-ap38jda34x] {
        padding: var(--space-4);
    }

    .dashboard-header[b-ap38jda34x] {
        padding: var(--space-6);
        border-radius: var(--radius-xl);
    }

    .header-content[b-ap38jda34x] {
        gap: var(--space-6);
    }

    .stats-overview[b-ap38jda34x] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-grid[b-ap38jda34x] {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .enhanced-table th[b-ap38jda34x],
    .enhanced-table td[b-ap38jda34x] {
        padding: var(--space-3) var(--space-4);
    }
}

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

    .stats-overview[b-ap38jda34x] {
        grid-template-columns: 1fr;
    }

    .main-title[b-ap38jda34x] {
        font-size: var(--font-size-2xl);
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }

    .title-icon[b-ap38jda34x] {
        width: 48px;
        height: 48px;
    }

    .table-header[b-ap38jda34x] {
        flex-direction: column;
        gap: var(--space-4);
        align-items: stretch;
        text-align: center;
    }

    .table-info[b-ap38jda34x] {
        flex-direction: column;
        gap: var(--space-2);
    }

    .table-actions[b-ap38jda34x] {
        width: 100%;
        justify-content: center;
    }

    .enhanced-pagination[b-ap38jda34x] {
        flex-direction: column;
        text-align: center;
        gap: var(--space-6);
    }

    .pagination-controls[b-ap38jda34x] {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2);
    }

    .page-size-select[b-ap38jda34x] {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }

    .action-menu[b-ap38jda34x] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .enhanced-device-maintenance[b-ap38jda34x] {
        padding: var(--space-3);
    }

    .stat-card[b-ap38jda34x] {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .stat-icon[b-ap38jda34x] {
        width: 56px;
        height: 56px;
        font-size: var(--font-size-xl);
    }

    .filter-actions[b-ap38jda34x] {
        flex-direction: column;
    }

    .btn[b-ap38jda34x] {
        width: 100%;
        justify-content: center;
    }

    .action-menu[b-ap38jda34x] {
        flex-direction: column;
        width: 100%;
    }

    .action-btn[b-ap38jda34x] {
        width: 100%;
        max-width: 200px;
    }

    .enhanced-table th[b-ap38jda34x],
    .enhanced-table td[b-ap38jda34x] {
        padding: var(--space-2);
        font-size: var(--font-size-xs);
    }

    .status-pill[b-ap38jda34x] {
        min-width: auto;
        padding: var(--space-1) var(--space-2);
        font-size: var(--font-size-xs);
    }

    .brand-badge[b-ap38jda34x] {
        font-size: var(--font-size-xs);
        padding: var(--space-1) var(--space-2);
    }
}

/* Tablet Landscape Optimization */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .stats-overview[b-ap38jda34x] {
        grid-template-columns: repeat(2, 1fr);
    }

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

/* Large Desktop Optimization */
@media (min-width: 1600px) {
    .enhanced-device-maintenance[b-ap38jda34x] {
        max-width: var(--max-content-width);
        margin: 0 auto;
    }

    .header-content[b-ap38jda34x] {
        max-width: var(--max-content-width);
        margin: 0 auto;
    }

    .table-section[b-ap38jda34x] {
        max-width: var(--max-content-width);
        margin: 0 auto;
    }
}
/* /Components/Pages/PhotoCopier/PhotoCopierBilling.razor.rz.scp.css */
.pcb-page[b-dr21lwqxdz] {
    min-height: 100vh;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: 'DM Sans', var(--font-family-sans);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

.pcb-top-shell[b-dr21lwqxdz] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.pcb-hero[b-dr21lwqxdz] {
    background: var(--gradient-primary);
    padding: var(--space-8) var(--space-8) var(--space-6);
    position: relative;
    overflow: hidden;
}

.pcb-hero[b-dr21lwqxdz]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 90% 20%, rgba(255,255,255,.10) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 10% 80%, rgba(255,255,255,.07) 0%, transparent 55%);
    pointer-events: none;
}

.pcb-hero-inner[b-dr21lwqxdz] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.pcb-hero-icon[b-dr21lwqxdz] {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-xl);
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.pcb-hero h1[b-dr21lwqxdz] {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    letter-spacing: -.02em;
}

.pcb-hero p[b-dr21lwqxdz] {
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,.78);
    margin: 0;
}

.pcb-tabs[b-dr21lwqxdz] {
    display: flex;
    gap: 2px;
    padding: var(--space-3) var(--space-8) 0;
    background: var(--color-bg-surface);
    border-top: 1px solid rgba(255,255,255,.08);
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.pcb-tab[b-dr21lwqxdz] {
    padding: var(--space-3) var(--space-5);
    border: none;
    background: transparent;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-tertiary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

.pcb-tab i[b-dr21lwqxdz] { font-size: .85em; opacity: .7; }
.pcb-tab:hover[b-dr21lwqxdz] { color: var(--color-primary); }
.pcb-tab.active[b-dr21lwqxdz] { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.pcb-tab:disabled[b-dr21lwqxdz] { opacity: .45; cursor: not-allowed; }

.pcb-content[b-dr21lwqxdz] {
    padding: var(--space-6) var(--space-8) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.pcb-card[b-dr21lwqxdz] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.pcb-card-header[b-dr21lwqxdz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-bg-secondary);
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
    gap: var(--space-3);
}

.pcb-card-title[b-dr21lwqxdz] {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -.01em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pcb-card-title i[b-dr21lwqxdz] { color: var(--color-primary); font-size: .9em; }
.pcb-card-body[b-dr21lwqxdz] { padding: var(--space-6); }

.pcb-card.pcb-card--editing[b-dr21lwqxdz] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md), 0 0 0 3px rgba(67,97,238,.1);
}
.pcb-card--editing .pcb-card-header[b-dr21lwqxdz] {
    background: rgba(67,97,238,.06);
    border-bottom-color: rgba(67,97,238,.15);
}

.pcb-toggle-group[b-dr21lwqxdz] {
    display: flex;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: 3px;
    gap: 3px;
    width: fit-content;
}
.pcb-toggle-btn[b-dr21lwqxdz] {
    padding: var(--space-2) var(--space-5);
    border: none;
    border-radius: calc(var(--radius-lg) - 2px);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--color-text-secondary);
    background: transparent;
}
.pcb-toggle-btn.active[b-dr21lwqxdz] { background: var(--color-bg-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); }

.pcb-form-grid[b-dr21lwqxdz] { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-4); }
.pcb-col-2[b-dr21lwqxdz]  { grid-column: span 2; }
.pcb-col-3[b-dr21lwqxdz]  { grid-column: span 3; }
.pcb-col-4[b-dr21lwqxdz]  { grid-column: span 4; }
.pcb-col-6[b-dr21lwqxdz]  { grid-column: span 6; }
.pcb-col-8[b-dr21lwqxdz]  { grid-column: span 8; }
.pcb-col-12[b-dr21lwqxdz] { grid-column: span 12; }

.pcb-label[b-dr21lwqxdz] {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-2);
}
.pcb-label .req[b-dr21lwqxdz] { color: var(--color-danger); margin-left: 2px; }

.pcb-input[b-dr21lwqxdz],
.pcb-select[b-dr21lwqxdz] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-family: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-normal);
    outline: none;
    -webkit-appearance: none;
}
.pcb-input[b-dr21lwqxdz]::placeholder { color: var(--color-text-tertiary); opacity: .6; }
.pcb-input:focus[b-dr21lwqxdz],
.pcb-select:focus[b-dr21lwqxdz] { border-color: var(--color-primary); box-shadow: var(--ring-primary); }

.pcb-file-upload[b-dr21lwqxdz] {
    position: relative;
    width: 100%;
}

.pcb-file-input[b-dr21lwqxdz] {
    width: 100%;
    padding: 0;
    border: 1.5px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-family: inherit;
    cursor: pointer;
    overflow: hidden;
}

.pcb-file-input:hover[b-dr21lwqxdz] {
    border-color: var(--color-primary);
}

.pcb-file-input[b-dr21lwqxdz]::file-selector-button {
    margin-right: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: none;
    border-right: 1px solid var(--color-border-light);
    background: var(--gradient-primary);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: filter var(--transition-fast);
}

.pcb-file-input[b-dr21lwqxdz]::file-selector-button:hover {
    filter: brightness(1.05);
}

.pcb-select[b-dr21lwqxdz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23868e96' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: var(--space-8);
    cursor: pointer;
}

.pcb-btn[b-dr21lwqxdz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    text-decoration: none;
}
.pcb-btn i[b-dr21lwqxdz] { font-size: .9em; }
.pcb-btn:disabled[b-dr21lwqxdz] { opacity: .5; cursor: not-allowed; transform: none !important; }
.pcb-btn--primary[b-dr21lwqxdz] { background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-md); }
.pcb-btn--primary:not(:disabled):hover[b-dr21lwqxdz] { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.pcb-btn--success[b-dr21lwqxdz] { background: var(--gradient-success); color: #fff; box-shadow: var(--shadow-success-md); }
.pcb-btn--success:not(:disabled):hover[b-dr21lwqxdz] { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.pcb-btn--danger[b-dr21lwqxdz] {
    background: #dc3545;
    color: #fff;
    border: 1px solid #b02a37;
    box-shadow: 0 2px 8px rgba(220,53,69,.28);
}
.pcb-btn--danger:not(:disabled):hover[b-dr21lwqxdz] {
    background: #bb2d3b;
    border-color: #8f1f2b;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(220,53,69,.32);
}
.pcb-btn--danger:not(:disabled):active[b-dr21lwqxdz] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(220,53,69,.24);
}
.pcb-btn--danger:focus-visible[b-dr21lwqxdz] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220,53,69,.25), 0 2px 8px rgba(220,53,69,.28);
}
.pcb-btn--danger.pcb-btn--sm[b-dr21lwqxdz] {
    min-width: 2.1rem;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

[data-theme="dark"] .pcb-btn--danger[b-dr21lwqxdz] {
    background: var(--gradient-danger);
    border-color: transparent;
    box-shadow: var(--shadow-danger-sm);
}
[data-theme="dark"] .pcb-btn--danger:not(:disabled):hover[b-dr21lwqxdz] {
    box-shadow: var(--shadow-danger-md);
}
.pcb-btn--ghost[b-dr21lwqxdz] { background: transparent; color: var(--color-text-secondary); border: 1.5px solid var(--color-border-medium); }
.pcb-btn--ghost:not(:disabled):hover[b-dr21lwqxdz] { background: var(--color-bg-tertiary); border-color: var(--color-border-heavy); }
.pcb-btn--ghost-primary[b-dr21lwqxdz] { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.pcb-btn--ghost-primary:not(:disabled):hover[b-dr21lwqxdz] { background: rgba(67,97,238,.08); }
.pcb-btn--sm[b-dr21lwqxdz] { padding: var(--space-2) var(--space-3); font-size: var(--font-size-xs); border-radius: var(--radius-md); }
.pcb-btn--full[b-dr21lwqxdz] { width: 100%; }

.pcb-table-wrap[b-dr21lwqxdz] { overflow-x: auto; border-radius: var(--radius-xl); border: 1px solid var(--color-border-light); }
.pcb-table[b-dr21lwqxdz] { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.pcb-table thead th[b-dr21lwqxdz] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-light);
    white-space: nowrap;
    transition: background-color var(--transition-normal);
}
.pcb-table tbody td[b-dr21lwqxdz] {
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
    white-space: nowrap;
    transition: background-color var(--transition-fast);
}
.pcb-table tbody tr:last-child td[b-dr21lwqxdz] { border-bottom: none; }
.pcb-table tbody tr:hover td[b-dr21lwqxdz] { background: rgba(67,97,238,.035); }

.pcb-chip[b-dr21lwqxdz] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: .04em;
}
.pcb-chip--black[b-dr21lwqxdz] { background: rgba(52,58,64,.1); color: var(--color-gray-700); }
[data-theme="dark"] .pcb-chip--black[b-dr21lwqxdz] { background: rgba(255,255,255,.08); color: var(--color-gray-300); }
.pcb-chip--color[b-dr21lwqxdz] { background: rgba(67,97,238,.12); color: var(--color-primary); }

.pcb-alert[b-dr21lwqxdz] {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    border: 1px solid;
}
.pcb-alert i[b-dr21lwqxdz] { font-size: 1em; flex-shrink: 0; margin-top: 1px; }
.pcb-alert--warning[b-dr21lwqxdz] { background: var(--color-warning-lighter); border-color: var(--color-warning-light); color: var(--color-warning-dark); }
.pcb-alert--success[b-dr21lwqxdz] { background: var(--color-success-lighter); border-color: var(--color-success-light); color: var(--color-success-dark); }
.pcb-alert--info[b-dr21lwqxdz] { background: var(--color-info-lighter); border-color: var(--color-info-light); color: var(--color-info-dark); }

.pcb-period-strip[b-dr21lwqxdz] { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.pcb-period-select-wrap[b-dr21lwqxdz] { flex: 1; min-width: 260px; }

.pcb-hint[b-dr21lwqxdz] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-2);
    display: flex;
    align-items: flex-start;
    gap: 5px;
}
.pcb-hint i[b-dr21lwqxdz] { flex-shrink: 0; margin-top: 1px; }

.pcb-action-row[b-dr21lwqxdz] { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.pcb-empty[b-dr21lwqxdz] { padding: var(--space-12) var(--space-6); text-align: center; color: var(--color-text-tertiary); }
.pcb-empty i[b-dr21lwqxdz] { font-size: 2rem; margin-bottom: var(--space-3); display: block; opacity: .35; }
.pcb-empty p[b-dr21lwqxdz] { margin: 0; font-size: var(--font-size-sm); }

.pcb-divider[b-dr21lwqxdz] { border: none; border-top: 1px solid var(--color-border-light); margin: var(--space-2) 0; }
.pcb-stat[b-dr21lwqxdz] { font-weight: 700; color: var(--color-primary); }

.pcb-summary-table th[b-dr21lwqxdz] { white-space: nowrap; font-size: var(--font-size-xs); }
.pcb-summary-table td[b-dr21lwqxdz] { font-size: var(--font-size-sm); vertical-align: middle; }
.pcb-summary-grand td[b-dr21lwqxdz] {
    background: var(--color-bg-elevated);
    border-top: 2px solid var(--color-border-light);
}

@media (max-width: 900px) {
    .pcb-content[b-dr21lwqxdz] { padding: var(--space-4) var(--space-4) var(--space-6); }
    .pcb-tabs[b-dr21lwqxdz] { padding: var(--space-3) var(--space-4) 0; overflow-x: auto; }
    .pcb-hero[b-dr21lwqxdz] { padding: var(--space-6) var(--space-4) var(--space-5); }
    .pcb-col-2[b-dr21lwqxdz], .pcb-col-3[b-dr21lwqxdz], .pcb-col-4[b-dr21lwqxdz] { grid-column: span 6; }
    .pcb-col-6[b-dr21lwqxdz], .pcb-col-8[b-dr21lwqxdz], .pcb-col-12[b-dr21lwqxdz] { grid-column: span 12; }
}
@media (max-width: 580px) {
    .pcb-col-2[b-dr21lwqxdz], .pcb-col-3[b-dr21lwqxdz], .pcb-col-4[b-dr21lwqxdz], .pcb-col-6[b-dr21lwqxdz] { grid-column: span 12; }
    .pcb-toggle-group[b-dr21lwqxdz] { flex-direction: column; width: 100%; }
}

/* Loading overlay for initial page load */
.pcb-loading-overlay[b-dr21lwqxdz] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

[data-theme="dark"] .pcb-loading-overlay[b-dr21lwqxdz] {
    background: rgba(0, 0, 0, 0.92);
}

.pcb-loading-content[b-dr21lwqxdz] {
    text-align: center;
    padding: var(--space-6);
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

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

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

.pcb-loading-text[b-dr21lwqxdz] {
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: var(--font-size-base);
}

/* /Components/Pages/Profile/AllSystemUsersComponent.razor.rz.scp.css */
/* ============================================================
   System Users — "Registry" design
   Uses the shared application color, surface, and shape tokens
   so the page stays consistent across light and dark themes.
   ============================================================ */

.container-fluid[b-xmbqlk5b9z] {
    --ink: var(--color-text-primary);
    --ink-soft: var(--color-text-secondary);
    --ink-faint: var(--color-text-tertiary);
    --paper: var(--color-bg-secondary);
    --surface: var(--color-bg-surface);
    --line: var(--color-border-light);
    --line-strong: var(--color-border-medium);
    --accent: var(--color-primary);
    --accent-strong: var(--color-primary);
    --accent-wash: color-mix(in srgb, var(--color-primary) 10%, var(--surface));
    --good: var(--color-success);
    --good-wash: var(--color-success-lighter);
    --bad: var(--color-danger);
    --bad-wash: var(--color-danger-lighter);
    --warn: var(--color-warning-dark);
    --warn-wash: var(--color-warning-lighter);
    --mono: var(--font-family-sans);
    font-family: var(--font-family-sans);
    color: var(--ink);
}

/* ---------- Header ---------- */
.page-header[b-xmbqlk5b9z] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    box-shadow: none;
    backdrop-filter: none;
}

    .page-header[b-xmbqlk5b9z]::before {
        display: none;
    }

.page-icon[b-xmbqlk5b9z] {
    font-size: 1.3rem;
    color: #fff;
    margin-right: 0.9rem;
    background: var(--accent);
    padding: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    box-shadow: none;
}

.page-title[b-xmbqlk5b9z] {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
}

.su-subtle[b-xmbqlk5b9z] {
    color: var(--ink-soft);
    font-size: 0.88rem;
}

.su-label[b-xmbqlk5b9z] {
    color: var(--ink-faint);
    font-size: 0.78rem;
}

.su-strong[b-xmbqlk5b9z] {
    color: var(--ink);
    font-weight: 600;
}

/* ---------- Filters row ---------- */
.filters-row[b-xmbqlk5b9z] {
    border-top: 1px solid var(--line);
    row-gap: 0.9rem;
    margin-top: 1.25rem !important;
    padding-top: 1.1rem !important;
}

.filter-group[b-xmbqlk5b9z] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 150px;
}

.filter-label[b-xmbqlk5b9z] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink-faint);
}

/* ---------- View toggle: underline tabs, not a pill ---------- */
.view-toggle[b-xmbqlk5b9z] {
    display: flex;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--line);
    gap: 0.25rem;
}

.view-toggle-btn[b-xmbqlk5b9z] {
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ink-soft);
    width: auto;
    height: 32px;
    padding: 0 0.6rem;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
    font-size: 0.78rem;
    font-weight: 600;
}

    .view-toggle-btn:hover[b-xmbqlk5b9z] {
        color: var(--accent);
        background: transparent;
    }

    .view-toggle-btn.active[b-xmbqlk5b9z] {
        background: transparent;
        color: var(--accent-strong);
        border-bottom-color: var(--accent);
        box-shadow: none;
    }

/* ---------- Search ---------- */
.search-container[b-xmbqlk5b9z] {
    max-width: 340px;
}

.search-input[b-xmbqlk5b9z] {
    border-radius: 3px;
    padding: 0.45rem 2.2rem 0.45rem 2.1rem;
    border: 1px solid var(--line-strong);
    font-size: 0.85rem;
    transition: border-color 0.12s ease;
    background-color: var(--surface);
    color: var(--ink);
    backdrop-filter: none;
}

    .search-input:focus[b-xmbqlk5b9z] {
        border-color: var(--accent);
        box-shadow: none;
        background-color: var(--surface);
        transform: none;
        outline: 1px solid var(--accent);
        outline-offset: -1px;
    }

    .search-input[b-xmbqlk5b9z]::placeholder {
        color: var(--ink-faint);
        opacity: 1;
    }

.search-icon[b-xmbqlk5b9z] {
    left: 0.7rem;
    color: var(--ink-faint);
}

.clear-search[b-xmbqlk5b9z] {
    right: 0.6rem;
    background: transparent;
    color: var(--ink-faint);
    width: 20px;
    height: 20px;
    border-radius: 2px;
    opacity: 1;
}

    .clear-search:hover[b-xmbqlk5b9z] {
        background: var(--bad-wash);
        color: var(--bad);
        transform: translateY(-50%) scale(1);
    }

/* ---------- User card: file-card with a status stripe ---------- */
.user-card[b-xmbqlk5b9z] {
    border-radius: 3px;
    border: 1px solid var(--line);
    box-shadow: none;
    background: var(--surface);
    position: relative;
    padding-left: 3px;
    animation: none;
    opacity: 1;
    transition: border-color 0.12s ease;
}

    .user-card[b-xmbqlk5b9z]::before {
        content: '';
        position: absolute;
        top: -1px;
        bottom: -1px;
        left: -1px;
        width: 3px;
        background: var(--good);
        opacity: 1;
        transition: none;
    }

    .user-card:hover[b-xmbqlk5b9z] {
        transform: none;
        box-shadow: none;
        border-color: var(--line-strong);
    }

        .user-card:hover[b-xmbqlk5b9z]::before {
            opacity: 1;
        }

    .user-card.inactive[b-xmbqlk5b9z] {
        opacity: 1;
        background: var(--surface);
    }

        .user-card.inactive[b-xmbqlk5b9z]::before {
            background: var(--bad);
        }

.user-card-header[b-xmbqlk5b9z] {
    padding: 1rem 1.1rem 0.85rem 1.1rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.user-avatar[b-xmbqlk5b9z] {
    width: 36px;
    height: 36px;
    background: var(--accent-wash);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-strong);
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--mono);
    flex-shrink: 0;
    box-shadow: none;
    border: 1px solid var(--line);
}

.user-avatar-sm[b-xmbqlk5b9z] {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
    border-radius: 2px;
}

.user-card-body[b-xmbqlk5b9z] {
    padding: 0.9rem 1.1rem;
}

.user-card-footer[b-xmbqlk5b9z] {
    padding: 0.7rem 1.1rem;
    border-top: 1px solid var(--line);
    background: transparent;
    backdrop-filter: none;
}

/* ---------- Role badge: flat outline tag, no pill ---------- */
.role-badge[b-xmbqlk5b9z] {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 0.45rem;
    border-radius: 2px;
    background: var(--surface);
    color: var(--ink-soft);
    border: 1px solid var(--line-strong);
    font-family: var(--mono);
}

/* ---------- Status tag: rectangle, no dot, no glow ---------- */
.status-badge[b-xmbqlk5b9z] {
    font-size: 0.68rem;
    padding: 0.2rem 0.55rem;
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: 0;
    backdrop-filter: none;
    border: 1px solid;
}

    .status-badge[b-xmbqlk5b9z]::before {
        display: none;
    }

.status-badge-active[b-xmbqlk5b9z] {
    background: var(--good-wash);
    color: var(--good);
    border-color: var(--good);
}

.status-badge-inactive[b-xmbqlk5b9z] {
    background: var(--bad-wash);
    color: var(--bad);
    border-color: var(--bad);
}

.status-badge-unverified[b-xmbqlk5b9z] {
    background: var(--warn-wash);
    color: var(--warn);
    border-color: var(--warn);
}

.icon-success[b-xmbqlk5b9z] {
    color: var(--good);
}

.icon-danger[b-xmbqlk5b9z] {
    color: var(--bad);
}

/* ---------- Info rows: plain lines, no icon chips ---------- */
.user-info-item[b-xmbqlk5b9z] {
    display: flex;
    align-items: baseline;
    margin-bottom: 0.55rem;
    color: var(--ink-soft);
    font-size: 0.83rem;
    transition: none;
    padding-bottom: 0.45rem;
    border-bottom: 1px dashed var(--line);
}

    .user-info-item:last-child[b-xmbqlk5b9z] {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .user-info-item:hover[b-xmbqlk5b9z] {
        transform: none;
        color: var(--ink);
    }

.user-info-icon[b-xmbqlk5b9z] {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    margin-right: 0.5rem;
    color: var(--ink-faint);
    flex-shrink: 0;
    font-size: 0.75rem;
    transition: none;
}

.user-info-item:hover .user-info-icon[b-xmbqlk5b9z] {
    background: transparent;
    color: var(--accent);
    transform: none;
}

/* ---------- Table view ---------- */
.table-view-wrap[b-xmbqlk5b9z] {
    border-radius: 3px;
    border: 1px solid var(--line);
    overflow-x: auto;
}

.table-view[b-xmbqlk5b9z] {
    --bs-table-bg: var(--surface);
    --bs-table-color: var(--ink);
    --bs-border-color: var(--line);
    font-family: var(--font-family-sans);
}

.table-view thead th[b-xmbqlk5b9z] {
    background: var(--paper);
    color: var(--ink-faint);
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.table-view tbody td[b-xmbqlk5b9z] {
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
    vertical-align: middle;
    color: var(--ink);
    background-color: var(--surface);
}

    .table-view tbody td:nth-child(2)[b-xmbqlk5b9z] {
        font-family: var(--font-family-sans);
        font-size: 0.9rem;
        color: var(--ink-soft);
    }

.table-view tbody tr:hover > *[b-xmbqlk5b9z] {
    --bs-table-bg-state: var(--accent-wash);
    color: var(--ink);
}

.table-view tbody tr.row-inactive[b-xmbqlk5b9z] {
    opacity: 0.55;
}

/* ---------- Empty state ---------- */
.empty-state[b-xmbqlk5b9z] {
    padding: 3rem 1.5rem;
    background: var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: 3px;
    box-shadow: none;
    min-height: 360px;
}

.empty-state-icon[b-xmbqlk5b9z] {
    font-size: 2.6rem;
    color: var(--line-strong);
    margin-bottom: 1rem;
}

/* ---------- Pagination: flat, small ---------- */
.pagination-container[b-xmbqlk5b9z] {
    margin-top: 1.75rem;
}

.pagination[b-xmbqlk5b9z] {
    gap: 0.15rem;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

.page-link[b-xmbqlk5b9z] {
    padding: 0;
    border-radius: 2px;
    border: 1px solid var(--line);
    background-color: var(--surface);
    color: var(--ink-soft);
    min-width: 30px;
    height: 30px;
    font-size: 0.78rem;
    font-weight: 500;
}

    .page-link:hover[b-xmbqlk5b9z] {
        background-color: var(--accent-wash);
        color: var(--accent-strong);
        border-color: var(--accent);
        transform: none;
    }

.page-item.active .page-link[b-xmbqlk5b9z] {
    background: var(--accent);
    color: var(--surface);
    border-color: var(--accent);
    box-shadow: none;
}

.page-item.disabled .page-link[b-xmbqlk5b9z] {
    color: var(--ink-faint);
    background-color: var(--surface);
    border-color: var(--line);
}

/* ---------- Loading ---------- */
.loading-overlay[b-xmbqlk5b9z] {
    background: color-mix(in srgb, var(--color-bg-primary) 92%, transparent);
    backdrop-filter: none;
}

.loading-spinner[b-xmbqlk5b9z] {
    width: 32px;
    height: 32px;
    border: 2px solid var(--line-strong);
    border-top-color: var(--accent);
}

/* ---------- Form controls ---------- */
.form-select[b-xmbqlk5b9z] {
    border-radius: 3px;
    border: 1px solid var(--line-strong);
    padding: 0.4rem 1.6rem 0.4rem 0.6rem;
    background-color: var(--surface);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 500;
}

    .form-select:focus[b-xmbqlk5b9z] {
        border-color: var(--accent);
        box-shadow: none;
        outline: 1px solid var(--accent);
        outline-offset: -1px;
        transform: none;
    }

/* ---------- Buttons: small, flat, square-ish ---------- */
.btn[b-xmbqlk5b9z] {
    border-radius: 3px;
    padding: 0.32rem 0.7rem;
    font-weight: 600;
    font-size: 0.78rem;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    border: 1px solid transparent;
    box-shadow: none;
    gap: 0.35rem;
}

.btn-sm[b-xmbqlk5b9z] {
    padding: 0.22rem 0.5rem;
    font-size: 0.74rem;
}

.btn-primary[b-xmbqlk5b9z] {
    background: var(--accent);
    color: var(--surface);
    border-color: var(--accent);
    box-shadow: none;
}

    .btn-primary:hover[b-xmbqlk5b9z] {
        background: var(--accent-strong);
        border-color: var(--accent-strong);
        transform: none;
        box-shadow: none;
    }

.btn-success[b-xmbqlk5b9z] {
    background: var(--good);
    color: var(--surface);
    border-color: var(--good);
    box-shadow: none;
}

    .btn-success:hover[b-xmbqlk5b9z] {
        background: #294f31;
        border-color: #294f31;
    }

.btn-outline-primary[b-xmbqlk5b9z] {
    background: transparent;
    color: var(--accent-strong);
    border-color: var(--accent);
}

    .btn-outline-primary:hover[b-xmbqlk5b9z] {
        background: var(--accent);
        color: var(--surface);
        transform: none;
        box-shadow: none;
    }

.btn-outline-danger[b-xmbqlk5b9z] {
    background: transparent;
    color: var(--bad);
    border-color: var(--bad);
}

    .btn-outline-danger:hover[b-xmbqlk5b9z] {
        background: var(--bad);
        color: var(--surface);
        transform: none;
        box-shadow: none;
    }

.btn-outline-success[b-xmbqlk5b9z] {
    background: transparent;
    color: var(--good);
    border-color: var(--good);
}

    .btn-outline-success:hover[b-xmbqlk5b9z] {
        background: var(--good);
        color: var(--surface);
        transform: none;
        box-shadow: none;
    }

.btn-outline-secondary[b-xmbqlk5b9z] {
    background: transparent;
    color: var(--ink-soft);
    border-color: var(--line-strong);
}

    .btn-outline-secondary:hover[b-xmbqlk5b9z] {
        background: var(--paper);
        color: var(--ink);
        transform: none;
    }

.btn-outline-info[b-xmbqlk5b9z] {
    background: transparent;
    color: var(--accent-strong);
    border-color: var(--line-strong);
}

    .btn-outline-info:hover[b-xmbqlk5b9z] {
        background: var(--accent);
        color: var(--surface);
        border-color: var(--accent);
    }

.btn-outline-warning[b-xmbqlk5b9z] {
    background: transparent;
    color: var(--warn);
    border-color: var(--line-strong);
}

    .btn-outline-warning:hover[b-xmbqlk5b9z] {
        background: var(--warn);
        color: var(--surface);
        border-color: var(--warn);
    }

/* ---------- Card ---------- */
.card[b-xmbqlk5b9z] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: none;
    overflow: visible;
}

.card-body[b-xmbqlk5b9z] {
    padding: 1.4rem;
}

/* ---------- Filter chip ---------- */
.filter-chip[b-xmbqlk5b9z] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    background: var(--accent-wash);
    color: var(--accent-strong);
    border-radius: 2px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid var(--accent);
}

/* ---------- Stats bar: a ledger strip, not hover cards ---------- */
.stats-bar[b-xmbqlk5b9z] {
    display: flex;
    gap: 0;
    padding: 0;
    background: var(--surface);
    border-radius: 3px;
    margin-bottom: 1.25rem;
    border: 1px solid var(--line);
    flex-wrap: wrap;
}

.stat-item[b-xmbqlk5b9z] {
    flex: 1;
    min-width: 110px;
    text-align: left;
    padding: 0.7rem 1rem;
    border-radius: 0;
    background: transparent;
    transition: none;
    border-right: 1px solid var(--line);
}

    .stat-item:last-child[b-xmbqlk5b9z] {
        border-right: none;
    }

    .stat-item:hover[b-xmbqlk5b9z] {
        background: var(--paper);
        transform: none;
    }

.stat-number[b-xmbqlk5b9z] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
    display: block;
    font-family: var(--mono);
}

.stat-success[b-xmbqlk5b9z] {
    color: var(--good);
}

.stat-danger[b-xmbqlk5b9z] {
    color: var(--bad);
}

.stat-warn[b-xmbqlk5b9z] {
    color: var(--warn);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .page-header[b-xmbqlk5b9z] {
        padding: 1.1rem;
        border-radius: 3px;
        margin-bottom: 1.1rem;
    }

    .page-title[b-xmbqlk5b9z] {
        font-size: 1.35rem;
    }

    .card-body[b-xmbqlk5b9z] {
        padding: 1rem;
    }

    .stats-bar[b-xmbqlk5b9z] {
        flex-direction: column;
    }

    .stat-item[b-xmbqlk5b9z] {
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

        .stat-item:last-child[b-xmbqlk5b9z] {
            border-bottom: none;
        }

    .user-card-header[b-xmbqlk5b9z] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .user-avatar[b-xmbqlk5b9z] {
        width: 32px;
        height: 32px;
        font-size: 0.72rem;
    }

    .search-input[b-xmbqlk5b9z] {
        font-size: 0.8rem;
    }

    .filter-group[b-xmbqlk5b9z] {
        min-width: 100%;
    }
}

@media (max-width: 576px) {
    .user-info-item[b-xmbqlk5b9z] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }

    .user-info-icon[b-xmbqlk5b9z] {
        margin-right: 0;
    }

    .pagination[b-xmbqlk5b9z] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .page-link[b-xmbqlk5b9z] {
        min-width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
}

/* ---------- Shared application finish ---------- */
.page-header[b-xmbqlk5b9z] {
    background: var(--gradient-primary-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.page-icon[b-xmbqlk5b9z] {
    border-radius: var(--radius-lg);
}

.user-card[b-xmbqlk5b9z],
.card[b-xmbqlk5b9z],
.empty-state[b-xmbqlk5b9z],
.stats-bar[b-xmbqlk5b9z] {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.user-card:hover[b-xmbqlk5b9z] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.status-badge[b-xmbqlk5b9z] {
    border-radius: var(--radius-full);
}

.filter-chip[b-xmbqlk5b9z] {
    border-radius: var(--radius-full);
}

.user-card-footer .btn[b-xmbqlk5b9z],
.table-view .btn[b-xmbqlk5b9z] {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    padding: 0;
    flex: 0 0 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    line-height: 1;
}

.user-card-footer .btn i[b-xmbqlk5b9z],
.table-view .btn i[b-xmbqlk5b9z] {
    margin: 0;
    font-size: 1rem;
}

.table-view-wrap[b-xmbqlk5b9z] {
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .search-input[b-xmbqlk5b9z],
[data-theme="dark"] .form-select[b-xmbqlk5b9z] {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

[data-theme="dark"] .page-header[b-xmbqlk5b9z] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 18%, var(--color-bg-surface)), var(--color-bg-surface));
}

[data-theme="dark"] .table-view[b-xmbqlk5b9z] {
    --bs-table-bg: var(--color-bg-surface);
    --bs-table-color: var(--color-text-primary);
}

[data-theme="dark"] .table-view tbody td[b-xmbqlk5b9z] {
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
}

[data-theme="dark"] .table-view tbody td:nth-child(2)[b-xmbqlk5b9z] {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .table-view tbody tr:hover > *[b-xmbqlk5b9z] {
    --bs-table-bg-state: color-mix(in srgb, var(--color-primary) 18%, var(--color-bg-surface));
}
/* /Components/Pages/Profile/EditUserInfoComponent.razor.rz.scp.css */
.edit-profile-page[b-p3hgw3rwoa] {
    padding: var(--space-8) var(--space-4);
    background-color: var(--color-bg-secondary);
    min-height: 100vh;
}

.edit-profile-container[b-p3hgw3rwoa] {
    max-width: var(--max-content-width);
    margin: 0 auto;
}

.edit-profile-header[b-p3hgw3rwoa] {
    text-align: center;
    margin-bottom: var(--space-8);
}

    .edit-profile-header h2[b-p3hgw3rwoa] {
        color: var(--color-text-primary);
        font-weight: 600;
        margin-bottom: var(--space-2);
        font-size: var(--font-size-3xl);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .edit-profile-header p[b-p3hgw3rwoa] {
        color: var(--color-text-secondary);
        font-size: var(--font-size-base);
    }

.edit-profile-card[b-p3hgw3rwoa] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent);
    padding: var(--space-12) var(--space-16);
    margin-bottom: var(--space-8);
    border: 1px solid var(--color-border-light);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

    .edit-profile-card:hover[b-p3hgw3rwoa] {
        box-shadow: var(--shadow-xl), 0 0 0 1px var(--color-primary-light);
    }

/* Profile Photo Section */
.profile-photo-section[b-p3hgw3rwoa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}

.photo-preview-container[b-p3hgw3rwoa] {
    position: relative;
    flex-shrink: 0;
}

.photo-preview[b-p3hgw3rwoa] {
    width: 160px;
    height: 160px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-bg-tertiary), var(--color-bg-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    border: 6px solid var(--color-border-light);
    transition: all var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

    .photo-preview:hover[b-p3hgw3rwoa] {
        transform: scale(1.05) rotate(5deg);
        box-shadow: var(--shadow-lg), 0 0 0 4px color-mix(in srgb, var(--color-primary) 30%, transparent);
        border-color: var(--color-primary-light);
    }

.profile-image[b-p3hgw3rwoa] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

.initials-circle[b-p3hgw3rwoa] {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.photo-overlay[b-p3hgw3rwoa] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 70%, transparent), color-mix(in srgb, var(--color-primary-dark) 70%, transparent));
    color: var(--color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-normal);
    border-radius: var(--radius-full);
    flex-direction: column;
    gap: var(--space-2);
}

.photo-preview:hover .photo-overlay[b-p3hgw3rwoa] {
    opacity: 1;
}

.photo-overlay-content[b-p3hgw3rwoa] {
    text-align: center;
    padding: var(--space-4);
}

    .photo-overlay-content i[b-p3hgw3rwoa] {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--space-2);
    }

.photo-upload-actions[b-p3hgw3rwoa] {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.btn-upload[b-p3hgw3rwoa] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-text-inverse);
    border: none;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-xl);
    font-weight: 600;
    transition: all var(--transition-normal);
    width: fit-content;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

    .btn-upload[b-p3hgw3rwoa]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
        z-index: 1;
    }

    .btn-upload:hover[b-p3hgw3rwoa]::before {
        width: 300px;
        height: 300px;
    }

    .btn-upload:hover[b-p3hgw3rwoa] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .btn-upload:active[b-p3hgw3rwoa] {
        transform: translateY(0);
    }

.btn-remove[b-p3hgw3rwoa] {
    background: transparent;
    color: var(--color-danger);
    border: 2px solid var(--color-danger);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-xl);
    font-weight: 600;
    transition: all var(--transition-fast);
    width: fit-content;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    cursor: pointer;
}

    .btn-remove:hover[b-p3hgw3rwoa] {
        background: color-mix(in srgb, var(--color-danger) 10%, transparent);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

.upload-constraints[b-p3hgw3rwoa] {
    margin-top: var(--space-2);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    opacity: 0.8;
}

[data-theme="dark"] .upload-constraints[b-p3hgw3rwoa] {
    color: var(--color-gray-400);
    opacity: 0.9;
}

.upload-constraints i[b-p3hgw3rwoa] {
    color: var(--color-info);
    font-size: var(--font-size-sm);
}

.upload-error-message[b-p3hgw3rwoa] {
    color: var(--color-danger);
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: color-mix(in srgb, var(--color-danger) 10%, transparent);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-danger);
}

/* Divider */
.divider[b-p3hgw3rwoa] {
    display: flex;
    align-items: center;
    margin: var(--space-8) 0;
}

.divider-line[b-p3hgw3rwoa] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border-medium), transparent);
}

.divider-text[b-p3hgw3rwoa] {
    padding: 0 var(--space-4);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    background: var(--color-bg-surface);
    opacity: 0.9;
}

[data-theme="dark"] .divider-text[b-p3hgw3rwoa] {
    color: var(--color-gray-400);
    background: var(--color-bg-surface);
}

/* Form Sections */
.form-sections[b-p3hgw3rwoa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.section-title[b-p3hgw3rwoa] {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    padding-bottom: var(--space-3);
    border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}

[data-theme="dark"] .section-title[b-p3hgw3rwoa] {
    color: var(--color-primary-light);
    border-bottom-color: color-mix(in srgb, var(--color-primary-light) 20%, transparent);
}

.section-title i[b-p3hgw3rwoa] {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
}

[data-theme="dark"] .section-title i[b-p3hgw3rwoa] {
    color: var(--color-primary-light);
}

/* Form Grid */
.form-grid[b-p3hgw3rwoa] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-6);
}

/* Form Groups */
.form-group[b-p3hgw3rwoa] {
    margin-bottom: var(--space-6);
    position: relative;
}

    .form-group.floating label[b-p3hgw3rwoa] {
        position: absolute;
        top: var(--space-3);
        left: var(--space-4);
        color: var(--color-text-tertiary);
        transition: all var(--transition-fast);
        pointer-events: none;
        background-color: var(--color-bg-surface);
        padding: 0 var(--space-2);
        transform-origin: left top;
        font-size: var(--font-size-base);
        z-index: 2;
        opacity: 0.8;
    }

/* Dark theme label background */
[data-theme="dark"] .form-group.floating label[b-p3hgw3rwoa] {
    background-color: var(--color-bg-surface);
}

.form-group.floating.disabled label[b-p3hgw3rwoa] {
    background-color: var(--color-bg-secondary);
}

[data-theme="dark"] .form-group.floating.disabled label[b-p3hgw3rwoa] {
    background-color: var(--color-gray-800);
}

.form-control:focus + label[b-p3hgw3rwoa],
.form-control:not(:placeholder-shown) + label[b-p3hgw3rwoa],
.form-select:focus + label[b-p3hgw3rwoa],
.form-select:not([value="0"]) + label[b-p3hgw3rwoa] {
    transform: translateY(-1.75rem) scale(0.85);
    color: var(--color-primary);
    font-weight: 600;
    opacity: 1;
    background-color: var(--color-bg-surface);
    z-index: 10;
}

/* Disabled field helper text */
.disabled-field-helper[b-p3hgw3rwoa] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--space-1);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

[data-theme="dark"] .disabled-field-helper[b-p3hgw3rwoa] {
    color: var(--color-gray-400);
}

/* Disabled field styling */
.form-control:disabled[b-p3hgw3rwoa],
.form-select:disabled[b-p3hgw3rwoa] {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-light);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
    opacity: 0.7;
}

[data-theme="dark"] .form-control:disabled[b-p3hgw3rwoa],
[data-theme="dark"] .form-select:disabled[b-p3hgw3rwoa] {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
    color: var(--color-gray-400);
}

/* Form control styling */
.form-control[b-p3hgw3rwoa],
.form-select[b-p3hgw3rwoa] {
    padding: var(--space-4);
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
    min-height: 52px;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    width: 100%;
    position: relative;
    z-index: 1;
}

    /* Fix for floating labels with value */
    .form-control:not(:placeholder-shown)[b-p3hgw3rwoa],
    .form-select:not([value="0"])[b-p3hgw3rwoa] {
        padding-top: var(--space-6);
        padding-bottom: var(--space-2);
    }

    /* Fix for input focus states */
    .form-control:focus[b-p3hgw3rwoa],
    .form-select:focus[b-p3hgw3rwoa] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent), var(--shadow-sm);
        outline: none;
        background-color: var(--color-bg-primary);
    }

[data-theme="dark"] .form-control:focus[b-p3hgw3rwoa],
[data-theme="dark"] .form-select:focus[b-p3hgw3rwoa] {
    border-color: var(--color-primary-light);
    background-color: var(--color-bg-surface);
}

/* Fix for select dropdown styling */
.form-select[b-p3hgw3rwoa] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234361ee' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    background-size: 16px;
    position: relative;
    z-index: 1;
}

[data-theme="dark"] .form-select[b-p3hgw3rwoa] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234891ef' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}

/* Placeholder text styling */
.form-control[b-p3hgw3rwoa]::placeholder {
    color: transparent;
}

/* Validation */
.validation-summary[b-p3hgw3rwoa] {
    background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
    border-left: 4px solid var(--color-danger);
    padding: var(--space-4);
    margin-bottom: var(--space-8);
    border-radius: var(--radius-md);
    list-style: none;
}

    .validation-summary ul[b-p3hgw3rwoa] {
        margin: 0;
        padding-left: var(--space-4);
    }

    .validation-summary li[b-p3hgw3rwoa] {
        color: var(--color-danger);
        font-size: var(--font-size-sm);
        margin-bottom: var(--space-1);
    }

/* Validation message styling */
.validation-message[b-p3hgw3rwoa] {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: absolute;
    bottom: -1.5rem;
    left: 0;
    background-color: color-mix(in srgb, var(--color-bg-surface) 90%, transparent);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    z-index: 5;
}

[data-theme="dark"] .validation-message[b-p3hgw3rwoa] {
    background-color: color-mix(in srgb, var(--color-gray-800) 90%, transparent);
    color: var(--color-danger-light);
}

/* Form Actions */
.form-actions[b-p3hgw3rwoa] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-4);
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border-light);
}

.btn-cancel[b-p3hgw3rwoa] {
    background-color: var(--color-bg-surface);
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border-medium);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-xl);
    font-weight: 600;
    transition: all var(--transition-normal);
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    cursor: pointer;
}

    .btn-cancel:hover[b-p3hgw3rwoa] {
        background-color: var(--color-bg-tertiary);
        border-color: var(--color-border-heavy);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

.btn-save[b-p3hgw3rwoa] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-text-inverse);
    border: none;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-xl);
    font-weight: 600;
    transition: all var(--transition-normal);
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

    .btn-save[b-p3hgw3rwoa]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
        z-index: 1;
    }

    .btn-save:hover[b-p3hgw3rwoa]::before {
        width: 300px;
        height: 300px;
    }

    .btn-save:hover:not(:disabled)[b-p3hgw3rwoa] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

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

    .btn-save:disabled[b-p3hgw3rwoa] {
        opacity: 0.7;
        cursor: not-allowed;
        background: var(--color-gray-400);
    }

.btn-saving[b-p3hgw3rwoa] {
    position: relative;
    color: transparent !important;
}

    .btn-saving[b-p3hgw3rwoa]::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        border: 2px solid var(--color-text-inverse);
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

/* Success Message */
.success-message[b-p3hgw3rwoa] {
    background-color: color-mix(in srgb, var(--color-success) 10%, transparent);
    border-left: 4px solid var(--color-success);
    padding: var(--space-4);
    margin-top: var(--space-8);
    border-radius: var(--radius-md);
    color: var(--color-success);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    animation: slideIn 0.3s ease-out;
}

[data-theme="dark"] .success-message[b-p3hgw3rwoa] {
    background-color: color-mix(in srgb, var(--color-success) 15%, transparent);
    color: var(--color-success-light);
}

/* File Upload Styles */
.file-input-wrapper[b-p3hgw3rwoa] {
    position: relative;
    display: inline-block;
}

.visually-hidden[b-p3hgw3rwoa] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.file-name[b-p3hgw3rwoa] {
    margin-left: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-inverse);
    z-index: 2;
    position: relative;
}

/* Responsive Adjustments */
@@media (max-width: 992px) {
    .edit-profile-card[b-p3hgw3rwoa] {
        padding: var(--space-8) var(--space-6);
    }

    .profile-photo-section[b-p3hgw3rwoa] {
        gap: var(--space-8);
    }
}

@@media (max-width: 768px) {
    .edit-profile-card[b-p3hgw3rwoa] {
        padding: var(--space-6) var(--space-4);
        border-radius: var(--radius-xl);
    }

    .profile-photo-section[b-p3hgw3rwoa] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-6);
    }

    .photo-preview[b-p3hgw3rwoa] {
        width: 140px;
        height: 140px;
    }

    .initials-circle[b-p3hgw3rwoa] {
        font-size: var(--font-size-3xl);
    }

    .photo-upload-actions[b-p3hgw3rwoa] {
        align-items: center;
        width: 100%;
    }

    .btn-upload[b-p3hgw3rwoa],
    .btn-remove[b-p3hgw3rwoa] {
        width: 100%;
        justify-content: center;
    }

    .form-grid[b-p3hgw3rwoa] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-p3hgw3rwoa] {
        flex-direction: column-reverse;
        gap: var(--space-3);
    }

    .btn-cancel[b-p3hgw3rwoa],
    .btn-save[b-p3hgw3rwoa] {
        width: 100%;
    }
}

@@media (max-width: 576px) {
    .edit-profile-page[b-p3hgw3rwoa] {
        padding: var(--space-4) var(--space-2);
    }

    .edit-profile-card[b-p3hgw3rwoa] {
        padding: var(--space-5) var(--space-3);
        border-radius: var(--radius-lg);
    }

    .edit-profile-header h2[b-p3hgw3rwoa] {
        font-size: var(--font-size-2xl);
    }

    .photo-preview[b-p3hgw3rwoa] {
        width: 120px;
        height: 120px;
        border-width: 4px;
    }

    .initials-circle[b-p3hgw3rwoa] {
        font-size: var(--font-size-2xl);
    }

    .form-control[b-p3hgw3rwoa],
    .form-select[b-p3hgw3rwoa] {
        min-height: 48px;
        font-size: var(--font-size-sm);
    }

    .btn[b-p3hgw3rwoa] {
        min-height: 44px;
        font-size: var(--font-size-sm);
    }

    .section-title[b-p3hgw3rwoa] {
        font-size: var(--font-size-base);
    }
}

/* Dark Theme Optimizations */
[data-theme="dark"] .edit-profile-card[b-p3hgw3rwoa] {
    background: linear-gradient(145deg, var(--color-bg-surface) 0%, color-mix(in srgb, var(--color-gray-800) 60%, transparent) 100%);
    border-color: var(--color-border-heavy);
}

[data-theme="dark"] .form-control[b-p3hgw3rwoa],
[data-theme="dark"] .form-select[b-p3hgw3rwoa] {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border-heavy);
}

[data-theme="dark"] .photo-preview[b-p3hgw3rwoa] {
    background: linear-gradient(135deg, var(--color-gray-800), var(--color-gray-700));
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .btn-cancel[b-p3hgw3rwoa] {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
    color: var(--color-gray-300);
}

    [data-theme="dark"] .btn-cancel:hover[b-p3hgw3rwoa] {
        background-color: var(--color-gray-700);
    }

/* Focus States for Accessibility */
:focus-visible[b-p3hgw3rwoa] {
    outline: 3px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

/* Animations */
@@keyframes spin {
    to[b-p3hgw3rwoa] {
        transform: rotate(360deg);
    }
}

@@keyframes slideIn {
    from[b-p3hgw3rwoa] {
        opacity: 0;
        transform: translateY(-10px);
    }

    to[b-p3hgw3rwoa] {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure proper z-index layering */
.form-control[b-p3hgw3rwoa],
.form-select[b-p3hgw3rwoa] {
    z-index: 1;
}

.form-group.floating label[b-p3hgw3rwoa] {
    z-index: 2;
}

.validation-message[b-p3hgw3rwoa] {
    z-index: 3;
}

/* Specific fix for department select */
.form-group.floating .form-select:focus + label[b-p3hgw3rwoa],
.form-group.floating .form-select:not([value="0"]) + label[b-p3hgw3rwoa] {
    transform: translateY(-1.75rem) scale(0.85);
    color: var(--color-primary);
    font-weight: 600;
    opacity: 1;
    background-color: var(--color-bg-surface);
}
/* /Components/Pages/Profile/EditUsersInfo.razor.rz.scp.css */
/* /Components/Pages/Profile/PerformanceKPIs.razor.rz.scp.css */
/* ============================================================
   KPI Performance Page - Professional Dashboard Styling
   ============================================================ */

.kpi-dashboard-container[b-ezr38t6q75] {
    font-family: var(--font-family-sans);
    padding: var(--space-8);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

[data-theme="dark"] .kpi-dashboard-container[b-ezr38t6q75] {
    background: var(--color-gray-900);
}

/* -------------------------------------------------------------
   Header
   ------------------------------------------------------------- */
.kpi-dashboard-header[b-ezr38t6q75] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-8);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
    border-top: 3px solid var(--color-primary);
}

[data-theme="dark"] .kpi-dashboard-header[b-ezr38t6q75] {
    background: var(--color-gray-800);
    border-color: var(--color-border-medium);
}

.kpi-header-content[b-ezr38t6q75] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-6);
}

.kpi-page-title[b-ezr38t6q75] {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    line-height: var(--line-height-tight);
}

    .kpi-page-title i[b-ezr38t6q75] {
        font-size: var(--font-size-xl);
        color: var(--color-primary);
    }

.kpi-dashboard-subtitle[b-ezr38t6q75] {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    margin: var(--space-2) 0 0 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 500;
}

/* Filters */
.kpi-dashboard-filters[b-ezr38t6q75] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.kpi-filter-group[b-ezr38t6q75] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 170px;
}

    .kpi-filter-group label[b-ezr38t6q75] {
        font-size: var(--font-size-xs);
        font-weight: 600;
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

.kpi-form-control[b-ezr38t6q75] {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    height: 40px;
    font-family: var(--font-family-sans);
    font-weight: 500;
}

    .kpi-form-control:focus[b-ezr38t6q75] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: var(--ring-primary);
    }

[data-theme="dark"] .kpi-form-control[b-ezr38t6q75] {
    background: var(--color-gray-800);
    border-color: var(--color-border-medium);
    color: var(--color-text-primary);
}

.kpi-btn[b-ezr38t6q75] {
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-md);
    border: none;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast), opacity var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 40px;
    font-family: var(--font-family-sans);
}

.kpi-btn-primary[b-ezr38t6q75] {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
}

    .kpi-btn-primary:hover:not(:disabled)[b-ezr38t6q75] {
        background: var(--color-primary-dark);
    }

    .kpi-btn-primary:disabled[b-ezr38t6q75] {
        opacity: var(--opacity-50);
        cursor: not-allowed;
    }

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

/* -------------------------------------------------------------
   Summary Cards
   ------------------------------------------------------------- */
.kpi-cards[b-ezr38t6q75] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

@media (max-width: 1200px) {
    .kpi-cards[b-ezr38t6q75] {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.kpi-card[b-ezr38t6q75] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border-light);
    border-left: 3px solid var(--color-primary);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast);
}

    .kpi-card:hover[b-ezr38t6q75] {
        box-shadow: var(--shadow-md);
    }

[data-theme="dark"] .kpi-card[b-ezr38t6q75] {
    background: var(--color-gray-800);
    border-color: var(--color-border-medium);
    border-left-color: var(--color-primary);
}

.kpi-card.solved[b-ezr38t6q75] {
    border-left-color: var(--color-success);
}

.kpi-card.unsolved[b-ezr38t6q75] {
    border-left-color: var(--color-danger);
}

.kpi-card.on-time[b-ezr38t6q75] {
    border-left-color: var(--color-success);
}

.kpi-card.late[b-ezr38t6q75] {
    border-left-color: var(--color-danger);
}

.kpi-card h3[b-ezr38t6q75] {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kpi-value[b-ezr38t6q75] {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--space-4) 0;
    font-variant-numeric: tabular-nums;
}

/* Progress bars */
.kpi-progress-container[b-ezr38t6q75] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;
}

.kpi-progress-bar-bg[b-ezr38t6q75] {
    flex: 1;
    height: 6px;
    background: var(--color-border-light);
    border-radius: var(--radius-full);
    overflow: hidden;
}

[data-theme="dark"] .kpi-progress-bar-bg[b-ezr38t6q75] {
    background: var(--color-gray-700);
}

.kpi-progress-bar-fill[b-ezr38t6q75] {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    transition: width var(--transition-slow) ease-out;
}

.kpi-card.solved .kpi-progress-bar-fill[b-ezr38t6q75],
.kpi-card.on-time .kpi-progress-bar-fill[b-ezr38t6q75] {
    background: var(--color-success);
}

.kpi-card.unsolved .kpi-progress-bar-fill[b-ezr38t6q75],
.kpi-card.late .kpi-progress-bar-fill[b-ezr38t6q75] {
    background: var(--color-danger);
}

.kpi-progress-text[b-ezr38t6q75] {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    min-width: 2.75rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------
   Top Tickets Section
   ------------------------------------------------------------- */
.kpi-top-section[b-ezr38t6q75] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

@media (max-width: 1200px) {
    .kpi-top-section[b-ezr38t6q75] {
        grid-template-columns: 1fr;
    }
}

.kpi-top-tickets-card[b-ezr38t6q75] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .kpi-top-tickets-card[b-ezr38t6q75] {
    background: var(--color-gray-800);
    border-color: var(--color-border-medium);
}

.kpi-top-tickets-card h3[b-ezr38t6q75] {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.kpi-top-tickets-card.fast h3 i[b-ezr38t6q75] {
    color: var(--color-success);
}

.kpi-top-tickets-card.slow h3 i[b-ezr38t6q75] {
    color: var(--color-danger);
}

.kpi-tickets-list[b-ezr38t6q75] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.kpi-ticket-item[b-ezr38t6q75] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

    .kpi-ticket-item:hover[b-ezr38t6q75] {
        background: var(--color-bg-tertiary);
    }

[data-theme="dark"] .kpi-ticket-item[b-ezr38t6q75] {
    background: var(--color-gray-700);
}

.kpi-ticket-id[b-ezr38t6q75] {
    font-family: var(--font-family-mono);
    font-weight: 700;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

.kpi-ticket-time[b-ezr38t6q75] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.kpi-ticket-category[b-ezr38t6q75] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-weight: 600;
    border: 1px solid var(--color-border-light);
}

/* -------------------------------------------------------------
   Chart Containers
   ------------------------------------------------------------- */
.kpi-charts-row[b-ezr38t6q75],
.kpi-line-charts-section[b-ezr38t6q75] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

@media (max-width: 1200px) {
    .kpi-charts-row[b-ezr38t6q75],
    .kpi-line-charts-section[b-ezr38t6q75] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .kpi-charts-row[b-ezr38t6q75],
    .kpi-line-charts-section[b-ezr38t6q75] {
        grid-template-columns: 1fr;
    }
}

.kpi-chart-container[b-ezr38t6q75],
.kpi-line-chart-container[b-ezr38t6q75] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .kpi-chart-container[b-ezr38t6q75],
[data-theme="dark"] .kpi-line-chart-container[b-ezr38t6q75] {
    background: var(--color-gray-800);
    border-color: var(--color-border-medium);
}

.kpi-chart-container h3[b-ezr38t6q75],
.kpi-line-chart-container h3[b-ezr38t6q75] {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    padding: var(--space-5) var(--space-5) var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-bottom: 1px solid var(--color-border-light);
}

    .kpi-chart-container h3 i[b-ezr38t6q75],
    .kpi-line-chart-container h3 i[b-ezr38t6q75] {
        color: var(--color-primary);
        font-size: var(--font-size-sm);
    }

[data-theme="dark"] .kpi-chart-container h3[b-ezr38t6q75],
[data-theme="dark"] .kpi-line-chart-container h3[b-ezr38t6q75] {
    border-color: var(--color-border-medium);
}

.kpi-chart-wrapper[b-ezr38t6q75] {
    padding: var(--space-5);
    flex: 1;
    min-height: 300px;
    position: relative;
}

    .kpi-chart-wrapper canvas[b-ezr38t6q75] {
        width: 100% !important;
        height: 100% !important;
    }

/* Compact wrapper for the two donut charts */
.kpi-chart-container.pie-chart-small[b-ezr38t6q75] {
    max-width: 420px;
    margin: 0 auto;
}

    .kpi-chart-container.pie-chart-small .kpi-chart-wrapper[b-ezr38t6q75] {
        min-height: 260px;
        max-height: 260px;
    }

/* -------------------------------------------------------------
   Data Tables
   ------------------------------------------------------------- */
.kpi-data-tables[b-ezr38t6q75] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

@media (max-width: 1400px) {
    .kpi-data-tables[b-ezr38t6q75] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .kpi-data-tables[b-ezr38t6q75] {
        grid-template-columns: 1fr;
    }
}

.kpi-table-container[b-ezr38t6q75] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    max-height: 460px;
    overflow: hidden;
}

[data-theme="dark"] .kpi-table-container[b-ezr38t6q75] {
    background: var(--color-gray-800);
    border-color: var(--color-border-medium);
}

.kpi-table-container h3[b-ezr38t6q75] {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    padding: var(--space-5) var(--space-5) var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-bottom: 1px solid var(--color-border-light);
}

    .kpi-table-container h3 i[b-ezr38t6q75] {
        color: var(--color-primary);
        font-size: var(--font-size-sm);
    }

[data-theme="dark"] .kpi-table-container h3[b-ezr38t6q75] {
    border-color: var(--color-border-medium);
}

.kpi-table-wrapper[b-ezr38t6q75] {
    flex: 1;
    overflow: auto;
    padding: 0;
}

.kpi-table[b-ezr38t6q75] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 100%;
}

    .kpi-table thead[b-ezr38t6q75] {
        background: var(--color-bg-secondary);
        position: sticky;
        top: 0;
        z-index: 5;
    }

[data-theme="dark"] .kpi-table thead[b-ezr38t6q75] {
    background: var(--color-gray-700);
}

.kpi-table th[b-ezr38t6q75] {
    padding: var(--space-3) var(--space-5);
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border-medium);
    white-space: nowrap;
}

[data-theme="dark"] .kpi-table th[b-ezr38t6q75] {
    border-color: var(--color-border-heavy);
    color: var(--color-gray-300);
}

.kpi-table td[b-ezr38t6q75] {
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-light);
    font-weight: 500;
    white-space: nowrap;
}

[data-theme="dark"] .kpi-table td[b-ezr38t6q75] {
    color: var(--color-gray-200);
    border-color: var(--color-border-medium);
}

.kpi-table tbody tr:last-child td[b-ezr38t6q75] {
    border-bottom: none;
}

.kpi-table tbody tr:hover td[b-ezr38t6q75] {
    background: var(--color-bg-tertiary);
}

[data-theme="dark"] .kpi-table tbody tr:hover td[b-ezr38t6q75] {
    background: var(--color-gray-700);
}

.kpi-table-progress-container[b-ezr38t6q75] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 120px;
}

.kpi-table-progress-bar[b-ezr38t6q75] {
    flex: 1;
    height: 5px;
    background: var(--color-border-light);
    border-radius: var(--radius-full);
    overflow: hidden;
}

[data-theme="dark"] .kpi-table-progress-bar[b-ezr38t6q75] {
    background: var(--color-gray-700);
}

.kpi-table-progress-bar-fill[b-ezr38t6q75] {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    transition: width var(--transition-slow) ease-out;
    min-width: 4px;
}

/* Scrollbar styling for table wrapper */
.kpi-table-wrapper[b-ezr38t6q75]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.kpi-table-wrapper[b-ezr38t6q75]::-webkit-scrollbar-track {
    background: transparent;
}

.kpi-table-wrapper[b-ezr38t6q75]::-webkit-scrollbar-thumb {
    background: var(--color-border-medium);
    border-radius: var(--radius-full);
}

    .kpi-table-wrapper[b-ezr38t6q75]::-webkit-scrollbar-thumb:hover {
        background: var(--color-primary-light);
    }

.kpi-table-wrapper[b-ezr38t6q75] {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-medium) transparent;
}

.no-data[b-ezr38t6q75] {
    text-align: center;
    color: var(--color-text-tertiary);
    padding: var(--space-6);
    font-size: var(--font-size-sm);
}

/* -------------------------------------------------------------
   No Data / Loading States
   ------------------------------------------------------------- */
.kpi-no-data-container[b-ezr38t6q75] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--color-border-medium);
}

[data-theme="dark"] .kpi-no-data-container[b-ezr38t6q75] {
    background: var(--color-gray-800);
}

.kpi-no-data-content[b-ezr38t6q75] {
    text-align: center;
    max-width: 440px;
}

.kpi-no-data-icon[b-ezr38t6q75] {
    font-size: 3rem;
    color: var(--color-border-medium);
    margin-bottom: var(--space-5);
}

.kpi-no-data-content h3[b-ezr38t6q75] {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.kpi-no-data-content p[b-ezr38t6q75] {
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-6);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

.kpi-loading-container[b-ezr38t6q75] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    min-height: 50vh;
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
}

    .kpi-loading-container p[b-ezr38t6q75] {
        color: var(--color-text-tertiary);
        font-size: var(--font-size-sm);
        margin-top: var(--space-2);
    }

.kpi-loading-spinner[b-ezr38t6q75] {
    width: 44px;
    height: 44px;
    border: 3px solid var(--color-border-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: kpi-spin-b-ezr38t6q75 0.9s linear infinite;
    margin-bottom: var(--space-4);
}

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

/* -------------------------------------------------------------
   Responsive Typography
   ------------------------------------------------------------- */
@media (max-width: 768px) {
    .kpi-page-title[b-ezr38t6q75] {
        font-size: var(--font-size-xl);
    }

    .kpi-value[b-ezr38t6q75] {
        font-size: var(--font-size-xl);
    }

    .kpi-chart-wrapper[b-ezr38t6q75] {
        min-height: 260px;
    }
}
/* /Components/Pages/Profile/ProfileComponent.razor.rz.scp.css */
/* Profile Page Container */
.profile-page[b-cz35j3cmzj] {
    padding: var(--space-8) var(--space-4);
    background-color: var(--color-bg-secondary);
    min-height: 100vh;
}

/* Loading Overlay */
.loading-overlay[b-cz35j3cmzj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background-color: var(--color-bg-primary);
    border-radius: var(--radius-2xl);
    padding: var(--space-12);
}

.loading-spinner[b-cz35j3cmzj] {
    width: 60px;
    height: 60px;
    border: 3px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-cz35j3cmzj 1s linear infinite;
}

/* Error Container */
.error-container[b-cz35j3cmzj] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: var(--space-8);
}

.error-card[b-cz35j3cmzj] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-2xl);
    padding: var(--space-12);
    text-align: center;
    max-width: 500px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border-light);
}

.error-icon[b-cz35j3cmzj] {
    font-size: var(--font-size-4xl);
    color: var(--color-danger);
    margin-bottom: var(--space-4);
}

.error-title[b-cz35j3cmzj] {
    color: var(--color-text-primary);
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-2);
    font-weight: 600;
}

.error-message[b-cz35j3cmzj] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}

/* Profile Container */
.profile-container[b-cz35j3cmzj] {
    background: var(--color-bg-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
}

/* Header Section */
.profile-header[b-cz35j3cmzj] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-12);
    position: relative;
    overflow: hidden;
}

    .profile-header[b-cz35j3cmzj]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--color-white) 10%, transparent) 0%, transparent 50%);
    }

.avatar-section[b-cz35j3cmzj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.avatar-container[b-cz35j3cmzj] {
    position: relative;
}

.avatar-wrapper[b-cz35j3cmzj] {
    width: 160px;
    height: 160px;
    border-radius: var(--radius-full);
    border: 6px solid var(--color-border-light);
    background: var(--color-bg-tertiary);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-normal);
}

    .avatar-wrapper:hover[b-cz35j3cmzj] {
        transform: scale(1.05) rotate(5deg);
        box-shadow: var(--shadow-xl), 0 0 0 4px color-mix(in srgb, var(--color-primary-light) 30%, transparent);
        border-color: var(--color-primary-light);
    }

.profile-avatar[b-cz35j3cmzj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-overlay[b-cz35j3cmzj] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 70%, transparent), color-mix(in srgb, var(--color-primary-dark) 70%, transparent));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-normal);
    color: var(--color-text-inverse);
}

.avatar-wrapper:hover .avatar-overlay[b-cz35j3cmzj] {
    opacity: 1;
}

.avatar-overlay i[b-cz35j3cmzj] {
    font-size: var(--font-size-2xl);
}

.avatar-badge[b-cz35j3cmzj] {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.btn-edit-profile[b-cz35j3cmzj] {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    color: var(--color-text-inverse);
    border: none;
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-xl);
    font-weight: 600;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .btn-edit-profile[b-cz35j3cmzj]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
        z-index: 1;
    }

    .btn-edit-profile:hover[b-cz35j3cmzj]::before {
        width: 300px;
        height: 300px;
    }

    .btn-edit-profile:hover[b-cz35j3cmzj] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .btn-edit-profile:active[b-cz35j3cmzj] {
        transform: translateY(0);
    }

/* Profile Info */
.profile-info[b-cz35j3cmzj] {
    text-align: center;
    position: relative;
    z-index: 1;
}

.profile-titles[b-cz35j3cmzj] {
    margin-bottom: var(--space-8);
}

.profile-name[b-cz35j3cmzj] {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-2);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.profile-jobtitle[b-cz35j3cmzj] {
    font-size: var(--font-size-xl);
    color: color-mix(in srgb, var(--color-text-inverse) 80%, transparent);
    margin-bottom: var(--space-2);
    font-weight: 500;
}

.profile-role[b-cz35j3cmzj] {
    font-size: var(--font-size-base);
    color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: color-mix(in srgb, var(--color-text-inverse) 10%, transparent);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
}

/* Profile Stats */
.profile-stats[b-cz35j3cmzj] {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.stat-item[b-cz35j3cmzj] {
    background: color-mix(in srgb, var(--color-text-inverse) 10%, transparent);
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    transition: all var(--transition-fast);
    backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
}

    .stat-item:hover[b-cz35j3cmzj] {
        background: color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
        transform: translateY(-2px);
    }

.stat-icon[b-cz35j3cmzj] {
    font-size: var(--font-size-xl);
    color: var(--color-primary-light);
    background: color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-content[b-cz35j3cmzj] {
    text-align: left;
}

.stat-value[b-cz35j3cmzj] {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-inverse);
    line-height: 1.2;
}

.stat-label[b-cz35j3cmzj] {
    display: block;
    font-size: var(--font-size-sm);
    color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent);
    margin-top: var(--space-1);
}

/* Details Section */
.profile-details[b-cz35j3cmzj] {
    padding: var(--space-12);
}

.detail-section[b-cz35j3cmzj] {
    margin-bottom: var(--space-12);
}

.section-title[b-cz35j3cmzj] {
    color: var(--color-text-primary) !important; 
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    padding-bottom: var(--space-3);
    border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}

    .section-title i[b-cz35j3cmzj] {
        color: var(--color-primary);
    }

/* Detail Grid */
.detail-grid[b-cz35j3cmzj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--space-6);
}

.detail-card[b-cz35j3cmzj] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

    .detail-card[b-cz35j3cmzj]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
        opacity: 0;
        transition: opacity var(--transition-normal);
    }

    .detail-card:hover[b-cz35j3cmzj] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: var(--color-primary-light);
    }

        .detail-card:hover[b-cz35j3cmzj]::before {
            opacity: 1;
        }

.detail-icon[b-cz35j3cmzj] {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.detail-card:hover .detail-icon[b-cz35j3cmzj] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    transform: scale(1.1);
}

.detail-content[b-cz35j3cmzj] {
    flex: 1;
}

.detail-label[b-cz35j3cmzj] {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-1);
    font-weight: 500;
}

.detail-value[b-cz35j3cmzj] {
    display: block;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    font-weight: 500;
    line-height: 1.4;
}

/* Status Badge */
.status-badge[b-cz35j3cmzj] {
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border: 1px solid currentColor;
}

.status-badge-active[b-cz35j3cmzj] {
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
    color: var(--color-success);
    border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}

.status-badge-inactive[b-cz35j3cmzj] {
    background: color-mix(in srgb, var(--color-danger) 15%, transparent);
    color: var(--color-danger);
    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}

/* Empty State */
.empty-state[b-cz35j3cmzj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    text-align: center;
    background: var(--color-bg-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border-light);
}

.empty-state-icon[b-cz35j3cmzj] {
    font-size: 5rem;
    color: var(--color-gray-200);
    margin-bottom: var(--space-6);
    animation: float-b-cz35j3cmzj 6s ease-in-out infinite;
}

.empty-state-title[b-cz35j3cmzj] {
    color: var(--color-text-primary);
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.empty-state-message[b-cz35j3cmzj] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    max-width: 400px;
    margin-bottom: var(--space-8);
}

.empty-state-actions[b-cz35j3cmzj] {
    display: flex;
    gap: var(--space-4);
}

/* Animations */
@keyframes spin-b-cz35j3cmzj {
    to {
        transform: rotate(360deg);
    }
}

@keyframes float-b-cz35j3cmzj {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .profile-header[b-cz35j3cmzj] {
        padding: var(--space-8);
    }

    .profile-details[b-cz35j3cmzj] {
        padding: var(--space-8);
    }

    .detail-grid[b-cz35j3cmzj] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .profile-page[b-cz35j3cmzj] {
        padding: var(--space-4) var(--space-2);
    }

    .avatar-wrapper[b-cz35j3cmzj] {
        width: 140px;
        height: 140px;
    }

    .profile-name[b-cz35j3cmzj] {
        font-size: var(--font-size-3xl);
    }

    .profile-jobtitle[b-cz35j3cmzj] {
        font-size: var(--font-size-lg);
    }

    .profile-stats[b-cz35j3cmzj] {
        flex-direction: column;
        align-items: center;
    }

    .stat-item[b-cz35j3cmzj] {
        width: 100%;
        max-width: 300px;
    }

    .detail-grid[b-cz35j3cmzj] {
        grid-template-columns: 1fr;
    }

    .empty-state-actions[b-cz35j3cmzj] {
        flex-direction: column;
        width: 100%;
    }

        .empty-state-actions .btn[b-cz35j3cmzj] {
            width: 100%;
        }
}

@media (max-width: 576px) {
    .profile-header[b-cz35j3cmzj] {
        padding: var(--space-6) var(--space-4);
    }

    .avatar-wrapper[b-cz35j3cmzj] {
        width: 120px;
        height: 120px;
        border-width: 4px;
    }

    .profile-name[b-cz35j3cmzj] {
        font-size: var(--font-size-2xl);
    }

    .profile-jobtitle[b-cz35j3cmzj] {
        font-size: var(--font-size-base);
    }

    .profile-details[b-cz35j3cmzj] {
        padding: var(--space-6) var(--space-4);
    }

    .section-title[b-cz35j3cmzj] {
        font-size: var(--font-size-lg);
    }

    .detail-card[b-cz35j3cmzj] {
        padding: var(--space-4);
    }

    .detail-icon[b-cz35j3cmzj] {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-base);
    }
}

/* Dark Theme Optimizations */
[data-theme="dark"] .profile-container[b-cz35j3cmzj] {
    background: linear-gradient(145deg, var(--color-bg-surface) 0%, color-mix(in srgb, var(--color-gray-800) 60%, transparent) 100%);
    border-color: var(--color-border-heavy);
}

[data-theme="dark"] .detail-card[b-cz35j3cmzj] {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .section-title[b-cz35j3cmzj] {
    color: var(--color-text-inverse);
}

[data-theme="dark"] .detail-label[b-cz35j3cmzj] {
    color: var(--color-gray-400);
}

[data-theme="dark"] .detail-value[b-cz35j3cmzj] {
    color: var(--color-gray-200);
}

[data-theme="dark"] .avatar-wrapper[b-cz35j3cmzj] {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

/* Print Styles */
@media print {
    .profile-page[b-cz35j3cmzj] {
        padding: 0;
        background: white !important;
    }

    .profile-container[b-cz35j3cmzj] {
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
    }

    .btn-edit-profile[b-cz35j3cmzj] {
        display: none !important;
    }

    .profile-header[b-cz35j3cmzj] {
        background: white !important;
        color: black !important;
    }


    .profile-jobtitle[b-cz35j3cmzj],
    .profile-role[b-cz35j3cmzj],
    .stat-value[b-cz35j3cmzj],
    .detail-value[b-cz35j3cmzj] {
        color: black !important;
    }
    .profile-name[b-cz35j3cmzj]{
        color:white;
    }
}

/* Focus States for Accessibility */
:focus-visible[b-cz35j3cmzj] {
    outline: 3px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}
/* /Components/Pages/TeamManagement/TeamDetailsComponent.razor.rz.scp.css */
/* ==========================================================================
   Team details page
   Matches the Project Details (.pd-*) design system.
   ========================================================================== */

.pd-page[b-ykpyed8jdi] {
    --pd-accent: #2563eb;
    --pd-accent-soft: #dbeafe;
    --pd-ok: #059669;
    --pd-warn: #d97706;
    --pd-bad: #dc2626;
    --pd-radius: 14px;
    --pd-line: var(--color-border-light, #e2e8f0);
    --pd-surface: var(--color-bg-surface, #ffffff);
    --pd-surface-2: var(--color-bg-secondary, #f8fafc);
    --pd-text: var(--color-text-primary, #0f172a);
    --pd-text-2: var(--color-text-secondary, #475569);
    --pd-text-3: var(--color-text-tertiary, #94a3b8);
    --pm-accent: #2563eb;
    --pm-accent-strong: #1d4ed8;
    --pm-accent-soft: #dbeafe;
    --pm-accent-fg: #1d4ed8;
    --pm-surface: var(--color-bg-surface, #ffffff);
    --pm-surface-2: var(--color-bg-subtle, #f8fafc);
    --pm-border: var(--color-border-light, #e2e8f0);
    --pm-border-strong: #cbd5e1;
    --pm-text: var(--color-text-primary, #0f172a);
    --pm-muted: var(--color-text-secondary, #475569);
    --pm-faint: var(--color-text-tertiary, #64748b);
    padding: 1.25rem 1rem 3rem;
    color: var(--pd-text);
    max-width: 1280px;
    margin: 0 auto;
    min-width: 0;
}

[data-theme="dark"] .pd-page[b-ykpyed8jdi] {
    --pd-surface: #1e293b;
    --pd-surface-2: rgba(255, 255, 255, 0.04);
    --pd-line: rgba(255, 255, 255, 0.12);
    --pd-text: #f8fafc;
    --pd-text-2: #cbd5e1;
    --pd-text-3: #94a3b8;
    --pm-surface: #1e293b;
    --pm-surface-2: rgba(255, 255, 255, 0.04);
    --pm-border: rgba(255, 255, 255, 0.12);
    --pm-text: #f8fafc;
    --pm-muted: #cbd5e1;
    --pm-faint: #94a3b8;
}

.pd-empty[b-ykpyed8jdi] {
    min-height: 40vh;
    display: grid;
    place-items: center;
}

/* ---------- Header ---------- */

.pd-crumbs[b-ykpyed8jdi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--pd-text-3);
    margin-bottom: 0.75rem;
    min-width: 0;
}

    .pd-crumbs a[b-ykpyed8jdi] {
        color: var(--pd-text-2);
        text-decoration: none;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }

        .pd-crumbs a:hover[b-ykpyed8jdi] {
            color: var(--pd-accent);
        }

.pd-crumb-sep[b-ykpyed8jdi] {
    color: var(--pd-text-3);
}

.pd-crumb-current[b-ykpyed8jdi] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40ch;
    font-weight: 500;
}

.pd-header-main[b-ykpyed8jdi] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.pd-header-text[b-ykpyed8jdi] {
    flex: 1 1 420px;
    min-width: 0;
}

.pd-title-row[b-ykpyed8jdi] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

    .pd-title-row h1[b-ykpyed8jdi] {
        margin: 0;
        font-size: 1.85rem;
        line-height: 1.2;
        letter-spacing: -0.01em;
        font-weight: 700;
    }

.pd-lead[b-ykpyed8jdi] {
    color: var(--pd-text-2);
    margin: 0.55rem 0 0;
    max-width: 72ch;
    line-height: 1.55;
}

.pd-actions[b-ykpyed8jdi] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------- Stats (Key numbers) ---------- */

.pd-stats[b-ykpyed8jdi] {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 992px) {
    .pd-stats[b-ykpyed8jdi] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .pd-stats[b-ykpyed8jdi] {
        grid-template-columns: 1fr;
    }
}

.pd-stat[b-ykpyed8jdi] {
    background: var(--pd-surface);
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-radius);
    padding: 0.95rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.pd-stat-wide[b-ykpyed8jdi] {
    grid-column: span 1;
}

.pd-stat-top[b-ykpyed8jdi] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.pd-stat-label[b-ykpyed8jdi] {
    font-size: 0.8rem;
    color: var(--pd-text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.pd-stat-value[b-ykpyed8jdi] {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--pd-text);
}

    .pd-stat-value small[b-ykpyed8jdi] {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--pd-text-3);
    }

.pd-stat-hint[b-ykpyed8jdi] {
    font-size: 0.78rem;
    color: var(--pd-text-3);
    margin-top: 0.25rem;
}

/* ---------- Progress Track ---------- */

.pm-progress-track[b-ykpyed8jdi] {
    height: 6px;
    background: var(--pm-border, #e2e8f0);
    border-radius: 9999px;
    overflow: hidden;
    margin: 0.4rem 0 0.15rem;
}

    .pm-progress-track.lg[b-ykpyed8jdi] {
        height: 8px;
    }

.pm-progress-fill[b-ykpyed8jdi] {
    height: 100%;
    background: var(--pm-accent, #2563eb);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* ---------- Buttons ---------- */

.pm-btn[b-ykpyed8jdi] {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.55rem 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .pm-btn:disabled[b-ykpyed8jdi] {
        opacity: 0.55;
        cursor: default;
    }

.pm-btn-primary[b-ykpyed8jdi] {
    background: var(--pm-accent);
    color: #fff;
}

    .pm-btn-primary:hover:not(:disabled)[b-ykpyed8jdi] {
        background: var(--pm-accent-strong);
        color: #fff;
    }

.pm-btn-ghost[b-ykpyed8jdi] {
    background: var(--pd-surface);
    border-color: var(--pd-line);
    color: var(--pd-text);
}

    .pm-btn-ghost:hover:not(:disabled)[b-ykpyed8jdi] {
        border-color: var(--pm-border-strong);
        background: var(--pd-surface-2);
        color: var(--pd-text);
    }

.pm-btn-danger-ghost[b-ykpyed8jdi] {
    background: transparent;
    border-color: transparent;
    color: var(--pd-bad, #dc2626);
}

    .pm-btn-danger-ghost:hover:not(:disabled)[b-ykpyed8jdi] {
        background: #fee2e2;
        color: #b91c1c;
    }

[data-theme="dark"] .pm-btn-danger-ghost:hover:not(:disabled)[b-ykpyed8jdi] {
    background: #7f1d1d;
    color: #fecaca;
}

.pm-btn-sm[b-ykpyed8jdi] {
    padding: 0.3rem 0.6rem;
    font-size: 0.82rem;
    border-radius: 8px;
}

/* ---------- Badges ---------- */

.pm-badge[b-ykpyed8jdi] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.22rem 0.65rem;
    border-radius: 9999px;
    line-height: 1.3;
}

.badge-done[b-ykpyed8jdi] {
    background: #d1fae5;
    color: #047857;
}

[data-theme="dark"] .badge-done[b-ykpyed8jdi] {
    background: #064e3b;
    color: #a7f3d0;
}

.badge-canceled[b-ykpyed8jdi] {
    background: #fee2e2;
    color: #b91c1c;
}

[data-theme="dark"] .badge-canceled[b-ykpyed8jdi] {
    background: #7f1d1d;
    color: #fecaca;
}

.badge-progress[b-ykpyed8jdi] {
    background: var(--pm-accent-soft, #dbeafe);
    color: var(--pm-accent-fg, #1d4ed8);
}

[data-theme="dark"] .badge-progress[b-ykpyed8jdi] {
    background: #1e3a8a;
    color: #bfdbfe;
}

.badge-warning[b-ykpyed8jdi] {
    background: #fef3c7;
    color: #b45309;
}

[data-theme="dark"] .badge-warning[b-ykpyed8jdi] {
    background: #78350f;
    color: #fde68a;
}

/* ---------- Member Avatar ---------- */

.pd-member-avatar[b-ykpyed8jdi] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pm-accent), var(--pm-accent-strong));
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .pd-member-avatar.lg[b-ykpyed8jdi] {
        width: 44px;
        height: 44px;
        font-size: 0.95rem;
    }

/* ---------- Toolbar ---------- */

.pm-toolbar[b-ykpyed8jdi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pm-search[b-ykpyed8jdi] {
    position: relative;
    flex: 1 1 260px;
    max-width: 400px;
}

    .pm-search i.bi-search[b-ykpyed8jdi] {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--pd-text-3);
        pointer-events: none;
    }

    .pm-search input[b-ykpyed8jdi] {
        width: 100%;
        border: 1px solid var(--pd-line);
        background: var(--pd-surface);
        color: var(--pd-text);
        border-radius: 10px;
        padding: 0.5rem 2rem 0.5rem 2.2rem;
        font-size: 0.9rem;
    }

        .pm-search input:focus[b-ykpyed8jdi] {
            outline: none;
            border-color: var(--pd-accent);
        }

.pm-search-clear[b-ykpyed8jdi] {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--pd-text-3);
    cursor: pointer;
    padding: 0.2rem;
}

.pm-select[b-ykpyed8jdi] {
    border: 1px solid var(--pd-line);
    background: var(--pd-surface);
    color: var(--pd-text);
    border-radius: 10px;
    padding: 0.5rem 0.85rem;
    font-size: 0.9rem;
}

.pm-segmented[b-ykpyed8jdi] {
    display: inline-flex;
    background: var(--pd-surface-2);
    border: 1px solid var(--pd-line);
    border-radius: 10px;
    padding: 2px;
}

    .pm-segmented button[b-ykpyed8jdi] {
        background: transparent;
        border: none;
        color: var(--pd-text-3);
        padding: 0.35rem 0.65rem;
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.95rem;
        display: inline-flex;
        align-items: center;
    }

        .pm-segmented button.active[b-ykpyed8jdi] {
            background: var(--pd-surface);
            color: var(--pd-text);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
        }

/* ---------- Table View ---------- */

.pm-table-wrap[b-ykpyed8jdi] {
    background: var(--pd-surface);
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-radius);
    overflow-x: auto;
}

.pm-table[b-ykpyed8jdi] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    text-align: left;
}

    .pm-table th[b-ykpyed8jdi] {
        background: var(--pd-surface-2);
        color: var(--pd-text-3);
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--pd-line);
    }

    .pm-table td[b-ykpyed8jdi] {
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--pd-line);
        color: var(--pd-text);
        vertical-align: middle;
    }

    .pm-table tbody tr:last-child td[b-ykpyed8jdi] {
        border-bottom: none;
    }

    .pm-table tbody tr:hover[b-ykpyed8jdi] {
        background: var(--pd-surface-2);
    }

.pm-table-link[b-ykpyed8jdi] {
    color: var(--pd-accent);
    text-decoration: none;
}

    .pm-table-link:hover[b-ykpyed8jdi] {
        text-decoration: underline;
    }

/* ---------- Cards View ---------- */

.pm-grid[b-ykpyed8jdi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.pm-card[b-ykpyed8jdi] {
    background: var(--pd-surface);
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-radius);
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .pm-card:hover[b-ykpyed8jdi] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

.pm-card-head[b-ykpyed8jdi] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.pm-card-title[b-ykpyed8jdi] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--pd-text);
}

.pm-card-meta[b-ykpyed8jdi] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--pd-text-2);
}

.pm-meta-item[b-ykpyed8jdi] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

    .pm-meta-item i[b-ykpyed8jdi] {
        color: var(--pd-text-3);
    }

.pm-card-foot[b-ykpyed8jdi] {
    display: flex;
    align-items: center;
    padding-top: 0.65rem;
    border-top: 1px solid var(--pd-line);
    margin-top: auto;
}

/* ---------- Empty State ---------- */

.pm-empty[b-ykpyed8jdi] {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--pd-surface);
    border: 1px dashed var(--pd-line);
    border-radius: var(--pd-radius);
}

    .pm-empty i[b-ykpyed8jdi] {
        font-size: 2.5rem;
        color: var(--pd-text-3);
        margin-bottom: 0.75rem;
        display: inline-block;
    }

    .pm-empty h3[b-ykpyed8jdi] {
        margin: 0 0 0.4rem;
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--pd-text);
    }

    .pm-empty p[b-ykpyed8jdi] {
        margin: 0 0 1.25rem;
        color: var(--pd-text-2);
        max-width: 48ch;
        margin-left: auto;
        margin-right: auto;
        font-size: 0.92rem;
    }

/* ---------- Projects-grade Modal & Controls ---------- */
.pd-overlay[b-ykpyed8jdi] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    z-index: 1050;
    padding: 1rem;
    animation: pd-fade-b-ykpyed8jdi 0.18s ease-out;
}

.pd-modal[b-ykpyed8jdi] {
    --md-accent: var(--pm-accent, #2563eb);
    --md-accent-soft: rgba(37, 99, 235, 0.12);
    --md-accent-line: rgba(37, 99, 235, 0.3);
    position: relative;
    width: min(600px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--pm-surface, #ffffff);
    color: var(--pm-text, #0f172a);
    border: 1px solid var(--pm-border, #e2e8f0);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    animation: pd-pop-b-ykpyed8jdi 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

    .pd-modal[b-ykpyed8jdi]::before {
        content: "";
        flex: none;
        height: 4px;
        background: var(--md-accent);
    }

    .pd-modal.narrow[b-ykpyed8jdi] {
        width: min(480px, 100%);
    }

    .pd-modal.is-team[b-ykpyed8jdi] {
        --md-accent: #2563eb;
        --md-accent-soft: rgba(37, 99, 235, 0.12);
        --md-accent-line: rgba(37, 99, 235, 0.3);
    }

    .pd-modal.is-member[b-ykpyed8jdi] {
        --md-accent: #059669;
        --md-accent-soft: rgba(5, 150, 105, 0.12);
        --md-accent-line: rgba(5, 150, 105, 0.3);
    }

    .pd-modal.is-warn[b-ykpyed8jdi] {
        --md-accent: #d97706;
        --md-accent-soft: rgba(217, 119, 6, 0.12);
        --md-accent-line: rgba(217, 119, 6, 0.3);
    }

    .pd-modal.is-danger[b-ykpyed8jdi] {
        --md-accent: #dc2626;
        --md-accent-soft: rgba(220, 38, 38, 0.12);
        --md-accent-line: rgba(220, 38, 38, 0.3);
    }

.pd-alert-warn[b-ykpyed8jdi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}

[data-theme="dark"] .pd-alert-warn[b-ykpyed8jdi] {
    background: rgba(217, 119, 6, 0.15);
    border-color: rgba(217, 119, 6, 0.35);
    color: #fde68a;
}

.pd-modal-head[b-ykpyed8jdi] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0;
    padding: 1.15rem 1.4rem 1rem;
    background: linear-gradient(180deg, var(--md-accent-soft), transparent);
}

.pd-modal-icon[b-ykpyed8jdi] {
    width: 46px;
    height: 46px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 1.25rem;
    color: var(--md-accent);
    background: var(--md-accent-soft);
    border: 1px solid var(--md-accent-line);
}

.pd-modal-titles[b-ykpyed8jdi] {
    flex: 1;
    min-width: 0;
}

.pd-modal-head h3[b-ykpyed8jdi] {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--pm-text, #0f172a);
    overflow-wrap: anywhere;
}

.pd-modal-sub[b-ykpyed8jdi] {
    margin: 0.2rem 0 0;
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--pm-muted, #475569);
    overflow-wrap: anywhere;
}

.pd-icon-btn[b-ykpyed8jdi] {
    background: transparent;
    border: none;
    font-size: 1rem;
    color: var(--pm-faint, #64748b);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.pd-icon-btn:hover[b-ykpyed8jdi] {
    color: var(--pm-text, #0f172a);
    background: var(--pm-border, #e2e8f0);
}

.pd-modal-form[b-ykpyed8jdi] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 0;
}

.pd-modal-body[b-ykpyed8jdi] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0.85rem 1.4rem 1.3rem;
}

.pd-modal .pm-form-actions[b-ykpyed8jdi] {
    flex: none;
    margin: 0;
    padding: 0.85rem 1.4rem;
    background: var(--pm-surface-2, #f8fafc);
    border-top: 1px solid var(--pm-border, #e2e8f0);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
}

.pd-modal .pm-btn-primary[b-ykpyed8jdi] {
    background: var(--md-accent);
    color: #fff;
    border: 0;
    border-radius: 12px;
    padding: 0.65rem 1.15rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.pd-modal .pm-btn-primary:hover:not(:disabled)[b-ykpyed8jdi] {
    opacity: 0.92;
    transform: translateY(-1px);
}

.pd-modal .pm-btn-danger[b-ykpyed8jdi] {
    background: #dc2626;
    color: #fff;
    border: 0;
    border-radius: 12px;
    padding: 0.65rem 1.15rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.pd-modal .pm-btn-danger:hover:not(:disabled)[b-ykpyed8jdi] {
    background: #b91c1c;
    transform: translateY(-1px);
}

.pd-modal .pm-btn-ghost[b-ykpyed8jdi] {
    background: transparent;
    color: var(--pm-muted, #475569);
    border: 1px solid var(--pm-border, #e2e8f0);
    border-radius: 12px;
    padding: 0.65rem 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pd-modal .pm-btn-ghost:hover:not(:disabled)[b-ykpyed8jdi] {
    background: var(--pm-border, #e2e8f0);
    color: var(--pm-text, #0f172a);
}

.pd-req[b-ykpyed8jdi] {
    color: #dc2626;
}

.pm-field[b-ykpyed8jdi] {
    min-width: 0;
}

.pm-field.full[b-ykpyed8jdi] {
    grid-column: 1 / -1;
}

.pm-field label[b-ykpyed8jdi] {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--pm-muted, #475569);
}

.pd-modal .form-control[b-ykpyed8jdi],
.pd-modal select.form-control[b-ykpyed8jdi],
.pd-modal textarea.form-control[b-ykpyed8jdi] {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.55rem 0.8rem;
    background-color: var(--pm-surface, #ffffff);
    color: var(--pm-text, #0f172a);
    border: 1px solid var(--pm-border, #cbd5e1);
    border-radius: 12px;
    font-size: 0.93rem;
    line-height: 1.4;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.pd-modal .form-control:hover:not(:disabled)[b-ykpyed8jdi] {
    border-color: var(--md-accent-line);
}

.pd-modal .form-control:focus[b-ykpyed8jdi] {
    background-color: var(--pm-surface, #ffffff);
    color: var(--pm-text, #0f172a);
    border-color: var(--md-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--md-accent-soft);
}

.pd-modal textarea.form-control[b-ykpyed8jdi] {
    resize: vertical;
    min-height: 85px;
}

.pd-input-icon[b-ykpyed8jdi] {
    position: relative;
}

.pd-input-icon > i:first-child[b-ykpyed8jdi] {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    color: var(--pm-faint, #64748b);
    pointer-events: none;
    transition: color 0.15s;
}

.pd-input-icon:focus-within > i:first-child[b-ykpyed8jdi] {
    color: var(--md-accent);
}

.pd-modal .pd-input-icon .form-control[b-ykpyed8jdi] {
    padding-left: 2.6rem;
}

.pd-input-icon.pd-select[b-ykpyed8jdi]::after {
    content: "";
    position: absolute;
    right: 1.05rem;
    top: 50%;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--pm-faint, #64748b);
    border-bottom: 2px solid var(--pm-faint, #64748b);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.pd-modal .pd-input-icon.pd-select select.form-control[b-ykpyed8jdi] {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
    cursor: pointer;
}

.pm-switch-row[b-ykpyed8jdi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border: 1px solid var(--pm-border, #e2e8f0);
    border-radius: 12px;
    background: var(--pm-surface-2, #f8fafc);
    cursor: pointer;
}

.pm-switch-info[b-ykpyed8jdi] {
    display: flex;
    flex-direction: column;
}

.pm-switch-title[b-ykpyed8jdi] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pm-text, #0f172a);
}

.pm-switch-desc[b-ykpyed8jdi] {
    font-size: 0.8rem;
    color: var(--pm-muted, #475569);
}

.pd-confirm[b-ykpyed8jdi] {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: 2rem 1.6rem 1.5rem;
    text-align: center;
    background: linear-gradient(180deg, var(--md-accent-soft), transparent 70%);
}

.pd-confirm-icon[b-ykpyed8jdi] {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: 0.35rem;
    border-radius: 50%;
    font-size: 1.7rem;
    color: var(--md-accent);
    background: var(--md-accent-soft);
    border: 1px solid var(--md-accent-line);
    box-shadow: 0 0 0 8px var(--md-accent-soft);
}

.pd-confirm h3[b-ykpyed8jdi] {
    margin: 0.3rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pm-text, #0f172a);
}

.pd-confirm p[b-ykpyed8jdi] {
    margin: 0;
    max-width: 40ch;
    color: var(--pm-muted, #475569);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.pd-confirm p strong[b-ykpyed8jdi] {
    color: var(--pm-text, #0f172a);
}

@keyframes pd-fade-b-ykpyed8jdi {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pd-pop-b-ykpyed8jdi {
    from { opacity: 0; transform: scale(0.96) translateY(6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- Dark-theme overrides for fixed-position modals ----------
   position:fixed elements escape the .pd-page variable scope,
   so we re-declare --pm-* directly on the modal itself in dark mode.
   ------------------------------------------------------------------- */
[data-theme="dark"] .pd-modal[b-ykpyed8jdi] {
    --pm-surface:   #1e293b;
    --pm-surface-2: #0f172a;
    --pm-border:    rgba(255, 255, 255, 0.12);
    --pm-text:      #f8fafc;
    --pm-muted:     #cbd5e1;
    --pm-faint:     #94a3b8;
}

[data-theme="dark"] .pd-modal .form-control[b-ykpyed8jdi],
[data-theme="dark"] .pd-modal select.form-control[b-ykpyed8jdi],
[data-theme="dark"] .pd-modal textarea.form-control[b-ykpyed8jdi] {
    background-color: #0f172a;
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .pd-modal .form-control:hover:not(:disabled)[b-ykpyed8jdi] {
    border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .pd-modal .form-control:focus[b-ykpyed8jdi] {
    background-color: #0f172a;
    color: #f8fafc;
    border-color: var(--md-accent);
    box-shadow: 0 0 0 3px var(--md-accent-soft);
}

[data-theme="dark"] .pm-switch-row[b-ykpyed8jdi] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .pd-modal .pm-form-actions[b-ykpyed8jdi] {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .pd-modal .pm-btn-ghost[b-ykpyed8jdi] {
    border-color: rgba(255, 255, 255, 0.15);
    color: #94a3b8;
}

[data-theme="dark"] .pd-modal .pm-btn-ghost:hover:not(:disabled)[b-ykpyed8jdi] {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}
/* /Components/Pages/TeamManagement/TeamManagementComponent.razor.rz.scp.css */
/* =========================================================
   Projects page
   Uses your existing theme variables with safe fallbacks.
   ========================================================= */

.pm-page[b-kfiokq2hbm] {
    /* Neutrals (fall back to sensible values if a theme variable is missing) */
    --pm-surface: var(--color-bg-surface, #ffffff);

    --pm-surface-2: var(--color-bg-subtle, #f8fafc);
    --pm-border: var(--color-border-light, #e2e8f0);
    --pm-border-strong: #cbd5e1;
    --pm-text: var(--color-text-primary, #0f172a);
    --pm-muted: var(--color-text-secondary, #475569);
    --pm-faint: var(--color-text-tertiary, #64748b);
    --pm-track: var(--color-gray-200, #e2e8f0);
    --pm-accent: #2563eb;
    --pm-accent-strong: #1d4ed8;
    --pm-accent-soft: #dbeafe;
    --pm-accent-fg: #1d4ed8;
    --pm-focus: rgba(37, 99, 235, 0.5);
    /* Status palette: solid = dots and bars, bg/fg = badges */
    --st-planned: #64748b;
    --st-planned-bg: #e2e8f0;
    --st-planned-fg: #334155;
    --st-progress: #2563eb;
    --st-progress-bg: #dbeafe;
    --st-progress-fg: #1d4ed8;
    --st-paused: #d97706;
    --st-paused-bg: #fef3c7;
    --st-paused-fg: #b45309;
    --st-done: #059669;
    --st-done-bg: #d1fae5;
    --st-done-fg: #047857;
    --st-canceled: #dc2626;
    --st-canceled-bg: #fee2e2;
    --st-canceled-fg: #b91c1c;
    --st-overdue: #e11d48;
    padding: 1.25rem 1rem 2.5rem;
    color: var(--pm-text);
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .pm-page[b-kfiokq2hbm] {
    --pm-surface-2: rgba(255, 255, 255, 0.04);
    --pm-border-strong: rgba(255, 255, 255, 0.22);
    --pm-track: rgba(255, 255, 255, 0.12);
    --pm-accent-soft: #1e3a8a;
    --pm-accent-fg: #bfdbfe;
    --pm-focus: rgba(147, 197, 253, 0.6);
    --st-planned: #94a3b8;
    --st-planned-bg: #334155;
    --st-planned-fg: #e2e8f0;
    --st-progress: #60a5fa;
    --st-progress-bg: #1e3a8a;
    --st-progress-fg: #bfdbfe;
    --st-paused: #fbbf24;
    --st-paused-bg: #78350f;
    --st-paused-fg: #fde68a;
    --st-done: #34d399;
    --st-done-bg: #064e3b;
    --st-done-fg: #a7f3d0;
    --st-canceled: #f87171;
    --st-canceled-bg: #7f1d1d;
    --st-canceled-fg: #fecaca;
    --st-overdue: #fb7185;
}

.pm-page :focus-visible[b-kfiokq2hbm] {
    outline: 2px solid var(--pm-focus);
    outline-offset: 2px;
}

/* ---------- Header ---------- */

.pm-header[b-kfiokq2hbm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.pm-kicker[b-kfiokq2hbm] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--pm-faint);
    margin-bottom: 0.3rem;
}

.pm-header h1[b-kfiokq2hbm] {
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin: 0 0 0.2rem;
}

.pm-header p[b-kfiokq2hbm] {
    margin: 0;
    color: var(--pm-muted);
}

.pm-header-actions[b-kfiokq2hbm] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------- Buttons ---------- */

.pm-btn[b-kfiokq2hbm] {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.6rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .pm-btn:disabled[b-kfiokq2hbm] {
        opacity: 0.6;
        cursor: default;
    }

.pm-btn-primary[b-kfiokq2hbm] {
    background: var(--pm-accent);
    color: #fff;
}

    .pm-btn-primary:hover:not(:disabled)[b-kfiokq2hbm] {
        background: var(--pm-accent-strong);
    }

.pm-btn-ghost[b-kfiokq2hbm] {
    background: var(--pm-surface);
    border-color: var(--pm-border);
    color: var(--pm-text);
}

    .pm-btn-ghost:hover:not(:disabled)[b-kfiokq2hbm] {
        border-color: var(--pm-border-strong);
        background: var(--pm-surface-2);
    }

.pm-mini[b-kfiokq2hbm] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--pm-border);
    background: var(--pm-surface);
    color: var(--pm-muted);
    border-radius: 8px;
    padding: 0.25rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

    .pm-mini:hover[b-kfiokq2hbm] {
        color: var(--pm-text);
        border-color: var(--pm-border-strong);
    }

.pm-link[b-kfiokq2hbm] {
    border: 0;
    background: transparent;
    color: var(--pm-accent-fg);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.2rem 0.3rem;
    cursor: pointer;
}

    .pm-link:hover[b-kfiokq2hbm] {
        text-decoration: underline;
    }

.pm-spin[b-kfiokq2hbm] {
    display: inline-block;
    animation: pm-spin-b-kfiokq2hbm 0.9s linear infinite;
}

/* ---------- Status rail (one connected strip, click to filter) ---------- */

.pm-rail[b-kfiokq2hbm] {
    display: flex;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: 12px;
    overflow-x: auto;
    margin-bottom: 1rem;
    scrollbar-width: thin;
}

.pm-rail-item[b-kfiokq2hbm] {
    --dot: var(--pm-faint);
    position: relative;
    flex: 1 0 auto;
    min-width: 112px;
    display: flex;
    flex-direction: column;
    /* center content vertically to keep all items equal height
       and avoid single items appearing taller than others */
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.8rem 1rem;
    min-height: 64px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--pm-border);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .pm-rail-item:last-child[b-kfiokq2hbm] {
        border-right: 0;
    }

    .pm-rail-item:hover[b-kfiokq2hbm] {
        background: var(--pm-surface-2);
    }

    .pm-rail-item:focus-visible[b-kfiokq2hbm] {
        outline-offset: -3px;
    }

    .pm-rail-item.all[b-kfiokq2hbm] {
        --dot: var(--pm-accent);
    }

    .pm-rail-item.planned[b-kfiokq2hbm] {
        --dot: var(--st-planned);
    }

    .pm-rail-item.progress[b-kfiokq2hbm] {
        --dot: var(--st-progress);
    }

    .pm-rail-item.paused[b-kfiokq2hbm] {
        --dot: var(--st-paused);
    }

    .pm-rail-item.done[b-kfiokq2hbm] {
        --dot: var(--st-done);
    }

    .pm-rail-item.canceled[b-kfiokq2hbm] {
        --dot: var(--st-canceled);
    }

    .pm-rail-item.overdue[b-kfiokq2hbm] {
        --dot: var(--st-overdue);
    }

    .pm-rail-item[b-kfiokq2hbm]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: var(--dot);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.2s ease;
    }

    .pm-rail-item.active[b-kfiokq2hbm] {
        background: var(--pm-surface-2);
    }

        .pm-rail-item.active[b-kfiokq2hbm]::after {
            transform: scaleX(1);
        }

.pm-rail-count[b-kfiokq2hbm] {
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1.1;
}

.pm-rail-label[b-kfiokq2hbm] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--pm-faint);
    /* prevent label wrapping so tall labels don't increase the item's height */
    white-space: nowrap;
}

.pm-rail-item.active .pm-rail-label[b-kfiokq2hbm] {
    color: var(--pm-text);
}

.pm-dot[b-kfiokq2hbm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot);
    flex: none;
}

/* ---------- Toolbar ---------- */

.pm-toolbar[b-kfiokq2hbm] {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    align-items: stretch;
}

.pm-search[b-kfiokq2hbm] {
    flex: 1;
    min-width: 240px;
    position: relative;
}

    .pm-search > i[b-kfiokq2hbm] {
        position: absolute;
        left: 0.85rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--pm-faint);
        pointer-events: none;
    }

    .pm-search input[b-kfiokq2hbm] {
        width: 100%;
        height: 100%;
        min-height: 42px;
        border: 1px solid var(--pm-border);
        background: var(--pm-surface);
        color: var(--pm-text);
        border-radius: 10px;
        padding: 0.6rem 2.3rem 0.6rem 2.4rem;
    }

        .pm-search input[b-kfiokq2hbm]::placeholder {
            color: var(--pm-faint);
        }

.pm-search-clear[b-kfiokq2hbm] {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--pm-faint);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
}

    .pm-search-clear:hover[b-kfiokq2hbm] {
        color: var(--pm-text);
        background: var(--pm-surface-2);
    }

.pm-select[b-kfiokq2hbm],
.pm-input[b-kfiokq2hbm] {
    min-height: 42px;
    width: 100%;
    border: 1px solid var(--pm-border);
    background: var(--pm-surface);
    color: var(--pm-text);
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
}

.pm-select[b-kfiokq2hbm] {
    appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
}

.pm-toolbar .pm-select[b-kfiokq2hbm] {
    width: auto;
    min-width: 190px;
}

.pm-select-sm[b-kfiokq2hbm] {
    min-height: 34px;
    width: auto;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.85rem;
}

.pm-segmented[b-kfiokq2hbm] {
    display: inline-flex;
    border: 1px solid var(--pm-border);
    border-radius: 10px;
    background: var(--pm-surface);
    overflow: hidden;
}

    .pm-segmented button[b-kfiokq2hbm] {
        border: 0;
        background: transparent;
        color: var(--pm-faint);
        width: 42px;
        cursor: pointer;
    }

        .pm-segmented button + button[b-kfiokq2hbm] {
            border-left: 1px solid var(--pm-border);
        }

        .pm-segmented button:hover[b-kfiokq2hbm] {
            color: var(--pm-text);
        }

        .pm-segmented button.active[b-kfiokq2hbm] {
            background: var(--pm-accent-soft);
            color: var(--pm-accent-fg);
        }

.pm-filter-toggle[b-kfiokq2hbm] {
    display: none;
}

.pm-count-pill[b-kfiokq2hbm] {
    background: var(--pm-accent);
    color: #fff;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
}

/* ---------- Filter panel ---------- */

.pm-filters[b-kfiokq2hbm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem 0.9rem;
    padding: 0.9rem;
    margin-bottom: 0.75rem;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: 12px;
}

.pm-field[b-kfiokq2hbm] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
}

    .pm-field > span[b-kfiokq2hbm] {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--pm-muted);
    }

.pm-switch[b-kfiokq2hbm] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    align-self: end;
    min-height: 42px;
    font-size: 0.88rem;
    color: var(--pm-muted);
    cursor: pointer;
    margin: 0;
}

    .pm-switch input[b-kfiokq2hbm] {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
    }

.pm-switch-track[b-kfiokq2hbm] {
    position: relative;
    flex: none;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--pm-track);
    transition: background-color 0.15s ease;
}

    .pm-switch-track[b-kfiokq2hbm]::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        transition: transform 0.15s ease;
    }

.pm-switch input:checked + .pm-switch-track[b-kfiokq2hbm] {
    background: var(--pm-accent);
}

    .pm-switch input:checked + .pm-switch-track[b-kfiokq2hbm]::after {
        transform: translateX(16px);
    }

.pm-switch input:focus-visible + .pm-switch-track[b-kfiokq2hbm] {
    outline: 2px solid var(--pm-focus);
    outline-offset: 2px;
}

/* ---------- Active filter chips and results bar ---------- */

.pm-chips[b-kfiokq2hbm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.pm-chip[b-kfiokq2hbm] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--pm-border);
    background: var(--pm-accent-soft);
    color: var(--pm-accent-fg);
    border-radius: 999px;
    padding: 0.2rem 0.4rem 0.2rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

    .pm-chip:hover[b-kfiokq2hbm] {
        border-color: var(--pm-accent);
    }

.pm-resultsbar[b-kfiokq2hbm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--pm-faint);
}

.pm-pagesize[b-kfiokq2hbm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

/* ---------- Cards ---------- */

.pm-grid[b-kfiokq2hbm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    gap: 1rem;
}

.pm-card[b-kfiokq2hbm] {
    --st: var(--pm-accent);
    display: flex;
    flex-direction: column;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: 14px;
    padding: 1.05rem 1.1rem 0.9rem;
    cursor: pointer;
    box-shadow: inset 0 3px 0 var(--st);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .pm-card:hover[b-kfiokq2hbm] {
        border-color: var(--pm-border-strong);
        box-shadow: inset 0 3px 0 var(--st), var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.08));
    }

    .pm-card.is-planned[b-kfiokq2hbm], tr.is-planned[b-kfiokq2hbm] {
        --st: var(--st-planned);
    }

    .pm-card.is-progress[b-kfiokq2hbm], tr.is-progress[b-kfiokq2hbm] {
        --st: var(--st-progress);
    }

    .pm-card.is-paused[b-kfiokq2hbm], tr.is-paused[b-kfiokq2hbm] {
        --st: var(--st-paused);
    }

    .pm-card.is-done[b-kfiokq2hbm], tr.is-done[b-kfiokq2hbm] {
        --st: var(--st-done);
    }

    .pm-card.is-canceled[b-kfiokq2hbm], tr.is-canceled[b-kfiokq2hbm] {
        --st: var(--st-canceled);
    }

.pm-card-top[b-kfiokq2hbm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.2rem;
}

.pm-card-top-right[b-kfiokq2hbm] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pm-card h2[b-kfiokq2hbm] {
    font-size: 1.1rem;
    font-weight: 650;
    line-height: 1.3;
    margin: 0.75rem 0 0.3rem;
    overflow-wrap: anywhere;
}

.pm-desc[b-kfiokq2hbm] {
    min-height: 2.8em;
    margin: 0;
    color: var(--pm-muted);
    font-size: 0.9rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pm-badge[b-kfiokq2hbm],
.pm-priority[b-kfiokq2hbm],
.pm-due[b-kfiokq2hbm] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    white-space: nowrap;
}

    .pm-badge.is-planned[b-kfiokq2hbm] {
        background: var(--st-planned-bg);
        color: var(--st-planned-fg);
    }

    .pm-badge.is-progress[b-kfiokq2hbm] {
        background: var(--st-progress-bg);
        color: var(--st-progress-fg);
    }

    .pm-badge.is-paused[b-kfiokq2hbm] {
        background: var(--st-paused-bg);
        color: var(--st-paused-fg);
    }

    .pm-badge.is-done[b-kfiokq2hbm] {
        background: var(--st-done-bg);
        color: var(--st-done-fg);
    }

    .pm-badge.is-canceled[b-kfiokq2hbm] {
        background: var(--st-canceled-bg);
        color: var(--st-canceled-fg);
    }

.pri-urgent[b-kfiokq2hbm] {
    background: #fee2e2;
    color: #b91c1c;
}

.pri-high[b-kfiokq2hbm] {
    background: #ffedd5;
    color: #c2410c;
}

.pri-medium[b-kfiokq2hbm] {
    background: #dbeafe;
    color: #1d4ed8;
}

.pri-low[b-kfiokq2hbm] {
    background: #e2e8f0;
    color: #475569;
}

[data-theme="dark"] .pm-page .pri-urgent[b-kfiokq2hbm] {
    background: #7f1d1d;
    color: #fecaca;
}

[data-theme="dark"] .pm-page .pri-high[b-kfiokq2hbm] {
    background: #7c2d12;
    color: #fed7aa;
}

[data-theme="dark"] .pm-page .pri-medium[b-kfiokq2hbm] {
    background: #1e3a8a;
    color: #bfdbfe;
}

[data-theme="dark"] .pm-page .pri-low[b-kfiokq2hbm] {
    background: #334155;
    color: #cbd5e1;
}

.pm-due.due-late[b-kfiokq2hbm] {
    background: transparent;
    color: var(--st-overdue);
    box-shadow: inset 0 0 0 1px var(--st-overdue);
}

.pm-due.due-soon[b-kfiokq2hbm] {
    background: transparent;
    color: var(--st-paused-fg);
    box-shadow: inset 0 0 0 1px var(--st-paused);
}

.pm-progress[b-kfiokq2hbm] {
    margin: 0.95rem 0;
}

.pm-progress-meta[b-kfiokq2hbm] {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
    color: var(--pm-muted);
}

    .pm-progress-meta strong[b-kfiokq2hbm] {
        color: var(--pm-text);
    }

.pm-progress-track[b-kfiokq2hbm] {
    height: 6px;
    background: var(--pm-track);
    border-radius: 999px;
    overflow: hidden;
}

.pm-progress-fill[b-kfiokq2hbm] {
    height: 100%;
    background: var(--st, var(--pm-accent));
    border-radius: 999px;
    transition: width 0.3s ease;
}

.pm-meta[b-kfiokq2hbm] {
    display: grid;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--pm-faint);
}

    .pm-meta > span[b-kfiokq2hbm] {
        display: flex;
        align-items: center;
        gap: 0.45rem;
    }

.pm-avatar[b-kfiokq2hbm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pm-accent-soft);
    color: var(--pm-accent-fg);
    font-size: 0.65rem;
    font-weight: 700;
    flex: none;
}

.pm-card-foot[b-kfiokq2hbm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--pm-border);
    font-size: 0.82rem;
    color: var(--pm-muted);
}

.pm-meta + .pm-card-foot[b-kfiokq2hbm] {
    margin-top: 0.9rem;
}

.pm-card-foot > span:first-child[b-kfiokq2hbm] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pm-card-actions[b-kfiokq2hbm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.pm-open[b-kfiokq2hbm] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    color: var(--pm-faint);
}

.pm-card:hover .pm-open[b-kfiokq2hbm],
.pm-card:focus-visible .pm-open[b-kfiokq2hbm] {
    color: var(--pm-accent-fg);
}

/* ---------- Table view ---------- */

.pm-table-wrap[b-kfiokq2hbm] {
    overflow-x: auto;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: 12px;
}

.pm-table[b-kfiokq2hbm] {
    width: 100%;
    min-width: 940px;
    border-collapse: collapse;
    font-size: 0.88rem;
}

    .pm-table thead th[b-kfiokq2hbm] {
        background: var(--pm-surface-2);
        color: var(--pm-muted);
        font-weight: 600;
        font-size: 0.8rem;
        text-align: left;
        padding: 0.65rem 0.85rem;
        border-bottom: 1px solid var(--pm-border);
        white-space: nowrap;
    }

    .pm-table tbody td[b-kfiokq2hbm] {
        padding: 0.7rem 0.85rem;
        border-bottom: 1px solid var(--pm-border);
        vertical-align: middle;
    }

    .pm-table tbody tr:last-child td[b-kfiokq2hbm] {
        border-bottom: 0;
    }

    .pm-table tbody tr[b-kfiokq2hbm] {
        cursor: pointer;
    }

        .pm-table tbody tr:hover[b-kfiokq2hbm] {
            background: var(--pm-surface-2);
        }

        .pm-table tbody tr:focus-visible[b-kfiokq2hbm] {
            outline-offset: -2px;
        }

    .pm-table .num[b-kfiokq2hbm] {
        text-align: right;
    }

    .pm-table .nowrap[b-kfiokq2hbm] {
        white-space: nowrap;
    }

    .pm-table .col-progress[b-kfiokq2hbm] {
        width: 170px;
    }

    .pm-table .col-actions[b-kfiokq2hbm] {
        width: 60px;
        text-align: right;
    }

    .pm-table .col-name strong[b-kfiokq2hbm] {
        display: block;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .pm-table .col-name .pm-due[b-kfiokq2hbm] {
        margin-top: 0.25rem;
    }

.pm-progress-inline[b-kfiokq2hbm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .pm-progress-inline .pm-progress-track[b-kfiokq2hbm] {
        flex: 1;
    }

    .pm-progress-inline > span[b-kfiokq2hbm] {
        width: 2.6em;
        text-align: right;
        font-size: 0.8rem;
        color: var(--pm-muted);
    }

/* ---------- Pager ---------- */

.pm-pager[b-kfiokq2hbm] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 1.5rem;
}

.pm-page-btn[b-kfiokq2hbm] {
    min-width: 36px;
    height: 36px;
    padding: 0 0.6rem;
    border: 1px solid var(--pm-border);
    background: var(--pm-surface);
    color: var(--pm-text);
    border-radius: 8px;
    font-size: 0.88rem;
    cursor: pointer;
}

    .pm-page-btn:hover:not(:disabled):not(.active)[b-kfiokq2hbm] {
        border-color: var(--pm-border-strong);
        background: var(--pm-surface-2);
    }

    .pm-page-btn.active[b-kfiokq2hbm] {
        background: var(--pm-accent);
        border-color: var(--pm-accent);
        color: #fff;
        font-weight: 700;
    }

    .pm-page-btn:disabled[b-kfiokq2hbm] {
        opacity: 0.4;
        cursor: default;
    }

.pm-page-gap[b-kfiokq2hbm] {
    padding: 0 0.2rem;
    color: var(--pm-faint);
}

/* ---------- Empty, error and loading states ---------- */

.pm-empty[b-kfiokq2hbm] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--pm-muted);
    background: var(--pm-surface);
    border: 1px dashed var(--pm-border-strong);
    border-radius: 14px;
}

    .pm-empty > i[b-kfiokq2hbm] {
        font-size: 2.4rem;
        display: block;
        margin-bottom: 0.6rem;
        color: var(--pm-faint);
    }

    .pm-empty h3[b-kfiokq2hbm] {
        font-size: 1.1rem;
        font-weight: 650;
        color: var(--pm-text);
        margin: 0 0 0.3rem;
    }

    .pm-empty p[b-kfiokq2hbm] {
        max-width: 44ch;
        margin: 0 auto 1rem;
    }

.pm-error > i[b-kfiokq2hbm] {
    color: var(--st-canceled);
}

.pm-skel-card[b-kfiokq2hbm] {
    cursor: default;
    box-shadow: none;
}

.pm-skel[b-kfiokq2hbm] {
    border-radius: 6px;
    background: linear-gradient(90deg, var(--pm-track) 25%, var(--pm-surface-2) 40%, var(--pm-track) 60%);
    background-size: 300% 100%;
    animation: pm-shimmer-b-kfiokq2hbm 1.4s ease infinite;
}

/* ---------- Motion ---------- */

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

@keyframes pm-shimmer-b-kfiokq2hbm {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pm-spin[b-kfiokq2hbm],
    .pm-skel[b-kfiokq2hbm] {
        animation: none;
    }

    .pm-btn[b-kfiokq2hbm],
    .pm-card[b-kfiokq2hbm],
    .pm-rail-item[b-kfiokq2hbm],
    .pm-rail-item[b-kfiokq2hbm]::after,
    .pm-progress-fill[b-kfiokq2hbm],
    .pm-switch-track[b-kfiokq2hbm],
    .pm-switch-track[b-kfiokq2hbm]::after {
        transition: none;
    }
}

/* ---------- Small screens ---------- */

@media (max-width: 768px) {
    .pm-page[b-kfiokq2hbm] {
        padding: 1rem 0.75rem 2rem;
    }

    .pm-header[b-kfiokq2hbm] {
        align-items: stretch;
    }

    .pm-header-actions[b-kfiokq2hbm] {
        width: 100%;
    }

        .pm-header-actions .pm-btn[b-kfiokq2hbm] {
            flex: 1;
            justify-content: center;
        }

    .pm-search[b-kfiokq2hbm] {
        flex-basis: 100%;
    }

    .pm-toolbar .pm-select[b-kfiokq2hbm] {
        flex: 1;
        min-width: 0;
    }

    .pm-filter-toggle[b-kfiokq2hbm] {
        display: inline-flex;
    }

    .pm-filters[b-kfiokq2hbm] {
        display: none;
    }

        .pm-filters.is-open[b-kfiokq2hbm] {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

    .pm-switch[b-kfiokq2hbm] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .pm-filters.is-open[b-kfiokq2hbm] {
        grid-template-columns: 1fr;
    }

    .pm-resultsbar[b-kfiokq2hbm] {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ---------- Projects-grade Modal & Controls ---------- */
.pd-overlay[b-kfiokq2hbm] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    z-index: 1050;
    padding: 1rem;
    animation: pd-fade-b-kfiokq2hbm 0.18s ease-out;
}

.pd-modal[b-kfiokq2hbm] {
    --md-accent: var(--pm-accent, #2563eb);
    --md-accent-soft: rgba(37, 99, 235, 0.12);
    --md-accent-line: rgba(37, 99, 235, 0.3);
    position: relative;
    width: min(600px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--pm-surface, #ffffff);
    color: var(--pm-text, #0f172a);
    border: 1px solid var(--pm-border, #e2e8f0);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    animation: pd-pop-b-kfiokq2hbm 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

    .pd-modal[b-kfiokq2hbm]::before {
        content: "";
        flex: none;
        height: 4px;
        background: var(--md-accent);
    }

    .pd-modal.narrow[b-kfiokq2hbm] {
        width: min(480px, 100%);
    }

    .pd-modal.is-team[b-kfiokq2hbm] {
        --md-accent: #2563eb;
        --md-accent-soft: rgba(37, 99, 235, 0.12);
        --md-accent-line: rgba(37, 99, 235, 0.3);
    }

    .pd-modal.is-member[b-kfiokq2hbm] {
        --md-accent: #059669;
        --md-accent-soft: rgba(5, 150, 105, 0.12);
        --md-accent-line: rgba(5, 150, 105, 0.3);
    }

    .pd-modal.is-warn[b-kfiokq2hbm] {
        --md-accent: #d97706;
        --md-accent-soft: rgba(217, 119, 6, 0.12);
        --md-accent-line: rgba(217, 119, 6, 0.3);
    }

    .pd-modal.is-danger[b-kfiokq2hbm] {
        --md-accent: #dc2626;
        --md-accent-soft: rgba(220, 38, 38, 0.12);
        --md-accent-line: rgba(220, 38, 38, 0.3);
    }

.pd-alert-warn[b-kfiokq2hbm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}

[data-theme="dark"] .pd-alert-warn[b-kfiokq2hbm] {
    background: rgba(217, 119, 6, 0.15);
    border-color: rgba(217, 119, 6, 0.35);
    color: #fde68a;
}

.pd-modal-head[b-kfiokq2hbm] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0;
    padding: 1.15rem 1.4rem 1rem;
    background: linear-gradient(180deg, var(--md-accent-soft), transparent);
}

.pd-modal-icon[b-kfiokq2hbm] {
    width: 46px;
    height: 46px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 1.25rem;
    color: var(--md-accent);
    background: var(--md-accent-soft);
    border: 1px solid var(--md-accent-line);
}

.pd-modal-titles[b-kfiokq2hbm] {
    flex: 1;
    min-width: 0;
}

.pd-modal-head h3[b-kfiokq2hbm] {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--pm-text, #0f172a);
    overflow-wrap: anywhere;
}

.pd-modal-sub[b-kfiokq2hbm] {
    margin: 0.2rem 0 0;
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--pm-muted, #475569);
    overflow-wrap: anywhere;
}

.pd-icon-btn[b-kfiokq2hbm] {
    background: transparent;
    border: none;
    font-size: 1rem;
    color: var(--pm-faint, #64748b);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.pd-icon-btn:hover[b-kfiokq2hbm] {
    color: var(--pm-text, #0f172a);
    background: var(--pm-border, #e2e8f0);
}

.pd-modal-form[b-kfiokq2hbm] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 0;
}

.pd-modal-body[b-kfiokq2hbm] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0.85rem 1.4rem 1.3rem;
}

.pd-modal .pm-form-actions[b-kfiokq2hbm] {
    flex: none;
    margin: 0;
    padding: 0.85rem 1.4rem;
    background: var(--pm-surface-2, #f8fafc);
    border-top: 1px solid var(--pm-border, #e2e8f0);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
}

.pd-modal .pm-btn-primary[b-kfiokq2hbm] {
    background: var(--md-accent);
    color: #fff;
    border: 0;
    border-radius: 12px;
    padding: 0.65rem 1.15rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.pd-modal .pm-btn-primary:hover:not(:disabled)[b-kfiokq2hbm] {
    opacity: 0.92;
    transform: translateY(-1px);
}

.pd-modal .pm-btn-danger[b-kfiokq2hbm] {
    background: var(--st-canceled, #dc2626);
    color: #fff;
    border: 0;
    border-radius: 12px;
    padding: 0.65rem 1.15rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.pd-modal .pm-btn-danger:hover:not(:disabled)[b-kfiokq2hbm] {
    background: #b91c1c;
    transform: translateY(-1px);
}

.pd-modal .pm-btn-ghost[b-kfiokq2hbm] {
    background: transparent;
    color: var(--pm-muted, #475569);
    border: 1px solid var(--pm-border, #e2e8f0);
    border-radius: 12px;
    padding: 0.65rem 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pd-modal .pm-btn-ghost:hover:not(:disabled)[b-kfiokq2hbm] {
    background: var(--pm-border, #e2e8f0);
    color: var(--pm-text, #0f172a);
}

.pd-req[b-kfiokq2hbm] {
    color: #dc2626;
}

.pm-form-grid[b-kfiokq2hbm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.95rem;
}

.pm-field[b-kfiokq2hbm] {
    min-width: 0;
}

.pm-field.full[b-kfiokq2hbm] {
    grid-column: 1 / -1;
}

.pm-field label[b-kfiokq2hbm] {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--pm-muted, #475569);
}

.pd-modal .form-control[b-kfiokq2hbm],
.pd-modal select.form-control[b-kfiokq2hbm],
.pd-modal textarea.form-control[b-kfiokq2hbm] {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.55rem 0.8rem;
    background-color: var(--pm-surface, #ffffff);
    color: var(--pm-text, #0f172a);
    border: 1px solid var(--pm-border, #cbd5e1);
    border-radius: 12px;
    font-size: 0.93rem;
    line-height: 1.4;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.pd-modal .form-control:hover:not(:disabled)[b-kfiokq2hbm] {
    border-color: var(--md-accent-line);
}

.pd-modal .form-control:focus[b-kfiokq2hbm] {
    background-color: var(--pm-surface, #ffffff);
    color: var(--pm-text, #0f172a);
    border-color: var(--md-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--md-accent-soft);
}

.pd-modal textarea.form-control[b-kfiokq2hbm] {
    resize: vertical;
    min-height: 85px;
}

.pd-input-icon[b-kfiokq2hbm] {
    position: relative;
}

.pd-input-icon > i:first-child[b-kfiokq2hbm] {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    color: var(--pm-faint, #64748b);
    pointer-events: none;
    transition: color 0.15s;
}

.pd-input-icon:focus-within > i:first-child[b-kfiokq2hbm] {
    color: var(--md-accent);
}

.pd-modal .pd-input-icon .form-control[b-kfiokq2hbm] {
    padding-left: 2.6rem;
}

.pd-input-icon.pd-select[b-kfiokq2hbm]::after {
    content: "";
    position: absolute;
    right: 1.05rem;
    top: 50%;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--pm-faint, #64748b);
    border-bottom: 2px solid var(--pm-faint, #64748b);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.pd-modal .pd-input-icon.pd-select select.form-control[b-kfiokq2hbm] {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
    cursor: pointer;
}

.pm-switch-row[b-kfiokq2hbm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border: 1px solid var(--pm-border, #e2e8f0);
    border-radius: 12px;
    background: var(--pm-surface-2, #f8fafc);
    cursor: pointer;
}

.pm-switch-info[b-kfiokq2hbm] {
    display: flex;
    flex-direction: column;
}

.pm-switch-title[b-kfiokq2hbm] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pm-text, #0f172a);
}

.pm-switch-desc[b-kfiokq2hbm] {
    font-size: 0.8rem;
    color: var(--pm-muted, #475569);
}

.pd-modal.is-confirm .pd-modal-close[b-kfiokq2hbm] {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 2;
}

.pd-confirm[b-kfiokq2hbm] {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: 2rem 1.6rem 1.5rem;
    text-align: center;
    background: linear-gradient(180deg, var(--md-accent-soft), transparent 70%);
}

.pd-confirm-icon[b-kfiokq2hbm] {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: 0.35rem;
    border-radius: 50%;
    font-size: 1.7rem;
    color: var(--md-accent);
    background: var(--md-accent-soft);
    border: 1px solid var(--md-accent-line);
    box-shadow: 0 0 0 8px var(--md-accent-soft);
}

.pd-confirm h3[b-kfiokq2hbm] {
    margin: 0.3rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pm-text, #0f172a);
}

.pd-confirm p[b-kfiokq2hbm] {
    margin: 0;
    max-width: 40ch;
    color: var(--pm-muted, #475569);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.pd-confirm p strong[b-kfiokq2hbm] {
    color: var(--pm-text, #0f172a);
}

@keyframes pd-fade-b-kfiokq2hbm {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pd-pop-b-kfiokq2hbm {
    from { opacity: 0; transform: scale(0.96) translateY(6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- Dark-theme overrides for fixed-position modals ----------
   position:fixed elements escape the .pm-page variable scope,
   so we re-declare --pm-* directly on the modal itself in dark mode.
   ------------------------------------------------------------------- */
[data-theme="dark"] .pd-modal[b-kfiokq2hbm] {
    --pm-surface:   #1e293b;
    --pm-surface-2: #0f172a;
    --pm-border:    rgba(255, 255, 255, 0.12);
    --pm-text:      #f8fafc;
    --pm-muted:     #cbd5e1;
    --pm-faint:     #94a3b8;
}

[data-theme="dark"] .pd-modal .form-control[b-kfiokq2hbm],
[data-theme="dark"] .pd-modal select.form-control[b-kfiokq2hbm],
[data-theme="dark"] .pd-modal textarea.form-control[b-kfiokq2hbm] {
    background-color: #0f172a;
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .pd-modal .form-control:hover:not(:disabled)[b-kfiokq2hbm] {
    border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .pd-modal .form-control:focus[b-kfiokq2hbm] {
    background-color: #0f172a;
    color: #f8fafc;
    border-color: var(--md-accent);
    box-shadow: 0 0 0 3px var(--md-accent-soft);
}

[data-theme="dark"] .pm-switch-row[b-kfiokq2hbm] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .pd-modal .pm-form-actions[b-kfiokq2hbm] {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .pd-modal .pm-btn-ghost[b-kfiokq2hbm] {
    border-color: rgba(255, 255, 255, 0.15);
    color: #94a3b8;
}

[data-theme="dark"] .pd-modal .pm-btn-ghost:hover:not(:disabled)[b-kfiokq2hbm] {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

/* Card foot styling */
.pm-card-foot[b-kfiokq2hbm] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--pm-border, #e2e8f0);
    flex-wrap: wrap;
}

.pm-btn-sm[b-kfiokq2hbm] {
    padding: 0.35rem 0.65rem;
    font-size: 0.82rem;
    border-radius: 8px;
}

.pm-btn-danger-ghost[b-kfiokq2hbm] {
    background: transparent;
    border-color: transparent;
    color: var(--st-canceled, #dc2626);
}

.pm-btn-danger-ghost:hover:not(:disabled)[b-kfiokq2hbm] {
    background: var(--st-canceled-bg, #fee2e2);
    color: var(--st-canceled-fg, #b91c1c);
}

.pm-card.is-inactive[b-kfiokq2hbm] {
    opacity: 0.72;
    border-style: dashed;
}

.pm-count-pill[b-kfiokq2hbm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 9999px;
    background: var(--pm-accent-soft, #dbeafe);
    color: var(--pm-accent-fg, #1d4ed8);
    font-size: 0.75rem;
    font-weight: 700;
}

@keyframes pm-fade-in-b-kfiokq2hbm {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pm-modal-pop-b-kfiokq2hbm {
    from { opacity: 0; transform: translate(-50%, -46%) scale(0.97); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.badge-warning[b-kfiokq2hbm] {
    background: #fef3c7;
    color: #b45309;
}

[data-theme="dark"] .badge-warning[b-kfiokq2hbm] {
    background: #78350f;
    color: #fde68a;
}
/* /Components/Pages/TicketsComponents/CreateTicketComponent.razor.rz.scp.css */
/* Create Ticket Page - Complete CSS with Theme Fixes */

/* Global body styling */
body[b-ul9e05wiib] {
    background-color: var(--color-bg-secondary);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    margin: 0;
    padding: 0;
}

/* Form Container */
.ticket-form-container[b-ul9e05wiib] {
    max-width: 1000px;
    margin: var(--space-8) auto;
    padding: var(--space-12);
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border-light);
}

[data-theme="dark"] .ticket-form-container[b-ul9e05wiib] {
    background: var(--color-bg-primary);
    border-color: var(--color-border-medium);
    box-shadow: var(--shadow-lg);
}

.page-title[b-ul9e05wiib] {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
    position: relative;
    letter-spacing: -0.025em;
}

    .page-title[b-ul9e05wiib]::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 64px;
        height: 3px;
        background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
        border-radius: var(--radius-sm);
    }

/* Form Grid Layout */
.form-grid[b-ul9e05wiib] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}

.form-group[b-ul9e05wiib] {
    margin-bottom: var(--space-5);
    position: relative;
}

.full-width[b-ul9e05wiib] {
    grid-column: 1 / -1;
}

/* Form Inputs */
.input-container[b-ul9e05wiib] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background-color: var(--color-bg-surface);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all var(--transition-normal);
}

[data-theme="dark"] .input-container[b-ul9e05wiib] {
    background-color: var(--color-gray-800);
}

.input-container:focus-within[b-ul9e05wiib] {
    border-color: var(--color-primary);
    box-shadow: var(--ring-primary);
    background-color: rgba(var(--color-primary-rgb), 0.05);
}

[data-theme="dark"] .input-container:focus-within[b-ul9e05wiib] {
    background-color: rgba(var(--color-primary-rgb), 0.1);
}

.input-icon[b-ul9e05wiib] {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    min-width: 24px;
    transition: var(--transition-fast);
}

.input-wrapper[b-ul9e05wiib] {
    flex-grow: 1;
    position: relative;
    background-color: transparent;
}

.form-label[b-ul9e05wiib] {
    display: block;
    margin-bottom: var(--space-3);
    font-weight: 500;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    transition: var(--transition-fast);
}

/* Form Controls - Fixed with !important to override Blazor defaults */
.form-control[b-ul9e05wiib] {
    width: 100%;
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: var(--transition-normal);
    background-color: var(--color-bg-surface) !important;
    color: var(--color-text-primary) !important;
    box-shadow: var(--shadow-sm);
    font-family: var(--font-family-sans);
}

[data-theme="dark"] .form-control[b-ul9e05wiib] {
    background-color: var(--color-gray-800) !important;
    border-color: var(--color-border-medium) !important;
    color: var(--color-text-primary) !important;
}

/* Placeholder Colors - FIXED */
.form-control[b-ul9e05wiib]::placeholder,
input[b-ul9e05wiib]::placeholder,
textarea[b-ul9e05wiib]::placeholder,
select[b-ul9e05wiib]::placeholder {
    color: var(--color-text-muted) !important;
    opacity: 0.7 !important;
    font-weight: 400;
}

[data-theme="dark"] .form-control[b-ul9e05wiib]::placeholder,
[data-theme="dark"] input[b-ul9e05wiib]::placeholder,
[data-theme="dark"] textarea[b-ul9e05wiib]::placeholder,
[data-theme="dark"] select[b-ul9e05wiib]::placeholder {
    color: var(--color-gray-500) !important;
    opacity: 0.8 !important;
}

/* Specific placeholder styles for different input types */
input.form-control[b-ul9e05wiib]::placeholder {
    color: var(--color-text-muted) !important;
}

textarea.form-control[b-ul9e05wiib]::placeholder {
    color: var(--color-text-muted) !important;
}

select.form-control[b-ul9e05wiib]::placeholder {
    color: var(--color-text-muted) !important;
}

[data-theme="dark"] input.form-control[b-ul9e05wiib]::placeholder,
[data-theme="dark"] textarea.form-control[b-ul9e05wiib]::placeholder,
[data-theme="dark"] select.form-control[b-ul9e05wiib]::placeholder {
    color: var(--color-gray-500) !important;
}

.form-control:focus[b-ul9e05wiib] {
    border-color: var(--color-primary) !important;
    box-shadow: var(--ring-primary) !important;
    outline: none;
    transform: translateY(-1px);
}

.form-control:hover[b-ul9e05wiib] {
    border-color: var(--color-border-heavy) !important;
}

/* Select Dropdown */
.form-control[type="select"][b-ul9e05wiib],
select.form-control[b-ul9e05wiib] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%236b7280' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    background-size: 14px 10px;
    padding-right: 2.5rem;
    background-color: var(--color-bg-surface) !important;
}

[data-theme="dark"] .form-control[type="select"][b-ul9e05wiib],
[data-theme="dark"] select.form-control[b-ul9e05wiib] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23cbd5e1' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-color: var(--color-gray-800) !important;
}

/* Textarea */
.form-control[type="textarea"][b-ul9e05wiib],
textarea.form-control[b-ul9e05wiib] {
    background-color: var(--color-bg-surface) !important;
    min-height: 160px;
    resize: vertical;
    line-height: var(--line-height-relaxed);
}

[data-theme="dark"] .form-control[type="textarea"][b-ul9e05wiib],
[data-theme="dark"] textarea.form-control[b-ul9e05wiib] {
    background-color: var(--color-gray-800) !important;
}

/* Select Options */
select.form-control option[b-ul9e05wiib] {
    background-color: var(--color-bg-surface) !important;
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] select.form-control option[b-ul9e05wiib] {
    background-color: var(--color-gray-800) !important;
    color: var(--color-text-primary) !important;
}

/* Disabled option placeholder */
select.form-control option[value="0"][b-ul9e05wiib] {
    color: var(--color-text-muted) !important;
}

[data-theme="dark"] select.form-control option[value="0"][b-ul9e05wiib] {
    color: var(--color-gray-500) !important;
}

/* File Upload */
.file-upload-container[b-ul9e05wiib] {
    position: relative;
    border: 2px dashed var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-12) var(--space-8);
    text-align: center;
    transition: var(--transition-normal);
    cursor: pointer;
    background-color: var(--color-bg-secondary);
    overflow: hidden;
}

[data-theme="dark"] .file-upload-container[b-ul9e05wiib] {
    background-color: var(--color-gray-700);
    border-color: var(--color-border-medium);
}

.file-upload-container:hover[b-ul9e05wiib] {
    border-color: var(--color-primary);
    background-color: rgba(var(--color-primary-rgb), 0.1);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.file-upload-container[b-ul9e05wiib]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    opacity: 0;
    transition: var(--transition-fast);
}

.file-upload-container:hover[b-ul9e05wiib]::before {
    opacity: 1;
}

.file-upload-input[b-ul9e05wiib] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.file-upload-label[b-ul9e05wiib] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-tertiary);
}

.upload-icon[b-ul9e05wiib] {
    font-size: 2.25rem;
    color: var(--color-primary);
    transition: var(--transition-fast);
}

.file-upload-container:hover .upload-icon[b-ul9e05wiib] {
    transform: scale(1.1);
    color: var(--color-primary-light);
}

.file-size-info[b-ul9e05wiib] {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

[data-theme="dark"] .file-size-info[b-ul9e05wiib] {
    color: var(--color-gray-500);
}

/* Upload Progress */
.upload-progress[b-ul9e05wiib] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-3);
    background-color: var(--color-bg-secondary);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    backdrop-filter: blur(var(--blur-sm));
}

[data-theme="dark"] .upload-progress[b-ul9e05wiib] {
    background-color: rgba(var(--color-gray-800), 0.9);
}

.progress-bar[b-ul9e05wiib] {
    height: 6px;
    background: var(--color-gray-300);
    width: 100%;
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}

[data-theme="dark"] .progress-bar[b-ul9e05wiib] {
    background: var(--color-gray-600);
}

.progress-fill[b-ul9e05wiib] {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    border-radius: var(--radius-sm);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .progress-fill[b-ul9e05wiib]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        animation: shimmer-b-ul9e05wiib 2s infinite;
    }

@keyframes shimmer-b-ul9e05wiib {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Image Preview */
.image-preview[b-ul9e05wiib] {
    margin-top: var(--space-6);
    animation: fadeIn-b-ul9e05wiib 0.4s ease-out;
}

.preview-container[b-ul9e05wiib] {
    position: relative;
    max-width: 500px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
    background-color: var(--color-bg-surface);
}

[data-theme="dark"] .preview-container[b-ul9e05wiib] {
    background-color: var(--color-gray-800);
    box-shadow: var(--shadow-lg);
}

.preview-container:hover[b-ul9e05wiib] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.preview-container img[b-ul9e05wiib] {
    width: 100%;
    height: auto;
    display: block;
    max-height: 400px;
    object-fit: contain;
}

.btn-remove-image[b-ul9e05wiib] {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background-color: var(--color-danger);
    color: var(--color-white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-sm);
    z-index: 10;
}

    .btn-remove-image:hover[b-ul9e05wiib] {
        background-color: var(--color-danger-dark);
        transform: scale(1.1);
        box-shadow: var(--shadow-md);
    }

.image-info[b-ul9e05wiib] {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

[data-theme="dark"] .image-info[b-ul9e05wiib] {
    background-color: var(--color-gray-700);
    color: var(--color-gray-300);
}

/* Form Actions */
.form-actions[b-ul9e05wiib] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-5);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--space-8);
}

.btn[b-ul9e05wiib] {
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-md);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    transition: var(--transition-normal);
    cursor: pointer;
    font-size: var(--font-size-sm);
    border: none;
    box-shadow: var(--shadow-sm);
    letter-spacing: 0.025em;
    min-height: 44px;
}

.btn-cancel[b-ul9e05wiib] {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-medium);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .btn-cancel[b-ul9e05wiib] {
    background-color: var(--color-gray-800);
    border-color: var(--color-border-heavy);
    color: var(--color-gray-300);
}

.btn-cancel:hover[b-ul9e05wiib] {
    background-color: var(--color-gray-100);
    border-color: var(--color-border-heavy);
    color: var(--color-text-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .btn-cancel:hover[b-ul9e05wiib] {
    background-color: var(--color-gray-700);
    border-color: var(--color-gray-500);
    color: var(--color-gray-200);
}

.btn-submit[b-ul9e05wiib] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: var(--color-white);
    position: relative;
    overflow: hidden;
    font-weight: 600;
}

    .btn-submit[b-ul9e05wiib]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
        opacity: 0;
        transition: var(--transition-fast);
    }

    .btn-submit:hover[b-ul9e05wiib] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

        .btn-submit:hover[b-ul9e05wiib]::before {
            opacity: 1;
        }

    .btn-submit:disabled[b-ul9e05wiib] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: var(--shadow-sm) !important;
    }

        .btn-submit:disabled[b-ul9e05wiib]::before {
            opacity: 0;
        }

    .btn-submit span[b-ul9e05wiib] {
        position: relative;
        z-index: 1;
    }

    .btn-submit i[b-ul9e05wiib] {
        position: relative;
        z-index: 1;
    }

/* Loading Spinner */
.spinner-border[b-ul9e05wiib] {
    position: relative;
    z-index: 1;
    border-width: 0.2em;
    width: 1.2em;
    height: 1.2em;
}

/* Validation */
.validation-summary[b-ul9e05wiib] {
    color: var(--color-danger);
    background-color: var(--color-danger-lighter);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-8);
    list-style-type: none;
    border-left: 4px solid var(--color-danger);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .validation-summary[b-ul9e05wiib] {
    background-color: rgba(var(--color-danger-rgb), 0.15);
    color: var(--color-danger-light);
}

.validation-message[b-ul9e05wiib] {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
    display: block;
    font-weight: 500;
    padding-left: var(--space-1);
}

[data-theme="dark"] .validation-message[b-ul9e05wiib] {
    color: var(--color-danger-light);
}

/* Alert Messages */
.alert[b-ul9e05wiib] {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-top: var(--space-3);
    border-left: 4px solid;
}

.alert-danger[b-ul9e05wiib] {
    background-color: var(--color-danger-lighter);
    border-left-color: var(--color-danger);
    color: var(--color-danger-dark);
}

[data-theme="dark"] .alert-danger[b-ul9e05wiib] {
    background-color: rgba(var(--color-danger-rgb), 0.15);
    color: var(--color-danger-light);
    border-left-color: var(--color-danger);
}

.alert i[b-ul9e05wiib] {
    margin-right: var(--space-2);
}

/* Floating Labels Effect */
.input-wrapper:focus-within .form-label[b-ul9e05wiib] {
    color: var(--color-primary);
    transform: translateY(-2px);
}

/* Uploading State */
.file-upload-container.uploading[b-ul9e05wiib] {
    border-color: var(--color-primary);
    background-color: rgba(var(--color-primary-rgb), 0.05);
}

[data-theme="dark"] .file-upload-container.uploading[b-ul9e05wiib] {
    background-color: rgba(var(--color-primary-rgb), 0.1);
}

/* Animations */
@keyframes fadeIn-b-ul9e05wiib {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-group[b-ul9e05wiib] {
    animation: fadeIn-b-ul9e05wiib 0.4s ease-out forwards;
    opacity: 0;
}

    .form-group:nth-child(1)[b-ul9e05wiib] {
        animation-delay: 0.1s;
    }

    .form-group:nth-child(2)[b-ul9e05wiib] {
        animation-delay: 0.2s;
    }

    .form-group:nth-child(3)[b-ul9e05wiib] {
        animation-delay: 0.3s;
    }

    .form-group:nth-child(4)[b-ul9e05wiib] {
        animation-delay: 0.4s;
    }

    .form-group:nth-child(5)[b-ul9e05wiib] {
        animation-delay: 0.5s;
    }

    .form-group:nth-child(6)[b-ul9e05wiib] {
        animation-delay: 0.6s;
    }

.form-actions[b-ul9e05wiib] {
    animation: fadeIn-b-ul9e05wiib 0.4s ease-out 0.7s forwards;
    opacity: 0;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .ticket-form-container[b-ul9e05wiib] {
        padding: var(--space-8);
        margin: var(--space-6);
    }

    .page-title[b-ul9e05wiib] {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--space-6);
    }
}

@media (max-width: 768px) {
    .ticket-form-container[b-ul9e05wiib] {
        padding: var(--space-6);
        margin: var(--space-4);
        border-radius: var(--radius-lg);
    }

    .page-title[b-ul9e05wiib] {
        font-size: var(--font-size-xl);
        margin-bottom: var(--space-5);
    }

    .form-grid[b-ul9e05wiib] {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .form-actions[b-ul9e05wiib] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .btn[b-ul9e05wiib] {
        width: 100%;
        justify-content: center;
        padding: var(--space-4);
    }

    .file-upload-container[b-ul9e05wiib] {
        padding: var(--space-8) var(--space-6);
    }
}

@media (max-width: 576px) {
    .ticket-form-container[b-ul9e05wiib] {
        padding: var(--space-4);
        margin: var(--space-2);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
    }

    .page-title[b-ul9e05wiib] {
        font-size: var(--font-size-lg);
        padding-bottom: var(--space-3);
        margin-bottom: var(--space-4);
    }

    .input-container[b-ul9e05wiib] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .input-icon[b-ul9e05wiib] {
        margin-bottom: var(--space-1);
    }

    .input-wrapper[b-ul9e05wiib] {
        width: 100%;
    }

    .form-label[b-ul9e05wiib] {
        margin-bottom: var(--space-2);
        font-size: var(--font-size-xs);
    }

    .form-control[b-ul9e05wiib] {
        padding: var(--space-3);
        font-size: var(--font-size-sm);
    }

    .file-upload-container[b-ul9e05wiib] {
        padding: var(--space-6) var(--space-4);
    }

    .form-actions[b-ul9e05wiib] {
        position: sticky;
        bottom: 0;
        background: var(--color-bg-surface);
        padding: var(--space-4);
        margin: var(--space-4) calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
        border-top: 1px solid var(--color-border-light);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        z-index: var(--z-sticky);
    }

    [data-theme="dark"] .form-actions[b-ul9e05wiib] {
        background: var(--color-bg-primary);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    }

    .btn[b-ul9e05wiib] {
        width: 100%;
        padding: var(--space-4);
        font-size: var(--font-size-base);
    }
}

/* Additional Mobile Optimizations */
@media (max-width: 400px) {
    .ticket-form-container[b-ul9e05wiib] {
        padding: var(--space-3);
        margin: var(--space-1);
        border-radius: 0;
        border: none;
        box-shadow: none;
        background: var(--color-bg-secondary);
    }

    [data-theme="dark"] .ticket-form-container[b-ul9e05wiib] {
        background: var(--color-bg-primary);
    }

    .form-group[b-ul9e05wiib] {
        background: var(--color-bg-surface);
        padding: var(--space-4);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        margin-bottom: var(--space-3);
    }

    [data-theme="dark"] .form-group[b-ul9e05wiib] {
        background: var(--color-gray-800);
        box-shadow: var(--shadow-md);
    }

    .form-grid[b-ul9e05wiib] {
        gap: var(--space-3);
        margin-bottom: var(--space-6);
    }

    .image-info[b-ul9e05wiib] {
        flex-direction: column;
        gap: var(--space-1);
        text-align: center;
    }
}

/* Ensure Blazor components inherit theme properly */
[b-ul9e05wiib] .form-control {
    background-color: var(--color-bg-surface) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-medium) !important;
}

[data-theme="dark"][b-ul9e05wiib]  .form-control {
    background-color: var(--color-gray-800) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-medium) !important;
}

/* Force theme on all input types with placeholder fixes */
[b-ul9e05wiib] input[type="text"],
[b-ul9e05wiib] input[type="email"],
[b-ul9e05wiib] input[type="password"],
[b-ul9e05wiib] input[type="number"],
[b-ul9e05wiib] input[type="tel"],
[b-ul9e05wiib] input[type="url"],
[b-ul9e05wiib] input[type="search"],
[b-ul9e05wiib] input[type="date"],
[b-ul9e05wiib] input[type="time"],
[b-ul9e05wiib] input[type="datetime-local"],
[b-ul9e05wiib] input[type="month"],
[b-ul9e05wiib] input[type="week"],
[b-ul9e05wiib] textarea,
[b-ul9e05wiib] select {
    background-color: var(--color-bg-surface) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-medium) !important;
}

    /* Placeholder styling for Blazor components */
    [b-ul9e05wiib] input::placeholder,
    [b-ul9e05wiib] textarea::placeholder,
    [b-ul9e05wiib] select::placeholder {
        color: var(--color-text-muted) !important;
        opacity: 0.7 !important;
    }

[data-theme="dark"][b-ul9e05wiib]  input::placeholder,
[data-theme="dark"][b-ul9e05wiib]  textarea::placeholder,
[data-theme="dark"][b-ul9e05wiib]  select::placeholder {
    color: var(--color-gray-500) !important;
    opacity: 0.8 !important;
}

[data-theme="dark"][b-ul9e05wiib]  input[type="text"],
[data-theme="dark"][b-ul9e05wiib]  input[type="email"],
[data-theme="dark"][b-ul9e05wiib]  input[type="password"],
[data-theme="dark"][b-ul9e05wiib]  input[type="number"],
[data-theme="dark"][b-ul9e05wiib]  input[type="tel"],
[data-theme="dark"][b-ul9e05wiib]  input[type="url"],
[data-theme="dark"][b-ul9e05wiib]  input[type="search"],
[data-theme="dark"][b-ul9e05wiib]  input[type="date"],
[data-theme="dark"][b-ul9e05wiib]  input[type="time"],
[data-theme="dark"][b-ul9e05wiib]  input[type="datetime-local"],
[data-theme="dark"][b-ul9e05wiib]  input[type="month"],
[data-theme="dark"][b-ul9e05wiib]  input[type="week"],
[data-theme="dark"][b-ul9e05wiib]  textarea,
[data-theme="dark"][b-ul9e05wiib]  select {
    background-color: var(--color-gray-800) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-medium) !important;
}

/* Blazor specific classes with placeholder fixes */
[b-ul9e05wiib] .blazor-input,
[b-ul9e05wiib] .valid.modified:not([type=checkbox]) {
    background-color: var(--color-bg-surface) !important;
    border-color: var(--color-border-medium) !important;
    color: var(--color-text-primary) !important;
}

    [b-ul9e05wiib] .blazor-input::placeholder,
    [b-ul9e05wiib] .valid.modified:not([type=checkbox])::placeholder {
        color: var(--color-text-muted) !important;
        opacity: 0.7 !important;
    }

[data-theme="dark"][b-ul9e05wiib]  .blazor-input,
[data-theme="dark"][b-ul9e05wiib]  .valid.modified:not([type=checkbox]) {
    background-color: var(--color-gray-800) !important;
    border-color: var(--color-border-medium) !important;
    color: var(--color-text-primary) !important;
}

    [data-theme="dark"][b-ul9e05wiib]  .blazor-input::placeholder,
    [data-theme="dark"][b-ul9e05wiib]  .valid.modified:not([type=checkbox])::placeholder {
        color: var(--color-gray-500) !important;
        opacity: 0.8 !important;
    }

/* Specific fix for InputTextArea placeholder */
[b-ul9e05wiib] .blazor-input-textarea::placeholder,
[b-ul9e05wiib] textarea.blazor-input::placeholder {
    color: var(--color-text-muted) !important;
    opacity: 0.7 !important;
}

[data-theme="dark"][b-ul9e05wiib]  .blazor-input-textarea::placeholder,
[data-theme="dark"][b-ul9e05wiib]  textarea.blazor-input::placeholder {
    color: var(--color-gray-500) !important;
    opacity: 0.8 !important;
}

/* Fix for InputSelect placeholder */
[b-ul9e05wiib] select option[disabled]:first-child {
    color: var(--color-text-muted) !important;
    opacity: 0.7 !important;
}

[data-theme="dark"][b-ul9e05wiib]  select option[disabled]:first-child {
    color: var(--color-gray-500) !important;
    opacity: 0.8 !important;
}
/* /Components/Pages/TicketsComponents/DailyTasksComponent.razor.rz.scp.css */
/* Header Styles */
.page-header[b-opjj8ss894] {
    background: var(--gradient-primary-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
}

.page-title[b-opjj8ss894] {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
}

.page-icon[b-opjj8ss894] {
    font-size: var(--font-size-3xl);
    color: var(--color-white);
    margin-right: var(--space-4);
}

/* Search and Actions */
.search-container[b-opjj8ss894] {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.search-input[b-opjj8ss894] {
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-6) var(--space-2) var(--space-12);
    border: 1px solid var(--color-border-medium);
    font-size: var(--font-size-sm);
    transition: var(--transition-fast);
    width: 100%;
}

    .search-input:focus[b-opjj8ss894] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.15);
    }

.search-icon[b-opjj8ss894] {
    position: absolute;
    left: var(--space-5);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400);
}

.clear-search[b-opjj8ss894] {
    position: absolute;
    right: var(--space-5);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-gray-500);
    cursor: pointer;
    padding: var(--space-1);
}

/* Task Card Styles */
.task-card[b-opjj8ss894] {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: none;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-surface);
}

    .task-card:hover[b-opjj8ss894] {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg);
    }

.task-card-header[b-opjj8ss894] {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gradient-primary-subtle);
}

.task-card-body[b-opjj8ss894] {
    padding: var(--space-6);
    flex-grow: 1;
}

.task-card-footer[b-opjj8ss894] {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border-light);
    background-color: var(--color-bg-secondary);
}

/* Priority Badges */
.badge-priority[b-opjj8ss894] {
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-weight: 500;
}

.badge-priority-low[b-opjj8ss894] {
    background-color: rgba(var(--color-success), 0.15);
    color: var(--color-success);
}

.badge-priority-medium[b-opjj8ss894] {
    background-color: rgba(var(--color-warning), 0.15);
    color: var(--color-warning);
}

.badge-priority-high[b-opjj8ss894] {
    background-color: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.badge-priority-urgent[b-opjj8ss894] {
    background-color: rgba(var(--color-danger), 0.15);
    color: var(--color-danger);
}

/* Info Items */
.info-item[b-opjj8ss894] {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-3);
}

.info-icon[b-opjj8ss894] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-light);
    border-radius: var(--radius-md);
    margin-right: var(--space-3);
    color: var(--color-primary);
}

/* Dropdown Menu */
.dropdown-toggle[b-opjj8ss894]::after {
    display: none;
}

.dropdown-menu[b-opjj8ss894] {
    border: none;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    padding: var(--space-2) 0;
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-light);
}

.dropdown-item[b-opjj8ss894] {
    padding: var(--space-2) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: var(--transition-fast);
    color: var(--color-text-primary);
}

    .dropdown-item:hover[b-opjj8ss894] {
        background-color: var(--color-bg-secondary);
        color: var(--color-primary);
    }

.dropdown-item-danger[b-opjj8ss894] {
    color: var(--color-danger);
}

    .dropdown-item-danger:hover[b-opjj8ss894] {
        background-color: rgba(var(--color-danger), 0.1);
        color: var(--color-danger);
    }

/* Empty State */
.empty-state[b-opjj8ss894] {
    padding: var(--space-16) var(--space-8);
    text-align: center;
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.empty-state-icon[b-opjj8ss894] {
    font-size: 4rem;
    color: var(--color-gray-300);
    margin-bottom: var(--space-6);
}

/* Pagination */
.pagination-container[b-opjj8ss894] {
    display: flex;
    justify-content: center;
    margin-top: var(--space-8);
}

.pagination[b-opjj8ss894] {
    display: flex;
    gap: var(--space-2);
}

.page-item[b-opjj8ss894] {
    list-style: none;
}

.page-link[b-opjj8ss894] {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-medium);
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-fast);
    background-color: var(--color-bg-surface);
    cursor: pointer;
}

    .page-link:hover[b-opjj8ss894] {
        background-color: var(--color-primary-light);
        color: var(--color-white);
    }

.page-item.active .page-link[b-opjj8ss894] {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.page-item.disabled .page-link[b-opjj8ss894] {
    color: var(--color-gray-400);
    background-color: var(--color-gray-100);
    pointer-events: none;
    border-color: var(--color-gray-300);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .page-header[b-opjj8ss894] {
        padding: var(--space-4);
    }

    .page-title[b-opjj8ss894] {
        font-size: var(--font-size-xl);
    }

    .header-actions[b-opjj8ss894] {
        flex-direction: column;
        gap: var(--space-4);
    }

    .search-container[b-opjj8ss894] {
        max-width: 100%;
    }

    .task-card-header[b-opjj8ss894] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }
}

@media (max-width: 576px) {
    .task-card-body[b-opjj8ss894] {
        padding: var(--space-4);
    }

    .info-item[b-opjj8ss894] {
        flex-direction: column;
        align-items: flex-start;
    }

    .info-icon[b-opjj8ss894] {
        margin-bottom: var(--space-2);
        margin-right: 0;
    }
}

/* Animation for cards */
@keyframes fadeIn-b-opjj8ss894 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.task-card[b-opjj8ss894] {
    animation: fadeIn-b-opjj8ss894 0.3s ease-out forwards;
    opacity: 0;
}

    .task-card:nth-child(1)[b-opjj8ss894] {
        animation-delay: 0.1s;
    }

    .task-card:nth-child(2)[b-opjj8ss894] {
        animation-delay: 0.2s;
    }

    .task-card:nth-child(3)[b-opjj8ss894] {
        animation-delay: 0.3s;
    }

    .task-card:nth-child(4)[b-opjj8ss894] {
        animation-delay: 0.4s;
    }

    .task-card:nth-child(5)[b-opjj8ss894] {
        animation-delay: 0.5s;
    }

    .task-card:nth-child(6)[b-opjj8ss894] {
        animation-delay: 0.6s;
    }

/* Base Container */
.container-fluid[b-opjj8ss894] {
    padding: 0 var(--space-3) 0 var(--space-4);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

/* Buttons */
.btn[b-opjj8ss894] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: var(--transition-fast);
    cursor: pointer;
    border: 1px solid transparent;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.btn-primary[b-opjj8ss894] {
    background-color: var(--color-primary);
    color: var(--color-white);
}

    .btn-primary:hover[b-opjj8ss894] {
        background-color: var(--color-primary-dark);
        transform: translateY(-1px);
    }

.btn-success[b-opjj8ss894] {
    background-color: var(--color-success);
    color: var(--color-white);
}

    .btn-success:hover[b-opjj8ss894] {
        background-color: #0da858;
        transform: translateY(-1px);
    }

.btn-outline-secondary[b-opjj8ss894] {
    background-color: transparent;
    color: var(--color-gray-600);
    border-color: var(--color-gray-400);
}

    .btn-outline-secondary:hover[b-opjj8ss894] {
        background-color: var(--color-gray-600);
        color: var(--color-white);
    }

.btn-sm[b-opjj8ss894] {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
}

/* Form Controls */
.form-select[b-opjj8ss894] {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-medium);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
    max-width: 150px;
}

    .form-select:focus[b-opjj8ss894] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.15);
    }

/* Card Styles */
.card[b-opjj8ss894] {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    border: 0;
    overflow: hidden;
}

.card-body[b-opjj8ss894] {
    padding: var(--space-6);
}

/* Badge Styles */
.badge[b-opjj8ss894] {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bg-secondary[b-opjj8ss894] {
    background-color: var(--color-gray-400);
    color: var(--color-white);
}

/* Text Colors */
.text-muted[b-opjj8ss894] {
    color: var(--color-text-tertiary) !important;
}

.text-white[b-opjj8ss894] {
    color: var(--color-white) !important;
}

/* Loading Spinner */
.spinner-border[b-opjj8ss894] {
    width: 3rem;
    height: 3rem;
    border: 0.3em solid var(--color-primary);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-opjj8ss894 0.75s linear infinite;
}

@keyframes spinner-border-b-opjj8ss894 {
    to {
        transform: rotate(360deg);
    }
}

/* Utility Classes */
.visually-hidden[b-opjj8ss894] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.disabled[b-opjj8ss894] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Dark Theme Adjustments */
[data-theme="dark"] .page-header[b-opjj8ss894] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-gray-800) 100%);
}

[data-theme="dark"] .task-card[b-opjj8ss894] {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .task-card-footer[b-opjj8ss894] {
    background-color: var(--color-gray-900);
}

[data-theme="dark"] .dropdown-menu[b-opjj8ss894] {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .dropdown-item[b-opjj8ss894] {
    color: var(--color-text-primary);
}

    [data-theme="dark"] .dropdown-item:hover[b-opjj8ss894] {
        background-color: var(--color-gray-700);
    }

[data-theme="dark"] .form-select[b-opjj8ss894] {
    background-color: var(--color-gray-800);
    color: var(--color-text-primary);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .empty-state[b-opjj8ss894] {
    background-color: var(--color-gray-800);
}

[data-theme="dark"] .empty-state-icon[b-opjj8ss894] {
    color: var(--color-gray-600);
}

[data-theme="dark"] .page-link[b-opjj8ss894] {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

    [data-theme="dark"] .page-link:hover[b-opjj8ss894] {
        background-color: var(--color-gray-700);
    }

[data-theme="dark"] .page-item.active .page-link[b-opjj8ss894] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Grid Styles */
.row[b-opjj8ss894] {
    --bs-gutter-x: var(--space-4);
    --bs-gutter-y: var(--space-4);
}

.g-4[b-opjj8ss894] {
    --bs-gutter-x: var(--space-4);
    --bs-gutter-y: var(--space-4);
}

/* Card Title */
.card-title[b-opjj8ss894] {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.card-text[b-opjj8ss894] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-6);
}

/* Small Text */
small[b-opjj8ss894] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* Icons */
.bi[b-opjj8ss894] {
    font-size: var(--font-size-base);
}

/* Row Columns Responsive */
@media (min-width: 768px) {
    .row-cols-md-2[b-opjj8ss894] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .row-cols-lg-3[b-opjj8ss894] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Dropdown Styles */
.dropdown-toggle[b-opjj8ss894] {
    padding: var(--space-1) var(--space-2);
    border: none;
    background: transparent;
    color: var(--color-gray-600);
}

.bi-three-dots-vertical[b-opjj8ss894] {
    font-size: var(--font-size-lg);
    line-height: 1;
}

/* Action Button States */
.d-flex.align-items-center.gap-2[b-opjj8ss894] {
    gap: var(--space-2);
}

.d-flex.align-items-center.gap-3[b-opjj8ss894] {
    gap: var(--space-3);
}

/* Task Details */
.task-details[b-opjj8ss894] {
    margin-top: var(--space-4);
}

/* Pagination Responsive */
@media (max-width: 576px) {
    .pagination[b-opjj8ss894] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .page-link[b-opjj8ss894] {
        padding: var(--space-1) var(--space-2);
        font-size: var(--font-size-xs);
    }
}

/* Container Max Width */
.container-fluid[b-opjj8ss894] {
    max-width: var(--max-content-width);
    margin: 0 auto;
}

/* /Components/Pages/TicketsComponents/ProjectDetailsComponent.razor.rz.scp.css */
/* ==========================================================================
   Project details page
   Uses the app's existing design tokens (var(--color-*)) with safe fallbacks.
   Overflow handling: every grid track is minmax(0, ...) so content can never
   push a column under its neighbour; long prose wraps, single-line data is
   clipped with an ellipsis, and wide tables scroll inside their own wrapper.
   ========================================================================== */

/* Tokens live on BOTH the page and the modal overlay.
   The modals are rendered outside .pd-page in the Razor file, so tokens defined
   only on .pd-page never reached them (that is why they stayed white in dark mode). */
.pd-page[b-5jejxwoo0x],
.pd-overlay[b-5jejxwoo0x] {
    --pd-accent: #2563eb;
    --pd-accent-soft: #dbeafe;
    --pd-ok: #059669;
    --pd-warn: #d97706;
    --pd-bad: #dc2626;
    --pd-radius: 14px;
    --pd-line: var(--color-border-light, #e5e7eb);
    --pd-surface: var(--color-bg-surface, #fff);
    --pd-surface-2: var(--color-bg-secondary, #f8fafc);
    --pd-text: var(--color-text-primary, #0f172a);
    --pd-text-2: var(--color-text-secondary, #475569);
    --pd-text-3: var(--color-text-tertiary, #94a3b8);
    --pd-input-bg: var(--pd-surface);
    --pd-backdrop: rgba(15, 23, 42, 0.55);
    color-scheme: light;
}

.pd-page[b-5jejxwoo0x] {
    padding: 1.25rem 1rem 3rem;
    color: var(--pd-text);
    max-width: 1280px;
    margin: 0 auto;
    min-width: 0;
}

.pd-empty[b-5jejxwoo0x] {
    min-height: 40vh;
    display: grid;
    place-items: center;
}

/* ---------- Long text: wrap instead of overflow ---------- */

.pd-title-row h1[b-5jejxwoo0x],
.pd-lead[b-5jejxwoo0x],
.pd-step-titlebox h3[b-5jejxwoo0x],
.pd-step-desc[b-5jejxwoo0x],
.pd-note > div[b-5jejxwoo0x],
.pd-inline-note[b-5jejxwoo0x],
.pd-timeline strong[b-5jejxwoo0x],
.pd-people strong[b-5jejxwoo0x],
.pd-step-details dd[b-5jejxwoo0x],
.pd-stat-value[b-5jejxwoo0x] {
    overflow-wrap: anywhere;
    min-width: 0;
}

/* ---------- Header ---------- */

.pd-crumbs[b-5jejxwoo0x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--pd-text-3);
    margin-bottom: 0.75rem;
    min-width: 0;
}

    .pd-crumbs a[b-5jejxwoo0x] {
        color: var(--pd-text-2);
        text-decoration: none;
        white-space: nowrap;
    }

        .pd-crumbs a:hover[b-5jejxwoo0x] {
            color: var(--pd-accent);
        }

.pd-crumb-current[b-5jejxwoo0x] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40ch;
    min-width: 0;
}

.pd-header-main[b-5jejxwoo0x] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.pd-header-text[b-5jejxwoo0x] {
    flex: 1 1 420px;
    min-width: 0;
}

.pd-title-row[b-5jejxwoo0x] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

    .pd-title-row h1[b-5jejxwoo0x] {
        margin: 0;
        font-size: 1.85rem;
        line-height: 1.2;
        letter-spacing: -0.01em;
        max-width: 100%;
    }

.pd-lead[b-5jejxwoo0x] {
    color: var(--pd-text-2);
    margin: 0.55rem 0 0;
    max-width: 72ch;
    line-height: 1.55;
}

.pd-actions[b-5jejxwoo0x] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------- Notes ---------- */

.pd-note[b-5jejxwoo0x] {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    border-radius: 12px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

    .pd-note > i[b-5jejxwoo0x] {
        font-size: 1.1rem;
        margin-top: 0.1rem;
        flex: none;
    }

.pd-note-warn[b-5jejxwoo0x] {
    background: #fffbeb;
    color: #92400e;
}

.pd-note-danger[b-5jejxwoo0x] {
    background: #fef2f2;
    color: #991b1b;
}

.pd-note-success[b-5jejxwoo0x] {
    background: #ecfdf5;
    color: #065f46;
}

/* ---------- Key numbers ---------- */

.pd-stats[b-5jejxwoo0x] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

.pd-stat[b-5jejxwoo0x] {
    background: var(--pd-surface);
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-radius);
    padding: 0.95rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.pd-stat-top[b-5jejxwoo0x] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.pd-stat-label[b-5jejxwoo0x] {
    font-size: 0.85rem;
    color: var(--pd-text-2);
}

.pd-stat-value[b-5jejxwoo0x] {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

    .pd-stat-value small[b-5jejxwoo0x] {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--pd-text-3);
        letter-spacing: 0;
    }

.pd-stat-hint[b-5jejxwoo0x] {
    font-size: 0.8rem;
    color: var(--pd-text-3);
}

.pd-stat-wide .pm-progress-track[b-5jejxwoo0x] {
    margin: 0.35rem 0 0.15rem;
}

.pd-stat-ok .pd-stat-value[b-5jejxwoo0x] {
    color: var(--pd-ok);
}

.pd-stat-warn .pd-stat-value[b-5jejxwoo0x] {
    color: var(--pd-warn);
}

.pd-stat-bad[b-5jejxwoo0x] {
    border-color: #fecaca;
}

    .pd-stat-bad .pd-stat-value[b-5jejxwoo0x] {
        color: var(--pd-bad);
    }

.pm-progress-track.lg[b-5jejxwoo0x] {
    height: 10px;
    background: var(--color-gray-200, #e5e7eb);
    border-radius: 999px;
    overflow: hidden;
}

.pm-progress-fill[b-5jejxwoo0x] {
    height: 100%;
    background: var(--pd-accent);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* ---------- Two-column layout ---------- */

.pd-layout[b-5jejxwoo0x] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.25rem;
    align-items: start;
}

.pd-main[b-5jejxwoo0x] {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* the actual overlap fix: lets the track shrink */
    gap: 1.25rem;
    min-width: 0;
}

.pd-aside[b-5jejxwoo0x] {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 1rem;
    min-width: 0;
    max-height: calc(100vh - 2rem); /* tall panels scroll instead of running off-screen */
    overflow-y: auto;
}

/* ---------- Sections & panels ---------- */

.pd-section[b-5jejxwoo0x],
.pd-panel[b-5jejxwoo0x] {
    background: var(--pd-surface);
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-radius);
    padding: 1.1rem 1.2rem;
    min-width: 0;
}

.pd-section-head[b-5jejxwoo0x] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

    .pd-section-head > div[b-5jejxwoo0x] {
        min-width: 0;
    }

    .pd-section-head h2[b-5jejxwoo0x] {
        margin: 0;
        font-size: 1.15rem;
        display: flex;
        align-items: center;
        gap: 0.45rem;
    }

        .pd-section-head h2 i[b-5jejxwoo0x] {
            color: var(--pd-accent);
        }

.pd-section-sub[b-5jejxwoo0x] {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    color: var(--pd-text-3);
}

.pd-section-tools[b-5jejxwoo0x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pd-saving[b-5jejxwoo0x] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--pd-text-2);
}

.pd-panel-title[b-5jejxwoo0x] {
    margin: 0 0 0.8rem;
    font-size: 1rem;
    font-weight: 700;
}

.pd-panel-muted[b-5jejxwoo0x] {
    margin: 0;
    color: var(--pd-text-3);
    font-size: 0.88rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.pd-empty-block[b-5jejxwoo0x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
    padding: 2rem 1rem;
    color: var(--pd-text-3);
    border: 1.5px dashed var(--pd-line);
    border-radius: 12px;
}

    .pd-empty-block > i[b-5jejxwoo0x] {
        font-size: 1.8rem;
        margin-bottom: 0.25rem;
    }

    .pd-empty-block strong[b-5jejxwoo0x] {
        color: var(--pd-text-2);
    }

    .pd-empty-block.compact[b-5jejxwoo0x] {
        padding: 1rem;
        border-style: solid;
    }

/* ---------- Side panels ---------- */

.pd-current-status[b-5jejxwoo0x] {
    margin-bottom: 0.75rem;
}

.pd-status-stack[b-5jejxwoo0x] {
    display: grid;
    gap: 0.45rem;
}

.pd-status-btn[b-5jejxwoo0x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--pd-line);
    border-radius: 10px;
    background: transparent;
    color: var(--pd-text);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .pd-status-btn:hover:not(:disabled)[b-5jejxwoo0x] {
        background: var(--pd-surface-2);
        border-color: var(--pd-accent);
    }

    .pd-status-btn:disabled[b-5jejxwoo0x] {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .pd-status-btn.danger[b-5jejxwoo0x] {
        color: #b91c1c;
    }

        .pd-status-btn.danger:hover:not(:disabled)[b-5jejxwoo0x] {
            border-color: #fecaca;
            background: #fef2f2;
        }

.pd-timeline[b-5jejxwoo0x], .pd-people[b-5jejxwoo0x] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

    .pd-timeline li[b-5jejxwoo0x], .pd-people li[b-5jejxwoo0x] {
        display: flex;
        gap: 0.7rem;
        align-items: center;
        min-width: 0;
    }

        .pd-timeline li > div[b-5jejxwoo0x], .pd-people li > div[b-5jejxwoo0x] {
            display: grid;
            min-width: 0;
        }

.pd-tl-label[b-5jejxwoo0x] {
    font-size: 0.78rem;
    color: var(--pd-text-3);
}

.pd-tl-dot[b-5jejxwoo0x] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: none;
    border: 2px solid var(--pd-accent);
}

    .pd-tl-dot.actual[b-5jejxwoo0x] {
        border-color: var(--pd-text-3);
    }

        .pd-tl-dot.actual.on[b-5jejxwoo0x] {
            background: var(--pd-ok);
            border-color: var(--pd-ok);
        }

.pd-avatar[b-5jejxwoo0x] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--pd-accent-soft);
    color: #1d4ed8;
    font-size: 0.8rem;
    font-weight: 700;
}

    .pd-avatar.muted[b-5jejxwoo0x] {
        background: var(--pd-surface-2);
        color: var(--pd-text-2);
        border: 1px solid var(--pd-line);
    }

/* ==========================================================================
   Steps (timeline + drag & drop)
   ========================================================================== */

.pd-steps[b-5jejxwoo0x] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pd-step[b-5jejxwoo0x] {
    --st-color: var(--pd-text-3);
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0.75rem;
    padding-bottom: 0.85rem;
}

    .pd-step:last-child[b-5jejxwoo0x] {
        padding-bottom: 0;
    }

    /* State colors */
    .pd-step.st-progress[b-5jejxwoo0x] {
        --st-color: var(--pd-accent);
    }

    .pd-step.st-paused[b-5jejxwoo0x] {
        --st-color: var(--pd-warn);
    }

    .pd-step.st-done[b-5jejxwoo0x] {
        --st-color: var(--pd-ok);
    }

    .pd-step.st-canceled[b-5jejxwoo0x] {
        --st-color: var(--pd-bad);
    }

    .pd-step.st-skipped[b-5jejxwoo0x] {
        --st-color: var(--pd-text-3);
    }

    .pd-step.st-planned[b-5jejxwoo0x] {
        --st-color: var(--pd-text-3);
    }

/* Rail: number + connector line */
.pd-step-rail[b-5jejxwoo0x] {
    position: relative;
    display: flex;
    justify-content: center;
}

    .pd-step-rail[b-5jejxwoo0x]::after {
        content: "";
        position: absolute;
        top: 44px;
        bottom: -0.85rem;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        background: var(--pd-line);
    }

.pd-step:last-child .pd-step-rail[b-5jejxwoo0x]::after {
    display: none;
}

.pd-step-index[b-5jejxwoo0x] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: var(--st-color);
    background: var(--pd-surface);
    border: 2px solid var(--st-color);
    z-index: 1;
}

.pd-step.st-progress .pd-step-index[b-5jejxwoo0x],
.pd-step.st-done .pd-step-index[b-5jejxwoo0x] {
    background: var(--st-color);
    color: #fff;
}

.pd-step.st-skipped .pd-step-index[b-5jejxwoo0x],
.pd-step.st-canceled .pd-step-index[b-5jejxwoo0x] {
    border-style: dashed;
}

.pd-step.st-skipped .pd-step-card[b-5jejxwoo0x],
.pd-step.st-canceled .pd-step-card[b-5jejxwoo0x] {
    opacity: 0.8;
}

/* Card */
.pd-step-card[b-5jejxwoo0x] {
    border: 1px solid var(--pd-line);
    border-left: 4px solid var(--st-color);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    background: var(--pd-surface);
    transition: box-shadow 0.15s, border-color 0.15s;
    min-width: 0;
}

.pd-step[draggable="true"] .pd-step-card:hover[b-5jejxwoo0x] {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.pd-step-head[b-5jejxwoo0x] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.pd-step-titlebox[b-5jejxwoo0x] {
    flex: 1;
    min-width: 0;
}

    .pd-step-titlebox h3[b-5jejxwoo0x] {
        margin: 0 0 0.3rem;
        font-size: 1.02rem;
        line-height: 1.35;
    }

.pd-step-badges[b-5jejxwoo0x] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.pd-step-tools[b-5jejxwoo0x] {
    display: flex;
    gap: 0.15rem;
    flex: none;
}

.pd-grip[b-5jejxwoo0x] {
    color: var(--pd-text-3);
    cursor: grab;
    padding: 0.15rem 0;
    margin-left: -0.35rem;
    font-size: 1.15rem;
    line-height: 1;
    flex: none;
}

.pd-step[draggable="true"][b-5jejxwoo0x] {
    cursor: grab;
}

    .pd-step[draggable="true"]:active[b-5jejxwoo0x] {
        cursor: grabbing;
    }

.pd-icon-btn[b-5jejxwoo0x] {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pd-text-2);
    cursor: pointer;
}

    .pd-icon-btn:hover:not(:disabled)[b-5jejxwoo0x] {
        background: var(--pd-surface-2);
        color: var(--pd-text);
    }

    .pd-icon-btn:disabled[b-5jejxwoo0x] {
        opacity: 0.3;
        cursor: not-allowed;
    }

.pd-step-desc[b-5jejxwoo0x] {
    margin: 0.6rem 0 0;
    color: var(--pd-text-2);
    line-height: 1.5;
    white-space: pre-line;
}

    .pd-step-desc.is-clamped[b-5jejxwoo0x] {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.pd-chips[b-5jejxwoo0x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.7rem;
    min-width: 0;
}

/* Chip: one line, ellipsis if the text is too long (full text lives in the title attribute) */
.pd-chip[b-5jejxwoo0x] {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
    font-size: 0.8rem;
    color: var(--pd-text-2);
    background: var(--pd-surface-2);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
}

    .pd-chip i[b-5jejxwoo0x] {
        color: var(--pd-text-3);
        margin-right: 0.35rem;
    }

    .pd-chip.is-attn[b-5jejxwoo0x] {
        background: #fffbeb;
        color: #92400e;
    }

        .pd-chip.is-attn i[b-5jejxwoo0x] {
            color: #b45309;
        }

.pd-mini-track[b-5jejxwoo0x] {
    height: 4px;
    border-radius: 999px;
    background: var(--color-gray-200, #e5e7eb);
    margin-top: 0.65rem;
    overflow: hidden;
}

.pd-mini-fill[b-5jejxwoo0x] {
    height: 100%;
    background: var(--pd-ok);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.pd-step-details[b-5jejxwoo0x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 0.85rem 0 0;
    padding: 0.75rem 0.9rem;
    background: var(--pd-surface-2);
    border-radius: 10px;
}

    .pd-step-details > div[b-5jejxwoo0x] {
        min-width: 0;
    }

    .pd-step-details dt[b-5jejxwoo0x] {
        font-size: 0.76rem;
        color: var(--pd-text-3);
        font-weight: 500;
    }

    .pd-step-details dd[b-5jejxwoo0x] {
        margin: 0.1rem 0 0;
        font-weight: 600;
        font-size: 0.9rem;
    }

.pd-inline-note[b-5jejxwoo0x] {
    margin-top: 0.65rem;
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    font-size: 0.86rem;
}

    .pd-inline-note.warn[b-5jejxwoo0x] {
        background: #fffbeb;
        color: #92400e;
    }

    .pd-inline-note.danger[b-5jejxwoo0x] {
        background: #fef2f2;
        color: #991b1b;
    }

    .pd-inline-note.success[b-5jejxwoo0x] {
        background: #ecfdf5;
        color: #065f46;
    }

.pd-step-actions[b-5jejxwoo0x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.8rem;
}

    .pd-step-actions:empty[b-5jejxwoo0x] {
        display: none;
    }

.pd-actions-spacer[b-5jejxwoo0x] {
    flex: 1;
}

/* ---------- Drag & drop states ---------- */

/* While dragging, children ignore the pointer so dragenter fires only on the <li>. */
.pd-steps.is-dragging .pd-step *[b-5jejxwoo0x] {
    pointer-events: none;
}

.pd-step.is-drag-source[b-5jejxwoo0x] {
    opacity: 0.4;
}

    .pd-step.is-drag-source .pd-step-card[b-5jejxwoo0x] {
        border-style: dashed;
    }

.pd-step.drop-before[b-5jejxwoo0x]::before,
.pd-step.drop-after[b-5jejxwoo0x]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 999px;
    background: var(--pd-accent);
    box-shadow: 0 0 0 3px var(--pd-accent-soft);
    z-index: 2;
}
/* The gap between cards is 0.85rem (li padding-bottom); center the line in it. */
.pd-step.drop-before[b-5jejxwoo0x]::before {
    top: -0.55rem;
    left: 56px;
}

.pd-step.drop-after[b-5jejxwoo0x]::after {
    bottom: 0.3rem;
    left: 56px;
}

.pd-step.drop-after:last-child[b-5jejxwoo0x]::after {
    bottom: -0.55rem;
}

/* ---------- Ticket filters + table ---------- */

.pd-filters[b-5jejxwoo0x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.pd-seg[b-5jejxwoo0x] {
    display: inline-flex;
    background: var(--pd-surface-2);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

    .pd-seg button[b-5jejxwoo0x] {
        border: 0;
        background: transparent;
        color: var(--pd-text-2);
        padding: 0.3rem 0.85rem;
        border-radius: 8px;
        font-size: 0.86rem;
        font-weight: 600;
        cursor: pointer;
    }

        .pd-seg button.active[b-5jejxwoo0x] {
            background: var(--pd-surface);
            color: var(--pd-text);
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
        }

.pd-search[b-5jejxwoo0x] {
    position: relative;
    flex: 1 1 220px;
    max-width: 320px;
    min-width: 0;
}

    .pd-search i[b-5jejxwoo0x] {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--pd-text-3);
        pointer-events: none;
    }

    .pd-search input[b-5jejxwoo0x] {
        width: 100%;
        padding: 0.45rem 0.75rem 0.45rem 2.15rem;
        border: 1px solid var(--pd-line);
        border-radius: 10px;
        background: var(--pd-surface);
        color: var(--pd-text);
        font-size: 0.9rem;
    }

        .pd-search input:focus[b-5jejxwoo0x] {
            outline: 2px solid var(--pd-accent);
            outline-offset: 1px;
        }

/* The wrapper scrolls horizontally when the table needs more room; the page body never does. */
.pd-table-wrap[b-5jejxwoo0x] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.pd-table[b-5jejxwoo0x] {
    width: 100%;
    min-width: 760px;
    table-layout: fixed;
    border-collapse: collapse;
}

    /* Fixed columns; Subject (2) and Step (3) share whatever is left.
       If you add or remove a column, update these nth-child widths. */
    .pd-table th:nth-child(1)[b-5jejxwoo0x] {
        width: 64px;
    }

    .pd-table th:nth-child(4)[b-5jejxwoo0x] {
        width: 100px;
    }

    .pd-table th:nth-child(5)[b-5jejxwoo0x] {
        width: 110px;
    }

    .pd-table th:nth-child(6)[b-5jejxwoo0x] {
        width: 150px;
    }

    .pd-table th:nth-child(7)[b-5jejxwoo0x] {
        width: 115px;
    }

    .pd-table th[b-5jejxwoo0x],
    .pd-table td[b-5jejxwoo0x] {
        text-align: left;
        padding: 0.7rem 0.6rem;
        border-bottom: 1px solid var(--pd-line);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pd-table th[b-5jejxwoo0x] {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--pd-text-3);
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .pd-table tbody tr[b-5jejxwoo0x] {
        cursor: pointer;
    }

        .pd-table tbody tr:hover[b-5jejxwoo0x] {
            background: var(--pd-surface-2);
        }

        .pd-table tbody tr:last-child td[b-5jejxwoo0x] {
            border-bottom: 0;
        }

.pd-td-id[b-5jejxwoo0x] {
    color: var(--pd-text-3);
    font-variant-numeric: tabular-nums;
}

.pd-td-subject[b-5jejxwoo0x] {
    font-weight: 600;
}

/* ==========================================================================
   Modals
   Each modal sets its own accent (--md-accent) through a variant class:
     .is-step    blue    add / edit step
     .is-ticket  violet  create ticket
     .is-danger  red     delete project, cancel workflow
     .is-warn    amber   pause workflow
     .is-success green   complete workflow
     .is-muted   slate   skip workflow
   Colours come from the --pd-* tokens, so light and dark both work.
   ========================================================================== */

.pd-overlay[b-5jejxwoo0x] {
    position: fixed;
    inset: 0;
    background: var(--pd-backdrop);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    z-index: 1050;
    padding: 1rem;
    animation: pd-fade-b-5jejxwoo0x 0.18s ease-out;
}

.pd-modal[b-5jejxwoo0x] {
    --md-accent: var(--pd-accent);
    --md-accent-soft: rgba(37, 99, 235, 0.12);
    --md-accent-line: rgba(37, 99, 235, 0.3);
    position: relative;
    width: min(720px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--pd-surface);
    color: var(--pd-text);
    border: 1px solid var(--pd-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    animation: pd-pop-b-5jejxwoo0x 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

    /* Accent stripe across the top */
    .pd-modal[b-5jejxwoo0x]::before {
        content: "";
        flex: none;
        height: 4px;
        background: var(--md-accent);
    }

    .pd-modal.narrow[b-5jejxwoo0x] {
        width: min(520px, 100%);
    }

    .pd-modal.is-step[b-5jejxwoo0x] {
        --md-accent: #2563eb;
        --md-accent-soft: rgba(37, 99, 235, 0.12);
        --md-accent-line: rgba(37, 99, 235, 0.3);
    }

    .pd-modal.is-ticket[b-5jejxwoo0x] {
        --md-accent: #7c3aed;
        --md-accent-soft: rgba(124, 58, 237, 0.12);
        --md-accent-line: rgba(124, 58, 237, 0.3);
    }

    .pd-modal.is-danger[b-5jejxwoo0x] {
        --md-accent: #dc2626;
        --md-accent-soft: rgba(220, 38, 38, 0.12);
        --md-accent-line: rgba(220, 38, 38, 0.3);
    }

    .pd-modal.is-warn[b-5jejxwoo0x] {
        --md-accent: #d97706;
        --md-accent-soft: rgba(217, 119, 6, 0.14);
        --md-accent-line: rgba(217, 119, 6, 0.32);
    }

    .pd-modal.is-success[b-5jejxwoo0x] {
        --md-accent: #059669;
        --md-accent-soft: rgba(5, 150, 105, 0.13);
        --md-accent-line: rgba(5, 150, 105, 0.3);
    }

    .pd-modal.is-muted[b-5jejxwoo0x] {
        --md-accent: #64748b;
        --md-accent-soft: rgba(100, 116, 139, 0.14);
        --md-accent-line: rgba(100, 116, 139, 0.32);
    }

/* Header: icon tile + title + subtitle + close */
.pd-modal-head[b-5jejxwoo0x] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0;
    padding: 1.1rem 1.4rem 1rem;
    background: linear-gradient(180deg, var(--md-accent-soft), transparent);
}

    .pd-modal-head .pd-icon-btn[b-5jejxwoo0x] {
        align-self: flex-start;
        flex: none;
    }

.pd-modal-icon[b-5jejxwoo0x] {
    width: 46px;
    height: 46px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 1.25rem;
    color: var(--md-accent);
    background: var(--md-accent-soft);
    border: 1px solid var(--md-accent-line);
}

.pd-modal-titles[b-5jejxwoo0x] {
    flex: 1;
    min-width: 0;
}

.pd-modal-head h3[b-5jejxwoo0x] {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--pd-text);
    overflow-wrap: anywhere;
}

.pd-modal-sub[b-5jejxwoo0x] {
    margin: 0.2rem 0 0;
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--pd-text-2);
    overflow-wrap: anywhere;
}

.pd-modal-hint[b-5jejxwoo0x] {
    color: var(--pd-text-2);
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

/* Body scrolls, header and footer stay put */
.pd-modal-form[b-5jejxwoo0x] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 0;
}

.pd-modal-body[b-5jejxwoo0x] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0.5rem 1.4rem 1.3rem;
}

/* Footer bar */
.pd-modal .pm-form-actions[b-5jejxwoo0x] {
    flex: none;
    margin: 0;
    padding: 0.85rem 1.4rem;
    background: var(--pd-surface-2);
    border-top: 1px solid var(--pd-line);
}

.pd-modal .pm-btn-primary[b-5jejxwoo0x] {
    background: var(--md-accent);
}

.pd-foot-note[b-5jejxwoo0x] {
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--pd-bad);
}

/* ---------- Form grid + fields ---------- */

.pm-form-grid[b-5jejxwoo0x] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.95rem;
}

.pm-field[b-5jejxwoo0x] {
    min-width: 0;
}

    .pm-field.full[b-5jejxwoo0x] {
        grid-column: 1 / -1;
    }

    .pm-field label[b-5jejxwoo0x] {
        display: block;
        font-size: 0.84rem;
        font-weight: 600;
        margin-bottom: 0.35rem;
        color: var(--pd-text-2, var(--color-text-secondary, #475569));
    }

.pm-form-actions[b-5jejxwoo0x] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.pd-req[b-5jejxwoo0x] {
    color: var(--pd-bad);
}

.pd-opt[b-5jejxwoo0x] {
    font-weight: 500;
    color: var(--pd-text-3);
}

.pd-label-row[b-5jejxwoo0x] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.pd-counter[b-5jejxwoo0x] {
    font-size: 0.76rem;
    color: var(--pd-text-3);
    font-variant-numeric: tabular-nums;
}

    .pd-counter.ok[b-5jejxwoo0x] {
        color: var(--pd-ok);
    }

.pd-hint[b-5jejxwoo0x] {
    display: block;
    margin-top: 0.4rem;
    color: var(--pd-text-3);
}

    .pd-hint.ok[b-5jejxwoo0x] {
        color: var(--pd-ok);
    }

/* Inputs, selects, textareas */
.pd-modal .form-control[b-5jejxwoo0x],
.pd-modal select.form-control[b-5jejxwoo0x],
.pd-modal textarea.form-control[b-5jejxwoo0x] {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.55rem 0.8rem;
    background-color: var(--pd-input-bg);
    color: var(--pd-text);
    border: 1px solid var(--pd-line);
    border-radius: 12px;
    font-size: 0.93rem;
    line-height: 1.4;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

    .pd-modal .form-control[b-5jejxwoo0x]::placeholder {
        color: var(--pd-text-3);
        opacity: 1;
    }

    .pd-modal .form-control:hover:not(:disabled)[b-5jejxwoo0x] {
        border-color: var(--md-accent-line);
    }

    .pd-modal .form-control:focus[b-5jejxwoo0x] {
        background-color: var(--pd-input-bg);
        color: var(--pd-text);
        border-color: var(--md-accent);
        outline: none;
        box-shadow: 0 0 0 3px var(--md-accent-soft);
    }

    .pd-modal .form-control:disabled[b-5jejxwoo0x] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .pd-modal select.form-control option[b-5jejxwoo0x] {
        background: var(--pd-surface);
        color: var(--pd-text);
    }

.pd-modal textarea.form-control[b-5jejxwoo0x] {
    resize: vertical;
    min-height: 90px;
}

.pd-modal .text-muted[b-5jejxwoo0x] {
    color: var(--pd-text-3) !important;
}

/* Field with a leading icon; add .pd-select for a custom chevron on <select> */
.pd-input-icon[b-5jejxwoo0x] {
    position: relative;
}

    .pd-input-icon > i:first-child[b-5jejxwoo0x] {
        position: absolute;
        left: 0.85rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        color: var(--pd-text-3);
        pointer-events: none;
        transition: color 0.15s;
    }

    .pd-input-icon:focus-within > i:first-child[b-5jejxwoo0x] {
        color: var(--md-accent);
    }

.pd-modal .pd-input-icon .form-control[b-5jejxwoo0x] {
    padding-left: 2.6rem;
}

.pd-input-icon.pd-select[b-5jejxwoo0x]::after {
    content: "";
    position: absolute;
    right: 1.05rem;
    top: 50%;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--pd-text-3);
    border-bottom: 2px solid var(--pd-text-3);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.pd-modal .pd-input-icon.pd-select select.form-control[b-5jejxwoo0x] {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* Grouped block (used for the schedule) */
.pd-group[b-5jejxwoo0x] {
    padding: 0.9rem 1rem 1rem;
    border: 1px solid var(--pd-line);
    border-radius: 16px;
    background: rgba(148, 163, 184, 0.08);
}

.pd-group-title[b-5jejxwoo0x] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--pd-text-3);
}

    .pd-group-title i[b-5jejxwoo0x] {
        color: var(--md-accent);
        font-size: 0.95rem;
    }

/* ---------- Date fields ---------- */

.pd-date-row[b-5jejxwoo0x] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.85rem;
}

.pd-date[b-5jejxwoo0x] {
    position: relative;
}

.pd-date-icon[b-5jejxwoo0x] {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    color: var(--md-accent);
    pointer-events: none;
}

.pd-modal .pd-date .pd-date-input[b-5jejxwoo0x] {
    position: relative;
    height: 46px;
    padding-left: 2.6rem;
    padding-right: 2.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Chromium / Safari: make the whole field open the picker, hide the tiny native icon */
.pd-date-input[b-5jejxwoo0x]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.pd-date-input[b-5jejxwoo0x]::-webkit-datetime-edit {
    padding: 0;
}

.pd-date-input.is-empty[b-5jejxwoo0x]::-webkit-datetime-edit {
    color: var(--pd-text-3);
    font-weight: 500;
}

.pd-date-input[b-5jejxwoo0x]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

.pd-date-clear[b-5jejxwoo0x] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pd-text-3);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .pd-date-clear:hover[b-5jejxwoo0x] {
        background: var(--md-accent-soft);
        color: var(--pd-bad);
    }

/* Firefox draws its own calendar icon on the right, so move the clear button left of it */
@-moz-document url-prefix() {
    .pd-date-clear[b-5jejxwoo0x] {
        right: 2.4rem;
    }
}

.pd-date.has-error .pd-date-input[b-5jejxwoo0x],
.pd-modal .pd-date.has-error .form-control[b-5jejxwoo0x] {
    border-color: var(--pd-bad);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

.pd-date.has-error .pd-date-icon[b-5jejxwoo0x] {
    color: var(--pd-bad);
}

.pd-field-msg[b-5jejxwoo0x] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--pd-text-3);
}

    .pd-field-msg i[b-5jejxwoo0x] {
        margin-top: 0.1rem;
    }

    .pd-field-msg.error[b-5jejxwoo0x] {
        color: var(--pd-bad);
    }

.pd-duration[b-5jejxwoo0x] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    background: var(--md-accent-soft);
    border: 1px solid var(--md-accent-line);
    font-size: 0.86rem;
}

    .pd-duration i[b-5jejxwoo0x],
    .pd-duration strong[b-5jejxwoo0x] {
        color: var(--md-accent);
    }

    .pd-duration span[b-5jejxwoo0x] {
        color: var(--pd-text-2);
    }

/* ---------- Priority picker (ticket modal) ---------- */

.pd-prio[b-5jejxwoo0x] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.pd-prio-btn[b-5jejxwoo0x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 0.4rem;
    border: 1.5px solid var(--pd-line);
    border-radius: 12px;
    background: var(--pd-input-bg);
    color: var(--pd-text-2);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
}

    .pd-prio-btn:hover[b-5jejxwoo0x] {
        border-color: var(--md-accent);
        color: var(--pd-text);
    }

    .pd-prio-btn:active[b-5jejxwoo0x] {
        transform: scale(0.97);
    }

    .pd-prio-btn.is-on.prio-low[b-5jejxwoo0x] {
        background: #e2e8f0;
        color: #334155;
        border-color: #94a3b8;
    }

    .pd-prio-btn.is-on.prio-medium[b-5jejxwoo0x] {
        background: #dbeafe;
        color: #1d4ed8;
        border-color: #93c5fd;
    }

    .pd-prio-btn.is-on.prio-high[b-5jejxwoo0x] {
        background: #ffedd5;
        color: #c2410c;
        border-color: #fdba74;
    }

    .pd-prio-btn.is-on.prio-urgent[b-5jejxwoo0x] {
        background: #fee2e2;
        color: #b91c1c;
        border-color: #fca5a5;
    }

/* ---------- Workflow modal: character meter ---------- */

.pd-meter[b-5jejxwoo0x] {
    height: 4px;
    margin-top: 0.7rem;
    border-radius: 999px;
    background: var(--pd-line);
    overflow: hidden;
}

.pd-meter-fill[b-5jejxwoo0x] {
    height: 100%;
    border-radius: 999px;
    background: var(--md-accent);
    transition: width 0.2s ease, background 0.2s;
}

    .pd-meter-fill.ok[b-5jejxwoo0x] {
        background: var(--pd-ok);
    }

/* ---------- Delete confirmation ---------- */

.pd-modal.is-confirm .pd-modal-close[b-5jejxwoo0x] {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 2;
}

.pd-confirm[b-5jejxwoo0x] {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: 1.9rem 1.6rem 1.4rem;
    text-align: center;
    background: linear-gradient(180deg, var(--md-accent-soft), transparent 70%);
}

.pd-confirm-icon[b-5jejxwoo0x] {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: 0.35rem;
    border-radius: 50%;
    font-size: 1.7rem;
    color: var(--md-accent);
    background: var(--md-accent-soft);
    border: 1px solid var(--md-accent-line);
    box-shadow: 0 0 0 8px var(--md-accent-soft);
}

.pd-confirm h3[b-5jejxwoo0x] {
    margin: 0.3rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.pd-confirm p[b-5jejxwoo0x] {
    margin: 0;
    max-width: 40ch;
    color: var(--pd-text-2);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

    .pd-confirm p strong[b-5jejxwoo0x] {
        color: var(--pd-text);
    }

.pd-confirm .pd-note[b-5jejxwoo0x] {
    width: 100%;
    max-width: none;
    margin: 0.5rem 0 0;
    text-align: left;
    font-size: 0.86rem;
}

.pd-modal.is-confirm .pm-form-actions[b-5jejxwoo0x] {
    justify-content: stretch;
}

    .pd-modal.is-confirm .pm-form-actions .pm-btn[b-5jejxwoo0x] {
        flex: 1;
        justify-content: center;
    }

/* ---------- Modal motion + small screens ---------- */

@keyframes pd-fade-b-5jejxwoo0x {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pd-pop-b-5jejxwoo0x {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pd-sheet-b-5jejxwoo0x {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-overlay[b-5jejxwoo0x],
    .pd-modal[b-5jejxwoo0x] {
        animation: none !important;
    }
}

@media (max-width: 700px) {
    .pd-date-row[b-5jejxwoo0x] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Phones: modals become bottom sheets */
@media (max-width: 600px) {
    .pd-overlay[b-5jejxwoo0x] {
        place-items: end center;
        padding: 0;
    }

    .pd-modal[b-5jejxwoo0x],
    .pd-modal.narrow[b-5jejxwoo0x] {
        width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        animation: pd-sheet-b-5jejxwoo0x 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

        .pd-modal-head[b-5jejxwoo0x],
        .pd-modal .pm-form-actions[b-5jejxwoo0x] {
            padding-left: 1rem;
            padding-right: 1rem;
        }

    .pd-modal-body[b-5jejxwoo0x] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .pd-prio[b-5jejxwoo0x] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Buttons, badges (shared with other Project pages) ---------- */

.pm-btn[b-5jejxwoo0x] {
    border: 0;
    border-radius: 10px;
    padding: 0.6rem 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: filter 0.15s, background 0.15s;
}

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

    .pm-btn:hover:not(:disabled)[b-5jejxwoo0x] {
        filter: brightness(1.06);
    }

.pm-btn-sm[b-5jejxwoo0x] {
    padding: 0.32rem 0.65rem;
    font-size: 0.82rem;
}

.pm-btn-primary[b-5jejxwoo0x] {
    background: #2563eb;
    color: #fff;
}

.pm-btn-success[b-5jejxwoo0x] {
    background: #059669;
    color: #fff;
}

.pm-btn-warn[b-5jejxwoo0x] {
    background: #d97706;
    color: #fff;
}

.pm-btn-danger[b-5jejxwoo0x] {
    background: #dc2626;
    color: #fff;
}

.pm-btn-ghost[b-5jejxwoo0x] {
    background: transparent;
    color: var(--color-text-secondary, #475569);
    border: 1px solid var(--color-border-light, #e5e7eb);
}

    .pm-btn-ghost:hover:not(:disabled)[b-5jejxwoo0x] {
        background: var(--color-bg-secondary, #f8fafc);
        filter: none;
    }

.pm-btn-danger-ghost[b-5jejxwoo0x] {
    background: transparent;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

    .pm-btn-danger-ghost:hover:not(:disabled)[b-5jejxwoo0x] {
        background: #fef2f2;
        filter: none;
    }

.pm-badge[b-5jejxwoo0x], .pm-priority[b-5jejxwoo0x] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    white-space: nowrap;
}

    .pm-badge.is-planned[b-5jejxwoo0x] {
        background: #e2e8f0;
        color: #334155;
    }

    .pm-badge.is-progress[b-5jejxwoo0x] {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .pm-badge.is-paused[b-5jejxwoo0x] {
        background: #fef3c7;
        color: #b45309;
    }

    .pm-badge.is-done[b-5jejxwoo0x] {
        background: #d1fae5;
        color: #047857;
    }

    .pm-badge.is-canceled[b-5jejxwoo0x] {
        background: #fee2e2;
        color: #b91c1c;
    }

    .pm-badge.is-overdue[b-5jejxwoo0x] {
        background: #fee2e2;
        color: #b91c1c;
    }

.pri-urgent[b-5jejxwoo0x] {
    background: #fee2e2;
    color: #b91c1c;
}

.pri-high[b-5jejxwoo0x] {
    background: #ffedd5;
    color: #c2410c;
}

.pri-medium[b-5jejxwoo0x] {
    background: #dbeafe;
    color: #1d4ed8;
}

.pri-low[b-5jejxwoo0x] {
    background: #e2e8f0;
    color: #475569;
}

/* ---------- Focus + motion ---------- */

.pd-page button:focus-visible[b-5jejxwoo0x],
.pd-modal button:focus-visible[b-5jejxwoo0x] {
    outline: 2px solid var(--pd-accent, #2563eb);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .pd-page *[b-5jejxwoo0x] {
        transition: none !important;
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
    .pd-stats[b-5jejxwoo0x] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .pd-stat-wide[b-5jejxwoo0x] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 980px) {
    .pd-layout[b-5jejxwoo0x] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd-aside[b-5jejxwoo0x] {
        position: static;
        order: -1;
        max-height: none;
        overflow: visible;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width: 700px) {
    .pm-form-grid[b-5jejxwoo0x] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd-title-row h1[b-5jejxwoo0x] {
        font-size: 1.5rem;
    }

    .pd-step[b-5jejxwoo0x] {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 0.5rem;
    }

    .pd-step-index[b-5jejxwoo0x] {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }

    .pd-step-rail[b-5jejxwoo0x]::after {
        top: 34px;
    }

    .pd-step-card[b-5jejxwoo0x] {
        padding: 0.75rem;
    }

    .pd-section[b-5jejxwoo0x], .pd-panel[b-5jejxwoo0x] {
        padding: 0.9rem;
    }

    .pd-search[b-5jejxwoo0x] {
        max-width: none;
    }

    /* Ticket table becomes a stack of small cards */
    .pd-table[b-5jejxwoo0x] {
        min-width: 0;
        table-layout: auto;
    }

        .pd-table thead[b-5jejxwoo0x] {
            display: none;
        }

        .pd-table[b-5jejxwoo0x],
        .pd-table tbody[b-5jejxwoo0x],
        .pd-table tr[b-5jejxwoo0x],
        .pd-table td[b-5jejxwoo0x] {
            display: block;
        }

            .pd-table tr[b-5jejxwoo0x] {
                border: 1px solid var(--pd-line);
                border-radius: 12px;
                padding: 0.5rem 0.8rem;
                margin-bottom: 0.6rem;
            }

            .pd-table tbody tr:last-child td[b-5jejxwoo0x] {
                border-bottom: 0;
            }

            .pd-table td[b-5jejxwoo0x] {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 1rem;
                border: 0 !important;
                padding: 0.25rem 0;
                text-align: right;
                white-space: normal;
                overflow: visible;
            }

                .pd-table td[b-5jejxwoo0x]::before {
                    content: attr(data-label);
                    flex: none;
                    color: var(--pd-text-3);
                    font-size: 0.78rem;
                    font-weight: 600;
                    text-align: left;
                }
}

@media (max-width: 520px) {
    .pd-stats[b-5jejxwoo0x] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Dark theme ---------- */

[data-theme="dark"] .pd-page[b-5jejxwoo0x] {
    --pd-accent-soft: rgba(37, 99, 235, 0.35);
}

[data-theme="dark"] .pd-note-warn[b-5jejxwoo0x],
[data-theme="dark"] .pd-inline-note.warn[b-5jejxwoo0x],
[data-theme="dark"] .pd-chip.is-attn[b-5jejxwoo0x] {
    background: #78350f;
    color: #fde68a;
}

    [data-theme="dark"] .pd-chip.is-attn i[b-5jejxwoo0x] {
        color: #fde68a;
    }

[data-theme="dark"] .pd-note-danger[b-5jejxwoo0x],
[data-theme="dark"] .pd-inline-note.danger[b-5jejxwoo0x] {
    background: #7f1d1d;
    color: #fecaca;
}

[data-theme="dark"] .pd-note-success[b-5jejxwoo0x],
[data-theme="dark"] .pd-inline-note.success[b-5jejxwoo0x] {
    background: #064e3b;
    color: #a7f3d0;
}

[data-theme="dark"] .pd-stat-bad[b-5jejxwoo0x] {
    border-color: #7f1d1d;
}

[data-theme="dark"] .pd-avatar[b-5jejxwoo0x] {
    background: #1e3a8a;
    color: #bfdbfe;
}

[data-theme="dark"] .pm-progress-track.lg[b-5jejxwoo0x],
[data-theme="dark"] .pd-mini-track[b-5jejxwoo0x] {
    background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .pd-status-btn.danger:hover:not(:disabled)[b-5jejxwoo0x] {
    background: #7f1d1d;
    border-color: #991b1b;
}

[data-theme="dark"] .pd-step[draggable="true"] .pd-step-card:hover[b-5jejxwoo0x] {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .pm-btn-danger-ghost[b-5jejxwoo0x] {
    color: #fca5a5;
    border-color: #7f1d1d;
}

    [data-theme="dark"] .pm-btn-danger-ghost:hover:not(:disabled)[b-5jejxwoo0x] {
        background: #7f1d1d;
    }

[data-theme="dark"] .pm-badge.is-planned[b-5jejxwoo0x] {
    background: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .pm-badge.is-progress[b-5jejxwoo0x] {
    background: #1e3a8a;
    color: #bfdbfe;
}

[data-theme="dark"] .pm-badge.is-paused[b-5jejxwoo0x] {
    background: #78350f;
    color: #fde68a;
}

[data-theme="dark"] .pm-badge.is-done[b-5jejxwoo0x] {
    background: #064e3b;
    color: #a7f3d0;
}

[data-theme="dark"] .pm-badge.is-canceled[b-5jejxwoo0x],
[data-theme="dark"] .pm-badge.is-overdue[b-5jejxwoo0x] {
    background: #7f1d1d;
    color: #fecaca;
}

[data-theme="dark"] .pri-urgent[b-5jejxwoo0x] {
    background: #7f1d1d;
    color: #fecaca;
}

[data-theme="dark"] .pri-high[b-5jejxwoo0x] {
    background: #7c2d12;
    color: #fed7aa;
}

[data-theme="dark"] .pri-medium[b-5jejxwoo0x] {
    background: #1e3a8a;
    color: #bfdbfe;
}

[data-theme="dark"] .pri-low[b-5jejxwoo0x] {
    background: #334155;
    color: #cbd5e1;
}

/* ---------- Dark theme: modals + shared tokens ---------- */

[data-theme="dark"] .pd-page[b-5jejxwoo0x],
[data-theme="dark"] .pd-overlay[b-5jejxwoo0x] {
    --pd-accent-soft: rgba(37, 99, 235, 0.35);
    --pd-line: var(--color-border-light, #334155);
    --pd-surface: var(--color-bg-surface, #1e293b);
    --pd-surface-2: var(--color-bg-secondary, #0f172a);
    --pd-text: var(--color-text-primary, #f1f5f9);
    --pd-text-2: var(--color-text-secondary, #cbd5e1);
    --pd-text-3: var(--color-text-tertiary, #94a3b8);
    --pd-input-bg: var(--pd-surface-2);
    --pd-backdrop: rgba(2, 6, 23, 0.72);
    color-scheme: dark;
}

[data-theme="dark"] .pd-modal[b-5jejxwoo0x] {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .pd-hint.ok[b-5jejxwoo0x] {
    color: #34d399;
}

[data-theme="dark"] .pd-modal small.text-danger[b-5jejxwoo0x] {
    color: #fca5a5 !important;
}

[data-theme="dark"] .pm-btn-ghost[b-5jejxwoo0x] {
    color: var(--pd-text-2, #cbd5e1);
    border-color: rgba(255, 255, 255, 0.18);
}

    [data-theme="dark"] .pm-btn-ghost:hover:not(:disabled)[b-5jejxwoo0x] {
        background: rgba(255, 255, 255, 0.06);
    }

/* ---------- Dark theme: modal details ---------- */

[data-theme="dark"] .pd-modal.is-step[b-5jejxwoo0x] {
    --md-accent: #3b82f6;
}

[data-theme="dark"] .pd-modal.is-ticket[b-5jejxwoo0x] {
    --md-accent: #8b5cf6;
}

[data-theme="dark"] .pd-modal.is-danger[b-5jejxwoo0x] {
    --md-accent: #ef4444;
}

[data-theme="dark"] .pd-modal.is-warn[b-5jejxwoo0x] {
    --md-accent: #f59e0b;
}

[data-theme="dark"] .pd-modal.is-success[b-5jejxwoo0x] {
    --md-accent: #10b981;
}

[data-theme="dark"] .pd-modal.is-muted[b-5jejxwoo0x] {
    --md-accent: #94a3b8;
}

[data-theme="dark"] .pd-foot-note[b-5jejxwoo0x],
[data-theme="dark"] .pd-field-msg.error[b-5jejxwoo0x] {
    color: #fca5a5;
}

[data-theme="dark"] .pd-date.has-error .pd-date-input[b-5jejxwoo0x],
[data-theme="dark"] .pd-modal .pd-date.has-error .form-control[b-5jejxwoo0x] {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

[data-theme="dark"] .pd-date.has-error .pd-date-icon[b-5jejxwoo0x] {
    color: #fca5a5;
}

[data-theme="dark"] .pd-date-clear:hover[b-5jejxwoo0x] {
    color: #fca5a5;
}

[data-theme="dark"] .pd-prio-btn.is-on.prio-low[b-5jejxwoo0x] {
    background: #334155;
    color: #e2e8f0;
    border-color: #64748b;
}

[data-theme="dark"] .pd-prio-btn.is-on.prio-medium[b-5jejxwoo0x] {
    background: #1e3a8a;
    color: #bfdbfe;
    border-color: #3b82f6;
}

[data-theme="dark"] .pd-prio-btn.is-on.prio-high[b-5jejxwoo0x] {
    background: #7c2d12;
    color: #fed7aa;
    border-color: #f97316;
}

[data-theme="dark"] .pd-prio-btn.is-on.prio-urgent[b-5jejxwoo0x] {
    background: #7f1d1d;
    color: #fecaca;
    border-color: #ef4444;
}
/* /Components/Pages/TicketsComponents/ProjectsComponent.razor.rz.scp.css */
/* =========================================================
   Projects page
   Uses your existing theme variables with safe fallbacks.
   ========================================================= */

.pm-page[b-0dj4hvmrcq] {
    /* Neutrals (fall back to sensible values if a theme variable is missing) */
    --pm-surface: var(--color-bg-surface, #ffffff);

    --pm-surface-2: var(--color-bg-subtle, #f8fafc);
    --pm-border: var(--color-border-light, #e2e8f0);
    --pm-border-strong: #cbd5e1;
    --pm-text: var(--color-text-primary, #0f172a);
    --pm-muted: var(--color-text-secondary, #475569);
    --pm-faint: var(--color-text-tertiary, #64748b);
    --pm-track: var(--color-gray-200, #e2e8f0);
    --pm-accent: #2563eb;
    --pm-accent-strong: #1d4ed8;
    --pm-accent-soft: #dbeafe;
    --pm-accent-fg: #1d4ed8;
    --pm-focus: rgba(37, 99, 235, 0.5);
    /* Status palette: solid = dots and bars, bg/fg = badges */
    --st-planned: #64748b;
    --st-planned-bg: #e2e8f0;
    --st-planned-fg: #334155;
    --st-progress: #2563eb;
    --st-progress-bg: #dbeafe;
    --st-progress-fg: #1d4ed8;
    --st-paused: #d97706;
    --st-paused-bg: #fef3c7;
    --st-paused-fg: #b45309;
    --st-done: #059669;
    --st-done-bg: #d1fae5;
    --st-done-fg: #047857;
    --st-canceled: #dc2626;
    --st-canceled-bg: #fee2e2;
    --st-canceled-fg: #b91c1c;
    --st-overdue: #e11d48;
    padding: 1.25rem 1rem 2.5rem;
    color: var(--pm-text);
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .pm-page[b-0dj4hvmrcq] {
    --pm-surface-2: rgba(255, 255, 255, 0.04);
    --pm-border-strong: rgba(255, 255, 255, 0.22);
    --pm-track: rgba(255, 255, 255, 0.12);
    --pm-accent-soft: #1e3a8a;
    --pm-accent-fg: #bfdbfe;
    --pm-focus: rgba(147, 197, 253, 0.6);
    --st-planned: #94a3b8;
    --st-planned-bg: #334155;
    --st-planned-fg: #e2e8f0;
    --st-progress: #60a5fa;
    --st-progress-bg: #1e3a8a;
    --st-progress-fg: #bfdbfe;
    --st-paused: #fbbf24;
    --st-paused-bg: #78350f;
    --st-paused-fg: #fde68a;
    --st-done: #34d399;
    --st-done-bg: #064e3b;
    --st-done-fg: #a7f3d0;
    --st-canceled: #f87171;
    --st-canceled-bg: #7f1d1d;
    --st-canceled-fg: #fecaca;
    --st-overdue: #fb7185;
}

.pm-page :focus-visible[b-0dj4hvmrcq] {
    outline: 2px solid var(--pm-focus);
    outline-offset: 2px;
}

/* ---------- Header ---------- */

.pm-header[b-0dj4hvmrcq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.pm-kicker[b-0dj4hvmrcq] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--pm-faint);
    margin-bottom: 0.3rem;
}

.pm-header h1[b-0dj4hvmrcq] {
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin: 0 0 0.2rem;
}

.pm-header p[b-0dj4hvmrcq] {
    margin: 0;
    color: var(--pm-muted);
}

.pm-header-actions[b-0dj4hvmrcq] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------- Buttons ---------- */

.pm-btn[b-0dj4hvmrcq] {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.6rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .pm-btn:disabled[b-0dj4hvmrcq] {
        opacity: 0.6;
        cursor: default;
    }

.pm-btn-primary[b-0dj4hvmrcq] {
    background: var(--pm-accent);
    color: #fff;
}

    .pm-btn-primary:hover:not(:disabled)[b-0dj4hvmrcq] {
        background: var(--pm-accent-strong);
    }

.pm-btn-ghost[b-0dj4hvmrcq] {
    background: var(--pm-surface);
    border-color: var(--pm-border);
    color: var(--pm-text);
}

    .pm-btn-ghost:hover:not(:disabled)[b-0dj4hvmrcq] {
        border-color: var(--pm-border-strong);
        background: var(--pm-surface-2);
    }

.pm-mini[b-0dj4hvmrcq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--pm-border);
    background: var(--pm-surface);
    color: var(--pm-muted);
    border-radius: 8px;
    padding: 0.25rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

    .pm-mini:hover[b-0dj4hvmrcq] {
        color: var(--pm-text);
        border-color: var(--pm-border-strong);
    }

.pm-link[b-0dj4hvmrcq] {
    border: 0;
    background: transparent;
    color: var(--pm-accent-fg);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.2rem 0.3rem;
    cursor: pointer;
}

    .pm-link:hover[b-0dj4hvmrcq] {
        text-decoration: underline;
    }

.pm-spin[b-0dj4hvmrcq] {
    display: inline-block;
    animation: pm-spin-b-0dj4hvmrcq 0.9s linear infinite;
}

/* ---------- Status rail (one connected strip, click to filter) ---------- */

.pm-rail[b-0dj4hvmrcq] {
    display: flex;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: 12px;
    overflow-x: auto;
    margin-bottom: 1rem;
    scrollbar-width: thin;
}

.pm-rail-item[b-0dj4hvmrcq] {
    --dot: var(--pm-faint);
    position: relative;
    flex: 1 0 auto;
    min-width: 112px;
    display: flex;
    flex-direction: column;
    /* center content vertically to keep all items equal height
       and avoid single items appearing taller than others */
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.8rem 1rem;
    min-height: 64px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--pm-border);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .pm-rail-item:last-child[b-0dj4hvmrcq] {
        border-right: 0;
    }

    .pm-rail-item:hover[b-0dj4hvmrcq] {
        background: var(--pm-surface-2);
    }

    .pm-rail-item:focus-visible[b-0dj4hvmrcq] {
        outline-offset: -3px;
    }

    .pm-rail-item.all[b-0dj4hvmrcq] {
        --dot: var(--pm-accent);
    }

    .pm-rail-item.planned[b-0dj4hvmrcq] {
        --dot: var(--st-planned);
    }

    .pm-rail-item.progress[b-0dj4hvmrcq] {
        --dot: var(--st-progress);
    }

    .pm-rail-item.paused[b-0dj4hvmrcq] {
        --dot: var(--st-paused);
    }

    .pm-rail-item.done[b-0dj4hvmrcq] {
        --dot: var(--st-done);
    }

    .pm-rail-item.canceled[b-0dj4hvmrcq] {
        --dot: var(--st-canceled);
    }

    .pm-rail-item.overdue[b-0dj4hvmrcq] {
        --dot: var(--st-overdue);
    }

    .pm-rail-item[b-0dj4hvmrcq]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: var(--dot);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.2s ease;
    }

    .pm-rail-item.active[b-0dj4hvmrcq] {
        background: var(--pm-surface-2);
    }

        .pm-rail-item.active[b-0dj4hvmrcq]::after {
            transform: scaleX(1);
        }

.pm-rail-count[b-0dj4hvmrcq] {
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1.1;
}

.pm-rail-label[b-0dj4hvmrcq] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--pm-faint);
    /* prevent label wrapping so tall labels don't increase the item's height */
    white-space: nowrap;
}

.pm-rail-item.active .pm-rail-label[b-0dj4hvmrcq] {
    color: var(--pm-text);
}

.pm-dot[b-0dj4hvmrcq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot);
    flex: none;
}

/* ---------- Toolbar ---------- */

.pm-toolbar[b-0dj4hvmrcq] {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    align-items: stretch;
}

.pm-search[b-0dj4hvmrcq] {
    flex: 1;
    min-width: 240px;
    position: relative;
}

    .pm-search > i[b-0dj4hvmrcq] {
        position: absolute;
        left: 0.85rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--pm-faint);
        pointer-events: none;
    }

    .pm-search input[b-0dj4hvmrcq] {
        width: 100%;
        height: 100%;
        min-height: 42px;
        border: 1px solid var(--pm-border);
        background: var(--pm-surface);
        color: var(--pm-text);
        border-radius: 10px;
        padding: 0.6rem 2.3rem 0.6rem 2.4rem;
    }

        .pm-search input[b-0dj4hvmrcq]::placeholder {
            color: var(--pm-faint);
        }

.pm-search-clear[b-0dj4hvmrcq] {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--pm-faint);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
}

    .pm-search-clear:hover[b-0dj4hvmrcq] {
        color: var(--pm-text);
        background: var(--pm-surface-2);
    }

.pm-select[b-0dj4hvmrcq],
.pm-input[b-0dj4hvmrcq] {
    min-height: 42px;
    width: 100%;
    border: 1px solid var(--pm-border);
    background: var(--pm-surface);
    color: var(--pm-text);
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
}

.pm-select[b-0dj4hvmrcq] {
    appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
}

.pm-toolbar .pm-select[b-0dj4hvmrcq] {
    width: auto;
    min-width: 190px;
}

.pm-select-sm[b-0dj4hvmrcq] {
    min-height: 34px;
    width: auto;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.85rem;
}

.pm-segmented[b-0dj4hvmrcq] {
    display: inline-flex;
    border: 1px solid var(--pm-border);
    border-radius: 10px;
    background: var(--pm-surface);
    overflow: hidden;
}

    .pm-segmented button[b-0dj4hvmrcq] {
        border: 0;
        background: transparent;
        color: var(--pm-faint);
        width: 42px;
        cursor: pointer;
    }

        .pm-segmented button + button[b-0dj4hvmrcq] {
            border-left: 1px solid var(--pm-border);
        }

        .pm-segmented button:hover[b-0dj4hvmrcq] {
            color: var(--pm-text);
        }

        .pm-segmented button.active[b-0dj4hvmrcq] {
            background: var(--pm-accent-soft);
            color: var(--pm-accent-fg);
        }

.pm-filter-toggle[b-0dj4hvmrcq] {
    display: none;
}

.pm-count-pill[b-0dj4hvmrcq] {
    background: var(--pm-accent);
    color: #fff;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
}

/* ---------- Filter panel ---------- */

.pm-filters[b-0dj4hvmrcq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem 0.9rem;
    padding: 0.9rem;
    margin-bottom: 0.75rem;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: 12px;
}

.pm-field[b-0dj4hvmrcq] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
}

    .pm-field > span[b-0dj4hvmrcq] {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--pm-muted);
    }

.pm-switch[b-0dj4hvmrcq] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    align-self: end;
    min-height: 42px;
    font-size: 0.88rem;
    color: var(--pm-muted);
    cursor: pointer;
    margin: 0;
}

    .pm-switch input[b-0dj4hvmrcq] {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
    }

.pm-switch-track[b-0dj4hvmrcq] {
    position: relative;
    flex: none;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--pm-track);
    transition: background-color 0.15s ease;
}

    .pm-switch-track[b-0dj4hvmrcq]::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        transition: transform 0.15s ease;
    }

.pm-switch input:checked + .pm-switch-track[b-0dj4hvmrcq] {
    background: var(--pm-accent);
}

    .pm-switch input:checked + .pm-switch-track[b-0dj4hvmrcq]::after {
        transform: translateX(16px);
    }

.pm-switch input:focus-visible + .pm-switch-track[b-0dj4hvmrcq] {
    outline: 2px solid var(--pm-focus);
    outline-offset: 2px;
}

/* ---------- Active filter chips and results bar ---------- */

.pm-chips[b-0dj4hvmrcq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.pm-chip[b-0dj4hvmrcq] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--pm-border);
    background: var(--pm-accent-soft);
    color: var(--pm-accent-fg);
    border-radius: 999px;
    padding: 0.2rem 0.4rem 0.2rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

    .pm-chip:hover[b-0dj4hvmrcq] {
        border-color: var(--pm-accent);
    }

.pm-resultsbar[b-0dj4hvmrcq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--pm-faint);
}

.pm-pagesize[b-0dj4hvmrcq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

/* ---------- Cards ---------- */

.pm-grid[b-0dj4hvmrcq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    gap: 1rem;
}

.pm-card[b-0dj4hvmrcq] {
    --st: var(--pm-accent);
    display: flex;
    flex-direction: column;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: 14px;
    padding: 1.05rem 1.1rem 0.9rem;
    cursor: pointer;
    box-shadow: inset 0 3px 0 var(--st);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .pm-card:hover[b-0dj4hvmrcq] {
        border-color: var(--pm-border-strong);
        box-shadow: inset 0 3px 0 var(--st), var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.08));
    }

    .pm-card.is-planned[b-0dj4hvmrcq], tr.is-planned[b-0dj4hvmrcq] {
        --st: var(--st-planned);
    }

    .pm-card.is-progress[b-0dj4hvmrcq], tr.is-progress[b-0dj4hvmrcq] {
        --st: var(--st-progress);
    }

    .pm-card.is-paused[b-0dj4hvmrcq], tr.is-paused[b-0dj4hvmrcq] {
        --st: var(--st-paused);
    }

    .pm-card.is-done[b-0dj4hvmrcq], tr.is-done[b-0dj4hvmrcq] {
        --st: var(--st-done);
    }

    .pm-card.is-canceled[b-0dj4hvmrcq], tr.is-canceled[b-0dj4hvmrcq] {
        --st: var(--st-canceled);
    }

.pm-card-top[b-0dj4hvmrcq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.2rem;
}

.pm-card-top-right[b-0dj4hvmrcq] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pm-card h2[b-0dj4hvmrcq] {
    font-size: 1.1rem;
    font-weight: 650;
    line-height: 1.3;
    margin: 0.75rem 0 0.3rem;
    overflow-wrap: anywhere;
}

.pm-desc[b-0dj4hvmrcq] {
    min-height: 2.8em;
    margin: 0;
    color: var(--pm-muted);
    font-size: 0.9rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pm-badge[b-0dj4hvmrcq],
.pm-priority[b-0dj4hvmrcq],
.pm-due[b-0dj4hvmrcq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    white-space: nowrap;
}

    .pm-badge.is-planned[b-0dj4hvmrcq] {
        background: var(--st-planned-bg);
        color: var(--st-planned-fg);
    }

    .pm-badge.is-progress[b-0dj4hvmrcq] {
        background: var(--st-progress-bg);
        color: var(--st-progress-fg);
    }

    .pm-badge.is-paused[b-0dj4hvmrcq] {
        background: var(--st-paused-bg);
        color: var(--st-paused-fg);
    }

    .pm-badge.is-done[b-0dj4hvmrcq] {
        background: var(--st-done-bg);
        color: var(--st-done-fg);
    }

    .pm-badge.is-canceled[b-0dj4hvmrcq] {
        background: var(--st-canceled-bg);
        color: var(--st-canceled-fg);
    }

.pri-urgent[b-0dj4hvmrcq] {
    background: #fee2e2;
    color: #b91c1c;
}

.pri-high[b-0dj4hvmrcq] {
    background: #ffedd5;
    color: #c2410c;
}

.pri-medium[b-0dj4hvmrcq] {
    background: #dbeafe;
    color: #1d4ed8;
}

.pri-low[b-0dj4hvmrcq] {
    background: #e2e8f0;
    color: #475569;
}

[data-theme="dark"] .pm-page .pri-urgent[b-0dj4hvmrcq] {
    background: #7f1d1d;
    color: #fecaca;
}

[data-theme="dark"] .pm-page .pri-high[b-0dj4hvmrcq] {
    background: #7c2d12;
    color: #fed7aa;
}

[data-theme="dark"] .pm-page .pri-medium[b-0dj4hvmrcq] {
    background: #1e3a8a;
    color: #bfdbfe;
}

[data-theme="dark"] .pm-page .pri-low[b-0dj4hvmrcq] {
    background: #334155;
    color: #cbd5e1;
}

.pm-due.due-late[b-0dj4hvmrcq] {
    background: transparent;
    color: var(--st-overdue);
    box-shadow: inset 0 0 0 1px var(--st-overdue);
}

.pm-due.due-soon[b-0dj4hvmrcq] {
    background: transparent;
    color: var(--st-paused-fg);
    box-shadow: inset 0 0 0 1px var(--st-paused);
}

.pm-progress[b-0dj4hvmrcq] {
    margin: 0.95rem 0;
}

.pm-progress-meta[b-0dj4hvmrcq] {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
    color: var(--pm-muted);
}

    .pm-progress-meta strong[b-0dj4hvmrcq] {
        color: var(--pm-text);
    }

.pm-progress-track[b-0dj4hvmrcq] {
    height: 6px;
    background: var(--pm-track);
    border-radius: 999px;
    overflow: hidden;
}

.pm-progress-fill[b-0dj4hvmrcq] {
    height: 100%;
    background: var(--st, var(--pm-accent));
    border-radius: 999px;
    transition: width 0.3s ease;
}

.pm-meta[b-0dj4hvmrcq] {
    display: grid;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--pm-faint);
}

    .pm-meta > span[b-0dj4hvmrcq] {
        display: flex;
        align-items: center;
        gap: 0.45rem;
    }

.pm-avatar[b-0dj4hvmrcq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pm-accent-soft);
    color: var(--pm-accent-fg);
    font-size: 0.65rem;
    font-weight: 700;
    flex: none;
}

.pm-card-foot[b-0dj4hvmrcq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--pm-border);
    font-size: 0.82rem;
    color: var(--pm-muted);
}

.pm-meta + .pm-card-foot[b-0dj4hvmrcq] {
    margin-top: 0.9rem;
}

.pm-card-foot > span:first-child[b-0dj4hvmrcq] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pm-card-actions[b-0dj4hvmrcq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.pm-open[b-0dj4hvmrcq] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    color: var(--pm-faint);
}

.pm-card:hover .pm-open[b-0dj4hvmrcq],
.pm-card:focus-visible .pm-open[b-0dj4hvmrcq] {
    color: var(--pm-accent-fg);
}

/* ---------- Table view ---------- */

.pm-table-wrap[b-0dj4hvmrcq] {
    overflow-x: auto;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: 12px;
}

.pm-table[b-0dj4hvmrcq] {
    width: 100%;
    min-width: 940px;
    border-collapse: collapse;
    font-size: 0.88rem;
}

    .pm-table thead th[b-0dj4hvmrcq] {
        background: var(--pm-surface-2);
        color: var(--pm-muted);
        font-weight: 600;
        font-size: 0.8rem;
        text-align: left;
        padding: 0.65rem 0.85rem;
        border-bottom: 1px solid var(--pm-border);
        white-space: nowrap;
    }

    .pm-table tbody td[b-0dj4hvmrcq] {
        padding: 0.7rem 0.85rem;
        border-bottom: 1px solid var(--pm-border);
        vertical-align: middle;
    }

    .pm-table tbody tr:last-child td[b-0dj4hvmrcq] {
        border-bottom: 0;
    }

    .pm-table tbody tr[b-0dj4hvmrcq] {
        cursor: pointer;
    }

        .pm-table tbody tr:hover[b-0dj4hvmrcq] {
            background: var(--pm-surface-2);
        }

        .pm-table tbody tr:focus-visible[b-0dj4hvmrcq] {
            outline-offset: -2px;
        }

    .pm-table .num[b-0dj4hvmrcq] {
        text-align: right;
    }

    .pm-table .nowrap[b-0dj4hvmrcq] {
        white-space: nowrap;
    }

    .pm-table .col-progress[b-0dj4hvmrcq] {
        width: 170px;
    }

    .pm-table .col-actions[b-0dj4hvmrcq] {
        width: 60px;
        text-align: right;
    }

    .pm-table .col-name strong[b-0dj4hvmrcq] {
        display: block;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .pm-table .col-name .pm-due[b-0dj4hvmrcq] {
        margin-top: 0.25rem;
    }

.pm-progress-inline[b-0dj4hvmrcq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .pm-progress-inline .pm-progress-track[b-0dj4hvmrcq] {
        flex: 1;
    }

    .pm-progress-inline > span[b-0dj4hvmrcq] {
        width: 2.6em;
        text-align: right;
        font-size: 0.8rem;
        color: var(--pm-muted);
    }

/* ---------- Pager ---------- */

.pm-pager[b-0dj4hvmrcq] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 1.5rem;
}

.pm-page-btn[b-0dj4hvmrcq] {
    min-width: 36px;
    height: 36px;
    padding: 0 0.6rem;
    border: 1px solid var(--pm-border);
    background: var(--pm-surface);
    color: var(--pm-text);
    border-radius: 8px;
    font-size: 0.88rem;
    cursor: pointer;
}

    .pm-page-btn:hover:not(:disabled):not(.active)[b-0dj4hvmrcq] {
        border-color: var(--pm-border-strong);
        background: var(--pm-surface-2);
    }

    .pm-page-btn.active[b-0dj4hvmrcq] {
        background: var(--pm-accent);
        border-color: var(--pm-accent);
        color: #fff;
        font-weight: 700;
    }

    .pm-page-btn:disabled[b-0dj4hvmrcq] {
        opacity: 0.4;
        cursor: default;
    }

.pm-page-gap[b-0dj4hvmrcq] {
    padding: 0 0.2rem;
    color: var(--pm-faint);
}

/* ---------- Empty, error and loading states ---------- */

.pm-empty[b-0dj4hvmrcq] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--pm-muted);
    background: var(--pm-surface);
    border: 1px dashed var(--pm-border-strong);
    border-radius: 14px;
}

    .pm-empty > i[b-0dj4hvmrcq] {
        font-size: 2.4rem;
        display: block;
        margin-bottom: 0.6rem;
        color: var(--pm-faint);
    }

    .pm-empty h3[b-0dj4hvmrcq] {
        font-size: 1.1rem;
        font-weight: 650;
        color: var(--pm-text);
        margin: 0 0 0.3rem;
    }

    .pm-empty p[b-0dj4hvmrcq] {
        max-width: 44ch;
        margin: 0 auto 1rem;
    }

.pm-error > i[b-0dj4hvmrcq] {
    color: var(--st-canceled);
}

.pm-skel-card[b-0dj4hvmrcq] {
    cursor: default;
    box-shadow: none;
}

.pm-skel[b-0dj4hvmrcq] {
    border-radius: 6px;
    background: linear-gradient(90deg, var(--pm-track) 25%, var(--pm-surface-2) 40%, var(--pm-track) 60%);
    background-size: 300% 100%;
    animation: pm-shimmer-b-0dj4hvmrcq 1.4s ease infinite;
}

/* ---------- Motion ---------- */

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

@keyframes pm-shimmer-b-0dj4hvmrcq {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pm-spin[b-0dj4hvmrcq],
    .pm-skel[b-0dj4hvmrcq] {
        animation: none;
    }

    .pm-btn[b-0dj4hvmrcq],
    .pm-card[b-0dj4hvmrcq],
    .pm-rail-item[b-0dj4hvmrcq],
    .pm-rail-item[b-0dj4hvmrcq]::after,
    .pm-progress-fill[b-0dj4hvmrcq],
    .pm-switch-track[b-0dj4hvmrcq],
    .pm-switch-track[b-0dj4hvmrcq]::after {
        transition: none;
    }
}

/* ---------- Small screens ---------- */

@media (max-width: 768px) {
    .pm-page[b-0dj4hvmrcq] {
        padding: 1rem 0.75rem 2rem;
    }

    .pm-header[b-0dj4hvmrcq] {
        align-items: stretch;
    }

    .pm-header-actions[b-0dj4hvmrcq] {
        width: 100%;
    }

        .pm-header-actions .pm-btn[b-0dj4hvmrcq] {
            flex: 1;
            justify-content: center;
        }

    .pm-search[b-0dj4hvmrcq] {
        flex-basis: 100%;
    }

    .pm-toolbar .pm-select[b-0dj4hvmrcq] {
        flex: 1;
        min-width: 0;
    }

    .pm-filter-toggle[b-0dj4hvmrcq] {
        display: inline-flex;
    }

    .pm-filters[b-0dj4hvmrcq] {
        display: none;
    }

        .pm-filters.is-open[b-0dj4hvmrcq] {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

    .pm-switch[b-0dj4hvmrcq] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .pm-filters.is-open[b-0dj4hvmrcq] {
        grid-template-columns: 1fr;
    }

    .pm-resultsbar[b-0dj4hvmrcq] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* /Components/Pages/TicketsComponents/TicketComponent.razor.rz.scp.css */
/* =====================================================================
   Tickets page styles
   - Everything is namespaced under .tickets-page so nothing leaks to other pages.
   - Uses your existing design tokens (--color-*, --space-*, --radius-*, etc.).
   ===================================================================== */

.tickets-page[b-tlx7wbhl5t] {
    --tk-purple: #6f42c1;
    --tk-purple-soft: #8b5cf6;
    --tk-orange: #f97316;
    --tk-muted: var(--color-text-muted, #6b7280);
    --tk-border: var(--color-border-light, #e5e7eb);
    --tk-surface: var(--color-bg-surface, #fff);
    --tk-surface-2: var(--color-bg-secondary, #f8fafc);
}

/* ---------- Status colour tokens (set on the card so the left border works) ---------- */
.st-open[b-tlx7wbhl5t] {
    --st: var(--color-info);
}

.st-assigned[b-tlx7wbhl5t] {
    --st: var(--color-success);
}

.st-escalated[b-tlx7wbhl5t] {
    --st: var(--color-warning);
}

.st-onhold[b-tlx7wbhl5t] {
    --st: var(--tk-purple);
}

.st-closed[b-tlx7wbhl5t] {
    --st: var(--color-danger);
}

/* ============================ HEADER ============================ */
.page-header[b-tlx7wbhl5t] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-5, 1.25rem);
}

.header-row[b-tlx7wbhl5t] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}

.header-title[b-tlx7wbhl5t] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.header-icon[b-tlx7wbhl5t] {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .18);
    color: var(--color-white);
    display: grid;
    place-items: center;
    font-size: 1.6rem;
}

.page-title[b-tlx7wbhl5t] {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
    line-height: 1.15;
}

.page-subtitle[b-tlx7wbhl5t] {
    margin: 2px 0 0;
    color: rgba(255, 255, 255, .8);
    font-size: var(--font-size-sm);
}

.header-actions[b-tlx7wbhl5t] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.btn-header[b-tlx7wbhl5t],
.btn-export[b-tlx7wbhl5t] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: var(--transition-fast);
}

.btn-header[b-tlx7wbhl5t] {
    background: rgba(255, 255, 255, .16);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, .35);
}

    .btn-header:hover:not(:disabled)[b-tlx7wbhl5t] {
        background: rgba(255, 255, 255, .28);
        color: var(--color-white);
    }

.btn-export[b-tlx7wbhl5t] {
    background: var(--color-success);
    color: var(--color-white);
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm);
}

    .btn-export:hover:not(:disabled)[b-tlx7wbhl5t] {
        filter: brightness(1.08);
        transform: translateY(-1px);
        color: var(--color-white);
    }

    .btn-export:disabled[b-tlx7wbhl5t],
    .btn-header:disabled[b-tlx7wbhl5t] {
        opacity: .6;
        cursor: not-allowed;
    }

.spin[b-tlx7wbhl5t] {
    animation: tk-spin-b-tlx7wbhl5t .9s linear infinite;
    display: inline-block;
}

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

/* Status tabs */
.status-tabs[b-tlx7wbhl5t] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-5, 1.25rem);
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

    .status-tabs[b-tlx7wbhl5t]::-webkit-scrollbar {
        display: none;
    }

.status-tab[b-tlx7wbhl5t] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .12);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    transition: var(--transition-fast);
}

    .status-tab:hover[b-tlx7wbhl5t] {
        background: rgba(255, 255, 255, .24);
        color: var(--color-white);
    }

    .status-tab.active[b-tlx7wbhl5t] {
        background: var(--color-white);
        color: var(--color-primary);
        font-weight: 700;
    }

/* ============================ STATS ============================ */
.stats-row[b-tlx7wbhl5t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5, 1.25rem);
}

.stat-card[b-tlx7wbhl5t] {
    --accent: var(--color-primary);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    text-align: left;
    background: var(--tk-surface);
    border: 1px solid var(--tk-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

    .stat-card:hover[b-tlx7wbhl5t] {
        border-color: var(--accent);
        box-shadow: var(--shadow-md);
    }

    .stat-card.active[b-tlx7wbhl5t] {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
    }

    .stat-card:focus-visible[b-tlx7wbhl5t] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.stat-total[b-tlx7wbhl5t] {
    --accent: var(--color-primary);
}

.stat-urgent[b-tlx7wbhl5t] {
    --accent: var(--color-danger);
}

.stat-breach[b-tlx7wbhl5t] {
    --accent: var(--tk-orange);
}

.stat-unassigned[b-tlx7wbhl5t] {
    --accent: var(--color-gray-500, #6b7280);
}

.stat-icon[b-tlx7wbhl5t] {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.stat-text[b-tlx7wbhl5t] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-tlx7wbhl5t] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-primary);
}

.stat-label[b-tlx7wbhl5t] {
    font-size: var(--font-size-xs);
    color: var(--tk-muted);
}

/* ============================ FILTERS ============================ */
.filter-card[b-tlx7wbhl5t] {
    background: var(--tk-surface);
    border: 1px solid var(--tk-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-5, 1.25rem);
}

.filter-top[b-tlx7wbhl5t] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.search-container[b-tlx7wbhl5t] {
    position: relative;
    flex: 1 1 auto;
}

.search-input[b-tlx7wbhl5t] {
    width: 100%;
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-10, 2.5rem) var(--space-2) var(--space-12, 3rem);
    border: 1px solid var(--color-border-medium);
    font-size: var(--font-size-sm);
    background-color: var(--tk-surface);
    color: var(--color-text-primary);
    transition: var(--transition-fast);
}

    .search-input:focus[b-tlx7wbhl5t] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
        outline: none;
    }

.search-icon[b-tlx7wbhl5t] {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-500);
    pointer-events: none;
}

.clear-search[b-tlx7wbhl5t] {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-gray-500);
    cursor: pointer;
    padding: var(--space-1);
}

    .clear-search:hover[b-tlx7wbhl5t] {
        color: var(--color-danger);
    }

.btn-filter-toggle[b-tlx7wbhl5t] {
    display: none;
    align-items: center;
    gap: var(--space-2);
    background: var(--tk-surface-2);
    border: 1px solid var(--tk-border);
    color: var(--color-text-primary);
}

.filter-count[b-tlx7wbhl5t] {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: .7rem;
    min-width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    padding: 0 5px;
}

.filter-grid[b-tlx7wbhl5t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.filter-field[b-tlx7wbhl5t] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .filter-field label[b-tlx7wbhl5t] {
        font-size: var(--font-size-xs);
        font-weight: 600;
        color: var(--tk-muted);
    }

    .filter-field .form-select[b-tlx7wbhl5t],
    .filter-field .form-control[b-tlx7wbhl5t] {
        font-size: var(--font-size-sm);
        border-radius: var(--radius-md);
        border: 1px solid var(--color-border-medium);
        background-color: var(--tk-surface);
        color: var(--color-text-primary);
        padding: var(--space-2) var(--space-3);
    }

        .filter-field .form-select:focus[b-tlx7wbhl5t],
        .filter-field .form-control:focus[b-tlx7wbhl5t] {
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
            outline: none;
        }

.filter-actions[b-tlx7wbhl5t] {
    justify-content: flex-end;
}

.btn-clear[b-tlx7wbhl5t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: transparent;
    border: 1px dashed var(--color-border-medium);
    color: var(--tk-muted);
}

    .btn-clear:hover:not(:disabled)[b-tlx7wbhl5t] {
        color: var(--color-danger);
        border-color: var(--color-danger);
    }

    .btn-clear:disabled[b-tlx7wbhl5t] {
        opacity: .5;
        cursor: not-allowed;
    }

.chips[b-tlx7wbhl5t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--tk-border);
}

.chip[b-tlx7wbhl5t] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    cursor: pointer;
}

    .chip:hover[b-tlx7wbhl5t] {
        background: color-mix(in srgb, var(--color-danger) 12%, transparent);
        color: var(--color-danger);
        border-color: var(--color-danger);
    }

/* ============================ RESULTS BAR ============================ */
.results-bar[b-tlx7wbhl5t] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--tk-muted);
}

.results-tools[b-tlx7wbhl5t] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.btn-link-sm[b-tlx7wbhl5t] {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
}

    .btn-link-sm:hover[b-tlx7wbhl5t] {
        text-decoration: underline;
    }

.page-size[b-tlx7wbhl5t] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

    .page-size .form-select[b-tlx7wbhl5t] {
        width: auto;
        font-size: var(--font-size-sm);
        background-color: var(--tk-surface);
        color: var(--color-text-primary);
        border: 1px solid var(--color-border-medium);
        border-radius: var(--radius-md);
    }

/* ============================ EMPTY / LOADING ============================ */
.state-box[b-tlx7wbhl5t] {
    text-align: center;
    padding: var(--space-12, 3rem) var(--space-4);
    background: var(--tk-surface);
    border: 1px dashed var(--color-border-medium);
    border-radius: var(--radius-lg);
}

.state-icon[b-tlx7wbhl5t] {
    font-size: 3rem;
    color: var(--tk-muted);
    display: block;
    margin-bottom: var(--space-3);
}

/* ============================ TICKET CARD ============================ */
.tickets-container[b-tlx7wbhl5t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ticket-card[b-tlx7wbhl5t] {
    border-left: 4px solid var(--st, var(--color-gray-400));
    background: var(--tk-surface);
    border-top: 1px solid var(--tk-border);
    border-right: 1px solid var(--tk-border);
    border-bottom: 1px solid var(--tk-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}

    .ticket-card:hover[b-tlx7wbhl5t] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

.tc-head[b-tlx7wbhl5t] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-3);
}

.tc-main[b-tlx7wbhl5t] {
    flex: 1 1 320px;
    min-width: 0;
}

.tc-topline[b-tlx7wbhl5t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.tc-id[b-tlx7wbhl5t] {
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--tk-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tc-subject[b-tlx7wbhl5t] {
    font-size: var(--font-size-lg, 1.1rem);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.tc-meta[b-tlx7wbhl5t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--tk-muted);
}

    .tc-meta span[b-tlx7wbhl5t] {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .tc-meta .meta-agent[b-tlx7wbhl5t] {
        color: var(--color-success);
        font-weight: 600;
    }

    .tc-meta .meta-unassigned[b-tlx7wbhl5t] {
        color: var(--tk-orange);
        font-weight: 600;
    }

.tc-side[b-tlx7wbhl5t] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

/* Badges */
.badge[b-tlx7wbhl5t] {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: .03em;
}

.badge-status[b-tlx7wbhl5t] {
    color: var(--color-white);
    background: var(--st, var(--color-gray-500));
    text-transform: uppercase;
}

.badge-status-open[b-tlx7wbhl5t] {
    background-color: var(--color-info);
}

.badge-status-assigned[b-tlx7wbhl5t] {
    background-color: var(--color-success);
}

.badge-status-escalated[b-tlx7wbhl5t] {
    background-color: var(--color-warning);
}

.badge-status-onhold[b-tlx7wbhl5t] {
    background-color: var(--tk-purple);
}

.badge-status-closed[b-tlx7wbhl5t] {
    background-color: var(--color-danger);
}

.badge-priority-low[b-tlx7wbhl5t] {
    background-color: var(--color-success);
    color: var(--color-white);
}

.badge-priority-medium[b-tlx7wbhl5t] {
    background-color: var(--color-warning);
    color: var(--color-white);
}

.badge-priority-high[b-tlx7wbhl5t] {
    background-color: var(--tk-orange);
    color: var(--color-white);
}

.badge-priority-urgent[b-tlx7wbhl5t] {
    background-color: var(--color-danger);
    color: var(--color-white);
}

.badge-project[b-tlx7wbhl5t] {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
}

    .badge-project:hover[b-tlx7wbhl5t] {
        background: var(--color-primary);
        color: var(--color-white);
    }

.badge-queue[b-tlx7wbhl5t] {
    background: #facc15;
    color: #422006;
}

/* ============================ SLA ============================ */
.sla-box[b-tlx7wbhl5t] {
    margin: 0 var(--space-4) var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--tk-surface-2);
    border: 1px solid var(--tk-border);
    border-radius: var(--radius-md);
}

.sla-head[b-tlx7wbhl5t] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: 6px;
    font-size: var(--font-size-xs);
}

.sla-label[b-tlx7wbhl5t] {
    font-weight: 600;
    color: var(--tk-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sla-text[b-tlx7wbhl5t] {
    font-weight: 700;
    color: var(--tk-muted);
}

.sla-foot[b-tlx7wbhl5t] {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: .72rem;
    color: var(--color-text-tertiary, var(--tk-muted));
}

.ticket-progress-track[b-tlx7wbhl5t] {
    height: 6px;
    background-color: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.ticket-progress-fill[b-tlx7wbhl5t] {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width .5s ease;
}

.ticket-time-progress-normal[b-tlx7wbhl5t] {
    background: linear-gradient(90deg, #10b981, #059669);
}

.ticket-time-progress-warning[b-tlx7wbhl5t] {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.ticket-time-progress-critical[b-tlx7wbhl5t] {
    background: linear-gradient(90deg, #f97316, #ef4444);
}

.ticket-time-progress-complete[b-tlx7wbhl5t] {
    background: linear-gradient(90deg, #059669, #10b981);
}

.ticket-time-progress-breached-static[b-tlx7wbhl5t] {
    background: linear-gradient(90deg, #dc2626, #991b1b);
}

.ticket-time-progress-breached[b-tlx7wbhl5t] {
    background: linear-gradient(90deg, #dc2626, #991b1b);
    animation: tk-breach-pulse-b-tlx7wbhl5t 2s infinite;
}

.ticket-time-progress-paused[b-tlx7wbhl5t] {
    background: repeating-linear-gradient(45deg, #6f42c1, #6f42c1 8px, #59359a 8px, #59359a 16px);
}

@keyframes tk-breach-pulse-b-tlx7wbhl5t {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .65;
    }
}

.ticket-hold-time-badge[b-tlx7wbhl5t] {
    background-color: var(--tk-purple);
    color: #fff;
    font-size: .65rem;
    margin-left: 6px;
}

.ticket-text-purple[b-tlx7wbhl5t] {
    color: var(--tk-purple-soft) !important;
}

.ticket-badge-onhold[b-tlx7wbhl5t] {
    background-color: rgba(111, 66, 193, .15);
    color: var(--tk-purple-soft);
    border: 1px solid rgba(139, 92, 246, .35);
}

/* ============================ DETAILS ============================ */
.tc-details[b-tlx7wbhl5t] {
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px dashed var(--tk-border);
    animation: tk-open-b-tlx7wbhl5t .18s ease-out;
}

@keyframes tk-open-b-tlx7wbhl5t {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.detail-grid[b-tlx7wbhl5t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.detail-block[b-tlx7wbhl5t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.user-info-label[b-tlx7wbhl5t] {
    font-size: var(--font-size-xs);
    color: var(--tk-muted);
    font-weight: 600;
}

.user-info-value[b-tlx7wbhl5t] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.user-avatar[b-tlx7wbhl5t] {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
}

    .user-avatar.avatar-success[b-tlx7wbhl5t] {
        background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-light) 100%);
    }

.created-by-tag[b-tlx7wbhl5t],
.agent-badge[b-tlx7wbhl5t],
.unassigned-badge[b-tlx7wbhl5t] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.created-by-tag[b-tlx7wbhl5t] {
    background-color: var(--color-info-light);
    color: var(--color-info-dark);
    border: 1px solid var(--color-info-border);
}

    .created-by-tag i[b-tlx7wbhl5t] {
        color: var(--color-info);
    }

.agent-badge[b-tlx7wbhl5t] {
    background: var(--color-success-light);
    color: var(--color-success-dark);
    border: 1px solid var(--color-success-border);
    font-weight: 700;
}

    .agent-badge i[b-tlx7wbhl5t] {
        color: var(--color-success);
    }

.unassigned-badge[b-tlx7wbhl5t] {
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-300);
}

.agent-badge.pulse[b-tlx7wbhl5t] {
    animation: tk-badge-pulse-b-tlx7wbhl5t 2s infinite;
}

@keyframes tk-badge-pulse-b-tlx7wbhl5t {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 40%, transparent);
    }

    70% {
        box-shadow: 0 0 0 6px transparent;
    }

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

.user-email-display[b-tlx7wbhl5t] {
    align-self: flex-start;
    padding: var(--space-1) var(--space-3);
    background-color: var(--color-gray-50);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    border: 1px solid var(--color-gray-200);
    font-family: monospace;
    overflow-wrap: anywhere;
}

/* Callouts */
.callout[b-tlx7wbhl5t] {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--tk-surface-2);
    border: 1px solid var(--tk-border);
}

    .callout h6[b-tlx7wbhl5t] {
        font-size: var(--font-size-sm);
        font-weight: 700;
        color: var(--tk-muted);
        margin-bottom: var(--space-1);
    }

    .callout p[b-tlx7wbhl5t] {
        margin: 0;
        color: var(--tk-muted);
        overflow-wrap: anywhere;
    }

.ticket-escalate-callout[b-tlx7wbhl5t] {
    border-left: 4px solid var(--color-warning);
}

.ticket-hold-callout[b-tlx7wbhl5t] {
    background-color: rgba(111, 66, 193, .08);
    border-left: 4px solid var(--tk-purple);
}

/* ============================ FOOTER / BUTTONS ============================ */
.tc-footer[b-tlx7wbhl5t] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--tk-surface-2);
    border-top: 1px solid var(--tk-border);
}

.tickets-page .btn[b-tlx7wbhl5t] {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--font-size-sm);
    transition: var(--transition-fast);
    cursor: pointer;
}

.tickets-page .btn-sm[b-tlx7wbhl5t] {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
}

.tickets-page .btn-primary[b-tlx7wbhl5t] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

    .tickets-page .btn-primary:hover[b-tlx7wbhl5t] {
        background-color: var(--color-primary-dark);
        transform: translateY(-1px);
    }

.tickets-page .btn-outline-primary[b-tlx7wbhl5t] {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

    .tickets-page .btn-outline-primary:hover[b-tlx7wbhl5t] {
        background-color: var(--color-primary);
        color: var(--color-white);
    }

.btn-hold[b-tlx7wbhl5t] {
    color: var(--tk-purple);
    border: 1px solid var(--tk-purple);
    background: transparent;
}

    .btn-hold:hover[b-tlx7wbhl5t] {
        background: var(--tk-purple);
        color: #fff;
    }

.tickets-page .btn:focus-visible[b-tlx7wbhl5t],
.tickets-page .page-link:focus-visible[b-tlx7wbhl5t],
.tickets-page .status-tab:focus-visible[b-tlx7wbhl5t],
.tickets-page .chip:focus-visible[b-tlx7wbhl5t] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================ PAGINATION ============================ */
.pagination-container[b-tlx7wbhl5t] {
    display: flex;
    justify-content: center;
    margin-top: var(--space-6);
}

.pagination[b-tlx7wbhl5t] {
    display: flex;
    gap: var(--space-2);
    padding: 0;
    margin: 0;
}

.page-item[b-tlx7wbhl5t] {
    list-style: none;
}

.page-link[b-tlx7wbhl5t] {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-medium);
    color: var(--color-primary);
    background-color: var(--tk-surface);
    cursor: pointer;
    transition: var(--transition-fast);
}

    .page-link:hover[b-tlx7wbhl5t] {
        background-color: var(--color-primary-light);
        color: var(--color-white);
    }

.page-item.active .page-link[b-tlx7wbhl5t] {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.page-item.disabled .page-link[b-tlx7wbhl5t] {
    color: var(--color-gray-400);
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-300);
    pointer-events: none;
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 768px) {
    .page-header[b-tlx7wbhl5t] {
        padding: var(--space-4);
    }

    .page-title[b-tlx7wbhl5t] {
        font-size: var(--font-size-2xl);
    }

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

    .btn-filter-toggle[b-tlx7wbhl5t] {
        display: inline-flex;
    }

    .filter-grid[b-tlx7wbhl5t] {
        display: none;
    }

        .filter-grid.open[b-tlx7wbhl5t] {
            display: grid;
        }

    .tc-side[b-tlx7wbhl5t] {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 576px) {
    .tc-footer[b-tlx7wbhl5t] {
        flex-direction: column;
    }

        .tc-footer .btn[b-tlx7wbhl5t] {
            width: 100%;
        }

    .results-bar[b-tlx7wbhl5t] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ticket-card[b-tlx7wbhl5t], .stat-card[b-tlx7wbhl5t], .tc-details[b-tlx7wbhl5t], .ticket-progress-fill[b-tlx7wbhl5t],
    .ticket-time-progress-breached[b-tlx7wbhl5t], .agent-badge.pulse[b-tlx7wbhl5t], .spin[b-tlx7wbhl5t] {
        animation: none !important;
        transition: none !important;
    }

        .ticket-card:hover[b-tlx7wbhl5t] {
            transform: none;
        }
}

/* ============================ DARK THEME ============================ */
[data-theme="dark"] .tickets-page[b-tlx7wbhl5t] {
    --tk-surface: var(--color-gray-800);
    --tk-surface-2: var(--color-gray-900);
    --tk-border: var(--color-gray-700);
    --tk-muted: var(--color-gray-400);
}

    [data-theme="dark"] .tickets-page .search-input[b-tlx7wbhl5t],
    [data-theme="dark"] .tickets-page .filter-field .form-select[b-tlx7wbhl5t],
    [data-theme="dark"] .tickets-page .filter-field .form-control[b-tlx7wbhl5t],
    [data-theme="dark"] .tickets-page .page-size .form-select[b-tlx7wbhl5t] {
        background-color: var(--color-gray-800);
        border-color: var(--color-gray-700);
        color: var(--color-gray-100, #f3f4f6);
        color-scheme: dark;
    }

        [data-theme="dark"] .tickets-page .search-input[b-tlx7wbhl5t]::placeholder {
            color: var(--color-gray-400);
        }

    [data-theme="dark"] .tickets-page .stat-value[b-tlx7wbhl5t],
    [data-theme="dark"] .tickets-page .tc-subject[b-tlx7wbhl5t],
    [data-theme="dark"] .tickets-page .user-info-value[b-tlx7wbhl5t] {
        color: var(--color-gray-100, #f3f4f6);
    }

    [data-theme="dark"] .tickets-page .ticket-progress-track[b-tlx7wbhl5t] {
        background-color: var(--color-gray-700);
    }

    [data-theme="dark"] .tickets-page .btn-outline-primary[b-tlx7wbhl5t] {
        border-color: var(--color-primary-light);
        color: var(--color-primary-light);
    }

        [data-theme="dark"] .tickets-page .btn-outline-primary:hover[b-tlx7wbhl5t] {
            background-color: var(--color-primary);
            color: var(--color-white);
        }

    [data-theme="dark"] .tickets-page .chip[b-tlx7wbhl5t] {
        color: var(--color-primary-light);
    }

    [data-theme="dark"] .tickets-page .user-email-display[b-tlx7wbhl5t] {
        background-color: var(--color-gray-800);
        border-color: var(--color-gray-700);
        color: var(--color-gray-400);
    }

    [data-theme="dark"] .tickets-page .unassigned-badge[b-tlx7wbhl5t] {
        background-color: var(--color-gray-800);
        color: var(--color-gray-400);
        border-color: var(--color-gray-700);
    }

    [data-theme="dark"] .tickets-page .created-by-tag[b-tlx7wbhl5t] {
        background-color: var(--color-info-dark);
        color: var(--color-info-light);
        border-color: var(--color-info-border-dark);
    }

    [data-theme="dark"] .tickets-page .agent-badge[b-tlx7wbhl5t] {
        background: linear-gradient(135deg, var(--color-success-dark) 0%, var(--color-success-darker) 100%);
        color: var(--color-success-light);
        border-color: var(--color-success-border-dark);
    }

    [data-theme="dark"] .tickets-page .page-link[b-tlx7wbhl5t] {
        background-color: var(--color-gray-800);
        border-color: var(--color-gray-700);
    }

    [data-theme="dark"] .tickets-page .page-item.disabled .page-link[b-tlx7wbhl5t] {
        background-color: var(--color-gray-900);
        border-color: var(--color-gray-700);
    }

    [data-theme="dark"] .tickets-page .ticket-hold-callout[b-tlx7wbhl5t] {
        background-color: rgba(124, 58, 237, .15);
        border-left-color: var(--tk-purple-soft);
    }

    [data-theme="dark"] .tickets-page .badge-status-onhold[b-tlx7wbhl5t] {
        background-color: #7c3aed;
    }

    [data-theme="dark"] .tickets-page .ticket-badge-onhold[b-tlx7wbhl5t] {
        background-color: rgba(139, 92, 246, .2);
        color: #c4b5fd;
        border-color: rgba(139, 92, 246, .4);
    }

    [data-theme="dark"] .tickets-page .ticket-hold-time-badge[b-tlx7wbhl5t] {
        background-color: #7c3aed;
    }

    [data-theme="dark"] .tickets-page .ticket-text-purple[b-tlx7wbhl5t] {
        color: #c4b5fd !important;
    }

    [data-theme="dark"] .tickets-page .btn-hold[b-tlx7wbhl5t] {
        color: #c4b5fd;
        border-color: #a78bfa;
    }

        [data-theme="dark"] .tickets-page .btn-hold:hover[b-tlx7wbhl5t] {
            background: #7c3aed;
            color: #fff;
        }
/* /Components/Pages/TicketsComponents/TicketDetailsComponent.razor.rz.scp.css */
/* /Components/Pages/TicketsComponents/UpsertProjectComponent.razor.rz.scp.css */
.pm-form-page[b-uwogoc3ceg] {
    max-width: 860px;
    margin: 0 auto;
    padding: 1.5rem 1rem 2.5rem;
    color: var(--color-text-primary);
}

.pm-form-header h1[b-uwogoc3ceg] { margin: 0.35rem 0 0.25rem; }
.pm-form-header p[b-uwogoc3ceg] { color: var(--color-text-secondary); }

.pm-back[b-uwogoc3ceg] {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.pm-form-card[b-uwogoc3ceg] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 18px;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.pm-form-grid[b-uwogoc3ceg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.pm-field.full[b-uwogoc3ceg] { grid-column: 1 / -1; }
.pm-field label[b-uwogoc3ceg] {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.88rem;
}

.pm-field .form-control[b-uwogoc3ceg] {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border-light);
}

.pm-form-actions[b-uwogoc3ceg] {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.pm-btn[b-uwogoc3ceg] {
    border: 0;
    border-radius: 12px;
    padding: 0.7rem 1.05rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pm-btn-primary[b-uwogoc3ceg] { background: #2563eb; color: #fff; }
.pm-btn-ghost[b-uwogoc3ceg] {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-light);
}

@media (max-width: 700px) {
    .pm-form-grid[b-uwogoc3ceg] { grid-template-columns: 1fr; }
}
/* /Components/Pages/UserDistributions/ReadUserDistributions.razor.rz.scp.css */
/* Theme-aware fixes for details modal so it works correctly in both light and dark themes */

/* Ensure modal content uses theme variables (already used in component CSS) */
.modal-content.details-modal[b-sfmu9o026c] {
    /* keep existing sizing but make sure background adapts */
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}

/* Close button inside the details modal should be visible in both themes */
.details-modal .btn-close[b-sfmu9o026c] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.05);
    border: 1px solid var(--color-border-medium);
    transition: all var(--transition-fast);
}

.details-modal .btn-close[b-sfmu9o026c]::before {
    content: '×';
    font-size: 20px;
    line-height: 1;
    color: var(--color-text-primary);
}

/* Dark theme adjustments for the close button (inverse colors) */
[data-theme="dark"] .details-modal .btn-close[b-sfmu9o026c] {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}

[data-theme="dark"] .details-modal .btn-close[b-sfmu9o026c]::before {
    color: var(--color-text-inverse);
}

/* Ensure overlay is readable in light theme as well */
.modal-overlay[b-sfmu9o026c] {
    background: rgba(0, 0, 0, 0.45);
}

/* Make sure labels/values contrast against surface in both themes */
.details-label[b-sfmu9o026c] {
    color: var(--color-text-tertiary);
}

.details-value[b-sfmu9o026c] {
    color: var(--color-text-primary);
}

/* Small responsive tweak */
@media (max-width: 768px) {
    .modal-content.details-modal[b-sfmu9o026c] {
        max-width: 95%;
        padding: var(--space-4);
    }
}
/* /Components/Shared/AddSolutionComponent.razor.rz.scp.css */
/* /Components/Shared/ApproveInModal.razor.rz.scp.css */
/* /Components/Shared/ApproveOutModal.razor.rz.scp.css */
/* /Components/Shared/AssignDeviceModal.razor.rz.scp.css */
/* /Components/Shared/AssignDeviceUserComponent.razor.rz.scp.css */
/* /Components/Shared/AssignMultipleAssetsModal.razor.rz.scp.css */
.multi-assign-backdrop[b-h8qsfz9txl] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1040;
}

.multi-assign-dialog[b-h8qsfz9txl] {
    position: fixed;
    inset: 4vh 4vw auto;
    max-width: 1200px;
    margin: 0 auto;
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}

.multi-assign-header[b-h8qsfz9txl],
.multi-assign-footer[b-h8qsfz9txl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
}

.multi-assign-footer[b-h8qsfz9txl] {
    border-bottom: none;
    border-top: 1px solid var(--color-border-light);
    gap: var(--space-3);
}

.multi-assign-header h3[b-h8qsfz9txl] {
    margin: 0;
    font-size: var(--font-size-lg);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.multi-assign-header p[b-h8qsfz9txl] {
    margin: 4px 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.close-btn[b-h8qsfz9txl] {
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
}

.multi-assign-body[b-h8qsfz9txl] {
    padding: var(--space-4) var(--space-5);
    overflow: auto;
}

.loading-state[b-h8qsfz9txl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 220px;
    color: var(--color-text-secondary);
}

.assign-grid[b-h8qsfz9txl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.assign-panel[b-h8qsfz9txl] {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    min-height: 360px;
}

.panel-title[b-h8qsfz9txl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.panel-title h4[b-h8qsfz9txl] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.count-badge[b-h8qsfz9txl] {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: var(--font-size-xs);
}

.search-input[b-h8qsfz9txl] {
    width: 100%;
    margin-bottom: var(--space-3);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}

.item-list[b-h8qsfz9txl] {
    overflow: auto;
    max-height: 420px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.asset-row[b-h8qsfz9txl] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-surface);
    cursor: pointer;
}

.asset-row.selected[b-h8qsfz9txl] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.asset-row input[type="checkbox"][b-h8qsfz9txl] {
    margin-top: 4px;
}

.asset-name[b-h8qsfz9txl] {
    font-weight: 600;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.asset-meta[b-h8qsfz9txl] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.type-chip[b-h8qsfz9txl] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 500;
}

.accessory-row[b-h8qsfz9txl] {
    flex-direction: column;
    cursor: default;
}

.check-wrap[b-h8qsfz9txl] {
    display: flex;
    gap: 10px;
    width: 100%;
    cursor: pointer;
}

.qty-wrap[b-h8qsfz9txl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 28px;
}

.qty-wrap input[b-h8qsfz9txl] {
    width: 80px;
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}

.empty-hint[b-h8qsfz9txl] {
    color: var(--color-text-tertiary);
    padding: var(--space-6) var(--space-3);
    text-align: center;
}

.summary-bar[b-h8qsfz9txl] {
    margin-top: var(--space-4);
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.status-text[b-h8qsfz9txl] {
    color: var(--color-primary);
    font-weight: 600;
}

.btn-secondary[b-h8qsfz9txl],
.btn-primary[b-h8qsfz9txl] {
    border: none;
    border-radius: var(--radius-md);
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
}

.btn-secondary[b-h8qsfz9txl] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.btn-primary[b-h8qsfz9txl] {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:disabled[b-h8qsfz9txl],
.btn-secondary:disabled[b-h8qsfz9txl] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .assign-grid[b-h8qsfz9txl] {
        grid-template-columns: 1fr;
    }

    .multi-assign-dialog[b-h8qsfz9txl] {
        inset: 2vh 2vw auto;
    }
}
/* /Components/Shared/ChatComponent.razor.rz.scp.css */
/* /Components/Shared/ConfirmationModal.razor.rz.scp.css */
/* /Components/Shared/DeviceMaintenanceModal.razor.rz.scp.css */
/* /Components/Shared/DeviceModal.razor.rz.scp.css */
/* /Components/Shared/Note.razor.rz.scp.css */
.notification-container[b-vhmkh6dcaf] {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    max-width: 100%;
    width: 380px;
    box-sizing: border-box;
    padding: 0 1rem;
}

.notification-card[b-vhmkh6dcaf] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border-left: 5px solid #4a6bdf;
    animation: slideIn-b-vhmkh6dcaf 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 1rem;
    transform-origin: top right;
    transition: all 0.3s ease;
    opacity: 0.98;
}

    .notification-card:hover[b-vhmkh6dcaf] {
        opacity: 1;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

.notification-header[b-vhmkh6dcaf] {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.25rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.notification-icon[b-vhmkh6dcaf] {
    margin-right: 0.75rem;
    font-size: 1.3rem;
    color: #4a6bdf;
    min-width: 24px;
    text-align: center;
}

.notification-title[b-vhmkh6dcaf] {
    font-weight: 600;
    flex-grow: 1;
    color: #2c3e50;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.notification-close[b-vhmkh6dcaf] {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: #a0aec0;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .notification-close:hover[b-vhmkh6dcaf] {
        color: #718096;
        background-color: rgba(0, 0, 0, 0.05);
    }

    .notification-close:focus[b-vhmkh6dcaf] {
        outline: none;
        box-shadow: 0 0 0 2px rgba(74, 109, 223, 0.3);
    }

.notification-content[b-vhmkh6dcaf] {
    padding: 1.25rem;
    line-height: 1.6;
    color: #4a5568;
    font-size: 0.9rem;
}

/* Different notification types */
.notification-card.success[b-vhmkh6dcaf] {
    border-left-color: #48bb78;
}

    .notification-card.success .notification-icon[b-vhmkh6dcaf] {
        color: #48bb78;
    }

.notification-card.error[b-vhmkh6dcaf] {
    border-left-color: #f56565;
}

    .notification-card.error .notification-icon[b-vhmkh6dcaf] {
        color: #f56565;
    }

.notification-card.warning[b-vhmkh6dcaf] {
    border-left-color: #ed8936;
}

    .notification-card.warning .notification-icon[b-vhmkh6dcaf] {
        color: #ed8936;
    }

/* Animation */
@keyframes slideIn-b-vhmkh6dcaf {
    from {
        transform: translateX(120%) scale(0.9);
        opacity: 0;
    }

    to {
        transform: translateX(0) scale(1);
        opacity: 0.98;
    }
}

.notification-card.exit[b-vhmkh6dcaf] {
    animation: slideOut-b-vhmkh6dcaf 0.4s cubic-bezier(0.7, 0, 0.84, 0);
}

@keyframes slideOut-b-vhmkh6dcaf {
    to {
        transform: translateX(120%) scale(0.9);
        opacity: 0;
    }
}

/* Progress bar for auto-dismiss */
.notification-progress[b-vhmkh6dcaf] {
    height: 3px;
    background: rgba(74, 109, 223, 0.2);
    width: 100%;
    overflow: hidden;
}

.notification-progress-bar[b-vhmkh6dcaf] {
    height: 100%;
    background: linear-gradient(to right, #4a6bdf, #6b8cff);
    animation: progressBar-b-vhmkh6dcaf linear forwards;
}

@keyframes progressBar-b-vhmkh6dcaf {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .notification-container[b-vhmkh6dcaf] {
        width: calc(100% - 2rem);
        right: 1rem;
        left: 1rem;
        top: 0.5rem;
    }

    .notification-card[b-vhmkh6dcaf] {
        width: 100%;
        border-radius: 10px;
    }
}
/* /Components/Shared/NotificationBell.razor.rz.scp.css */
/* Floating Notification Bell */
.floating-notification-bell[b-ipyfk58cuy] {
    position: fixed;
    bottom: var(--space-20);
    right: var(--space-8);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-4);
}

    .floating-notification-bell.mobile[b-ipyfk58cuy] {
        right: 50%;
        transform: translateX(50%);
    }

.bell-container[b-ipyfk58cuy] {
    width: 56px;
    height: 56px;
    background: var(--gradient-success);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

    .bell-container:hover[b-ipyfk58cuy] {
        transform: scale(1.1);
        box-shadow: var(--shadow-xl);
    }

    .bell-container.active[b-ipyfk58cuy] {
        background: var(--gradient-primary);
    }

    .bell-container .bell-icon[b-ipyfk58cuy] {
        color: var(--color-text-inverse);
        font-size: 1.5em;
    }

.notification-counter[b-ipyfk58cuy] {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--color-danger);
    color: var(--color-text-inverse);
    border-radius: var(--radius-full);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: bold;
    border: 2px solid var(--color-white);
    animation: notificationPulse 1.5s infinite;
}

@@keyframes notificationPulse {
    0%[b-ipyfk58cuy] {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--color-danger-rgb), 0.7);
    }

    70%[b-ipyfk58cuy] {
        transform: scale(1.05);
        box-shadow: 0 0 0 6px rgba(var(--color-danger-rgb), 0);
    }

    100%[b-ipyfk58cuy] {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--color-danger-rgb), 0);
    }
}

/* Notification Card */
.notification-card[b-ipyfk58cuy] {
    width: 360px;
    max-height: 70vh;
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
    animation: notificationSlideIn var(--transition-normal) cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--color-border-light);
}

@@keyframes notificationSlideIn {
    from[b-ipyfk58cuy] {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }

    to[b-ipyfk58cuy] {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.notification-header[b-ipyfk58cuy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-light);
}

    .notification-header h3[b-ipyfk58cuy] {
        margin: 0;
        font-size: var(--font-size-lg);
        color: var(--color-text-primary);
        font-weight: 600;
    }

.mark-all-btn[b-ipyfk58cuy] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

    .mark-all-btn:hover:not(:disabled)[b-ipyfk58cuy] {
        background: rgba(var(--color-primary-rgb), 0.1);
    }

    .mark-all-btn:disabled[b-ipyfk58cuy] {
        opacity: 0.5;
        cursor: not-allowed;
        color: var(--color-text-tertiary);
    }

.notification-list[b-ipyfk58cuy] {
    overflow-y: auto;
    max-height: 60vh;
}

    .notification-list[b-ipyfk58cuy]::-webkit-scrollbar {
        width: 6px;
    }

    .notification-list[b-ipyfk58cuy]::-webkit-scrollbar-track {
        background: var(--color-bg-tertiary);
    }

    .notification-list[b-ipyfk58cuy]::-webkit-scrollbar-thumb {
        background: var(--color-border-medium);
        border-radius: var(--radius-full);
    }

        .notification-list[b-ipyfk58cuy]::-webkit-scrollbar-thumb:hover {
            background: var(--color-border-heavy);
        }

.notification[b-ipyfk58cuy] {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    gap: var(--space-3);
    transition: all var(--transition-fast);
    cursor: pointer;
    position: relative;
}

    .notification:hover[b-ipyfk58cuy] {
        background: var(--color-bg-tertiary);
    }

    .notification.unread[b-ipyfk58cuy] {
        background: rgba(var(--color-primary-rgb), 0.05);
    }

    .notification:last-child[b-ipyfk58cuy] {
        border-bottom: none;
    }

    .notification .notification-icon[b-ipyfk58cuy] {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: var(--space-1);
    }

    .notification.info .notification-icon[b-ipyfk58cuy] {
        background: rgba(var(--color-info-rgb), 0.1);
        color: var(--color-info);
    }

    .notification.success .notification-icon[b-ipyfk58cuy] {
        background: rgba(var(--color-success-rgb), 0.1);
        color: var(--color-success);
    }

    .notification.warning .notification-icon[b-ipyfk58cuy] {
        background: rgba(var(--color-warning-rgb), 0.1);
        color: var(--color-warning);
    }

    .notification.error .notification-icon[b-ipyfk58cuy] {
        background: rgba(var(--color-danger-rgb), 0.1);
        color: var(--color-danger);
    }

.notification-content[b-ipyfk58cuy] {
    flex: 1;
    min-width: 0;
}

    .notification-content p[b-ipyfk58cuy] {
        margin: 0;
        color: var(--color-text-primary);
        font-size: var(--font-size-sm);
        line-height: var(--line-height-tight);
    }

    .notification-content .notification-title[b-ipyfk58cuy] {
        font-weight: 600;
        color: var(--color-text-primary);
        margin-bottom: var(--space-1);
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .notification-content .notification-message[b-ipyfk58cuy] {
        color: var(--color-text-secondary);
        margin-bottom: var(--space-2);
    }

.notification-time[b-ipyfk58cuy] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.notification-actions[b-ipyfk58cuy] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

    .notification-actions .action-btn[b-ipyfk58cuy] {
        padding: var(--space-1) var(--space-3);
        font-size: var(--font-size-xs);
        border-radius: var(--radius-sm);
        border: none;
        cursor: pointer;
        transition: all var(--transition-fast);
    }

        .notification-actions .action-btn.primary[b-ipyfk58cuy] {
            background: var(--color-primary);
            color: var(--color-text-inverse);
        }

            .notification-actions .action-btn.primary:hover[b-ipyfk58cuy] {
                background: var(--color-primary-dark);
            }

        .notification-actions .action-btn.secondary[b-ipyfk58cuy] {
            background: var(--color-bg-tertiary);
            color: var(--color-text-secondary);
            border: 1px solid var(--color-border-medium);
        }

            .notification-actions .action-btn.secondary:hover[b-ipyfk58cuy] {
                background: var(--color-bg-secondary);
            }

.unread-indicator[b-ipyfk58cuy] {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: var(--space-2);
    animation: unreadPulse 2s infinite;
}

@@keyframes unreadPulse {
    0%[b-ipyfk58cuy], 100%[b-ipyfk58cuy] {
        opacity: 1;
        transform: scale(1);
    }

    50%[b-ipyfk58cuy] {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.notification-status[b-ipyfk58cuy] {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .notification-status.pending[b-ipyfk58cuy] {
        background: rgba(var(--color-warning-rgb), 0.1);
        color: var(--color-warning);
    }

    .notification-status.completed[b-ipyfk58cuy] {
        background: rgba(var(--color-success-rgb), 0.1);
        color: var(--color-success);
    }

    .notification-status.failed[b-ipyfk58cuy] {
        background: rgba(var(--color-danger-rgb), 0.1);
        color: var(--color-danger);
    }

.empty-state[b-ipyfk58cuy] {
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-tertiary);
}

    .empty-state .empty-icon[b-ipyfk58cuy] {
        width: 64px;
        height: 64px;
        background: var(--color-bg-tertiary);
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: var(--space-4);
        color: var(--color-text-tertiary);
    }

        .empty-state .empty-icon i[b-ipyfk58cuy] {
            font-size: var(--font-size-2xl);
        }

    .empty-state h4[b-ipyfk58cuy] {
        color: var(--color-text-secondary);
        margin-bottom: var(--space-2);
        font-size: var(--font-size-lg);
        font-weight: 600;
    }

    .empty-state p[b-ipyfk58cuy] {
        margin: 0;
        font-size: var(--font-size-sm);
        max-width: 80%;
        line-height: var(--line-height-normal);
    }

.notification-footer[b-ipyfk58cuy] {
    padding: var(--space-3) var(--space-5);
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .notification-footer .settings-btn[b-ipyfk58cuy] {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        background: none;
        border: none;
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        cursor: pointer;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        transition: all var(--transition-fast);
    }

        .notification-footer .settings-btn:hover[b-ipyfk58cuy] {
            background: var(--color-bg-tertiary);
            color: var(--color-text-primary);
        }

    .notification-footer .view-all-btn[b-ipyfk58cuy] {
        color: var(--color-primary);
        font-size: var(--font-size-sm);
        font-weight: 500;
        text-decoration: none;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        transition: all var(--transition-fast);
    }

        .notification-footer .view-all-btn:hover[b-ipyfk58cuy] {
            background: rgba(var(--color-primary-rgb), 0.1);
        }

/* Dark Theme Support */
[data-theme="dark"] .bell-container[b-ipyfk58cuy] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

    [data-theme="dark"] .bell-container:hover[b-ipyfk58cuy] {
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.5);
    }

[data-theme="dark"] .notification-card[b-ipyfk58cuy] {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .notification-header[b-ipyfk58cuy] {
    background: var(--color-gray-900);
    border-color: var(--color-gray-700);
}

[data-theme="dark"] .notification:hover[b-ipyfk58cuy] {
    background: var(--color-gray-700);
}

[data-theme="dark"] .notification.unread[b-ipyfk58cuy] {
    background: rgba(var(--color-primary-rgb), 0.1);
}

[data-theme="dark"] .notification-list[b-ipyfk58cuy]::-webkit-scrollbar-track {
    background: var(--color-gray-700);
}

[data-theme="dark"] .notification-list[b-ipyfk58cuy]::-webkit-scrollbar-thumb {
    background: var(--color-gray-600);
}

    [data-theme="dark"] .notification-list[b-ipyfk58cuy]::-webkit-scrollbar-thumb:hover {
        background: var(--color-gray-500);
    }

[data-theme="dark"] .empty-state .empty-icon[b-ipyfk58cuy] {
    background: var(--color-gray-700);
    color: var(--color-gray-400);
}

[data-theme="dark"] .notification-footer[b-ipyfk58cuy] {
    background: var(--color-gray-900);
    border-color: var(--color-gray-700);
}

/* Responsive Styles */
@@media (max-width: 768px) {
    .floating-notification-bell[b-ipyfk58cuy] {
        bottom: var(--space-16);
        right: var(--space-4);
    }

        .floating-notification-bell.mobile[b-ipyfk58cuy] {
            bottom: var(--space-6);
        }

    .bell-container[b-ipyfk58cuy] {
        width: 52px;
        height: 52px;
    }

        .bell-container .bell-icon[b-ipyfk58cuy] {
            font-size: 1.3em;
        }

    .notification-card[b-ipyfk58cuy] {
        width: calc(100vw - var(--space-8));
        max-width: 400px;
        right: var(--space-4);
        left: auto;
        margin: 0 auto;
    }

    .notification[b-ipyfk58cuy] {
        padding: var(--space-3) var(--space-4);
    }

    .notification-content .notification-title[b-ipyfk58cuy] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .notification-actions[b-ipyfk58cuy] {
        flex-direction: column;
    }

        .notification-actions .action-btn[b-ipyfk58cuy] {
            width: 100%;
            justify-content: center;
        }
}

@@media (max-width: 480px) {
    .notification-card[b-ipyfk58cuy] {
        width: 95vw;
        right: 2.5vw;
        left: 2.5vw;
    }

    .bell-container[b-ipyfk58cuy] {
        width: 48px;
        height: 48px;
    }

    .notification-counter[b-ipyfk58cuy] {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
}

/* Accessibility */
.notification:focus-visible[b-ipyfk58cuy],
.bell-container:focus-visible[b-ipyfk58cuy],
.mark-all-btn:focus-visible[b-ipyfk58cuy],
.action-btn:focus-visible[b-ipyfk58cuy],
.settings-btn:focus-visible[b-ipyfk58cuy],
.view-all-btn:focus-visible[b-ipyfk58cuy] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Reduced Motion Support */
@@media (prefers-reduced-motion: reduce) {
    .bell-container[b-ipyfk58cuy],
    .notification[b-ipyfk58cuy],
    .mark-all-btn[b-ipyfk58cuy],
    .action-btn[b-ipyfk58cuy],
    .settings-btn[b-ipyfk58cuy],
    .view-all-btn[b-ipyfk58cuy] {
        transition: none !important;
    }

    .notification-card[b-ipyfk58cuy] {
        animation: none !important;
    }

    .notification-counter[b-ipyfk58cuy],
    .unread-indicator[b-ipyfk58cuy] {
        animation: none !important;
    }
}

/* Loading State */
.notification.loading[b-ipyfk58cuy] {
    opacity: 0.6;
    pointer-events: none;
}

.loading-spinner-small[b-ipyfk58cuy] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

/* Notification Priority Levels */
.notification.priority-high[b-ipyfk58cuy] {
    border-left: 4px solid var(--color-danger);
}

.notification.priority-medium[b-ipyfk58cuy] {
    border-left: 4px solid var(--color-warning);
}

.notification.priority-low[b-ipyfk58cuy] {
    border-left: 4px solid var(--color-info);
}

/* Notification Categories */
.notification-category[b-ipyfk58cuy] {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    margin-bottom: var(--space-2);
}

.notification.system .notification-category[b-ipyfk58cuy] {
    background: rgba(var(--color-info-rgb), 0.1);
    color: var(--color-info);
}

.notification.user .notification-category[b-ipyfk58cuy] {
    background: rgba(var(--color-success-rgb), 0.1);
    color: var(--color-success);
}

.notification.alert .notification-category[b-ipyfk58cuy] {
    background: rgba(var(--color-danger-rgb), 0.1);
    color: var(--color-danger);
}
/* /Components/Shared/ReclaimDeviceModal.razor.rz.scp.css */
/* /Components/Shared/ReclaimModal.razor.rz.scp.css */
/* /Components/Shared/ScrapDeviceModal.razor.rz.scp.css */
/* /Components/Shared/SpecificationsModal.razor.rz.scp.css */
/* /Components/Shared/VMModal.razor.rz.scp.css */
/* VM Modal Styles */
.vm-modal .modal-content[b-5t7u5sl4mw] {
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    border: none;
}

.vm-modal .modal-header[b-5t7u5sl4mw] {
    border-radius: 12px 12px 0 0;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.vm-modal .modal-body[b-5t7u5sl4mw] {
    padding: 1.5rem;
}

.vm-modal .modal-footer[b-5t7u5sl4mw] {
    border-radius: 0 0 12px 12px;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
}

/* VM Form Styles */
.vm-form-group[b-5t7u5sl4mw] {
    margin-bottom: 1.5rem;
}

.vm-form-label[b-5t7u5sl4mw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

    .vm-form-label.required[b-5t7u5sl4mw]::after {
        content: '*';
        color: #dc3545;
        margin-left: 0.25rem;
    }

.vm-form-input[b-5t7u5sl4mw] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: white;
    width: 100%;
}

    .vm-form-input:focus[b-5t7u5sl4mw] {
        border-color: #4361ee;
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
        outline: none;
    }

.vm-form-textarea[b-5t7u5sl4mw] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: white;
    resize: vertical;
    min-height: 80px;
    width: 100%;
}

    .vm-form-textarea:focus[b-5t7u5sl4mw] {
        border-color: #4361ee;
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
        outline: none;
    }

/* Form Hints */
.form-hint[b-5t7u5sl4mw] {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.validation-error[b-5t7u5sl4mw] {
    font-size: 0.8rem;
    color: #dc3545;
    margin-top: 0.25rem;
}

/* VM Action Buttons */
.btn-vm-add[b-5t7u5sl4mw] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .btn-vm-add:hover[b-5t7u5sl4mw] {
        background: linear-gradient(135deg, #059669, #047857);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
        color: white;
    }

.btn-vm-cancel[b-5t7u5sl4mw] {
    background: #f7fafc;
    color: #4a5568;
    border: 1px solid #e2e8f0;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .btn-vm-cancel:hover[b-5t7u5sl4mw] {
        background: #edf2f7;
        color: #2d3748;
        transform: translateY(-1px);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .vm-modal .modal-dialog[b-5t7u5sl4mw] {
        margin: 0.5rem;
    }

    .vm-modal .modal-body[b-5t7u5sl4mw] {
        padding: 1rem;
    }
}

/* Animation for modal */
.vm-modal .modal-content[b-5t7u5sl4mw] {
    animation: modalSlideIn-b-5t7u5sl4mw 0.3s ease-out;
}

@keyframes modalSlideIn-b-5t7u5sl4mw {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}