/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   OnePlateform Premium Layout - Scoped Styles
   ========================================================================== */

/* Page Container */
.page[b-3p4soqgqns] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-3p4soqgqns] {
    flex: 1;
}

/* Legacy Sidebar (for fallback) */
.sidebar[b-3p4soqgqns] {
    background-color: #2b2c40;
}

/* Top Row / Header */
.top-row[b-3p4soqgqns] {
    background-color: #fff;
    border-bottom: 1px solid #e4e6e8;
    justify-content: flex-end;
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    box-shadow: 0 2px 4px rgba(161, 172, 184, 0.12);
}

.top-row[b-3p4soqgqns]  a, .top-row[b-3p4soqgqns]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
    color: #697a8d;
    transition: color 0.2s ease-in-out;
}

.top-row[b-3p4soqgqns]  a:hover, .top-row[b-3p4soqgqns]  .btn-link:hover {
    color: #696cff;
    text-decoration: none;
}

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

/* Mobile Responsive */
@media (max-width: 640.98px) {
    .top-row[b-3p4soqgqns] {
        justify-content: space-between;
        padding: 0 1rem;
    }

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

/* Desktop Layout */
@media (min-width: 641px) {
    .page[b-3p4soqgqns] {
        flex-direction: row;
    }

    .sidebar[b-3p4soqgqns] {
        width: 260px;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1030;
    }

    .top-row[b-3p4soqgqns] {
        position: sticky;
        top: 0;
        z-index: 1020;
    }

    .top-row.auth[b-3p4soqgqns]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

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

/* Blazor Error UI */
#blazor-error-ui[b-3p4soqgqns] {
    color-scheme: light only;
    background: linear-gradient(135deg, #ff3e1d 0%, #ff6b4a 100%);
    color: #fff;
    bottom: 0;
    box-shadow: 0 -4px 12px rgba(255, 62, 29, 0.35);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 1rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1050;
    font-size: 0.9375rem;
}

#blazor-error-ui .dismiss[b-3p4soqgqns] {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s;
}

#blazor-error-ui .dismiss:hover[b-3p4soqgqns] {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Card Animations */
[b-3p4soqgqns] .card {
    transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
}

[b-3p4soqgqns] .card:hover {
    box-shadow: 0 0.5rem 1.25rem rgba(115, 103, 240, 0.175);
}

/* Table Enhancements */
[b-3p4soqgqns] .table-responsive {
    border-radius: 0.375rem;
}

[b-3p4soqgqns] .table thead th {
    background-color: #f9fafc;
    border-bottom: 2px solid #e4e6e8;
}

/* Button Animations */
[b-3p4soqgqns] .btn {
    transition: all 0.2s ease-in-out;
}

[b-3p4soqgqns] .btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

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

/* Badge Styles */
[b-3p4soqgqns] .badge {
    font-weight: 500;
}

/* Form Focus States */
[b-3p4soqgqns] .form-control:focus,
[b-3p4soqgqns] .form-select:focus {
    border-color: #696cff;
    box-shadow: 0 0.125rem 0.25rem rgba(105, 108, 255, 0.4);
}

/* Modal Enhancements */
[b-3p4soqgqns] .modal-content {
    border: none;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
}

/* Progress Bar */
[b-3p4soqgqns] .progress {
    height: 0.5rem;
    border-radius: 0.25rem;
}

/* Alert Styles */
[b-3p4soqgqns] .alert {
    border: none;
    border-radius: 0.375rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ==========================================================================
   OnePlateform Premium Sidebar Navigation
   Modern Material/Sneat Inspired Design
   ========================================================================== */

/* Sidebar Navigation Container */
.sidebar-nav[b-sc1sxdy6k0] {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-nav.collapsed[b-sc1sxdy6k0] {
    padding: 0.5rem;
    align-items: center;
}

/* Custom Scrollbar */
.sidebar-nav[b-sc1sxdy6k0]::-webkit-scrollbar {
    width: 4px;
}

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

.sidebar-nav[b-sc1sxdy6k0]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

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

/* Nav Item Base Styles */
.nav-item[b-sc1sxdy6k0],
.sidebar-nav a[b-sc1sxdy6k0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0.125rem 0;
    font-size: 0.8125rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.15s ease;
    cursor: pointer;
    position: relative;
    line-height: 1.4;
}

.nav-item:hover[b-sc1sxdy6k0],
.sidebar-nav a:hover[b-sc1sxdy6k0] {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.nav-item.active[b-sc1sxdy6k0],
.sidebar-nav a.active[b-sc1sxdy6k0],
.nav-dashboard.active[b-sc1sxdy6k0] {
    background: linear-gradient(135deg, #696cff 0%, #7c7fff 100%);
    color: #fff;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(105, 108, 255, 0.35);
}

/* Nav Icons */
.nav-item i[b-sc1sxdy6k0],
.sidebar-nav a i[b-sc1sxdy6k0] {
    font-size: 0.9375rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.85;
}

.nav-item.active i[b-sc1sxdy6k0],
.sidebar-nav a.active i[b-sc1sxdy6k0] {
    opacity: 1;
}

/* Nav Text */
.nav-text[b-sc1sxdy6k0] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nav Arrow for Expandable Items */
.nav-arrow[b-sc1sxdy6k0] {
    font-size: 0.75rem;
    opacity: 0.6;
    transition: transform 0.2s ease;
    margin-left: auto;
}

/* Module Section - Main Module Buttons */
.nav-module[b-sc1sxdy6k0] {
    margin-bottom: 0.125rem;
}

.nav-section[b-sc1sxdy6k0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0.125rem 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.15s ease;
    cursor: pointer;
    line-height: 1.4;
}

.nav-section:hover[b-sc1sxdy6k0] {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.nav-section.expanded[b-sc1sxdy6k0] {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.nav-section.expanded .nav-arrow[b-sc1sxdy6k0] {
    transform: rotate(0deg);
}

/* Nav Module Icon - Sidebar specific (not same as page module-icon) */
.nav-module-icon[b-sc1sxdy6k0] {
    font-size: 0.9375rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* Module Content (Submenu) */
.nav-module-content[b-sc1sxdy6k0] {
    padding-left: 0.375rem;
    margin-top: 0.125rem;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    margin-left: 1rem;
}

.nav-module-content .nav-item[b-sc1sxdy6k0] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.nav-module-content .nav-item:hover[b-sc1sxdy6k0] {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.06);
}

.nav-module-content .nav-item.active[b-sc1sxdy6k0] {
    background: rgba(105, 108, 255, 0.18);
    color: #696cff;
    font-weight: 500;
    box-shadow: none;
}

.nav-module-content .nav-item.active[b-sc1sxdy6k0]::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    background: #696cff;
    border-radius: 50%;
}

/* Child Menu Items */
.nav-child[b-sc1sxdy6k0] {
    padding-left: 2rem !important;
    font-size: 0.775rem !important;
}

/* Nav Group (for nested menus) */
.nav-group[b-sc1sxdy6k0] {
    margin-bottom: 0.125rem;
}

.nav-parent[b-sc1sxdy6k0] {
    font-weight: 500;
}

.nav-parent.expanded[b-sc1sxdy6k0] {
    background-color: rgba(255, 255, 255, 0.04);
}

/* Nav Subsection */
.nav-subsection[b-sc1sxdy6k0] {
    font-size: 0.75rem;
    opacity: 0.85;
    padding: 0.375rem 0.75rem;
}

/* Loading State */
.nav-loading[b-sc1sxdy6k0] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    gap: 0.5rem;
}

/* Empty State */
.nav-empty[b-sc1sxdy6k0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    text-align: center;
    gap: 0.375rem;
}

.nav-empty i[b-sc1sxdy6k0] {
    font-size: 1.25rem;
}

/* Dashboard Link */
.nav-dashboard[b-sc1sxdy6k0] {
    margin-bottom: 0.375rem;
    font-weight: 500;
}

.nav-dashboard i[b-sc1sxdy6k0] {
    color: #696cff;
}

.nav-dashboard.active i[b-sc1sxdy6k0] {
    color: #fff;
}

/* Collapsed Sidebar Styles */
.sidebar-nav.collapsed .nav-item[b-sc1sxdy6k0],
.sidebar-nav.collapsed .nav-section[b-sc1sxdy6k0],
.sidebar-nav.collapsed a[b-sc1sxdy6k0] {
    padding: 0.5rem;
    justify-content: center;
}

.sidebar-nav.collapsed .nav-text[b-sc1sxdy6k0],
.sidebar-nav.collapsed .nav-arrow[b-sc1sxdy6k0] {
    display: none;
}

.sidebar-nav.collapsed .nav-module-content[b-sc1sxdy6k0] {
    display: none;
}

/* Collapsed Menu Popup (for hover menus) */
.collapsed-menu[b-sc1sxdy6k0] {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 200px;
    background: #2b2c40;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 0.5rem;
    margin-left: 0.5rem;
    z-index: 1000;
}

/* Module Active State Indicator */
.nav-section.active-module[b-sc1sxdy6k0] {
    position: relative;
}

.nav-section.active-module[b-sc1sxdy6k0]::after {
    content: '';
    position: absolute;
    right: 0.75rem;
    width: 6px;
    height: 6px;
    background: #696cff;
    border-radius: 50%;
}

/* Legacy Support */
.navbar-toggler[b-sc1sxdy6k0] {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.5rem rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
}

.navbar-toggler:hover[b-sc1sxdy6k0] {
    background-color: rgba(255, 255, 255, 0.15);
}

.navbar-toggler:checked[b-sc1sxdy6k0] {
    background-color: rgba(255, 255, 255, 0.2);
}

.nav-scrollable[b-sc1sxdy6k0] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-sc1sxdy6k0] {
    display: block;
}

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

    .nav-scrollable[b-sc1sxdy6k0] {
        display: block;
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* Section Headers (for static sections) */
.nav-section-header[b-sc1sxdy6k0] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 1rem 1rem 0.5rem !important;
    cursor: default;
    margin-top: 0.5rem;
}

.nav-section-header:hover[b-sc1sxdy6k0] {
    background: transparent !important;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-j75ee6v6nt],
.components-reconnect-repeated-attempt-visible[b-j75ee6v6nt],
.components-reconnect-failed-visible[b-j75ee6v6nt],
.components-pause-visible[b-j75ee6v6nt],
.components-resume-failed-visible[b-j75ee6v6nt],
.components-rejoining-animation[b-j75ee6v6nt] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AcademicExamination/Index.razor.rz.scp.css */
.stat-card[b-gkc1jmjb87] {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.stat-card:hover[b-gkc1jmjb87] {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.timeline-item[b-gkc1jmjb87] {
    position: relative;
    padding-left: 0;
}

.timeline-icon[b-gkc1jmjb87] {
    flex-shrink: 0;
}

.timeline-icon .badge[b-gkc1jmjb87] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-content[b-gkc1jmjb87] {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 0.75rem;
}

.timeline-item:last-child .timeline-content[b-gkc1jmjb87] {
    border-bottom: none;
}

.table th[b-gkc1jmjb87] {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.progress[b-gkc1jmjb87] {
    background-color: rgba(0, 0, 0, 0.1);
}

.card-footer a[b-gkc1jmjb87] {
    font-size: 0.875rem;
}

.page-header[b-gkc1jmjb87] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
    padding: 1.5rem;
    border-radius: 0;
    color: white;
}

.page-header h4[b-gkc1jmjb87],
.page-header p[b-gkc1jmjb87] {
    color: white !important;
}

.page-header .btn-outline-primary[b-gkc1jmjb87] {
    color: white;
    border-color: rgba(255, 255, 255, 0.5);
}

.page-header .btn-outline-primary:hover[b-gkc1jmjb87] {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: white;
}

.card[b-gkc1jmjb87] {
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-header[b-gkc1jmjb87] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.badge[b-gkc1jmjb87] {
    font-weight: 500;
}

[b-gkc1jmjb87] .quick-actions .btn {
    border-radius: 0.375rem;
}
/* /Components/Pages/AttendanceManagement/Index.razor.rz.scp.css */
.page-header[b-asn0gg6qan] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 1.5rem;
    border-radius: 0.5rem;
    color: white;
    margin: -1rem -1rem 1rem -1rem;
}

.page-header h4[b-asn0gg6qan],
.page-header p[b-asn0gg6qan] {
    color: white !important;
}

.page-header .btn-outline-primary[b-asn0gg6qan] {
    color: white;
    border-color: rgba(255, 255, 255, 0.5);
}

.page-header .btn-outline-primary:hover[b-asn0gg6qan] {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: white;
}

.page-header .btn-primary[b-asn0gg6qan] {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.stat-icon[b-asn0gg6qan] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-sm[b-asn0gg6qan] {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}

.card[b-asn0gg6qan] {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover[b-asn0gg6qan] {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.progress[b-asn0gg6qan] {
    border-radius: 0.25rem;
    overflow: hidden;
}

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

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

.table th[b-asn0gg6qan] {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td[b-asn0gg6qan] {
    vertical-align: middle;
}

.card-footer[b-asn0gg6qan] {
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.badge[b-asn0gg6qan] {
    font-weight: 500;
}
/* /Components/Pages/BlogManagement/Approvals.razor.rz.scp.css */
.page-header[b-1b7762kqwp] {
    padding: 1rem 0;
}

.card[b-1b7762kqwp] {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.approval-card[b-1b7762kqwp] {
    transition: transform 0.2s, box-shadow 0.2s;
}

.approval-card:hover[b-1b7762kqwp] {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.post-preview-image[b-1b7762kqwp] {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 0.375rem;
}

.post-content[b-1b7762kqwp] {
    max-height: 400px;
    overflow-y: auto;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.375rem;
}

.btn-group .btn[b-1b7762kqwp] {
    border-radius: 0.375rem;
}

.modal-header.bg-success[b-1b7762kqwp],
.modal-header.bg-danger[b-1b7762kqwp],
.modal-header.bg-warning[b-1b7762kqwp] {
    color: white;
}

.modal-header.bg-warning[b-1b7762kqwp] {
    color: #212529;
}

.modal-header.bg-warning .btn-close-white[b-1b7762kqwp] {
    filter: none;
}
/* /Components/Pages/BlogManagement/Index.razor.rz.scp.css */
.page-header[b-g8muo3l7ya] {
    padding: 1rem 0;
}

.card[b-g8muo3l7ya] {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover[b-g8muo3l7ya] {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.stat-card[b-g8muo3l7ya] {
    border-radius: 0.5rem;
}

.card-header[b-g8muo3l7ya] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-weight: 600;
}

.avatar-circle[b-g8muo3l7ya] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
}

.btn-group .btn[b-g8muo3l7ya] {
    border-radius: 0.375rem;
    margin-left: 0.25rem;
}

.btn-group .btn:first-child[b-g8muo3l7ya] {
    margin-left: 0;
}

.stat-mini[b-g8muo3l7ya] {
    padding: 0.5rem;
}

.stat-mini i[b-g8muo3l7ya] {
    margin-bottom: 0.25rem;
}

.list-group-item[b-g8muo3l7ya] {
    border-left: none;
    border-right: none;
}

.list-group-item:first-child[b-g8muo3l7ya] {
    border-top: none;
}

.list-group-item:last-child[b-g8muo3l7ya] {
    border-bottom: none;
}

.badge[b-g8muo3l7ya] {
    font-weight: 500;
}

.card-footer a:hover[b-g8muo3l7ya] {
    text-decoration: underline !important;
}

.table th[b-g8muo3l7ya] {
    font-weight: 600;
    font-size: 0.85rem;
}

.table td[b-g8muo3l7ya] {
    vertical-align: middle;
}
/* /Components/Pages/BlogManagement/Posts.razor.rz.scp.css */
.page-header[b-mggomhqkly] {
    padding: 1rem 0;
}

.card[b-mggomhqkly] {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.table th[b-mggomhqkly] {
    font-weight: 600;
    font-size: 0.85rem;
}

.table td[b-mggomhqkly] {
    vertical-align: middle;
}

.post-thumbnail[b-mggomhqkly] {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 0.375rem;
}

.post-thumbnail-placeholder[b-mggomhqkly] {
    width: 48px;
    height: 48px;
    background-color: #e9ecef;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
}

.btn-group .btn[b-mggomhqkly] {
    border-radius: 0.375rem;
    margin-left: 0.125rem;
}

.btn-group .btn:first-child[b-mggomhqkly] {
    margin-left: 0;
}

.pagination[b-mggomhqkly] {
    margin-bottom: 0;
}

.modal-xl[b-mggomhqkly] {
    max-width: 1100px;
}

.form-label[b-mggomhqkly] {
    font-weight: 500;
    font-size: 0.875rem;
}
/* /Components/Pages/BlogManagement/Tags.razor.rz.scp.css */
.page-header[b-lw99or4k9m] {
    padding: 1rem 0;
}

.card[b-lw99or4k9m] {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.tag-card[b-lw99or4k9m] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem;
    min-width: 200px;
    max-width: 280px;
    transition: all 0.2s;
}

.tag-card:hover[b-lw99or4k9m] {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.tag-card.inactive[b-lw99or4k9m] {
    opacity: 0.7;
    background: #e9ecef;
}

.tag-header[b-lw99or4k9m] {
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.tag-name[b-lw99or4k9m] {
    flex: 1;
}

.tag-description[b-lw99or4k9m] {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.5rem;
}

.tag-slug[b-lw99or4k9m] {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.tag-slug code[b-lw99or4k9m] {
    font-size: 0.75rem;
}

.tag-actions[b-lw99or4k9m] {
    display: flex;
    gap: 0.25rem;
}

.btn-group .btn[b-lw99or4k9m] {
    border-radius: 0.375rem;
    margin-left: 0.125rem;
}

.btn-group .btn:first-child[b-lw99or4k9m] {
    margin-left: 0;
}
/* /Components/Pages/CommunicationCRM/Index.razor.rz.scp.css */
.stat-card[b-nfyj3vs6eu] {
    border: none;
    border-radius: 12px;
    transition: transform 0.2s ease;
}

.stat-card:hover[b-nfyj3vs6eu] {
    transform: translateY(-2px);
}

.bg-purple[b-nfyj3vs6eu] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bg-teal[b-nfyj3vs6eu] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.activity-icon[b-nfyj3vs6eu] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-action-item[b-nfyj3vs6eu] {
    text-decoration: none;
    color: inherit;
    padding: 1rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.quick-action-item:hover[b-nfyj3vs6eu] {
    background-color: var(--bs-light);
}

.quick-icon[b-nfyj3vs6eu] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto;
}

.list-group-item-action:hover[b-nfyj3vs6eu] {
    background-color: var(--bs-light);
}
/* /Components/Pages/DashboardAnalytics/Index.razor.rz.scp.css */
.page-header[b-dk7q28f1hq] {
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.kpi-card[b-dk7q28f1hq] {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: none;
    border-radius: 12px;
}

.kpi-card:hover[b-dk7q28f1hq] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.kpi-icon[b-dk7q28f1hq] {
    opacity: 0.8;
}

.kpi-value[b-dk7q28f1hq] {
    font-size: 1.75rem;
    font-weight: 700;
}

.bg-purple[b-dk7q28f1hq] {
    background-color: #6f42c1 !important;
}

.module-card[b-dk7q28f1hq] {
    transition: all 0.2s ease;
    background-color: #fafafa;
}

.module-card:hover[b-dk7q28f1hq] {
    background-color: #f0f0f0;
}

.module-card.border-success[b-dk7q28f1hq] {
    border-left: 4px solid #198754 !important;
}

.module-card.border-warning[b-dk7q28f1hq] {
    border-left: 4px solid #ffc107 !important;
}

.module-card.border-danger[b-dk7q28f1hq] {
    border-left: 4px solid #dc3545 !important;
}

.health-metric .progress[b-dk7q28f1hq] {
    border-radius: 3px;
}

.tenant-avatar[b-dk7q28f1hq] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.alert-item[b-dk7q28f1hq] {
    border-left: 3px solid transparent;
    transition: background-color 0.2s ease;
}

.alert-item:hover[b-dk7q28f1hq] {
    background-color: #f8f9fa;
}

.alert-danger-light[b-dk7q28f1hq] {
    border-left-color: #dc3545;
    background-color: #fff5f5;
}

.alert-warning-light[b-dk7q28f1hq] {
    border-left-color: #ffc107;
    background-color: #fffbeb;
}

.alert-info-light[b-dk7q28f1hq] {
    border-left-color: #0dcaf0;
    background-color: #f0faff;
}

.chart-container[b-dk7q28f1hq] {
    min-height: 150px;
}

.chart-placeholder[b-dk7q28f1hq] {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.table th[b-dk7q28f1hq] {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
}

.table td[b-dk7q28f1hq] {
    vertical-align: middle;
}

.btn-group .btn[b-dk7q28f1hq] {
    border-radius: 0;
}

.btn-group .btn:first-child[b-dk7q28f1hq] {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.btn-group .btn:last-child[b-dk7q28f1hq] {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

.card[b-dk7q28f1hq] {
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

.card-header[b-dk7q28f1hq] {
    border-bottom: 1px solid #e9ecef;
    border-radius: 12px 12px 0 0 !important;
}

.list-group-item[b-dk7q28f1hq] {
    border-left: none;
    border-right: none;
}

.list-group-item:first-child[b-dk7q28f1hq] {
    border-top: none;
}

.list-group-item:last-child[b-dk7q28f1hq] {
    border-bottom: none;
}

@media (max-width: 768px) {
    .kpi-value[b-dk7q28f1hq] {
        font-size: 1.25rem;
    }

    .page-header h4[b-dk7q28f1hq] {
        font-size: 1.25rem;
    }

    .btn-group[b-dk7q28f1hq] {
        flex-wrap: wrap;
    }

    .btn-group .btn[b-dk7q28f1hq] {
        flex: 1 1 auto;
    }
}
/* /Components/Pages/Dashboards/AccountantDashboard.razor.rz.scp.css */
.accountant-dashboard[b-ykxvq7wibn] {
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    min-height: 100vh;
}

.loading-overlay[b-ykxvq7wibn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* Dashboard Header */
.dashboard-header[b-ykxvq7wibn] {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    padding: 1.5rem 2rem;
    border-radius: 16px;
    color: white;
    box-shadow: 0 4px 20px rgba(5, 150, 105, 0.3);
}

.dashboard-header h2[b-ykxvq7wibn] {
    font-weight: 700;
}

/* KPI Cards */
.kpi-card[b-ykxvq7wibn] {
    position: relative;
    padding: 1.5rem;
    border-radius: 16px;
    color: white;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transition: transform 0.3s ease;
}

.kpi-card:hover[b-ykxvq7wibn] {
    transform: translateY(-5px);
}

.kpi-card .kpi-icon[b-ykxvq7wibn] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.kpi-card h3[b-ykxvq7wibn] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.kpi-card p[b-ykxvq7wibn] {
    margin: 0.25rem 0 0.75rem;
    opacity: 0.9;
}

.kpi-card .kpi-detail[b-ykxvq7wibn] {
    font-size: 0.8rem;
    opacity: 0.9;
}

.kpi-card.collected[b-ykxvq7wibn] { background: linear-gradient(135deg, #059669 0%, #10b981 100%); }
.kpi-card.outstanding[b-ykxvq7wibn] { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); }
.kpi-card.expenses[b-ykxvq7wibn] { background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%); }
.kpi-card.payroll[b-ykxvq7wibn] { background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%); }

/* Today Cards */
.today-card[b-ykxvq7wibn] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.today-icon[b-ykxvq7wibn] {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.today-icon.students[b-ykxvq7wibn] { background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%); }
.today-icon.total[b-ykxvq7wibn] { background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%); }

.today-content h4[b-ykxvq7wibn] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.today-content span[b-ykxvq7wibn] {
    color: #64748b;
    font-size: 0.9rem;
}

.today-badge[b-ykxvq7wibn] {
    margin-left: auto;
}

/* Cards */
.card[b-ykxvq7wibn] {
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}

.card-header[b-ykxvq7wibn] {
    border-bottom: 1px solid #f0f0f0;
    padding: 1rem 1.25rem;
}

.card-header h6[b-ykxvq7wibn] {
    font-weight: 600;
}

.bg-gradient-purple[b-ykxvq7wibn] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

/* Collection Chart */
.collection-chart[b-ykxvq7wibn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 220px;
    padding: 1rem 0;
}

.chart-column[b-ykxvq7wibn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.column-bars[b-ykxvq7wibn] {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 160px;
}

.column-bars .bar[b-ykxvq7wibn] {
    width: 25px;
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: height 0.5s ease;
    cursor: pointer;
}

.column-bars .bar.expected[b-ykxvq7wibn] {
    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
}

.column-bars .bar.actual[b-ykxvq7wibn] {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}

.column-bars .bar:hover .bar-tooltip[b-ykxvq7wibn] {
    display: block;
}

.bar-tooltip[b-ykxvq7wibn] {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 10;
}

.column-label[b-ykxvq7wibn] {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.column-percent[b-ykxvq7wibn] {
    font-size: 0.75rem;
    font-weight: 600;
}

.chart-legend[b-ykxvq7wibn] {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.legend-dot[b-ykxvq7wibn] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
}

.legend-dot.expected[b-ykxvq7wibn] { background: #94a3b8; }
.legend-dot.actual[b-ykxvq7wibn] { background: #10b981; }

/* Expense Donut */
.expense-donut[b-ykxvq7wibn] {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(
        #6366f1 0deg 120deg,
        #10b981 120deg 170deg,
        #f59e0b 170deg 200deg,
        #ef4444 200deg 240deg,
        #8b5cf6 240deg 280deg,
        #0ea5e9 280deg 320deg,
        #ec4899 320deg 350deg,
        #64748b 350deg 360deg
    );
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.expense-donut .donut-center[b-ykxvq7wibn] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.donut-center .amount[b-ykxvq7wibn] {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
}

.donut-center .label[b-ykxvq7wibn] {
    font-size: 0.75rem;
    color: #6b7280;
}

.expense-legend[b-ykxvq7wibn] {
    margin-top: 1rem;
}

.expense-legend .legend-item[b-ykxvq7wibn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.expense-legend .legend-item:last-child[b-ykxvq7wibn] {
    border-bottom: none;
}

.expense-legend .dot[b-ykxvq7wibn] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.expense-legend .name[b-ykxvq7wibn] {
    flex: 1;
    font-size: 0.85rem;
}

.expense-legend .amount[b-ykxvq7wibn] {
    font-weight: 500;
    font-size: 0.85rem;
}

/* Table */
.table th[b-ykxvq7wibn] {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}

.table td[b-ykxvq7wibn] {
    vertical-align: middle;
}

.student-info strong[b-ykxvq7wibn] {
    display: block;
}

/* Payroll Summary */
.payroll-summary[b-ykxvq7wibn] {
    padding: 0.5rem 0;
}

.payroll-kpi[b-ykxvq7wibn] {
    display: flex;
    gap: 1rem;
}

.payroll-kpi .kpi-item[b-ykxvq7wibn] {
    flex: 1;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    text-align: center;
}

.payroll-kpi .kpi-item .value[b-ykxvq7wibn] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
}

.payroll-kpi .kpi-item .label[b-ykxvq7wibn] {
    font-size: 0.75rem;
    color: #64748b;
}

.payroll-kpi .kpi-item.paid[b-ykxvq7wibn] { background: #dcfce7; }
.payroll-kpi .kpi-item.paid .value[b-ykxvq7wibn] { color: #059669; }
.payroll-kpi .kpi-item.pending[b-ykxvq7wibn] { background: #fef3c7; }
.payroll-kpi .kpi-item.pending .value[b-ykxvq7wibn] { color: #d97706; }

.department-wise .dept-item[b-ykxvq7wibn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.department-wise .dept-item:last-child[b-ykxvq7wibn] {
    border-bottom: none;
}

.dept-info .name[b-ykxvq7wibn] {
    display: block;
    font-weight: 500;
}

.dept-info .count[b-ykxvq7wibn] {
    font-size: 0.8rem;
    color: #64748b;
}

.dept-status[b-ykxvq7wibn] {
    text-align: right;
}

.dept-status .amount[b-ykxvq7wibn] {
    display: block;
    font-weight: 600;
}

/* Transactions List */
.transactions-list[b-ykxvq7wibn] {
    max-height: 400px;
    overflow-y: auto;
}

.txn-item[b-ykxvq7wibn] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s ease;
}

.txn-item:hover[b-ykxvq7wibn] {
    background: #f8f9fa;
}

.txn-icon[b-ykxvq7wibn] {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.txn-item.feecollection .txn-icon[b-ykxvq7wibn] { background: #dcfce7; color: #059669; }
.txn-item.expense .txn-icon[b-ykxvq7wibn] { background: #fee2e2; color: #dc2626; }
.txn-item.salary .txn-icon[b-ykxvq7wibn] { background: #dbeafe; color: #2563eb; }
.txn-item.refund .txn-icon[b-ykxvq7wibn] { background: #fef3c7; color: #d97706; }

.txn-content[b-ykxvq7wibn] {
    flex: 1;
    min-width: 0;
}

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

.txn-header .amount[b-ykxvq7wibn] {
    font-weight: 700;
    font-size: 1.1rem;
}

.txn-meta[b-ykxvq7wibn] {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
}

.txn-status[b-ykxvq7wibn] {
    display: flex;
    align-items: center;
}

/* Audit List */
.audit-list[b-ykxvq7wibn] {
    max-height: 400px;
    overflow-y: auto;
}

.audit-item[b-ykxvq7wibn] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #374151;
    border-left: 4px solid transparent;
}

.audit-item.info[b-ykxvq7wibn] { border-left-color: #0ea5e9; }
.audit-item.warning[b-ykxvq7wibn] { border-left-color: #f59e0b; }
.audit-item.critical[b-ykxvq7wibn] { border-left-color: #ef4444; }

.audit-severity[b-ykxvq7wibn] {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.audit-item.info .audit-severity[b-ykxvq7wibn] { background: #0ea5e9; color: white; }
.audit-item.warning .audit-severity[b-ykxvq7wibn] { background: #f59e0b; color: white; }
.audit-item.critical .audit-severity[b-ykxvq7wibn] { background: #ef4444; color: white; }

.audit-content[b-ykxvq7wibn] {
    flex: 1;
    min-width: 0;
}

.audit-action[b-ykxvq7wibn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.audit-content .description[b-ykxvq7wibn] {
    margin: 0.25rem 0;
    font-size: 0.9rem;
    color: #9ca3af;
}

.audit-meta[b-ykxvq7wibn] {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #6b7280;
}

/* Insights */
.insight-card[b-ykxvq7wibn] {
    padding: 1.25rem;
    background: #f8fafc;
    border-radius: 12px;
    height: 100%;
}

.insight-card.alerts[b-ykxvq7wibn] {
    background: #fef3c7;
}

.insight-header[b-ykxvq7wibn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.insight-header .label[b-ykxvq7wibn] {
    font-size: 0.85rem;
    color: #64748b;
}

.insight-card h3[b-ykxvq7wibn] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: #1f2937;
}

.insight-card .trend[b-ykxvq7wibn] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.trend.improving[b-ykxvq7wibn] { color: #059669; }
.trend.declining[b-ykxvq7wibn] { color: #dc2626; }
.trend.stable[b-ykxvq7wibn] { color: #64748b; }

.recommendations h6[b-ykxvq7wibn] {
    font-size: 0.9rem;
    color: #64748b;
}

.recommendations ul[b-ykxvq7wibn] {
    padding-left: 1.25rem;
    margin: 0.5rem 0 0;
}

.recommendations li[b-ykxvq7wibn] {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: #475569;
}

.anomalies .anomaly-item[b-ykxvq7wibn] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #fef3c7;
    border-radius: 8px;
    font-size: 0.85rem;
}

/* Quick Actions */
.quick-actions-list[b-ykxvq7wibn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quick-action-item[b-ykxvq7wibn] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border-radius: 12px;
    text-decoration: none;
    color: #475569;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.quick-action-item:hover[b-ykxvq7wibn] {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
    transform: translateX(5px);
}

.quick-action-item i[b-ykxvq7wibn] {
    font-size: 1.25rem;
    width: 30px;
}

.quick-action-item span[b-ykxvq7wibn] {
    font-weight: 500;
}

/* Responsive */
@media (max-width: 992px) {
    .collection-chart[b-ykxvq7wibn] {
        height: 180px;
    }
    
    .column-bars .bar[b-ykxvq7wibn] {
        width: 20px;
    }
    
    .payroll-kpi[b-ykxvq7wibn] {
        flex-wrap: wrap;
    }
    
    .payroll-kpi .kpi-item[b-ykxvq7wibn] {
        flex: 1 1 30%;
    }
}

@media (max-width: 768px) {
    .accountant-dashboard[b-ykxvq7wibn] {
        padding: 0.5rem;
    }
    
    .dashboard-header[b-ykxvq7wibn] {
        text-align: center;
    }
    
    .dashboard-header .row[b-ykxvq7wibn] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .dashboard-header .col-md-6.text-end[b-ykxvq7wibn] {
        text-align: center !important;
    }
    
    .kpi-card[b-ykxvq7wibn] {
        padding: 1.25rem;
    }
    
    .kpi-card h3[b-ykxvq7wibn] {
        font-size: 1.5rem;
    }
    
    .collection-chart[b-ykxvq7wibn] {
        height: 150px;
    }
    
    .column-bars .bar[b-ykxvq7wibn] {
        width: 16px;
    }
    
    .today-card[b-ykxvq7wibn] {
        flex-wrap: wrap;
    }
    
    .today-badge[b-ykxvq7wibn] {
        width: 100%;
        margin-left: 0;
        margin-top: 0.5rem;
    }
}

/* Animations */
@keyframes fadeInUp-b-ykxvq7wibn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kpi-card[b-ykxvq7wibn], .card[b-ykxvq7wibn], .today-card[b-ykxvq7wibn] {
    animation: fadeInUp-b-ykxvq7wibn 0.5s ease-out;
}

.row > [class*="col-"]:nth-child(1) .kpi-card[b-ykxvq7wibn] { animation-delay: 0.1s; }
.row > [class*="col-"]:nth-child(2) .kpi-card[b-ykxvq7wibn] { animation-delay: 0.2s; }
.row > [class*="col-"]:nth-child(3) .kpi-card[b-ykxvq7wibn] { animation-delay: 0.3s; }
.row > [class*="col-"]:nth-child(4) .kpi-card[b-ykxvq7wibn] { animation-delay: 0.4s; }

/* Scrollbar */
.transactions-list[b-ykxvq7wibn]::-webkit-scrollbar,
.audit-list[b-ykxvq7wibn]::-webkit-scrollbar {
    width: 4px;
}

.transactions-list[b-ykxvq7wibn]::-webkit-scrollbar-track,
.audit-list[b-ykxvq7wibn]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.transactions-list[b-ykxvq7wibn]::-webkit-scrollbar-thumb,
.audit-list[b-ykxvq7wibn]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.audit-list[b-ykxvq7wibn]::-webkit-scrollbar-track {
    background: #374151;
}

.audit-list[b-ykxvq7wibn]::-webkit-scrollbar-thumb {
    background: #6b7280;
}
/* /Components/Pages/Dashboards/AccountantDashboardContent.razor.rz.scp.css */
.accountant-dashboard[b-dlb519rmzr] {
    padding: 1.5rem;
}

.loading-container[b-dlb519rmzr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* Header */
.dashboard-header[b-dlb519rmzr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-content h2[b-dlb519rmzr] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
    margin: 0;
}

.header-actions[b-dlb519rmzr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.date-badge[b-dlb519rmzr] {
    background: var(--op-card-bg, #fff);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--op-body-color, #697a8d);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* KPI Cards */
.kpi-grid[b-dlb519rmzr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.kpi-card[b-dlb519rmzr] {
    background: var(--op-card-bg, #fff);
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.kpi-icon[b-dlb519rmzr] {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.kpi-card.primary .kpi-icon[b-dlb519rmzr] { background: rgba(105, 108, 255, 0.16); color: #696cff; }
.kpi-card.success .kpi-icon[b-dlb519rmzr] { background: rgba(113, 221, 55, 0.16); color: #71dd37; }
.kpi-card.warning .kpi-icon[b-dlb519rmzr] { background: rgba(255, 171, 0, 0.16); color: #ffab00; }
.kpi-card.danger .kpi-icon[b-dlb519rmzr] { background: rgba(255, 62, 29, 0.16); color: #ff3e1d; }

.kpi-content h3[b-dlb519rmzr] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
    margin: 0;
}

.kpi-content p[b-dlb519rmzr] {
    font-size: 0.875rem;
    color: var(--op-body-color, #697a8d);
    margin: 0.25rem 0;
}

.kpi-sub[b-dlb519rmzr] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

/* Content Grid */
.content-grid[b-dlb519rmzr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.content-card[b-dlb519rmzr] {
    background: var(--op-card-bg, #fff);
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.content-card .card-header[b-dlb519rmzr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--op-border-color, #e4e6e8);
}

.content-card .card-header h5[b-dlb519rmzr] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
}

.content-card .card-body[b-dlb519rmzr] {
    padding: 1rem 1.5rem;
}

/* Chart Bars */
.chart-bars[b-dlb519rmzr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 180px;
    gap: 0.5rem;
}

.bar-item[b-dlb519rmzr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.bar-container[b-dlb519rmzr] {
    width: 100%;
    height: 140px;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem 0.5rem 0 0;
    position: relative;
    overflow: hidden;
}

.bar-container .bar[b-dlb519rmzr] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #71dd37 0%, rgba(113, 221, 55, 0.6) 100%);
    border-radius: 0.5rem 0.5rem 0 0;
}

.bar-label[b-dlb519rmzr] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

.bar-value[b-dlb519rmzr] {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--op-heading-color, #566a7f);
}

/* Expense List */
.expense-list[b-dlb519rmzr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.expense-item[b-dlb519rmzr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.expense-info[b-dlb519rmzr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.expense-info .category[b-dlb519rmzr] {
    font-weight: 500;
    color: var(--op-heading-color, #566a7f);
}

.expense-info .amount[b-dlb519rmzr] {
    font-size: 0.875rem;
    color: var(--op-body-color, #697a8d);
}

.progress-bar[b-dlb519rmzr] {
    height: 6px;
    background: var(--op-border-color, #e4e6e8);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar .progress[b-dlb519rmzr] {
    height: 100%;
    background: linear-gradient(90deg, #696cff, #03c3ec);
    border-radius: 3px;
}

/* Data Table */
.data-table[b-dlb519rmzr] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-dlb519rmzr],
.data-table td[b-dlb519rmzr] {
    padding: 0.75rem;
    text-align: left;
    font-size: 0.875rem;
}

.data-table th[b-dlb519rmzr] {
    background: var(--op-body-bg, #f5f5f9);
    color: var(--op-body-color, #697a8d);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.data-table tr:not(:last-child)[b-dlb519rmzr] {
    border-bottom: 1px solid var(--op-border-color, #e4e6e8);
}

/* Transaction List */
.transaction-list[b-dlb519rmzr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.transaction-item[b-dlb519rmzr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem;
}

.txn-icon[b-dlb519rmzr] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.txn-icon.credit[b-dlb519rmzr] {
    background: rgba(113, 221, 55, 0.16);
    color: #71dd37;
}

.txn-icon.debit[b-dlb519rmzr] {
    background: rgba(255, 62, 29, 0.16);
    color: #ff3e1d;
}

.txn-info[b-dlb519rmzr] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.txn-info .description[b-dlb519rmzr] {
    font-weight: 500;
    color: var(--op-heading-color, #566a7f);
}

.txn-info .reference[b-dlb519rmzr] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

.txn-amount[b-dlb519rmzr] {
    font-weight: 600;
}

.txn-amount.credit[b-dlb519rmzr] { color: #71dd37; }
.txn-amount.debit[b-dlb519rmzr] { color: #ff3e1d; }

/* Payroll Summary */
.payroll-summary[b-dlb519rmzr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.payroll-stat[b-dlb519rmzr] {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem;
}

.payroll-stat .label[b-dlb519rmzr] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

.payroll-stat .value[b-dlb519rmzr] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
}

/* Audit List */
.audit-list[b-dlb519rmzr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.audit-item[b-dlb519rmzr] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem;
}

.audit-time[b-dlb519rmzr] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
    min-width: 50px;
}

.audit-info[b-dlb519rmzr] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.audit-info .action[b-dlb519rmzr] {
    font-weight: 500;
    color: var(--op-heading-color, #566a7f);
}

.audit-info .user[b-dlb519rmzr] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

/* Quick Actions */
.quick-actions-card[b-dlb519rmzr] {
    background: var(--op-card-bg, #fff);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.quick-actions-card h5[b-dlb519rmzr] {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
}

.actions-grid[b-dlb519rmzr] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.action-btn[b-dlb519rmzr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--op-heading-color, #566a7f);
    transition: all 0.2s;
}

.action-btn i[b-dlb519rmzr] {
    font-size: 1.5rem;
    color: var(--op-primary, #696cff);
}

.action-btn span[b-dlb519rmzr] {
    font-size: 0.8125rem;
}

.action-btn:hover[b-dlb519rmzr] {
    background: var(--op-primary, #696cff);
    color: #fff;
}

.action-btn:hover i[b-dlb519rmzr] {
    color: #fff;
}

/* Responsive */
@media (max-width: 1200px) {
    .kpi-grid[b-dlb519rmzr] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .actions-grid[b-dlb519rmzr] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .content-grid[b-dlb519rmzr] {
        grid-template-columns: 1fr;
    }
    
    .actions-grid[b-dlb519rmzr] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Dashboards/AdminDashboard.razor.rz.scp.css */
/* Admin Dashboard - Role-specific styles only */
/* Common dashboard styles are in app.css */

.kpi-breakdown[b-ywxztqcdei] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    opacity: 0.95;
}

.kpi-primary[b-ywxztqcdei] { background: linear-gradient(135deg, #696cff 0%, #8183ff 100%); }
.kpi-success[b-ywxztqcdei] { background: linear-gradient(135deg, #71dd37 0%, #5fb52f 100%); }
.kpi-warning[b-ywxztqcdei] { background: linear-gradient(135deg, #ffab00 0%, #e69900 100%); }
.kpi-info[b-ywxztqcdei] { background: linear-gradient(135deg, #03c3ec 0%, #0299bc 100%); }

/* Mini KPIs */
.mini-kpi[b-ywxztqcdei] {
    background: var(--op-card-bg, white);
    padding: 0.875rem 1rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--op-card-shadow);
    border: 1px solid var(--op-border-color);
}

.mini-kpi i[b-ywxztqcdei] {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--op-bg-secondary);
}

.mini-kpi h5[b-ywxztqcdei] {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: var(--op-heading-color);
}

.mini-kpi small[b-ywxztqcdei] {
    color: var(--op-muted-color);
    font-size: 0.75rem;
}

/* Fee Chart */
.fee-chart[b-ywxztqcdei] {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 120px;
    padding: 0.5rem 0;
}

.fee-bar-container[b-ywxztqcdei] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.fee-bar[b-ywxztqcdei] {
    width: 28px;
    background: linear-gradient(to top, var(--op-primary) 0%, #8183ff 100%);
    border-radius: 4px 4px 0 0;
    transition: all 0.2s ease;
    min-height: 8px;
}

.fee-bar:hover[b-ywxztqcdei] {
    transform: scaleY(1.05);
    transform: scaleY(1.05);
}

.fee-label[b-ywxztqcdei] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.5rem;
}

.fee-summary[b-ywxztqcdei] {
    font-size: 0.9rem;
}

/* Attendance Chart */
.attendance-chart[b-ywxztqcdei] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 100px;
    gap: 3px;
}

.attendance-bar[b-ywxztqcdei] {
    flex: 1;
    background: linear-gradient(to top, #11998e 0%, #38ef7d 100%);
    border-radius: 3px 3px 0 0;
    min-height: 5px;
    transition: all 0.3s ease;
}

.attendance-bar:hover[b-ywxztqcdei] {
    background: linear-gradient(to top, #38ef7d 0%, #11998e 100%);
}

.attendance-stats .stat-row[b-ywxztqcdei] {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: 0.85rem;
}

/* Donut Chart */
.donut-chart[b-ywxztqcdei] {
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

.circular-chart[b-ywxztqcdei] {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 150px;
}

.circle-bg[b-ywxztqcdei] {
    fill: none;
    stroke: #eee;
    stroke-width: 3.8;
}

.circle[b-ywxztqcdei] {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress-b-ywxztqcdei 1s ease-out forwards;
}

.circle.green[b-ywxztqcdei] { stroke: #38ef7d; }
.circle.blue[b-ywxztqcdei] { stroke: #4facfe; }
.circle.orange[b-ywxztqcdei] { stroke: #f5af19; }
.circle.red[b-ywxztqcdei] { stroke: #f5576c; }

@keyframes progress-b-ywxztqcdei {
    0% { stroke-dasharray: 0 100; }
}

.percentage[b-ywxztqcdei] {
    fill: #333;
    font-size: 0.5em;
    text-anchor: middle;
    font-weight: 700;
}

/* Events List */
.events-list[b-ywxztqcdei] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.event-item[b-ywxztqcdei] {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid #667eea;
}

.event-time[b-ywxztqcdei] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #667eea;
    min-width: 80px;
}

.event-details strong[b-ywxztqcdei] {
    font-size: 0.95rem;
}

/* Quick Actions */
.quick-action[b-ywxztqcdei] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    background: #f8f9fa;
    border-radius: 12px;
    text-decoration: none;
    color: #495057;
    transition: all 0.3s ease;
}

.quick-action:hover[b-ywxztqcdei] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.quick-action i[b-ywxztqcdei] {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.quick-action span[b-ywxztqcdei] {
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
}

/* Table Styles */
.table th[b-ywxztqcdei] {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td[b-ywxztqcdei] {
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 992px) {
    .kpi-card[b-ywxztqcdei] {
        padding: 1.25rem;
    }
    
    .kpi-card .kpi-icon[b-ywxztqcdei] {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .kpi-card .kpi-content h3[b-ywxztqcdei] {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .school-admin-dashboard[b-ywxztqcdei] {
        padding: 0.5rem;
    }
    
    .dashboard-header[b-ywxztqcdei] {
        text-align: center;
        padding: 1rem;
    }
    
    .dashboard-header .text-end[b-ywxztqcdei] {
        text-align: center !important;
        margin-top: 1rem;
    }
    
    .kpi-card[b-ywxztqcdei] {
        flex-direction: column;
        text-align: center;
    }
    
    .kpi-breakdown[b-ywxztqcdei] {
        justify-content: center;
    }
    
    .fee-bar[b-ywxztqcdei] {
        width: 25px;
    }
    
    .quick-action[b-ywxztqcdei] {
        padding: 1rem 0.5rem;
    }
    
    .quick-action i[b-ywxztqcdei] {
        font-size: 1.25rem;
    }
    
    .quick-action span[b-ywxztqcdei] {
        font-size: 0.7rem;
    }
}

/* Animations */
@keyframes fadeInUp-b-ywxztqcdei {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kpi-card[b-ywxztqcdei], .card[b-ywxztqcdei], .mini-kpi[b-ywxztqcdei] {
    animation: fadeInUp-b-ywxztqcdei 0.5s ease-out;
}

.row > [class*="col-"]:nth-child(1) .kpi-card[b-ywxztqcdei] { animation-delay: 0.1s; }
.row > [class*="col-"]:nth-child(2) .kpi-card[b-ywxztqcdei] { animation-delay: 0.2s; }
.row > [class*="col-"]:nth-child(3) .kpi-card[b-ywxztqcdei] { animation-delay: 0.3s; }
.row > [class*="col-"]:nth-child(4) .kpi-card[b-ywxztqcdei] { animation-delay: 0.4s; }

/* Scrollbar */
.table-responsive[b-ywxztqcdei]::-webkit-scrollbar {
    height: 4px;
}

.table-responsive[b-ywxztqcdei]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.table-responsive[b-ywxztqcdei]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}
/* /Components/Pages/Dashboards/AdminDashboardContent.razor.rz.scp.css */
.school-admin-dashboard[b-7eayjo361a] {
    padding: 1.5rem;
}

.loading-container[b-7eayjo361a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* Header */
.dashboard-header[b-7eayjo361a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-content h2[b-7eayjo361a] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
    margin: 0;
}

.header-actions[b-7eayjo361a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.date-badge[b-7eayjo361a] {
    background: var(--op-card-bg, #fff);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--op-body-color, #697a8d);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* KPI Cards */
.kpi-grid[b-7eayjo361a] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.kpi-card[b-7eayjo361a] {
    background: var(--op-card-bg, #fff);
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s, box-shadow 0.2s;
}

.kpi-card:hover[b-7eayjo361a] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.kpi-icon[b-7eayjo361a] {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.kpi-card.primary .kpi-icon[b-7eayjo361a] { background: rgba(105, 108, 255, 0.16); color: #696cff; }
.kpi-card.success .kpi-icon[b-7eayjo361a] { background: rgba(113, 221, 55, 0.16); color: #71dd37; }
.kpi-card.warning .kpi-icon[b-7eayjo361a] { background: rgba(255, 171, 0, 0.16); color: #ffab00; }
.kpi-card.info .kpi-icon[b-7eayjo361a] { background: rgba(3, 195, 236, 0.16); color: #03c3ec; }

.kpi-content h3[b-7eayjo361a] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
    margin: 0;
}

.kpi-content p[b-7eayjo361a] {
    font-size: 0.875rem;
    color: var(--op-body-color, #697a8d);
    margin: 0.25rem 0 0.5rem;
}

.kpi-breakdown[b-7eayjo361a] {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
}

.kpi-breakdown span[b-7eayjo361a] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Mini KPI Grid */
.mini-kpi-grid[b-7eayjo361a] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.mini-kpi[b-7eayjo361a] {
    background: var(--op-card-bg, #fff);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.mini-kpi i[b-7eayjo361a] {
    font-size: 1.5rem;
}

.mini-kpi .value[b-7eayjo361a] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
    display: block;
}

.mini-kpi .label[b-7eayjo361a] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

/* Charts Grid */
.charts-grid[b-7eayjo361a] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.chart-card[b-7eayjo361a] {
    background: var(--op-card-bg, #fff);
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.chart-card .card-header[b-7eayjo361a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--op-border-color, #e4e6e8);
}

.chart-card .card-header h5[b-7eayjo361a] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
}

.chart-card .card-body[b-7eayjo361a] {
    padding: 1.5rem;
}

/* Bar Chart */
.chart-bars[b-7eayjo361a] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 180px;
    gap: 0.5rem;
}

.bar-item[b-7eayjo361a] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.bar-container[b-7eayjo361a] {
    width: 100%;
    height: 140px;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem 0.5rem 0 0;
    position: relative;
    overflow: hidden;
}

.bar-container .bar[b-7eayjo361a] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #696cff 0%, rgba(105, 108, 255, 0.7) 100%);
    border-radius: 0.5rem 0.5rem 0 0;
    transition: height 0.5s ease;
}

.bar-label[b-7eayjo361a] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

.bar-value[b-7eayjo361a] {
    font-size: 0.625rem;
    color: var(--op-heading-color, #566a7f);
    font-weight: 500;
}

/* Attendance Stats */
.attendance-stats[b-7eayjo361a] {
    display: flex;
    justify-content: space-around;
    margin-bottom: 1rem;
}

.attendance-stats .stat[b-7eayjo361a] {
    text-align: center;
}

.attendance-stats .stat-value[b-7eayjo361a] {
    font-size: 1.5rem;
    font-weight: 600;
    display: block;
}

.attendance-stats .stat-label[b-7eayjo361a] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

/* Mini Chart */
.mini-chart[b-7eayjo361a] {
    display: flex;
    align-items: flex-end;
    height: 80px;
    gap: 4px;
}

.mini-bar[b-7eayjo361a] {
    flex: 1;
    background: linear-gradient(180deg, #71dd37 0%, rgba(113, 221, 55, 0.5) 100%);
    border-radius: 2px;
    min-height: 10px;
    transition: height 0.3s ease;
}

.mini-bar:hover[b-7eayjo361a] {
    background: #71dd37;
}

/* Tables Grid */
.tables-grid[b-7eayjo361a] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.table-card[b-7eayjo361a] {
    background: var(--op-card-bg, #fff);
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.table-card .card-header[b-7eayjo361a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--op-border-color, #e4e6e8);
}

.table-card .card-header h5[b-7eayjo361a] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
}

.table-card .card-body[b-7eayjo361a] {
    padding: 0;
}

/* Data Table */
.data-table[b-7eayjo361a] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-7eayjo361a],
.data-table td[b-7eayjo361a] {
    padding: 0.875rem 1.5rem;
    text-align: left;
    font-size: 0.875rem;
}

.data-table th[b-7eayjo361a] {
    background: var(--op-body-bg, #f5f5f9);
    color: var(--op-body-color, #697a8d);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.data-table tr:not(:last-child)[b-7eayjo361a] {
    border-bottom: 1px solid var(--op-border-color, #e4e6e8);
}

.student-info[b-7eayjo361a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.avatar[b-7eayjo361a] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #696cff 0%, rgba(105, 108, 255, 0.7) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Exam List */
.exam-list[b-7eayjo361a] {
    padding: 0.5rem 0;
}

.exam-item[b-7eayjo361a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid var(--op-border-color, #e4e6e8);
}

.exam-item:last-child[b-7eayjo361a] {
    border-bottom: none;
}

.exam-info[b-7eayjo361a] {
    display: flex;
    flex-direction: column;
}

.exam-name[b-7eayjo361a] {
    font-weight: 500;
    color: var(--op-heading-color, #566a7f);
}

.exam-class[b-7eayjo361a] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

.exam-date[b-7eayjo361a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exam-date .date[b-7eayjo361a] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

/* Quick Actions */
.quick-actions-card[b-7eayjo361a] {
    background: var(--op-card-bg, #fff);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.quick-actions-card h5[b-7eayjo361a] {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
}

.actions-grid[b-7eayjo361a] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.action-btn[b-7eayjo361a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--op-heading-color, #566a7f);
    transition: all 0.2s;
}

.action-btn i[b-7eayjo361a] {
    font-size: 1.5rem;
    color: var(--op-primary, #696cff);
}

.action-btn span[b-7eayjo361a] {
    font-size: 0.8125rem;
}

.action-btn:hover[b-7eayjo361a] {
    background: var(--op-primary, #696cff);
    color: #fff;
}

.action-btn:hover i[b-7eayjo361a] {
    color: #fff;
}

/* Responsive */
@media (max-width: 1200px) {
    .kpi-grid[b-7eayjo361a] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mini-kpi-grid[b-7eayjo361a] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .actions-grid[b-7eayjo361a] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .kpi-grid[b-7eayjo361a],
    .charts-grid[b-7eayjo361a],
    .tables-grid[b-7eayjo361a] {
        grid-template-columns: 1fr;
    }
    
    .actions-grid[b-7eayjo361a] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Dashboards/CRMDashboard.razor.rz.scp.css */
.crm-dashboard[b-dr2wy4cksw] {
    padding: 1rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    min-height: 100vh;
}

.loading-overlay[b-dr2wy4cksw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* Dashboard Header */
.dashboard-header[b-dr2wy4cksw] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    padding: 1.5rem 2rem;
    border-radius: 16px;
    color: white;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

.dashboard-header h2[b-dr2wy4cksw] {
    font-weight: 700;
}

/* KPI Cards */
.kpi-card[b-dr2wy4cksw] {
    position: relative;
    padding: 1.5rem;
    border-radius: 16px;
    color: white;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transition: transform 0.3s ease;
}

.kpi-card:hover[b-dr2wy4cksw] {
    transform: translateY(-5px);
}

.kpi-card .kpi-icon[b-dr2wy4cksw] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.kpi-card h3[b-dr2wy4cksw] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.kpi-card p[b-dr2wy4cksw] {
    margin: 0.25rem 0 0.75rem;
    opacity: 0.9;
}

.kpi-badges[b-dr2wy4cksw] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.kpi-card.inquiries[b-dr2wy4cksw] { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); }
.kpi-card.conversions[b-dr2wy4cksw] { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); }
.kpi-card.campaigns[b-dr2wy4cksw] { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }
.kpi-card.feedback[b-dr2wy4cksw] { background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%); }

/* Stat Cards */
.stat-card[b-dr2wy4cksw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.stat-card > i[b-dr2wy4cksw] {
    font-size: 1.5rem;
}

.stat-content[b-dr2wy4cksw] {
    flex: 1;
}

.stat-content .value[b-dr2wy4cksw] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.stat-content .label[b-dr2wy4cksw] {
    font-size: 0.75rem;
    color: #64748b;
}

/* Cards */
.card[b-dr2wy4cksw] {
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}

.card-header[b-dr2wy4cksw] {
    border-bottom: 1px solid #f0f0f0;
    padding: 1rem 1.25rem;
}

.card-header h6[b-dr2wy4cksw] {
    font-weight: 600;
}

.bg-gradient-purple[b-dr2wy4cksw] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

.bg-purple[b-dr2wy4cksw] {
    background-color: #8b5cf6;
}

.text-purple[b-dr2wy4cksw] {
    color: #7c3aed;
}

/* Funnel Container */
.funnel-container[b-dr2wy4cksw] {
    padding: 1rem 0;
}

.funnel-stage[b-dr2wy4cksw] {
    margin-bottom: 0.75rem;
}

.stage-bar[b-dr2wy4cksw] {
    background: linear-gradient(90deg, var(--stage-color) 0%, transparent 100%);
    width: var(--stage-width);
    min-width: 200px;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-weight: 500;
    transition: width 0.5s ease;
}

.stage-name[b-dr2wy4cksw] {
    font-size: 0.9rem;
}

.stage-value[b-dr2wy4cksw] {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* Lead Score */
.lead-score[b-dr2wy4cksw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
}

.score-hot[b-dr2wy4cksw] {
    background: linear-gradient(135deg, #10b981, #34d399);
    color: white;
}

.score-warm[b-dr2wy4cksw] {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    color: white;
}

.score-neutral[b-dr2wy4cksw] {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: white;
}

.score-cold[b-dr2wy4cksw] {
    background: linear-gradient(135deg, #ef4444, #f87171);
    color: white;
}

/* Lead List */
.lead-list[b-dr2wy4cksw] {
    max-height: 350px;
    overflow-y: auto;
}

.lead-item[b-dr2wy4cksw] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
}

.lead-score-circle[b-dr2wy4cksw] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: white;
    flex-shrink: 0;
}

.prediction-hot[b-dr2wy4cksw] {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.prediction-warm[b-dr2wy4cksw] {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.prediction-neutral[b-dr2wy4cksw] {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.prediction-cold[b-dr2wy4cksw] {
    background: linear-gradient(135deg, #ef4444, #f87171);
}

.lead-info[b-dr2wy4cksw] {
    flex: 1;
    min-width: 0;
}

.lead-header[b-dr2wy4cksw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.lead-reason[b-dr2wy4cksw] {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* Event List */
.event-list[b-dr2wy4cksw] {
    max-height: 350px;
    overflow-y: auto;
}

.event-item[b-dr2wy4cksw] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #374151;
    align-items: center;
}

.event-date[b-dr2wy4cksw] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.event-date .day[b-dr2wy4cksw] {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.event-date .month[b-dr2wy4cksw] {
    font-size: 0.7rem;
    text-transform: uppercase;
}

.event-info[b-dr2wy4cksw] {
    flex: 1;
    min-width: 0;
    color: #e5e7eb;
}

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

.event-header strong[b-dr2wy4cksw] {
    color: white;
}

/* Announcement List */
.announcement-list[b-dr2wy4cksw] {
    max-height: 350px;
    overflow-y: auto;
}

.announcement-item[b-dr2wy4cksw] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #fef3c7;
    align-items: flex-start;
}

.announcement-item.draft[b-dr2wy4cksw] {
    opacity: 0.7;
}

.announcement-icon[b-dr2wy4cksw] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fef3c7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #d97706;
    flex-shrink: 0;
}

.announcement-info[b-dr2wy4cksw] {
    flex: 1;
    min-width: 0;
}

.announcement-header[b-dr2wy4cksw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.announcement-info p[b-dr2wy4cksw] {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.announcement-meta[b-dr2wy4cksw] {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Insights */
.insight-metric[b-dr2wy4cksw] {
    text-align: center;
    padding: 1rem;
}

.metric-value[b-dr2wy4cksw] {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
}

.metric-label[b-dr2wy4cksw] {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.insight-section[b-dr2wy4cksw] {
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
}

.insight-section h6[b-dr2wy4cksw] {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.insight-list[b-dr2wy4cksw] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.insight-list li[b-dr2wy4cksw] {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.85rem;
    color: #475569;
}

.insight-list li:last-child[b-dr2wy4cksw] {
    border-bottom: none;
}

/* Quick Actions */
.quick-actions-grid[b-dr2wy4cksw] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.quick-action-item[b-dr2wy4cksw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    text-decoration: none;
    color: #475569;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    text-align: center;
}

.quick-action-item:hover[b-dr2wy4cksw] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: white;
    transform: translateY(-3px);
}

.quick-action-item i[b-dr2wy4cksw] {
    font-size: 1.5rem;
}

.quick-action-item span[b-dr2wy4cksw] {
    font-size: 0.8rem;
    font-weight: 500;
}

/* Table */
.table th[b-dr2wy4cksw] {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}

.table td[b-dr2wy4cksw] {
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 992px) {
    .funnel-container .stage-bar[b-dr2wy4cksw] {
        min-width: 150px;
    }
    
    .quick-actions-grid[b-dr2wy4cksw] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .crm-dashboard[b-dr2wy4cksw] {
        padding: 0.5rem;
    }
    
    .dashboard-header[b-dr2wy4cksw] {
        text-align: center;
    }
    
    .dashboard-header .row[b-dr2wy4cksw] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .kpi-card[b-dr2wy4cksw] {
        padding: 1.25rem;
    }
    
    .kpi-card h3[b-dr2wy4cksw] {
        font-size: 1.5rem;
    }
    
    .quick-actions-grid[b-dr2wy4cksw] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-card[b-dr2wy4cksw] {
        flex-wrap: wrap;
    }
    
    .funnel-container .stage-bar[b-dr2wy4cksw] {
        min-width: 120px;
        font-size: 0.8rem;
    }
}

/* Animations */
@keyframes fadeInUp-b-dr2wy4cksw {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kpi-card[b-dr2wy4cksw], .card[b-dr2wy4cksw], .stat-card[b-dr2wy4cksw] {
    animation: fadeInUp-b-dr2wy4cksw 0.5s ease-out;
}

.row > [class*="col-"]:nth-child(1) .kpi-card[b-dr2wy4cksw] { animation-delay: 0.1s; }
.row > [class*="col-"]:nth-child(2) .kpi-card[b-dr2wy4cksw] { animation-delay: 0.2s; }
.row > [class*="col-"]:nth-child(3) .kpi-card[b-dr2wy4cksw] { animation-delay: 0.3s; }
.row > [class*="col-"]:nth-child(4) .kpi-card[b-dr2wy4cksw] { animation-delay: 0.4s; }

/* Scrollbars */
.lead-list[b-dr2wy4cksw]::-webkit-scrollbar,
.event-list[b-dr2wy4cksw]::-webkit-scrollbar,
.announcement-list[b-dr2wy4cksw]::-webkit-scrollbar {
    width: 4px;
}

.lead-list[b-dr2wy4cksw]::-webkit-scrollbar-track,
.announcement-list[b-dr2wy4cksw]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.lead-list[b-dr2wy4cksw]::-webkit-scrollbar-thumb,
.announcement-list[b-dr2wy4cksw]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.event-list[b-dr2wy4cksw]::-webkit-scrollbar-track {
    background: #374151;
}

.event-list[b-dr2wy4cksw]::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 4px;
}

/* Funnel Animation */
.funnel-stage:nth-child(1) .stage-bar[b-dr2wy4cksw] { animation-delay: 0.1s; }
.funnel-stage:nth-child(2) .stage-bar[b-dr2wy4cksw] { animation-delay: 0.2s; }
.funnel-stage:nth-child(3) .stage-bar[b-dr2wy4cksw] { animation-delay: 0.3s; }
.funnel-stage:nth-child(4) .stage-bar[b-dr2wy4cksw] { animation-delay: 0.4s; }
.funnel-stage:nth-child(5) .stage-bar[b-dr2wy4cksw] { animation-delay: 0.5s; }
.funnel-stage:nth-child(6) .stage-bar[b-dr2wy4cksw] { animation-delay: 0.6s; }

@keyframes slideIn-b-dr2wy4cksw {
    from {
        opacity: 0;
        width: 0;
    }
    to {
        opacity: 1;
    }
}

.stage-bar[b-dr2wy4cksw] {
    animation: slideIn-b-dr2wy4cksw 0.5s ease-out forwards;
}
/* /Components/Pages/Dashboards/HRDashboard.razor.rz.scp.css */
.hr-dashboard[b-8pplnaeilm] {
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    min-height: 100vh;
}

.loading-overlay[b-8pplnaeilm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* Dashboard Header */
.dashboard-header[b-8pplnaeilm] {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    padding: 1.5rem 2rem;
    border-radius: 16px;
    color: white;
    box-shadow: 0 4px 20px rgba(15, 118, 110, 0.3);
}

.dashboard-header h2[b-8pplnaeilm] {
    font-weight: 700;
}

/* KPI Cards */
.kpi-card[b-8pplnaeilm] {
    position: relative;
    padding: 1.5rem;
    border-radius: 16px;
    color: white;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transition: transform 0.3s ease;
}

.kpi-card:hover[b-8pplnaeilm] {
    transform: translateY(-5px);
}

.kpi-card .kpi-icon[b-8pplnaeilm] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.kpi-card h3[b-8pplnaeilm] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.kpi-card p[b-8pplnaeilm] {
    margin: 0.25rem 0 0.75rem;
    opacity: 0.9;
}

.kpi-badges[b-8pplnaeilm] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.kpi-card.staff[b-8pplnaeilm] { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%); }
.kpi-card.attendance[b-8pplnaeilm] { background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%); }
.kpi-card.payroll[b-8pplnaeilm] { background: linear-gradient(135deg, #059669 0%, #10b981 100%); }
.kpi-card.recruitment[b-8pplnaeilm] { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); }

/* Stat Cards */
.stat-card[b-8pplnaeilm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.stat-card > i[b-8pplnaeilm] {
    font-size: 1.5rem;
}

.stat-content[b-8pplnaeilm] {
    flex: 1;
}

.stat-content .value[b-8pplnaeilm] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.stat-content .label[b-8pplnaeilm] {
    font-size: 0.75rem;
    color: #64748b;
}

/* Cards */
.card[b-8pplnaeilm] {
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}

.card-header[b-8pplnaeilm] {
    border-bottom: 1px solid #f0f0f0;
    padding: 1rem 1.25rem;
}

.card-header h6[b-8pplnaeilm] {
    font-weight: 600;
}

.bg-gradient-purple[b-8pplnaeilm] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

/* Department List */
.department-list[b-8pplnaeilm] {
    max-height: 400px;
    overflow-y: auto;
}

.department-item[b-8pplnaeilm] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
}

.dept-info[b-8pplnaeilm] {
    min-width: 140px;
}

.dept-info strong[b-8pplnaeilm] {
    display: block;
    font-size: 0.9rem;
}

.dept-info small[b-8pplnaeilm] {
    font-size: 0.75rem;
}

.dept-progress[b-8pplnaeilm] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.attendance-percent[b-8pplnaeilm] {
    font-weight: 700;
    font-size: 0.9rem;
    min-width: 50px;
    text-align: right;
}

.dept-stats[b-8pplnaeilm] {
    display: flex;
    gap: 0.25rem;
}

.dept-stats .badge[b-8pplnaeilm] {
    font-size: 0.7rem;
    min-width: 25px;
}

/* Chart Container */
.chart-container[b-8pplnaeilm] {
    padding: 1rem;
}

.chart-bars[b-8pplnaeilm] {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 200px;
    padding: 0 1rem;
}

.chart-bar-group[b-8pplnaeilm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.bar-container[b-8pplnaeilm] {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 160px;
}

.bar[b-8pplnaeilm] {
    width: 20px;
    border-radius: 4px 4px 0 0;
    transition: height 0.5s ease;
}

.bar.gross[b-8pplnaeilm] {
    background: linear-gradient(180deg, #059669 0%, #10b981 100%);
}

.bar.net[b-8pplnaeilm] {
    background: linear-gradient(180deg, #0284c7 0%, #38bdf8 100%);
}

.bar-label[b-8pplnaeilm] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.chart-legend[b-8pplnaeilm] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
}

.legend-item[b-8pplnaeilm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #64748b;
}

.legend-color[b-8pplnaeilm] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-color.gross[b-8pplnaeilm] {
    background: #059669;
}

.legend-color.net[b-8pplnaeilm] {
    background: #0284c7;
}

/* Alerts List */
.alerts-list[b-8pplnaeilm] {
    max-height: 350px;
    overflow-y: auto;
}

.alert-item[b-8pplnaeilm] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s ease;
}

.alert-item:hover[b-8pplnaeilm] {
    background: #fef2f2;
}

.alert-item.critical[b-8pplnaeilm] {
    border-left: 4px solid #dc2626;
}

.alert-item.warning[b-8pplnaeilm] {
    border-left: 4px solid #f59e0b;
}

.alert-item.info[b-8pplnaeilm] {
    border-left: 4px solid #3b82f6;
}

.alert-item.acknowledged[b-8pplnaeilm] {
    opacity: 0.6;
}

.alert-icon[b-8pplnaeilm] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.alert-item.critical .alert-icon[b-8pplnaeilm] {
    background: #fee2e2;
    color: #dc2626;
}

.alert-item.warning .alert-icon[b-8pplnaeilm] {
    background: #fef3c7;
    color: #d97706;
}

.alert-item.info .alert-icon[b-8pplnaeilm] {
    background: #dbeafe;
    color: #2563eb;
}

.alert-info[b-8pplnaeilm] {
    flex: 1;
    min-width: 0;
}

.alert-header[b-8pplnaeilm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.alert-header .time[b-8pplnaeilm] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.alert-info p[b-8pplnaeilm] {
    font-size: 0.85rem;
    color: #64748b;
}

/* Hire List */
.hire-list[b-8pplnaeilm] {
    max-height: 350px;
    overflow-y: auto;
}

.hire-item[b-8pplnaeilm] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e0f2fe;
    align-items: center;
}

.hire-avatar[b-8pplnaeilm] {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #3b82f6;
}

.hire-info[b-8pplnaeilm] {
    flex: 1;
    min-width: 0;
}

.hire-header[b-8pplnaeilm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hire-meta[b-8pplnaeilm] {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* Event List */
.event-list[b-8pplnaeilm] {
    max-height: 350px;
    overflow-y: auto;
}

.event-item[b-8pplnaeilm] {
    display: flex;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid #374151;
}

.event-date[b-8pplnaeilm] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.event-date .day[b-8pplnaeilm] {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.event-date .month[b-8pplnaeilm] {
    font-size: 0.7rem;
    text-transform: uppercase;
}

.event-info[b-8pplnaeilm] {
    flex: 1;
    min-width: 0;
    color: #e5e7eb;
}

.event-header[b-8pplnaeilm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.event-header strong[b-8pplnaeilm] {
    color: white;
}

/* Badge Variants */
.bg-pink[b-8pplnaeilm] {
    background-color: #ec4899;
}

.bg-purple[b-8pplnaeilm] {
    background-color: #a855f7;
}

/* Insights */
.insight-metric[b-8pplnaeilm] {
    text-align: center;
    padding: 1rem;
}

.metric-value[b-8pplnaeilm] {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
}

.metric-label[b-8pplnaeilm] {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.insight-section[b-8pplnaeilm] {
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
}

.insight-section h6[b-8pplnaeilm] {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.insight-list[b-8pplnaeilm] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.insight-list li[b-8pplnaeilm] {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.85rem;
    color: #475569;
}

.insight-list li:last-child[b-8pplnaeilm] {
    border-bottom: none;
}

/* Quick Actions */
.quick-actions-grid[b-8pplnaeilm] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.quick-action-item[b-8pplnaeilm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    text-decoration: none;
    color: #475569;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    text-align: center;
}

.quick-action-item:hover[b-8pplnaeilm] {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    color: white;
    transform: translateY(-3px);
}

.quick-action-item i[b-8pplnaeilm] {
    font-size: 1.5rem;
}

.quick-action-item span[b-8pplnaeilm] {
    font-size: 0.8rem;
    font-weight: 500;
}

/* Table */
.table th[b-8pplnaeilm] {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}

.table td[b-8pplnaeilm] {
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 992px) {
    .chart-bars[b-8pplnaeilm] {
        height: 150px;
    }
    
    .bar-container[b-8pplnaeilm] {
        height: 120px;
    }
    
    .quick-actions-grid[b-8pplnaeilm] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .hr-dashboard[b-8pplnaeilm] {
        padding: 0.5rem;
    }
    
    .dashboard-header[b-8pplnaeilm] {
        text-align: center;
    }
    
    .dashboard-header .row[b-8pplnaeilm] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .kpi-card[b-8pplnaeilm] {
        padding: 1.25rem;
    }
    
    .kpi-card h3[b-8pplnaeilm] {
        font-size: 1.5rem;
    }
    
    .quick-actions-grid[b-8pplnaeilm] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-card[b-8pplnaeilm] {
        flex-wrap: wrap;
    }
    
    .bar[b-8pplnaeilm] {
        width: 14px;
    }
    
    .department-item[b-8pplnaeilm] {
        flex-wrap: wrap;
    }
}

/* Animations */
@keyframes fadeInUp-b-8pplnaeilm {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kpi-card[b-8pplnaeilm], .card[b-8pplnaeilm], .stat-card[b-8pplnaeilm] {
    animation: fadeInUp-b-8pplnaeilm 0.5s ease-out;
}

.row > [class*="col-"]:nth-child(1) .kpi-card[b-8pplnaeilm] { animation-delay: 0.1s; }
.row > [class*="col-"]:nth-child(2) .kpi-card[b-8pplnaeilm] { animation-delay: 0.2s; }
.row > [class*="col-"]:nth-child(3) .kpi-card[b-8pplnaeilm] { animation-delay: 0.3s; }
.row > [class*="col-"]:nth-child(4) .kpi-card[b-8pplnaeilm] { animation-delay: 0.4s; }

/* Scrollbars */
.department-list[b-8pplnaeilm]::-webkit-scrollbar,
.alerts-list[b-8pplnaeilm]::-webkit-scrollbar,
.hire-list[b-8pplnaeilm]::-webkit-scrollbar {
    width: 4px;
}

.department-list[b-8pplnaeilm]::-webkit-scrollbar-track,
.alerts-list[b-8pplnaeilm]::-webkit-scrollbar-track,
.hire-list[b-8pplnaeilm]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.department-list[b-8pplnaeilm]::-webkit-scrollbar-thumb,
.alerts-list[b-8pplnaeilm]::-webkit-scrollbar-thumb,
.hire-list[b-8pplnaeilm]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.event-list[b-8pplnaeilm]::-webkit-scrollbar {
    width: 4px;
}

.event-list[b-8pplnaeilm]::-webkit-scrollbar-track {
    background: #374151;
}

.event-list[b-8pplnaeilm]::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 4px;
}
/* /Components/Pages/Dashboards/LibrarianDashboard.razor.rz.scp.css */
.librarian-dashboard[b-jzce6dbi16] {
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    min-height: 100vh;
}

.loading-overlay[b-jzce6dbi16] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* Dashboard Header */
.dashboard-header[b-jzce6dbi16] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    padding: 1.5rem 2rem;
    border-radius: 16px;
    color: white;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

.dashboard-header h2[b-jzce6dbi16] {
    font-weight: 700;
}

.search-box[b-jzce6dbi16] {
    position: relative;
}

.search-box i[b-jzce6dbi16] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
}

.search-box input[b-jzce6dbi16] {
    padding-left: 40px;
    border-radius: 25px;
    border: none;
    height: 42px;
}

/* KPI Cards */
.kpi-card[b-jzce6dbi16] {
    position: relative;
    padding: 1.5rem;
    border-radius: 16px;
    color: white;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transition: transform 0.3s ease;
}

.kpi-card:hover[b-jzce6dbi16] {
    transform: translateY(-5px);
}

.kpi-card .kpi-icon[b-jzce6dbi16] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.kpi-card h3[b-jzce6dbi16] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.kpi-card p[b-jzce6dbi16] {
    margin: 0.25rem 0 0.75rem;
    opacity: 0.9;
}

.kpi-badges[b-jzce6dbi16] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.kpi-card.catalog[b-jzce6dbi16] { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); }
.kpi-card.issued[b-jzce6dbi16] { background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%); }
.kpi-card.overdue[b-jzce6dbi16] { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); }
.kpi-card.fines[b-jzce6dbi16] { background: linear-gradient(135deg, #059669 0%, #10b981 100%); }

/* Stat Cards */
.stat-card[b-jzce6dbi16] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.stat-card > i[b-jzce6dbi16] {
    font-size: 1.5rem;
}

.stat-content[b-jzce6dbi16] {
    flex: 1;
}

.stat-content .value[b-jzce6dbi16] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.stat-content .label[b-jzce6dbi16] {
    font-size: 0.75rem;
    color: #64748b;
}

/* Cards */
.card[b-jzce6dbi16] {
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}

.card-header[b-jzce6dbi16] {
    border-bottom: 1px solid #f0f0f0;
    padding: 1rem 1.25rem;
}

.card-header h6[b-jzce6dbi16] {
    font-weight: 600;
}

.bg-gradient-purple[b-jzce6dbi16] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

/* Chart Container */
.chart-container[b-jzce6dbi16] {
    padding: 1rem;
}

.chart-bars[b-jzce6dbi16] {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 200px;
    padding: 0 1rem;
}

.chart-bar-group[b-jzce6dbi16] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.bar-container[b-jzce6dbi16] {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 160px;
}

.bar[b-jzce6dbi16] {
    width: 20px;
    border-radius: 4px 4px 0 0;
    transition: height 0.5s ease;
}

.bar.issued[b-jzce6dbi16] {
    background: linear-gradient(180deg, #7c3aed 0%, #a855f7 100%);
}

.bar.returned[b-jzce6dbi16] {
    background: linear-gradient(180deg, #10b981 0%, #34d399 100%);
}

.bar-label[b-jzce6dbi16] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.chart-legend[b-jzce6dbi16] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
}

.legend-item[b-jzce6dbi16] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #64748b;
}

.legend-color[b-jzce6dbi16] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-color.issued[b-jzce6dbi16] {
    background: #7c3aed;
}

.legend-color.returned[b-jzce6dbi16] {
    background: #10b981;
}

/* Due List */
.due-list[b-jzce6dbi16] {
    max-height: 350px;
    overflow-y: auto;
}

.due-item[b-jzce6dbi16] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
    transition: background 0.2s ease;
}

.due-item:hover[b-jzce6dbi16] {
    background: #fefce8;
}

.due-item.overdue[b-jzce6dbi16] {
    border-left: 4px solid #ef4444;
}

.due-item.due[b-jzce6dbi16] {
    border-left: 4px solid #f59e0b;
}

.due-icon[b-jzce6dbi16] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.due-item.due .due-icon[b-jzce6dbi16] {
    background: #fef3c7;
    color: #d97706;
}

.due-item.overdue .due-icon[b-jzce6dbi16] {
    background: #fee2e2;
    color: #dc2626;
}

.due-info[b-jzce6dbi16] {
    flex: 1;
    min-width: 0;
}

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

.overdue-info[b-jzce6dbi16] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
    font-size: 0.8rem;
}

.overdue-info .fine[b-jzce6dbi16] {
    background: #fee2e2;
    color: #dc2626;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
}

/* Transaction List */
.transaction-list[b-jzce6dbi16] {
    max-height: 350px;
    overflow-y: auto;
}

.transaction-item[b-jzce6dbi16] {
    display: flex;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid #374151;
}

.txn-icon[b-jzce6dbi16] {
    width: 35px;
    height: 35px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.txn-icon.issue[b-jzce6dbi16] { background: #dbeafe; color: #2563eb; }
.txn-icon.return[b-jzce6dbi16] { background: #dcfce7; color: #059669; }
.txn-icon.renew[b-jzce6dbi16] { background: #e0f2fe; color: #0284c7; }
.txn-icon.reserve[b-jzce6dbi16] { background: #fef3c7; color: #d97706; }
.txn-icon.finepayment[b-jzce6dbi16] { background: #fee2e2; color: #dc2626; }

.txn-info[b-jzce6dbi16] {
    flex: 1;
    min-width: 0;
    color: #e5e7eb;
}

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

.txn-header strong[b-jzce6dbi16] {
    color: white;
}

.txn-meta[b-jzce6dbi16] {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

/* Borrower List */
.borrower-list[b-jzce6dbi16] {
    max-height: 350px;
    overflow-y: auto;
}

.borrower-item[b-jzce6dbi16] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e0f2fe;
    align-items: center;
}

.borrower-avatar[b-jzce6dbi16] {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #3b82f6;
}

.borrower-info[b-jzce6dbi16] {
    flex: 1;
    min-width: 0;
}

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

.borrower-stats[b-jzce6dbi16] {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* Rank Badge */
.rank-badge[b-jzce6dbi16] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #64748b;
}

.rank-badge.gold[b-jzce6dbi16] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
}

.rank-badge.silver[b-jzce6dbi16] {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    color: white;
}

.rank-badge.bronze[b-jzce6dbi16] {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: white;
}

/* Popularity Score */
.popularity-score[b-jzce6dbi16] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.popularity-score span[b-jzce6dbi16] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #059669;
}

/* Insights */
.insight-metric[b-jzce6dbi16] {
    text-align: center;
    padding: 1rem;
}

.metric-value[b-jzce6dbi16] {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
}

.metric-label[b-jzce6dbi16] {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.insight-section[b-jzce6dbi16] {
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
}

.insight-section h6[b-jzce6dbi16] {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.insight-list[b-jzce6dbi16] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.insight-list li[b-jzce6dbi16] {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.85rem;
    color: #475569;
}

.insight-list li:last-child[b-jzce6dbi16] {
    border-bottom: none;
}

/* Quick Actions */
.quick-actions-grid[b-jzce6dbi16] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.quick-action-item[b-jzce6dbi16] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    text-decoration: none;
    color: #475569;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    text-align: center;
}

.quick-action-item:hover[b-jzce6dbi16] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: white;
    transform: translateY(-3px);
}

.quick-action-item i[b-jzce6dbi16] {
    font-size: 1.5rem;
}

.quick-action-item span[b-jzce6dbi16] {
    font-size: 0.8rem;
    font-weight: 500;
}

/* Table */
.table th[b-jzce6dbi16] {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}

.table td[b-jzce6dbi16] {
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 992px) {
    .chart-bars[b-jzce6dbi16] {
        height: 150px;
    }
    
    .bar-container[b-jzce6dbi16] {
        height: 120px;
    }
    
    .quick-actions-grid[b-jzce6dbi16] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .librarian-dashboard[b-jzce6dbi16] {
        padding: 0.5rem;
    }
    
    .dashboard-header[b-jzce6dbi16] {
        text-align: center;
    }
    
    .dashboard-header .row[b-jzce6dbi16] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .kpi-card[b-jzce6dbi16] {
        padding: 1.25rem;
    }
    
    .kpi-card h3[b-jzce6dbi16] {
        font-size: 1.5rem;
    }
    
    .quick-actions-grid[b-jzce6dbi16] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-card[b-jzce6dbi16] {
        flex-wrap: wrap;
    }
    
    .bar[b-jzce6dbi16] {
        width: 14px;
    }
}

/* Animations */
@keyframes fadeInUp-b-jzce6dbi16 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kpi-card[b-jzce6dbi16], .card[b-jzce6dbi16], .stat-card[b-jzce6dbi16] {
    animation: fadeInUp-b-jzce6dbi16 0.5s ease-out;
}

.row > [class*="col-"]:nth-child(1) .kpi-card[b-jzce6dbi16] { animation-delay: 0.1s; }
.row > [class*="col-"]:nth-child(2) .kpi-card[b-jzce6dbi16] { animation-delay: 0.2s; }
.row > [class*="col-"]:nth-child(3) .kpi-card[b-jzce6dbi16] { animation-delay: 0.3s; }
.row > [class*="col-"]:nth-child(4) .kpi-card[b-jzce6dbi16] { animation-delay: 0.4s; }

/* Scrollbars */
.due-list[b-jzce6dbi16]::-webkit-scrollbar,
.transaction-list[b-jzce6dbi16]::-webkit-scrollbar,
.borrower-list[b-jzce6dbi16]::-webkit-scrollbar {
    width: 4px;
}

.due-list[b-jzce6dbi16]::-webkit-scrollbar-track,
.borrower-list[b-jzce6dbi16]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.due-list[b-jzce6dbi16]::-webkit-scrollbar-thumb,
.borrower-list[b-jzce6dbi16]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.transaction-list[b-jzce6dbi16]::-webkit-scrollbar-track {
    background: #374151;
}

.transaction-list[b-jzce6dbi16]::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 4px;
}
/* /Components/Pages/Dashboards/ParentDashboard.razor.rz.scp.css */
.parent-dashboard[b-ro8jxwsl76] {
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    min-height: 100vh;
}

.loading-overlay[b-ro8jxwsl76] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* Dashboard Header */
.dashboard-header[b-ro8jxwsl76] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    padding: 1.5rem 2rem;
    border-radius: 16px;
    color: white;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

.dashboard-header h2[b-ro8jxwsl76] {
    font-weight: 700;
}

/* Children Selector */
.children-selector[b-ro8jxwsl76] {
    background: white;
    padding: 1rem;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.child-card[b-ro8jxwsl76] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.child-card:hover[b-ro8jxwsl76] {
    background: #f1f5f9;
    transform: translateY(-2px);
}

.child-card.selected[b-ro8jxwsl76] {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    border-color: #7c3aed;
}

.child-avatar[b-ro8jxwsl76] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.child-avatar img[b-ro8jxwsl76] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.child-avatar i[b-ro8jxwsl76] {
    font-size: 1.5rem;
    color: #94a3b8;
}

.child-info h6[b-ro8jxwsl76] {
    margin: 0;
    font-weight: 600;
}

.child-info span[b-ro8jxwsl76] {
    font-size: 0.85rem;
    color: #64748b;
}

.selected-badge[b-ro8jxwsl76] {
    position: absolute;
    top: -5px;
    right: -5px;
    color: #7c3aed;
    font-size: 1.25rem;
}

/* Child Summary Section */
.child-summary-section .card[b-ro8jxwsl76] {
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.summary-avatar[b-ro8jxwsl76] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    overflow: hidden;
}

.summary-avatar img[b-ro8jxwsl76] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.summary-avatar i[b-ro8jxwsl76] {
    font-size: 2.5rem;
}

.summary-badges[b-ro8jxwsl76] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mini-stat[b-ro8jxwsl76] {
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: 12px;
    min-width: 80px;
}

.mini-stat .stat-value[b-ro8jxwsl76] {
    font-size: 1.5rem;
    font-weight: 700;
}

.mini-stat .stat-label[b-ro8jxwsl76] {
    font-size: 0.75rem;
    color: #64748b;
}

/* KPI Cards */
.kpi-card[b-ro8jxwsl76] {
    position: relative;
    padding: 1.5rem;
    border-radius: 16px;
    color: white;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transition: transform 0.3s ease;
}

.kpi-card:hover[b-ro8jxwsl76] {
    transform: translateY(-5px);
}

.kpi-card .kpi-icon[b-ro8jxwsl76] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.kpi-card h3[b-ro8jxwsl76] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.kpi-card p[b-ro8jxwsl76] {
    margin: 0.25rem 0 0.75rem;
    opacity: 0.9;
}

.kpi-card .kpi-detail[b-ro8jxwsl76] {
    font-size: 0.8rem;
    opacity: 0.85;
}

.kpi-card.attendance[b-ro8jxwsl76] { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); }
.kpi-card.academic[b-ro8jxwsl76] { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }
.kpi-card.assignments[b-ro8jxwsl76] { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }
.kpi-card.fees[b-ro8jxwsl76] { background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%); }
.kpi-card.fees.pending[b-ro8jxwsl76] { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); }
.kpi-card.fees.paid[b-ro8jxwsl76] { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); }

.pay-link[b-ro8jxwsl76] {
    color: white;
    text-decoration: underline;
    margin-left: 0.5rem;
}

/* Cards */
.card[b-ro8jxwsl76] {
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}

.card-header[b-ro8jxwsl76] {
    border-bottom: 1px solid #f0f0f0;
    padding: 1rem 1.25rem;
}

.card-header h6[b-ro8jxwsl76] {
    font-weight: 600;
}

.bg-gradient-purple[b-ro8jxwsl76] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

/* Fee Chart */
.fee-chart[b-ro8jxwsl76] {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

.fee-donut[b-ro8jxwsl76] {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: conic-gradient(
        #10b981 0deg calc(var(--paid) * 3.6deg),
        #f59e0b calc(var(--paid) * 3.6deg) 360deg
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.fee-donut .donut-center[b-ro8jxwsl76] {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.donut-center .amount[b-ro8jxwsl76] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
}

.donut-center .label[b-ro8jxwsl76] {
    font-size: 0.85rem;
    color: #6b7280;
}

.fee-legend[b-ro8jxwsl76] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.legend-item[b-ro8jxwsl76] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.legend-item .dot[b-ro8jxwsl76] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot.paid[b-ro8jxwsl76] { background: #10b981; }
.dot.pending[b-ro8jxwsl76] { background: #f59e0b; }
.dot.overdue[b-ro8jxwsl76] { background: #ef4444; }

.child-fees .child-fee-item[b-ro8jxwsl76] {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.child-fees .child-fee-item:last-child[b-ro8jxwsl76] {
    border-bottom: none;
}

/* Grade Graph */
.grade-graph[b-ro8jxwsl76] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.grade-bar .bar-label[b-ro8jxwsl76] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.bar-label .exam-name[b-ro8jxwsl76] {
    font-weight: 600;
}

.bar-label .exam-date[b-ro8jxwsl76] {
    font-size: 0.85rem;
    color: #64748b;
}

.bar-container[b-ro8jxwsl76] {
    position: relative;
    height: 30px;
    background: #e5e7eb;
    border-radius: 8px;
    overflow: visible;
}

.bar-container .bar.student[b-ro8jxwsl76] {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.75rem;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
}

.bar-container .bar-avg[b-ro8jxwsl76] {
    position: absolute;
    top: -5px;
    bottom: -5px;
    width: 3px;
    background: #ef4444;
    border-radius: 2px;
}

.bar-meta[b-ro8jxwsl76] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.bar-meta .rank[b-ro8jxwsl76] {
    font-size: 0.85rem;
    color: #64748b;
}

.graph-legend[b-ro8jxwsl76] {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}

.graph-legend .dot.student[b-ro8jxwsl76] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #6366f1;
    display: inline-block;
    margin-right: 0.5rem;
}

.graph-legend .line.avg[b-ro8jxwsl76] {
    width: 20px;
    height: 3px;
    background: #ef4444;
    display: inline-block;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Attendance Chart */
.attendance-chart[b-ro8jxwsl76] {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 220px;
    padding: 1rem 0;
}

.chart-bar[b-ro8jxwsl76] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50px;
    position: relative;
}

.chart-bar .bar-fill[b-ro8jxwsl76] {
    width: 40px;
    border-radius: 8px 8px 0 0;
    transition: height 0.5s ease;
    min-height: 20px;
}

.bar-fill.excellent[b-ro8jxwsl76] { background: linear-gradient(180deg, #10b981 0%, #34d399 100%); }
.bar-fill.good[b-ro8jxwsl76] { background: linear-gradient(180deg, #0ea5e9 0%, #38bdf8 100%); }
.bar-fill.average[b-ro8jxwsl76] { background: linear-gradient(180deg, #f59e0b 0%, #fbbf24 100%); }
.bar-fill.poor[b-ro8jxwsl76] { background: linear-gradient(180deg, #ef4444 0%, #f87171 100%); }

.chart-bar .bar-label[b-ro8jxwsl76] {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.chart-bar .bar-value[b-ro8jxwsl76] {
    position: absolute;
    top: -25px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

/* Bus Tracker */
.bus-tracker[b-ro8jxwsl76] {
    padding: 0.5rem 0;
}

.bus-status[b-ro8jxwsl76] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    background: #fef3c7;
}

.bus-status.enroute[b-ro8jxwsl76] {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.bus-status.notstarted[b-ro8jxwsl76] {
    background: #f1f5f9;
}

.bus-status.reachedschool[b-ro8jxwsl76] {
    background: #dbeafe;
}

.bus-status.completed[b-ro8jxwsl76] {
    background: #d1fae5;
}

.status-icon[b-ro8jxwsl76] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #f59e0b;
}

.bus-status.enroute .status-icon[b-ro8jxwsl76] {
    color: #10b981;
}

.status-text strong[b-ro8jxwsl76] {
    display: block;
}

.status-text .eta[b-ro8jxwsl76] {
    font-size: 0.85rem;
    color: #64748b;
}

.bus-details .detail-row[b-ro8jxwsl76] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

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

.bus-details i[b-ro8jxwsl76] {
    color: #64748b;
}

.pickup-drop[b-ro8jxwsl76] {
    position: relative;
    padding-left: 2rem;
}

.route-point[b-ro8jxwsl76] {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 0;
}

.route-point .point-icon[b-ro8jxwsl76] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.route-point.pickup .point-icon[b-ro8jxwsl76] {
    background: #dcfce7;
    color: #10b981;
}

.route-point.drop .point-icon[b-ro8jxwsl76] {
    background: #fee2e2;
    color: #ef4444;
}

.point-info small[b-ro8jxwsl76] {
    display: block;
    color: #64748b;
    font-size: 0.75rem;
}

.point-info strong[b-ro8jxwsl76] {
    display: block;
}

.point-info span[b-ro8jxwsl76] {
    font-size: 0.85rem;
    color: #64748b;
}

.route-line[b-ro8jxwsl76] {
    position: absolute;
    left: 14px;
    top: 45px;
    bottom: 45px;
    width: 2px;
    background: linear-gradient(180deg, #10b981 0%, #ef4444 100%);
}

.current-location[b-ro8jxwsl76] {
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
}

.no-transport[b-ro8jxwsl76] {
    text-align: center;
    padding: 2rem;
    color: #94a3b8;
}

.no-transport i[b-ro8jxwsl76] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

/* Messages */
.messages-list[b-ro8jxwsl76] {
    max-height: 400px;
    overflow-y: auto;
}

.message-item[b-ro8jxwsl76] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s ease;
}

.message-item:hover[b-ro8jxwsl76] {
    background: #f8f9fa;
}

.message-item.unread[b-ro8jxwsl76] {
    background: #f8fafc;
    border-left: 4px solid #6366f1;
}

.message-item.important[b-ro8jxwsl76] {
    border-left: 4px solid #f59e0b;
}

.message-avatar[b-ro8jxwsl76] {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #94a3b8;
    flex-shrink: 0;
}

.message-content[b-ro8jxwsl76] {
    flex: 1;
    min-width: 0;
}

.message-header[b-ro8jxwsl76] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.message-header .role[b-ro8jxwsl76] {
    font-size: 0.75rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.message-subject[b-ro8jxwsl76] {
    font-weight: 500;
    margin: 0.25rem 0;
}

.message-preview[b-ro8jxwsl76] {
    font-size: 0.85rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-actions[b-ro8jxwsl76] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

/* Insights Section */
.insights-section[b-ro8jxwsl76] {
    padding: 0.5rem 0;
}

.insight-summary[b-ro8jxwsl76] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.trend-icon[b-ro8jxwsl76] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.trend-icon.improving[b-ro8jxwsl76] {
    background: #dcfce7;
    color: #10b981;
}

.trend-icon.declining[b-ro8jxwsl76] {
    background: #fee2e2;
    color: #ef4444;
}

.trend-icon.stable[b-ro8jxwsl76] {
    background: #f1f5f9;
    color: #64748b;
}

.alerts-section .alert-item[b-ro8jxwsl76] {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

.recommendations h6[b-ro8jxwsl76] {
    font-size: 0.9rem;
    color: #64748b;
}

.recommendations ul[b-ro8jxwsl76] {
    padding-left: 1.25rem;
    margin: 0.5rem 0 0;
}

.recommendations li[b-ro8jxwsl76] {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: #475569;
}

/* Quick Actions */
.quick-action[b-ro8jxwsl76] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    text-decoration: none;
    color: #475569;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.quick-action:hover[b-ro8jxwsl76] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3);
}

.quick-action i[b-ro8jxwsl76] {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.quick-action span[b-ro8jxwsl76] {
    font-size: 0.85rem;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 992px) {
    .child-summary-section .row[b-ro8jxwsl76] {
        flex-direction: column;
        text-align: center;
    }
    
    .child-summary-section .row > .col-auto:last-child[b-ro8jxwsl76] {
        margin-top: 1rem;
    }
    
    .mini-stat[b-ro8jxwsl76] {
        display: inline-block;
    }
}

@media (max-width: 768px) {
    .parent-dashboard[b-ro8jxwsl76] {
        padding: 0.5rem;
    }
    
    .dashboard-header[b-ro8jxwsl76] {
        text-align: center;
    }
    
    .dashboard-header .row[b-ro8jxwsl76] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .dashboard-header .col-md-6.text-end[b-ro8jxwsl76] {
        text-align: center !important;
    }
    
    .kpi-card[b-ro8jxwsl76] {
        padding: 1.25rem;
    }
    
    .kpi-card h3[b-ro8jxwsl76] {
        font-size: 1.5rem;
    }
    
    .attendance-chart[b-ro8jxwsl76] {
        height: 180px;
    }
    
    .chart-bar[b-ro8jxwsl76] {
        width: 40px;
    }
    
    .chart-bar .bar-fill[b-ro8jxwsl76] {
        width: 30px;
    }
    
    .quick-action[b-ro8jxwsl76] {
        padding: 1rem 0.5rem;
    }
    
    .quick-action i[b-ro8jxwsl76] {
        font-size: 1.25rem;
    }
    
    .quick-action span[b-ro8jxwsl76] {
        font-size: 0.75rem;
    }
}

/* Animations */
@keyframes fadeInUp-b-ro8jxwsl76 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kpi-card[b-ro8jxwsl76], .card[b-ro8jxwsl76] {
    animation: fadeInUp-b-ro8jxwsl76 0.5s ease-out;
}

.row > [class*="col-"]:nth-child(1) .kpi-card[b-ro8jxwsl76] { animation-delay: 0.1s; }
.row > [class*="col-"]:nth-child(2) .kpi-card[b-ro8jxwsl76] { animation-delay: 0.2s; }
.row > [class*="col-"]:nth-child(3) .kpi-card[b-ro8jxwsl76] { animation-delay: 0.3s; }
.row > [class*="col-"]:nth-child(4) .kpi-card[b-ro8jxwsl76] { animation-delay: 0.4s; }

/* Scrollbar */
.messages-list[b-ro8jxwsl76]::-webkit-scrollbar {
    width: 4px;
}

.messages-list[b-ro8jxwsl76]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.messages-list[b-ro8jxwsl76]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}
/* /Components/Pages/Dashboards/ParentDashboardContent.razor.rz.scp.css */
.parent-dashboard[b-6sucvba1e4] {
    padding: 1.5rem;
}

.loading-container[b-6sucvba1e4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* Header */
.dashboard-header[b-6sucvba1e4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-content h2[b-6sucvba1e4] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
    margin: 0;
}

.header-actions[b-6sucvba1e4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.date-badge[b-6sucvba1e4] {
    background: var(--op-card-bg, #fff);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--op-body-color, #697a8d);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Children Tabs */
.children-tabs[b-6sucvba1e4] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.child-tab[b-6sucvba1e4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: var(--op-card-bg, #fff);
    border: 2px solid transparent;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    min-width: fit-content;
}

.child-tab:hover[b-6sucvba1e4] {
    border-color: var(--op-primary, #696cff);
}

.child-tab.active[b-6sucvba1e4] {
    border-color: var(--op-primary, #696cff);
    background: rgba(105, 108, 255, 0.08);
}

.child-tab .avatar[b-6sucvba1e4] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #696cff, #71dd37);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.child-tab .child-info[b-6sucvba1e4] {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.child-tab .name[b-6sucvba1e4] {
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
}

.child-tab .class[b-6sucvba1e4] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

/* KPI Cards */
.kpi-grid[b-6sucvba1e4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.kpi-card[b-6sucvba1e4] {
    background: var(--op-card-bg, #fff);
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.kpi-icon[b-6sucvba1e4] {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.kpi-card.primary .kpi-icon[b-6sucvba1e4] { background: rgba(105, 108, 255, 0.16); color: #696cff; }
.kpi-card.success .kpi-icon[b-6sucvba1e4] { background: rgba(113, 221, 55, 0.16); color: #71dd37; }
.kpi-card.info .kpi-icon[b-6sucvba1e4] { background: rgba(3, 195, 236, 0.16); color: #03c3ec; }
.kpi-card.danger .kpi-icon[b-6sucvba1e4] { background: rgba(255, 62, 29, 0.16); color: #ff3e1d; }

.kpi-content h3[b-6sucvba1e4] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
    margin: 0;
}

.kpi-content p[b-6sucvba1e4] {
    font-size: 0.875rem;
    color: var(--op-body-color, #697a8d);
    margin: 0.25rem 0;
}

.kpi-sub[b-6sucvba1e4] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

/* Content Grid */
.content-grid[b-6sucvba1e4] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.content-card[b-6sucvba1e4] {
    background: var(--op-card-bg, #fff);
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.content-card .card-header[b-6sucvba1e4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--op-border-color, #e4e6e8);
}

.content-card .card-header h5[b-6sucvba1e4] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
}

.content-card .card-body[b-6sucvba1e4] {
    padding: 1rem 1.5rem;
}

/* Empty State */
.empty-state[b-6sucvba1e4] {
    text-align: center;
    padding: 2rem;
    color: var(--op-body-color, #697a8d);
}

.empty-state i[b-6sucvba1e4] {
    font-size: 2.5rem;
    opacity: 0.5;
    margin-bottom: 0.5rem;
    display: block;
}

/* Attendance Chart */
.attendance-chart[b-6sucvba1e4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 150px;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.chart-bar[b-6sucvba1e4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.chart-bar .bar-fill[b-6sucvba1e4] {
    width: 100%;
    max-width: 40px;
    background: linear-gradient(180deg, #696cff, rgba(105, 108, 255, 0.5));
    border-radius: 0.25rem 0.25rem 0 0;
    transition: height 0.5s ease;
}

.chart-bar .bar-label[b-6sucvba1e4] {
    font-size: 0.6875rem;
    color: var(--op-body-color, #697a8d);
}

.chart-bar .bar-value[b-6sucvba1e4] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
}

.alert-banner[b-6sucvba1e4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.alert-banner.warning[b-6sucvba1e4] {
    background: rgba(255, 171, 0, 0.16);
    color: #b76e00;
}

/* Grade List */
.grade-list[b-6sucvba1e4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.grade-item[b-6sucvba1e4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.grade-item .subject[b-6sucvba1e4] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--op-heading-color, #566a7f);
}

.grade-bars[b-6sucvba1e4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.grade-bar[b-6sucvba1e4] {
    height: 20px;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    font-size: 0.6875rem;
    color: #fff;
    min-width: 40px;
    transition: width 0.5s ease;
}

.grade-bar.student[b-6sucvba1e4] {
    background: #696cff;
}

.grade-bar.class-avg[b-6sucvba1e4] {
    background: #e4e6e8;
    color: var(--op-body-color, #697a8d);
}

/* Message List */
.message-list[b-6sucvba1e4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.message-item[b-6sucvba1e4] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.message-item.unread[b-6sucvba1e4] {
    background: rgba(105, 108, 255, 0.08);
    border-left: 3px solid #696cff;
}

.message-avatar[b-6sucvba1e4] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #696cff, #03c3ec);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.message-content[b-6sucvba1e4] {
    flex: 1;
    min-width: 0;
}

.message-header[b-6sucvba1e4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.message-header .sender[b-6sucvba1e4] {
    font-weight: 500;
    color: var(--op-heading-color, #566a7f);
}

.message-header .time[b-6sucvba1e4] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

.message-preview[b-6sucvba1e4] {
    font-size: 0.8125rem;
    color: var(--op-body-color, #697a8d);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Announcement List */
.announcement-list[b-6sucvba1e4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.announcement-item[b-6sucvba1e4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem;
}

.ann-icon[b-6sucvba1e4] {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    background: rgba(105, 108, 255, 0.16);
    color: #696cff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ann-content[b-6sucvba1e4] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ann-content .title[b-6sucvba1e4] {
    font-weight: 500;
    color: var(--op-heading-color, #566a7f);
}

.ann-content .date[b-6sucvba1e4] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

/* Notification List */
.notification-list[b-6sucvba1e4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.notification-item[b-6sucvba1e4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.notification-item.high[b-6sucvba1e4] {
    border-left: 3px solid #ff3e1d;
}

.notification-item.medium[b-6sucvba1e4] {
    border-left: 3px solid #ffab00;
}

.notification-item.low[b-6sucvba1e4] {
    border-left: 3px solid #03c3ec;
}

.notif-icon[b-6sucvba1e4] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(105, 108, 255, 0.16);
    color: #696cff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notif-content[b-6sucvba1e4] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notif-content .title[b-6sucvba1e4] {
    font-weight: 500;
    color: var(--op-heading-color, #566a7f);
}

.notif-content .date[b-6sucvba1e4] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

/* Quick Actions */
.quick-actions-card[b-6sucvba1e4] {
    background: var(--op-card-bg, #fff);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.quick-actions-card h5[b-6sucvba1e4] {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
}

.actions-grid[b-6sucvba1e4] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.action-btn[b-6sucvba1e4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--op-heading-color, #566a7f);
    transition: all 0.2s;
}

.action-btn i[b-6sucvba1e4] {
    font-size: 1.5rem;
    color: var(--op-primary, #696cff);
}

.action-btn span[b-6sucvba1e4] {
    font-size: 0.8125rem;
}

.action-btn:hover[b-6sucvba1e4] {
    background: var(--op-primary, #696cff);
    color: #fff;
}

.action-btn:hover i[b-6sucvba1e4] {
    color: #fff;
}

/* Responsive */
@media (max-width: 1200px) {
    .kpi-grid[b-6sucvba1e4] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .actions-grid[b-6sucvba1e4] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .content-grid[b-6sucvba1e4] {
        grid-template-columns: 1fr;
    }
    
    .actions-grid[b-6sucvba1e4] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Dashboards/StudentDashboard.razor.rz.scp.css */
.student-dashboard[b-kezngpo865] {
    padding: 1rem;
    background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
    min-height: 100vh;
}

.loading-overlay[b-kezngpo865] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* Profile Header */
.profile-header[b-kezngpo865] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    padding: 1.5rem 2rem;
    border-radius: 16px;
    color: white;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
}

.profile-avatar[b-kezngpo865] {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid white;
    overflow: hidden;
}

.profile-avatar img[b-kezngpo865] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar i[b-kezngpo865] {
    font-size: 2.5rem;
}

.profile-header h2[b-kezngpo865] {
    font-weight: 700;
}

.profile-meta .badge[b-kezngpo865] {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
}

.date-badge[b-kezngpo865] {
    background: rgba(255,255,255,0.2);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
}

/* KPI Cards */
.kpi-card[b-kezngpo865] {
    position: relative;
    padding: 1.5rem;
    border-radius: 16px;
    color: white;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transition: transform 0.3s ease;
}

.kpi-card:hover[b-kezngpo865] {
    transform: translateY(-5px);
}

.kpi-icon-bg[b-kezngpo865] {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
}

.kpi-card .kpi-icon[b-kezngpo865] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.kpi-card h3[b-kezngpo865] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.kpi-card p[b-kezngpo865] {
    margin: 0.25rem 0 0.75rem;
    opacity: 0.9;
}

.kpi-card.attendance[b-kezngpo865] { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); }
.kpi-card.results[b-kezngpo865] { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }
.kpi-card.assignments[b-kezngpo865] { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }
.kpi-card.fees[b-kezngpo865] { background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%); }
.kpi-card.fees.pending[b-kezngpo865] { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); }
.kpi-card.fees.paid[b-kezngpo865] { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); }

.kpi-progress[b-kezngpo865] {
    margin-bottom: 0.5rem;
}

.grade-badge[b-kezngpo865] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.grade-badge .grade[b-kezngpo865] {
    background: rgba(255,255,255,0.25);
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    font-weight: 700;
}

.grade-badge .rank[b-kezngpo865] {
    font-size: 0.85rem;
    opacity: 0.9;
}

.assignment-stats[b-kezngpo865] {
    font-size: 0.9rem;
}

.assignment-stats .completed[b-kezngpo865] {
    color: rgba(255,255,255,0.9);
}

.assignment-stats .total[b-kezngpo865] {
    opacity: 0.7;
}

.due-date[b-kezngpo865] {
    display: block;
    margin-top: 0.5rem;
    opacity: 0.9;
}

.pay-btn[b-kezngpo865] {
    display: inline-block;
    background: white;
    color: #ef4444;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 0.5rem;
}

.pay-btn:hover[b-kezngpo865] {
    background: #f8f9fa;
}

/* Cards */
.card[b-kezngpo865] {
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}

.card-header[b-kezngpo865] {
    border-bottom: 1px solid #f0f0f0;
    padding: 1rem 1.25rem;
}

.card-header h6[b-kezngpo865] {
    font-weight: 600;
}

/* Schedule Timeline */
.schedule-timeline[b-kezngpo865] {
    position: relative;
    padding: 1rem 0;
}

.schedule-item[b-kezngpo865] {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 1.25rem;
    position: relative;
}

.schedule-item.current[b-kezngpo865] {
    background: linear-gradient(90deg, #dcfce7 0%, transparent 100%);
}

.schedule-item.completed[b-kezngpo865] {
    opacity: 0.6;
}

.schedule-item.break[b-kezngpo865] {
    background: #f8fafc;
}

.schedule-time[b-kezngpo865] {
    width: 50px;
    text-align: center;
    flex-shrink: 0;
}

.schedule-time .time[b-kezngpo865] {
    font-weight: 600;
    font-size: 0.85rem;
}

.schedule-time .period[b-kezngpo865] {
    font-size: 0.7rem;
    color: #94a3b8;
}

.schedule-line[b-kezngpo865] {
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

.schedule-line[b-kezngpo865]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
}

.schedule-line .dot[b-kezngpo865] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #6366f1;
    position: relative;
    z-index: 1;
    margin-top: 4px;
}

.schedule-line .dot.pulse[b-kezngpo865] {
    animation: pulse-b-kezngpo865 1.5s infinite;
    background: #10b981;
}

@keyframes pulse-b-kezngpo865 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

.schedule-content[b-kezngpo865] {
    flex: 1;
    padding-left: 0.5rem;
}

.schedule-header[b-kezngpo865] {
    display: flex;
    align-items: center;
}

/* Attendance Donut */
.attendance-donut[b-kezngpo865] {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

.donut-chart[b-kezngpo865] {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: conic-gradient(
        var(--color) calc(var(--percentage) * 1%),
        #e5e7eb calc(var(--percentage) * 1%)
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.donut-center[b-kezngpo865] {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.donut-center .percent[b-kezngpo865] {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
}

.donut-center .label[b-kezngpo865] {
    font-size: 0.85rem;
    color: #6b7280;
}

.attendance-breakdown .stat-item[b-kezngpo865] {
    padding: 0.75rem;
    border-radius: 10px;
}

.stat-item.present[b-kezngpo865] { background: #dcfce7; color: #166534; }
.stat-item.absent[b-kezngpo865] { background: #fee2e2; color: #991b1b; }
.stat-item.late[b-kezngpo865] { background: #fef3c7; color: #92400e; }
.stat-item.leave[b-kezngpo865] { background: #dbeafe; color: #1e40af; }

.stat-item h5[b-kezngpo865] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

/* Assignments List */
.assignments-list[b-kezngpo865] {
    max-height: 400px;
    overflow-y: auto;
}

.assignment-item[b-kezngpo865] {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    gap: 1rem;
    transition: background 0.2s ease;
}

.assignment-item:hover[b-kezngpo865] {
    background: #f8f9fa;
}

.assignment-item.overdue[b-kezngpo865] {
    border-left: 4px solid #ef4444;
    background: #fef2f2;
}

.assignment-item.pending[b-kezngpo865] {
    border-left: 4px solid #f59e0b;
}

.assignment-icon[b-kezngpo865] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.assignment-item.graded .assignment-icon[b-kezngpo865] { background: #dcfce7; color: #166534; }
.assignment-item.submitted .assignment-icon[b-kezngpo865] { background: #dbeafe; color: #1e40af; }
.assignment-item.pending .assignment-icon[b-kezngpo865] { background: #fef3c7; color: #92400e; }
.assignment-item.overdue .assignment-icon[b-kezngpo865] { background: #fee2e2; color: #991b1b; }

.assignment-content[b-kezngpo865] {
    flex: 1;
}

.assignment-meta[b-kezngpo865] {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.assignment-status[b-kezngpo865] {
    text-align: right;
}

.assignment-status .marks[b-kezngpo865] {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* Results Chart */
.results-chart[b-kezngpo865] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.subject-bar .subject-info[b-kezngpo865] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.subject-bar .name[b-kezngpo865] {
    font-size: 0.9rem;
    font-weight: 500;
}

.subject-bar .score[b-kezngpo865] {
    font-weight: 600;
    color: #6366f1;
}

.results-summary .summary-item h4[b-kezngpo865] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: #1f2937;
}

.results-summary .summary-item h4.grade[b-kezngpo865] {
    color: #6366f1;
}

/* Fee Section */
.fee-overview[b-kezngpo865] {
    display: flex;
    justify-content: center;
    padding: 1rem;
}

.fee-circle[b-kezngpo865] {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.fee-circle.partiallypaid[b-kezngpo865] { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
.fee-circle.pending[b-kezngpo865] { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); }
.fee-circle.overdue[b-kezngpo865] { background: linear-gradient(135deg, #fee2e2 0%, #fca5a5 100%); }
.fee-circle.paid[b-kezngpo865] { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); }

.fee-circle .amount[b-kezngpo865] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
}

.fee-circle .label[b-kezngpo865] {
    font-size: 0.85rem;
    color: #6b7280;
}

.fee-breakdown .fee-item[b-kezngpo865] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.fee-breakdown .fee-item:last-child[b-kezngpo865] {
    border-bottom: none;
}

.fee-info small[b-kezngpo865] {
    display: block;
}

/* Notices */
.notices-list[b-kezngpo865] {
    max-height: 400px;
    overflow-y: auto;
}

.notice-item[b-kezngpo865] {
    display: flex;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    gap: 1rem;
    position: relative;
}

.notice-item.important[b-kezngpo865] {
    border-left: 4px solid #ef4444;
}

.notice-item.unread[b-kezngpo865] {
    background: #f8fafc;
}

.notice-icon[b-kezngpo865] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.notice-content[b-kezngpo865] {
    flex: 1;
}

.notice-content p[b-kezngpo865] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.unread-dot[b-kezngpo865] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* Quick Actions */
.quick-action[b-kezngpo865] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    text-decoration: none;
    color: #475569;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.quick-action:hover[b-kezngpo865] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
}

.quick-action i[b-kezngpo865] {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.quick-action span[b-kezngpo865] {
    font-size: 0.85rem;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 992px) {
    .profile-header[b-kezngpo865] {
        text-align: center;
    }
    
    .profile-header .row[b-kezngpo865] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .profile-header .col-auto.text-end[b-kezngpo865] {
        text-align: center !important;
    }
}

@media (max-width: 768px) {
    .student-dashboard[b-kezngpo865] {
        padding: 0.5rem;
    }
    
    .profile-avatar[b-kezngpo865] {
        width: 60px;
        height: 60px;
    }
    
    .kpi-card[b-kezngpo865] {
        padding: 1.25rem;
    }
    
    .kpi-card h3[b-kezngpo865] {
        font-size: 1.5rem;
    }
    
    .donut-chart[b-kezngpo865] {
        width: 150px;
        height: 150px;
    }
    
    .donut-center[b-kezngpo865] {
        width: 110px;
        height: 110px;
    }
    
    .donut-center .percent[b-kezngpo865] {
        font-size: 1.5rem;
    }
    
    .quick-action[b-kezngpo865] {
        padding: 1rem 0.5rem;
    }
    
    .quick-action i[b-kezngpo865] {
        font-size: 1.25rem;
    }
    
    .quick-action span[b-kezngpo865] {
        font-size: 0.75rem;
    }
}

/* Animations */
@keyframes fadeInUp-b-kezngpo865 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kpi-card[b-kezngpo865], .card[b-kezngpo865] {
    animation: fadeInUp-b-kezngpo865 0.5s ease-out;
}

.row > [class*="col-"]:nth-child(1) .kpi-card[b-kezngpo865] { animation-delay: 0.1s; }
.row > [class*="col-"]:nth-child(2) .kpi-card[b-kezngpo865] { animation-delay: 0.2s; }
.row > [class*="col-"]:nth-child(3) .kpi-card[b-kezngpo865] { animation-delay: 0.3s; }
.row > [class*="col-"]:nth-child(4) .kpi-card[b-kezngpo865] { animation-delay: 0.4s; }

/* Scrollbar */
.assignments-list[b-kezngpo865]::-webkit-scrollbar,
.notices-list[b-kezngpo865]::-webkit-scrollbar {
    width: 4px;
}

.assignments-list[b-kezngpo865]::-webkit-scrollbar-track,
.notices-list[b-kezngpo865]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.assignments-list[b-kezngpo865]::-webkit-scrollbar-thumb,
.notices-list[b-kezngpo865]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}
/* /Components/Pages/Dashboards/StudentDashboardContent.razor.rz.scp.css */
.student-dashboard[b-pnr7pjglo2] {
    padding: 1.5rem;
}

.loading-container[b-pnr7pjglo2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* Header */
.dashboard-header[b-pnr7pjglo2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-content h2[b-pnr7pjglo2] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
    margin: 0;
}

.header-actions[b-pnr7pjglo2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.date-badge[b-pnr7pjglo2] {
    background: var(--op-card-bg, #fff);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--op-body-color, #697a8d);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* KPI Cards */
.kpi-grid[b-pnr7pjglo2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.kpi-card[b-pnr7pjglo2] {
    background: var(--op-card-bg, #fff);
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.kpi-icon[b-pnr7pjglo2] {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.kpi-card.primary .kpi-icon[b-pnr7pjglo2] { background: rgba(105, 108, 255, 0.16); color: #696cff; }
.kpi-card.success .kpi-icon[b-pnr7pjglo2] { background: rgba(113, 221, 55, 0.16); color: #71dd37; }
.kpi-card.warning .kpi-icon[b-pnr7pjglo2] { background: rgba(255, 171, 0, 0.16); color: #ffab00; }
.kpi-card.danger .kpi-icon[b-pnr7pjglo2] { background: rgba(255, 62, 29, 0.16); color: #ff3e1d; }

.kpi-content h3[b-pnr7pjglo2] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
    margin: 0;
}

.kpi-content p[b-pnr7pjglo2] {
    font-size: 0.875rem;
    color: var(--op-body-color, #697a8d);
    margin: 0.25rem 0;
}

.kpi-sub[b-pnr7pjglo2] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

/* Content Grid */
.content-grid[b-pnr7pjglo2] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.content-card[b-pnr7pjglo2] {
    background: var(--op-card-bg, #fff);
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.content-card .card-header[b-pnr7pjglo2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--op-border-color, #e4e6e8);
}

.content-card .card-header h5[b-pnr7pjglo2] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
}

.content-card .card-body[b-pnr7pjglo2] {
    padding: 1rem 1.5rem;
}

/* Empty State */
.empty-state[b-pnr7pjglo2] {
    text-align: center;
    padding: 2rem;
    color: var(--op-body-color, #697a8d);
}

.empty-state i[b-pnr7pjglo2] {
    font-size: 2.5rem;
    opacity: 0.5;
    margin-bottom: 0.5rem;
    display: block;
}

/* Schedule List */
.schedule-list[b-pnr7pjglo2] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.schedule-item[b-pnr7pjglo2] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem;
}

.schedule-item.completed[b-pnr7pjglo2] {
    opacity: 0.6;
}

.schedule-time .time[b-pnr7pjglo2] {
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
}

.schedule-info[b-pnr7pjglo2] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.schedule-info .subject[b-pnr7pjglo2] {
    font-weight: 500;
    color: var(--op-heading-color, #566a7f);
}

.schedule-info .teacher[b-pnr7pjglo2] {
    font-size: 0.8125rem;
    color: var(--op-body-color, #697a8d);
}

/* Subject List */
.subject-list[b-pnr7pjglo2] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.subject-item[b-pnr7pjglo2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.subject-info[b-pnr7pjglo2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.subject-info .name[b-pnr7pjglo2] {
    font-weight: 500;
    color: var(--op-heading-color, #566a7f);
}

.subject-info .marks[b-pnr7pjglo2] {
    font-size: 0.875rem;
    color: var(--op-body-color, #697a8d);
}

.progress-bar[b-pnr7pjglo2] {
    height: 6px;
    background: var(--op-border-color, #e4e6e8);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar .progress[b-pnr7pjglo2] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.progress-bar .progress.excellent[b-pnr7pjglo2] { background: #71dd37; }
.progress-bar .progress.good[b-pnr7pjglo2] { background: #696cff; }
.progress-bar .progress.average[b-pnr7pjglo2] { background: #ffab00; }
.progress-bar .progress.poor[b-pnr7pjglo2] { background: #ff3e1d; }

/* Assignment List */
.assignment-list[b-pnr7pjglo2] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.assignment-item[b-pnr7pjglo2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem;
}

.assignment-info[b-pnr7pjglo2] {
    display: flex;
    flex-direction: column;
}

.assignment-info .title[b-pnr7pjglo2] {
    font-weight: 500;
    color: var(--op-heading-color, #566a7f);
}

.assignment-info .subject[b-pnr7pjglo2] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

/* Book List */
.book-list[b-pnr7pjglo2] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.book-item[b-pnr7pjglo2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem;
}

.book-info[b-pnr7pjglo2] {
    display: flex;
    flex-direction: column;
}

.book-info .title[b-pnr7pjglo2] {
    font-weight: 500;
    color: var(--op-heading-color, #566a7f);
}

.book-info .author[b-pnr7pjglo2] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

/* Quick Actions */
.quick-actions-card[b-pnr7pjglo2] {
    background: var(--op-card-bg, #fff);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.quick-actions-card h5[b-pnr7pjglo2] {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
}

.actions-grid[b-pnr7pjglo2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.action-btn[b-pnr7pjglo2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--op-heading-color, #566a7f);
    transition: all 0.2s;
}

.action-btn i[b-pnr7pjglo2] {
    font-size: 1.5rem;
    color: var(--op-primary, #696cff);
}

.action-btn:hover[b-pnr7pjglo2] {
    background: var(--op-primary, #696cff);
    color: #fff;
}

.action-btn:hover i[b-pnr7pjglo2] {
    color: #fff;
}

/* Responsive */
@media (max-width: 1200px) {
    .kpi-grid[b-pnr7pjglo2] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .content-grid[b-pnr7pjglo2] {
        grid-template-columns: 1fr;
    }
    
    .actions-grid[b-pnr7pjglo2] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Dashboards/SuperAdminDashboard.razor.rz.scp.css */
/* SuperAdmin Dashboard Styles */

.dashboard-page[b-k4yy7abxnj] {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Header */
.dashboard-header[b-k4yy7abxnj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left h1[b-k4yy7abxnj] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--op-heading-color);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-left h1 i[b-k4yy7abxnj] {
    color: var(--op-primary);
}

.header-left p[b-k4yy7abxnj] {
    font-size: 0.95rem;
    color: var(--op-text-muted);
    margin: 0;
}

.header-right[b-k4yy7abxnj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-date[b-k4yy7abxnj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--op-bg-subtle);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--op-text-secondary);
}

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

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

/* Stats Grid */
.stats-grid[b-k4yy7abxnj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

@media (max-width: 1200px) {
    .stats-grid[b-k4yy7abxnj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Main Dashboard Grid */
.dashboard-grid[b-k4yy7abxnj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 1024px) {
    .dashboard-grid[b-k4yy7abxnj] {
        grid-template-columns: 1fr;
    }
}

.dashboard-column[b-k4yy7abxnj] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Activity Widget */
.activity-widget[b-k4yy7abxnj] {
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 12px;
    padding: 20px;
}

.activity-widget .widget-header[b-k4yy7abxnj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.activity-widget .widget-header h4[b-k4yy7abxnj] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.activity-widget .widget-header h4 i[b-k4yy7abxnj] {
    color: var(--op-primary);
}

.view-all-btn[b-k4yy7abxnj] {
    background: none;
    border: none;
    color: var(--op-primary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.view-all-btn:hover[b-k4yy7abxnj] {
    background: rgba(var(--op-primary-rgb), 0.1);
}

.activity-list[b-k4yy7abxnj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item[b-k4yy7abxnj] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--op-bg-subtle);
    border-radius: 8px;
}

.activity-icon[b-k4yy7abxnj] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.activity-icon.tenant[b-k4yy7abxnj] {
    background: rgba(var(--op-primary-rgb), 0.15);
    color: var(--op-primary);
}

.activity-icon.user[b-k4yy7abxnj] {
    background: rgba(var(--op-success-rgb), 0.15);
    color: var(--op-success);
}

.activity-icon.payment[b-k4yy7abxnj] {
    background: rgba(var(--op-warning-rgb), 0.15);
    color: var(--op-warning);
}

.activity-icon.alert[b-k4yy7abxnj] {
    background: rgba(var(--op-danger-rgb), 0.15);
    color: var(--op-danger);
}

.activity-icon.system[b-k4yy7abxnj] {
    background: rgba(var(--op-info-rgb), 0.15);
    color: var(--op-info);
}

.activity-content[b-k4yy7abxnj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.activity-text[b-k4yy7abxnj] {
    font-size: 0.875rem;
    color: var(--op-text-primary);
}

.activity-time[b-k4yy7abxnj] {
    font-size: 0.75rem;
    color: var(--op-text-muted);
}

/* Alerts Section */
.alerts-section[b-k4yy7abxnj] {
    margin-top: 24px;
}

.alerts-section h4[b-k4yy7abxnj] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alerts-section h4 i[b-k4yy7abxnj] {
    color: var(--op-warning);
}

.alerts-grid[b-k4yy7abxnj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alert-card[b-k4yy7abxnj] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 10px;
    border-left: 4px solid;
}

.alert-card.critical[b-k4yy7abxnj] {
    border-left-color: var(--op-danger);
}

.alert-card.warning[b-k4yy7abxnj] {
    border-left-color: var(--op-warning);
}

.alert-card.info[b-k4yy7abxnj] {
    border-left-color: var(--op-info);
}

.alert-icon[b-k4yy7abxnj] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.alert-card.critical .alert-icon[b-k4yy7abxnj] {
    background: rgba(var(--op-danger-rgb), 0.15);
    color: var(--op-danger);
}

.alert-card.warning .alert-icon[b-k4yy7abxnj] {
    background: rgba(var(--op-warning-rgb), 0.15);
    color: var(--op-warning);
}

.alert-card.info .alert-icon[b-k4yy7abxnj] {
    background: rgba(var(--op-info-rgb), 0.15);
    color: var(--op-info);
}

.alert-content[b-k4yy7abxnj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.alert-title[b-k4yy7abxnj] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--op-heading-color);
}

.alert-message[b-k4yy7abxnj] {
    font-size: 0.85rem;
    color: var(--op-text-secondary);
}

.alert-dismiss[b-k4yy7abxnj] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: var(--op-bg-subtle);
    color: var(--op-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.alert-dismiss:hover[b-k4yy7abxnj] {
    background: var(--op-danger);
    color: white;
}
/* /Components/Pages/Dashboards/SuperAdminDashboardContent.razor.rz.scp.css */
/* SuperAdmin Dashboard Content Styles */

.dashboard-page[b-pr10k6mymu] {
    max-width: 1600px;
    margin: 0 auto;
}

/* Header */
.dashboard-header[b-pr10k6mymu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left h1[b-pr10k6mymu] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--op-heading-color);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-left h1 i[b-pr10k6mymu] {
    color: var(--op-primary);
}

.header-left p[b-pr10k6mymu] {
    font-size: 0.95rem;
    color: var(--op-text-muted);
    margin: 0;
}

.header-right[b-pr10k6mymu] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-date[b-pr10k6mymu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--op-bg-subtle);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--op-text-secondary);
}

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

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

/* Stats Grid */
.stats-grid[b-pr10k6mymu] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

@media (max-width: 1200px) {
    .stats-grid[b-pr10k6mymu] {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Main Dashboard Grid */
.dashboard-grid[b-pr10k6mymu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 1024px) {
    .dashboard-grid[b-pr10k6mymu] {
        grid-template-columns: 1fr;
    }
}

.dashboard-column[b-pr10k6mymu] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Activity Widget */
.activity-widget[b-pr10k6mymu] {
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 12px;
    padding: 20px;
}

.activity-widget .widget-header[b-pr10k6mymu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.activity-widget .widget-header h4[b-pr10k6mymu] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.activity-widget .widget-header h4 i[b-pr10k6mymu] {
    color: var(--op-primary);
}

.activity-list[b-pr10k6mymu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item[b-pr10k6mymu] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--op-bg-subtle);
    border-radius: 8px;
}

.activity-icon[b-pr10k6mymu] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.activity-icon.tenant[b-pr10k6mymu] {
    background: rgba(var(--op-primary-rgb), 0.15);
    color: var(--op-primary);
}

.activity-icon.user[b-pr10k6mymu] {
    background: rgba(var(--op-success-rgb), 0.15);
    color: var(--op-success);
}

.activity-icon.system[b-pr10k6mymu] {
    background: rgba(var(--op-info-rgb), 0.15);
    color: var(--op-info);
}

.activity-content[b-pr10k6mymu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.activity-text[b-pr10k6mymu] {
    font-size: 0.875rem;
    color: var(--op-text-primary);
}

.activity-time[b-pr10k6mymu] {
    font-size: 0.75rem;
    color: var(--op-text-muted);
}

/* Alerts Section */
.alerts-section[b-pr10k6mymu] {
    margin-top: 24px;
}

.alerts-section h4[b-pr10k6mymu] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alerts-section h4 i[b-pr10k6mymu] {
    color: var(--op-warning);
}

.alerts-grid[b-pr10k6mymu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alert-card[b-pr10k6mymu] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 10px;
    border-left: 4px solid;
}

.alert-card.critical[b-pr10k6mymu] {
    border-left-color: var(--op-danger);
}

.alert-card.warning[b-pr10k6mymu] {
    border-left-color: var(--op-warning);
}

.alert-card.info[b-pr10k6mymu] {
    border-left-color: var(--op-info);
}

.alert-icon[b-pr10k6mymu] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.alert-card.critical .alert-icon[b-pr10k6mymu] {
    background: rgba(var(--op-danger-rgb), 0.15);
    color: var(--op-danger);
}

.alert-card.warning .alert-icon[b-pr10k6mymu] {
    background: rgba(var(--op-warning-rgb), 0.15);
    color: var(--op-warning);
}

.alert-card.info .alert-icon[b-pr10k6mymu] {
    background: rgba(var(--op-info-rgb), 0.15);
    color: var(--op-info);
}

.alert-content[b-pr10k6mymu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.alert-title[b-pr10k6mymu] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--op-heading-color);
}

.alert-message[b-pr10k6mymu] {
    font-size: 0.85rem;
    color: var(--op-text-secondary);
}
/* /Components/Pages/Dashboards/SuperAdminDashboardNew.razor.rz.scp.css */
/* /Components/Pages/Dashboards/TeacherDashboard.razor.rz.scp.css */
.teacher-dashboard[b-xkjvntu8v0] {
    padding: 1rem;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e9f2 100%);
    min-height: 100vh;
}

.loading-overlay[b-xkjvntu8v0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.dashboard-header[b-xkjvntu8v0] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* KPI Cards */
.kpi-card[b-xkjvntu8v0] {
    padding: 1.5rem;
    border-radius: 16px;
    color: white;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kpi-card:hover[b-xkjvntu8v0] {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}

.kpi-card .kpi-icon[b-xkjvntu8v0] {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.kpi-card .kpi-content h3[b-xkjvntu8v0] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.kpi-card .kpi-content p[b-xkjvntu8v0] {
    margin: 0.25rem 0 0.5rem;
    opacity: 0.9;
    font-size: 0.9rem;
}

.kpi-breakdown[b-xkjvntu8v0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    opacity: 0.95;
}

.kpi-primary[b-xkjvntu8v0] { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }
.kpi-success[b-xkjvntu8v0] { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); }
.kpi-info[b-xkjvntu8v0] { background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%); }
.kpi-warning[b-xkjvntu8v0] { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }

/* Mini KPIs */
.mini-kpi[b-xkjvntu8v0] {
    background: white;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.mini-kpi i[b-xkjvntu8v0] {
    font-size: 1.75rem;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f8f9fa;
}

.mini-kpi h5[b-xkjvntu8v0] {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
}

.mini-kpi small[b-xkjvntu8v0] {
    color: #6c757d;
    font-size: 0.8rem;
}

/* Cards */
.card[b-xkjvntu8v0] {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
}

.card-header[b-xkjvntu8v0] {
    border-bottom: 1px solid #f0f0f0;
    padding: 1rem 1.25rem;
}

.card-header h6[b-xkjvntu8v0] {
    font-weight: 600;
}

/* Class Cards */
.class-card[b-xkjvntu8v0] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
}

.class-card:hover[b-xkjvntu8v0] {
    border-color: #6366f1;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.15);
}

.class-card.today[b-xkjvntu8v0] {
    border-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.class-header[b-xkjvntu8v0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.class-header h5[b-xkjvntu8v0] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.subject-badge[b-xkjvntu8v0] {
    display: inline-block;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

.class-stats[b-xkjvntu8v0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.class-stats .stat-item[b-xkjvntu8v0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #4b5563;
}

.class-stats .stat-item i[b-xkjvntu8v0] {
    width: 18px;
}

.next-class[b-xkjvntu8v0] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #e5e7eb;
    font-size: 0.85rem;
    color: #6366f1;
    font-weight: 500;
}

/* Syllabus Progress */
.overall-progress .progress[b-xkjvntu8v0] {
    border-radius: 10px;
}

.stat-box[b-xkjvntu8v0] {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 10px;
}

.stat-box h4[b-xkjvntu8v0] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.stat-box.completed[b-xkjvntu8v0] { background: #dcfce7; color: #166534; }
.stat-box.in-progress[b-xkjvntu8v0] { background: #dbeafe; color: #1e40af; }
.stat-box.pending[b-xkjvntu8v0] { background: #fef3c7; color: #92400e; }

.subject-progress-list[b-xkjvntu8v0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.subject-progress-item[b-xkjvntu8v0] {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0f0f0;
}

.subject-progress-item:last-child[b-xkjvntu8v0] {
    border-bottom: none;
}

.subject-progress-item .progress[b-xkjvntu8v0] {
    margin-top: 0.5rem;
    border-radius: 6px;
}

/* Schedule Timeline */
.schedule-timeline[b-xkjvntu8v0] {
    display: flex;
    flex-direction: column;
}

.schedule-item[b-xkjvntu8v0] {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    gap: 1rem;
    transition: background 0.2s ease;
}

.schedule-item:hover[b-xkjvntu8v0] {
    background: #f8f9fa;
}

.schedule-item.current[b-xkjvntu8v0] {
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    border-left: 4px solid #10b981;
}

.schedule-item.completed[b-xkjvntu8v0] {
    opacity: 0.6;
}

.schedule-time[b-xkjvntu8v0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
}

.schedule-time .time-start[b-xkjvntu8v0] {
    font-weight: 600;
    font-size: 0.9rem;
}

.schedule-time .time-end[b-xkjvntu8v0] {
    font-size: 0.75rem;
    color: #6c757d;
}

.schedule-content[b-xkjvntu8v0] {
    flex: 1;
}

.schedule-header[b-xkjvntu8v0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.schedule-details[b-xkjvntu8v0] {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.schedule-details span[b-xkjvntu8v0] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pulse[b-xkjvntu8v0] {
    animation: pulse-b-xkjvntu8v0 1.5s infinite;
}

@keyframes pulse-b-xkjvntu8v0 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Alerts List */
.alerts-list[b-xkjvntu8v0] {
    display: flex;
    flex-direction: column;
}

.alert-item[b-xkjvntu8v0] {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    gap: 1rem;
    border-left: 4px solid transparent;
}

.alert-item.critical[b-xkjvntu8v0] {
    border-left-color: #ef4444;
    background: #fef2f2;
}

.alert-item.warning[b-xkjvntu8v0] {
    border-left-color: #f59e0b;
    background: #fffbeb;
}

.alert-icon[b-xkjvntu8v0] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.alert-item.critical .alert-icon[b-xkjvntu8v0] {
    background: #fee2e2;
    color: #dc2626;
}

.alert-item.warning .alert-icon[b-xkjvntu8v0] {
    background: #fef3c7;
    color: #d97706;
}

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

.alert-content strong[b-xkjvntu8v0] {
    font-size: 0.95rem;
}

.alert-content .class-badge[b-xkjvntu8v0] {
    font-size: 0.7rem;
    background: #e5e7eb;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
}

.alert-content p[b-xkjvntu8v0] {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.alert-action[b-xkjvntu8v0] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #6b7280;
    transition: all 0.2s ease;
}

.alert-action:hover[b-xkjvntu8v0] {
    background: #6366f1;
    color: white;
}

/* Quick Actions */
.quick-action[b-xkjvntu8v0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    background: #f8f9fa;
    border-radius: 12px;
    text-decoration: none;
    color: #495057;
    transition: all 0.3s ease;
}

.quick-action:hover[b-xkjvntu8v0] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.quick-action i[b-xkjvntu8v0] {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.quick-action span[b-xkjvntu8v0] {
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
}

/* Table Styles */
.table th[b-xkjvntu8v0] {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td[b-xkjvntu8v0] {
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 992px) {
    .kpi-card[b-xkjvntu8v0] {
        padding: 1.25rem;
    }
    
    .kpi-card .kpi-icon[b-xkjvntu8v0] {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .kpi-card .kpi-content h3[b-xkjvntu8v0] {
        font-size: 1.5rem;
    }

    .schedule-details[b-xkjvntu8v0] {
        flex-direction: column;
        gap: 0.25rem;
    }
}

@media (max-width: 768px) {
    .teacher-dashboard[b-xkjvntu8v0] {
        padding: 0.5rem;
    }
    
    .dashboard-header[b-xkjvntu8v0] {
        text-align: center;
        padding: 1rem;
    }
    
    .dashboard-header .text-end[b-xkjvntu8v0] {
        text-align: center !important;
        margin-top: 1rem;
    }
    
    .kpi-card[b-xkjvntu8v0] {
        flex-direction: column;
        text-align: center;
    }
    
    .kpi-breakdown[b-xkjvntu8v0] {
        justify-content: center;
    }
    
    .class-card[b-xkjvntu8v0] {
        padding: 1rem;
    }
    
    .quick-action[b-xkjvntu8v0] {
        padding: 1rem 0.5rem;
    }
    
    .quick-action i[b-xkjvntu8v0] {
        font-size: 1.25rem;
    }
    
    .quick-action span[b-xkjvntu8v0] {
        font-size: 0.7rem;
    }
}

/* Animations */
@keyframes fadeInUp-b-xkjvntu8v0 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kpi-card[b-xkjvntu8v0], .card[b-xkjvntu8v0], .mini-kpi[b-xkjvntu8v0], .class-card[b-xkjvntu8v0] {
    animation: fadeInUp-b-xkjvntu8v0 0.5s ease-out;
}

.row > [class*="col-"]:nth-child(1) .kpi-card[b-xkjvntu8v0] { animation-delay: 0.1s; }
.row > [class*="col-"]:nth-child(2) .kpi-card[b-xkjvntu8v0] { animation-delay: 0.2s; }
.row > [class*="col-"]:nth-child(3) .kpi-card[b-xkjvntu8v0] { animation-delay: 0.3s; }
.row > [class*="col-"]:nth-child(4) .kpi-card[b-xkjvntu8v0] { animation-delay: 0.4s; }

/* Scrollbar */
.table-responsive[b-xkjvntu8v0]::-webkit-scrollbar {
    height: 4px;
}

.table-responsive[b-xkjvntu8v0]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.table-responsive[b-xkjvntu8v0]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}
/* /Components/Pages/Dashboards/TeacherDashboardContent.razor.rz.scp.css */
.teacher-dashboard[b-scbufwecrq] {
    padding: 1.5rem;
}

.loading-container[b-scbufwecrq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* Header */
.dashboard-header[b-scbufwecrq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-content h2[b-scbufwecrq] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
    margin: 0;
}

.header-actions[b-scbufwecrq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.date-badge[b-scbufwecrq] {
    background: var(--op-card-bg, #fff);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--op-body-color, #697a8d);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* KPI Cards */
.kpi-grid[b-scbufwecrq] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.kpi-card[b-scbufwecrq] {
    background: var(--op-card-bg, #fff);
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.kpi-icon[b-scbufwecrq] {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.kpi-card.primary .kpi-icon[b-scbufwecrq] { background: rgba(105, 108, 255, 0.16); color: #696cff; }
.kpi-card.success .kpi-icon[b-scbufwecrq] { background: rgba(113, 221, 55, 0.16); color: #71dd37; }
.kpi-card.warning .kpi-icon[b-scbufwecrq] { background: rgba(255, 171, 0, 0.16); color: #ffab00; }
.kpi-card.info .kpi-icon[b-scbufwecrq] { background: rgba(3, 195, 236, 0.16); color: #03c3ec; }

.kpi-content h3[b-scbufwecrq] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
    margin: 0;
}

.kpi-content p[b-scbufwecrq] {
    font-size: 0.875rem;
    color: var(--op-body-color, #697a8d);
    margin: 0.25rem 0;
}

.kpi-sub[b-scbufwecrq] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

/* Content Grid */
.content-grid[b-scbufwecrq] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.content-card[b-scbufwecrq] {
    background: var(--op-card-bg, #fff);
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.content-card .card-header[b-scbufwecrq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--op-border-color, #e4e6e8);
}

.content-card .card-header h5[b-scbufwecrq] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
}

.content-card .card-body[b-scbufwecrq] {
    padding: 1rem 1.5rem;
}

/* Empty State */
.empty-state[b-scbufwecrq] {
    text-align: center;
    padding: 2rem;
    color: var(--op-body-color, #697a8d);
}

.empty-state i[b-scbufwecrq] {
    font-size: 2.5rem;
    opacity: 0.5;
    margin-bottom: 0.5rem;
    display: block;
}

/* Schedule List */
.schedule-list[b-scbufwecrq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.schedule-item[b-scbufwecrq] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.schedule-item.completed[b-scbufwecrq] {
    opacity: 0.6;
}

.schedule-time[b-scbufwecrq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
}

.schedule-time .time[b-scbufwecrq] {
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
}

.schedule-time .duration[b-scbufwecrq] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

.schedule-info[b-scbufwecrq] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.schedule-info .subject[b-scbufwecrq] {
    font-weight: 500;
    color: var(--op-heading-color, #566a7f);
}

.schedule-info .class-name[b-scbufwecrq] {
    font-size: 0.8125rem;
    color: var(--op-body-color, #697a8d);
}

/* Classes Grid */
.classes-grid[b-scbufwecrq] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.class-card[b-scbufwecrq] {
    padding: 1rem;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem;
}

.class-header[b-scbufwecrq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.class-header .class-name[b-scbufwecrq] {
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
}

.class-stats[b-scbufwecrq] {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.class-stats .stat[b-scbufwecrq] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

.progress-bar[b-scbufwecrq] {
    height: 4px;
    background: var(--op-border-color, #e4e6e8);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.progress-bar .progress[b-scbufwecrq] {
    height: 100%;
    background: linear-gradient(90deg, #696cff, #71dd37);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.progress-label[b-scbufwecrq] {
    font-size: 0.6875rem;
    color: var(--op-body-color, #697a8d);
}

/* Assignment List */
.assignment-list[b-scbufwecrq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.assignment-item[b-scbufwecrq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem;
}

.assignment-info[b-scbufwecrq] {
    display: flex;
    flex-direction: column;
}

.assignment-info .title[b-scbufwecrq] {
    font-weight: 500;
    color: var(--op-heading-color, #566a7f);
}

.assignment-info .class[b-scbufwecrq] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

.assignment-stats[b-scbufwecrq] {
    text-align: right;
}

.assignment-stats .pending[b-scbufwecrq] {
    font-weight: 600;
    display: block;
}

.assignment-stats .total[b-scbufwecrq] {
    font-size: 0.75rem;
    color: var(--op-body-color, #697a8d);
}

/* Alert List */
.alert-list[b-scbufwecrq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.alert-item[b-scbufwecrq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--op-body-bg, #f5f5f9);
}

.alert-item.attendance[b-scbufwecrq] { border-left: 3px solid #ff3e1d; }
.alert-item.performance[b-scbufwecrq] { border-left: 3px solid #ffab00; }
.alert-item.behavior[b-scbufwecrq] { border-left: 3px solid #696cff; }
.alert-item.fee[b-scbufwecrq] { border-left: 3px solid #03c3ec; }

.alert-icon[b-scbufwecrq] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
}

.alert-content[b-scbufwecrq] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.alert-content .student-name[b-scbufwecrq] {
    font-weight: 500;
    color: var(--op-heading-color, #566a7f);
}

.alert-content .alert-message[b-scbufwecrq] {
    font-size: 0.8125rem;
    color: var(--op-body-color, #697a8d);
}

/* Quick Actions */
.quick-actions-card[b-scbufwecrq] {
    background: var(--op-card-bg, #fff);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.quick-actions-card h5[b-scbufwecrq] {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
}

.actions-grid[b-scbufwecrq] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.action-btn[b-scbufwecrq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--op-body-bg, #f5f5f9);
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--op-heading-color, #566a7f);
    transition: all 0.2s;
}

.action-btn i[b-scbufwecrq] {
    font-size: 1.5rem;
    color: var(--op-primary, #696cff);
}

.action-btn:hover[b-scbufwecrq] {
    background: var(--op-primary, #696cff);
    color: #fff;
}

.action-btn:hover i[b-scbufwecrq] {
    color: #fff;
}

/* Responsive */
@media (max-width: 1200px) {
    .kpi-grid[b-scbufwecrq] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .actions-grid[b-scbufwecrq] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .content-grid[b-scbufwecrq] {
        grid-template-columns: 1fr;
    }
    
    .classes-grid[b-scbufwecrq] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Dashboards/TransportManagerDashboard.razor.rz.scp.css */
.transport-dashboard[b-ki4tsmg2oz] {
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    min-height: 100vh;
}

.loading-overlay[b-ki4tsmg2oz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* Dashboard Header */
.dashboard-header[b-ki4tsmg2oz] {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
    padding: 1.5rem 2rem;
    border-radius: 16px;
    color: white;
    box-shadow: 0 4px 20px rgba(2, 132, 199, 0.3);
}

.dashboard-header h2[b-ki4tsmg2oz] {
    font-weight: 700;
}

.dashboard-header .btn-group .btn.active[b-ki4tsmg2oz] {
    background: white;
    color: #0284c7;
}

/* KPI Cards */
.kpi-card[b-ki4tsmg2oz] {
    position: relative;
    padding: 1.5rem;
    border-radius: 16px;
    color: white;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transition: transform 0.3s ease;
}

.kpi-card:hover[b-ki4tsmg2oz] {
    transform: translateY(-5px);
}

.kpi-card .kpi-icon[b-ki4tsmg2oz] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.kpi-card h3[b-ki4tsmg2oz] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.kpi-card p[b-ki4tsmg2oz] {
    margin: 0.25rem 0 0.75rem;
    opacity: 0.9;
}

.kpi-badges[b-ki4tsmg2oz] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.kpi-card.fleet[b-ki4tsmg2oz] { background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%); }
.kpi-card.routes[b-ki4tsmg2oz] { background: linear-gradient(135deg, #059669 0%, #10b981 100%); }
.kpi-card.students[b-ki4tsmg2oz] { background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%); }
.kpi-card.alerts[b-ki4tsmg2oz] { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); }

/* Stat Cards */
.stat-card[b-ki4tsmg2oz] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.stat-card > i[b-ki4tsmg2oz] {
    font-size: 1.75rem;
    color: #0284c7;
}

.stat-content[b-ki4tsmg2oz] {
    flex: 1;
}

.stat-content .value[b-ki4tsmg2oz] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.stat-content .label[b-ki4tsmg2oz] {
    font-size: 0.8rem;
    color: #64748b;
}

/* Cards */
.card[b-ki4tsmg2oz] {
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}

.card-header[b-ki4tsmg2oz] {
    border-bottom: 1px solid #f0f0f0;
    padding: 1rem 1.25rem;
}

.card-header h6[b-ki4tsmg2oz] {
    font-weight: 600;
}

.bg-gradient-purple[b-ki4tsmg2oz] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

/* Map Container */
.map-container[b-ki4tsmg2oz] {
    height: 400px;
    position: relative;
}

.map-placeholder[b-ki4tsmg2oz] {
    height: 100%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

.map-placeholder i[b-ki4tsmg2oz] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.map-placeholder p[b-ki4tsmg2oz] {
    font-size: 1.25rem;
    margin: 0;
}

.vehicle-markers[b-ki4tsmg2oz] {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.vehicle-markers .marker[b-ki4tsmg2oz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #10b981;
    color: white;
    border-radius: 20px;
    font-size: 0.85rem;
    animation: pulse-b-ki4tsmg2oz 2s infinite;
}

.vehicle-markers .marker.delayed[b-ki4tsmg2oz] {
    background: #ef4444;
}

@keyframes pulse-b-ki4tsmg2oz {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Vehicles List */
.vehicles-list[b-ki4tsmg2oz] {
    max-height: 400px;
    overflow-y: auto;
}

.vehicle-item[b-ki4tsmg2oz] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s ease;
}

.vehicle-item:hover[b-ki4tsmg2oz] {
    background: #f8f9fa;
}

.vehicle-icon[b-ki4tsmg2oz] {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.vehicle-item.enroute .vehicle-icon[b-ki4tsmg2oz] { background: #dcfce7; color: #059669; }
.vehicle-item.atstop .vehicle-icon[b-ki4tsmg2oz] { background: #dbeafe; color: #2563eb; }
.vehicle-item.completed .vehicle-icon[b-ki4tsmg2oz] { background: #f1f5f9; color: #64748b; }
.vehicle-item.delayed .vehicle-icon[b-ki4tsmg2oz] { background: #fee2e2; color: #dc2626; }
.vehicle-item.idle .vehicle-icon[b-ki4tsmg2oz] { background: #fef3c7; color: #d97706; }

.vehicle-info[b-ki4tsmg2oz] {
    flex: 1;
    min-width: 0;
}

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

.vehicle-route[b-ki4tsmg2oz] {
    font-size: 0.9rem;
    color: #475569;
}

.vehicle-meta[b-ki4tsmg2oz] {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
}

.delay-badge[b-ki4tsmg2oz] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.vehicle-actions[b-ki4tsmg2oz] {
    display: flex;
    align-items: center;
}

/* Routes Table */
.table th[b-ki4tsmg2oz] {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}

.table td[b-ki4tsmg2oz] {
    vertical-align: middle;
}

/* Drivers List */
.drivers-list[b-ki4tsmg2oz] {
    max-height: 400px;
    overflow-y: auto;
}

.driver-item[b-ki4tsmg2oz] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #374151;
    align-items: center;
}

.driver-avatar[b-ki4tsmg2oz] {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #9ca3af;
}

.driver-info[b-ki4tsmg2oz] {
    flex: 1;
    min-width: 0;
    color: #e5e7eb;
}

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

.driver-header strong[b-ki4tsmg2oz] {
    color: white;
}

.driver-stats[b-ki4tsmg2oz] {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

/* Maintenance List */
.maintenance-list[b-ki4tsmg2oz] {
    max-height: 350px;
    overflow-y: auto;
}

.maintenance-item[b-ki4tsmg2oz] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    border-left: 4px solid transparent;
}

.maintenance-item.scheduled[b-ki4tsmg2oz] { border-left-color: #0ea5e9; }
.maintenance-item.inprogress[b-ki4tsmg2oz] { border-left-color: #f59e0b; }
.maintenance-item.completed[b-ki4tsmg2oz] { border-left-color: #10b981; }
.maintenance-item.overdue[b-ki4tsmg2oz] { border-left-color: #ef4444; }

.maintenance-icon[b-ki4tsmg2oz] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.maintenance-item.scheduled .maintenance-icon[b-ki4tsmg2oz] { background: #dbeafe; color: #2563eb; }
.maintenance-item.inprogress .maintenance-icon[b-ki4tsmg2oz] { background: #fef3c7; color: #d97706; }
.maintenance-item.completed .maintenance-icon[b-ki4tsmg2oz] { background: #dcfce7; color: #059669; }
.maintenance-item.overdue .maintenance-icon[b-ki4tsmg2oz] { background: #fee2e2; color: #dc2626; }

.maintenance-info[b-ki4tsmg2oz] {
    flex: 1;
    min-width: 0;
}

.maintenance-header[b-ki4tsmg2oz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.maintenance-meta[b-ki4tsmg2oz] {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #64748b;
}

/* Alerts List */
.alerts-list[b-ki4tsmg2oz] {
    max-height: 350px;
    overflow-y: auto;
}

.alert-item[b-ki4tsmg2oz] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #fee2e2;
    border-left: 4px solid transparent;
}

.alert-item.info[b-ki4tsmg2oz] { border-left-color: #0ea5e9; }
.alert-item.warning[b-ki4tsmg2oz] { border-left-color: #f59e0b; }
.alert-item.critical[b-ki4tsmg2oz] { border-left-color: #ef4444; }

.alert-item.acknowledged[b-ki4tsmg2oz] {
    opacity: 0.7;
    background: #fef2f2;
}

.alert-icon[b-ki4tsmg2oz] {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alert-item.info .alert-icon[b-ki4tsmg2oz] { background: #dbeafe; color: #2563eb; }
.alert-item.warning .alert-icon[b-ki4tsmg2oz] { background: #fef3c7; color: #d97706; }
.alert-item.critical .alert-icon[b-ki4tsmg2oz] { background: #fee2e2; color: #dc2626; }

.alert-info[b-ki4tsmg2oz] {
    flex: 1;
    min-width: 0;
}

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

.alert-header .time[b-ki4tsmg2oz] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.alert-info p[b-ki4tsmg2oz] {
    margin: 0.25rem 0;
    font-size: 0.9rem;
    color: #4b5563;
}

/* Insights */
.insight-section[b-ki4tsmg2oz] {
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.insight-section h6[b-ki4tsmg2oz] {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.insight-list[b-ki4tsmg2oz] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.insight-list li[b-ki4tsmg2oz] {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.85rem;
    color: #475569;
}

.insight-list li:last-child[b-ki4tsmg2oz] {
    border-bottom: none;
}

.insight-list.horizontal[b-ki4tsmg2oz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.insight-list.horizontal li[b-ki4tsmg2oz] {
    flex: 1 1 auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
    background: white;
}

/* Quick Actions */
.quick-actions-grid[b-ki4tsmg2oz] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.quick-action-item[b-ki4tsmg2oz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    text-decoration: none;
    color: #475569;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    text-align: center;
}

.quick-action-item:hover[b-ki4tsmg2oz] {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
    color: white;
    transform: translateY(-3px);
}

.quick-action-item i[b-ki4tsmg2oz] {
    font-size: 1.5rem;
}

.quick-action-item span[b-ki4tsmg2oz] {
    font-size: 0.8rem;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 992px) {
    .map-container[b-ki4tsmg2oz] {
        height: 300px;
    }
    
    .quick-actions-grid[b-ki4tsmg2oz] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .transport-dashboard[b-ki4tsmg2oz] {
        padding: 0.5rem;
    }
    
    .dashboard-header[b-ki4tsmg2oz] {
        text-align: center;
    }
    
    .dashboard-header .row[b-ki4tsmg2oz] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .dashboard-header .col-md-6.text-end[b-ki4tsmg2oz] {
        text-align: center !important;
    }
    
    .kpi-card[b-ki4tsmg2oz] {
        padding: 1.25rem;
    }
    
    .kpi-card h3[b-ki4tsmg2oz] {
        font-size: 1.5rem;
    }
    
    .quick-actions-grid[b-ki4tsmg2oz] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-card[b-ki4tsmg2oz] {
        flex-wrap: wrap;
    }
}

/* Animations */
@keyframes fadeInUp-b-ki4tsmg2oz {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kpi-card[b-ki4tsmg2oz], .card[b-ki4tsmg2oz], .stat-card[b-ki4tsmg2oz] {
    animation: fadeInUp-b-ki4tsmg2oz 0.5s ease-out;
}

.row > [class*="col-"]:nth-child(1) .kpi-card[b-ki4tsmg2oz] { animation-delay: 0.1s; }
.row > [class*="col-"]:nth-child(2) .kpi-card[b-ki4tsmg2oz] { animation-delay: 0.2s; }
.row > [class*="col-"]:nth-child(3) .kpi-card[b-ki4tsmg2oz] { animation-delay: 0.3s; }
.row > [class*="col-"]:nth-child(4) .kpi-card[b-ki4tsmg2oz] { animation-delay: 0.4s; }

/* Scrollbars */
.vehicles-list[b-ki4tsmg2oz]::-webkit-scrollbar,
.drivers-list[b-ki4tsmg2oz]::-webkit-scrollbar,
.maintenance-list[b-ki4tsmg2oz]::-webkit-scrollbar,
.alerts-list[b-ki4tsmg2oz]::-webkit-scrollbar {
    width: 4px;
}

.vehicles-list[b-ki4tsmg2oz]::-webkit-scrollbar-track,
.maintenance-list[b-ki4tsmg2oz]::-webkit-scrollbar-track,
.alerts-list[b-ki4tsmg2oz]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.vehicles-list[b-ki4tsmg2oz]::-webkit-scrollbar-thumb,
.maintenance-list[b-ki4tsmg2oz]::-webkit-scrollbar-thumb,
.alerts-list[b-ki4tsmg2oz]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.drivers-list[b-ki4tsmg2oz]::-webkit-scrollbar-track {
    background: #374151;
}

.drivers-list[b-ki4tsmg2oz]::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 4px;
}
/* /Components/Pages/FeesFinance/Index.razor.rz.scp.css */
.page-header[b-08d36ckhgo] {
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
}

.card[b-08d36ckhgo] {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover[b-08d36ckhgo] {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.card-footer[b-08d36ckhgo] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Monthly Chart Styles */
.monthly-chart[b-08d36ckhgo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 250px;
    padding: 1rem 0;
    gap: 0.5rem;
}

.chart-bar-container[b-08d36ckhgo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.chart-bar[b-08d36ckhgo] {
    width: 100%;
    max-width: 40px;
    background: linear-gradient(180deg, #4e73df 0%, #224abe 100%);
    border-radius: 4px 4px 0 0;
    position: relative;
    min-height: 4px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    transition: all 0.3s ease;
}

.chart-bar:hover[b-08d36ckhgo] {
    background: linear-gradient(180deg, #5a7fe0 0%, #2e5ac9 100%);
}

.chart-value[b-08d36ckhgo] {
    position: absolute;
    top: -20px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #4e73df;
    white-space: nowrap;
}

.chart-label[b-08d36ckhgo] {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: #858796;
    text-transform: uppercase;
}

/* Progress bar improvements */
.progress[b-08d36ckhgo] {
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar[b-08d36ckhgo] {
    transition: width 0.5s ease;
}

/* Table improvements */
.table-sm td[b-08d36ckhgo],
.table-sm th[b-08d36ckhgo] {
    padding: 0.5rem;
    vertical-align: middle;
}

/* List group improvements */
.list-group-item[b-08d36ckhgo] {
    border-left: none;
    border-right: none;
    padding: 0.75rem 1rem;
}

.list-group-item:first-child[b-08d36ckhgo] {
    border-top: none;
}

/* Badge improvements */
.badge[b-08d36ckhgo] {
    font-weight: 500;
    padding: 0.35em 0.65em;
}

.bg-purple[b-08d36ckhgo] {
    background-color: #6f42c1 !important;
}

/* Quick action buttons */
.btn-outline-primary:hover[b-08d36ckhgo],
.btn-outline-success:hover[b-08d36ckhgo],
.btn-outline-info:hover[b-08d36ckhgo],
.btn-outline-warning:hover[b-08d36ckhgo] {
    transform: scale(1.02);
}

/* Card with stats */
.card.bg-primary[b-08d36ckhgo],
.card.bg-success[b-08d36ckhgo],
.card.bg-warning[b-08d36ckhgo],
.card.bg-danger[b-08d36ckhgo],
.card.bg-info[b-08d36ckhgo] {
    border: none;
}

.card.bg-primary:hover[b-08d36ckhgo],
.card.bg-success:hover[b-08d36ckhgo],
.card.bg-warning:hover[b-08d36ckhgo],
.card.bg-danger:hover[b-08d36ckhgo],
.card.bg-info:hover[b-08d36ckhgo] {
    filter: brightness(1.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .page-header .btn-group[b-08d36ckhgo] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .page-header .btn-group .btn[b-08d36ckhgo] {
        flex: 1 1 auto;
        font-size: 0.75rem;
    }

    .monthly-chart[b-08d36ckhgo] {
        overflow-x: auto;
        justify-content: flex-start;
    }

    .chart-bar-container[b-08d36ckhgo] {
        min-width: 50px;
    }
}

/* Animation for loading spinner */
@keyframes fadeIn-b-08d36ckhgo {
    from { opacity: 0; }
    to { opacity: 1; }
}

.card[b-08d36ckhgo] {
    animation: fadeIn-b-08d36ckhgo 0.3s ease-in-out;
}

/* Status indicators */
.text-success[b-08d36ckhgo] {
    color: #1cc88a !important;
}

.text-warning[b-08d36ckhgo] {
    color: #f6c23e !important;
}

.text-danger[b-08d36ckhgo] {
    color: #e74a3b !important;
}

.text-info[b-08d36ckhgo] {
    color: #36b9cc !important;
}
/* /Components/Pages/HRManagement/Employees.razor.rz.scp.css */
.avatar-circle[b-jxpub3rlgy] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
}

.avatar-circle-lg[b-jxpub3rlgy] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1.5rem;
}

.employee-card[b-jxpub3rlgy] {
    transition: transform 0.2s, box-shadow 0.2s;
}

.employee-card:hover[b-jxpub3rlgy] {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.page-header[b-jxpub3rlgy] {
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}
/* /Components/Pages/HRManagement/ExitManagement.razor.rz.scp.css */
.page-header[b-zpqzt02py9] {
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.avatar-circle[b-zpqzt02py9] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
}
/* /Components/Pages/HRManagement/HRDashboard.razor.rz.scp.css */
.page-header[b-10l7qynvbm] {
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.avatar-circle[b-10l7qynvbm] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
}

.card-footer a:hover[b-10l7qynvbm] {
    text-decoration: underline !important;
}
/* /Components/Pages/HRManagement/LeaveManagement.razor.rz.scp.css */
.page-header[b-mi8ge6wo7q] {
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}
/* /Components/Pages/HRManagement/Onboarding/Queue.razor.rz.scp.css */
.stats-row[b-iwvs0ihbld] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.stat-card[b-iwvs0ihbld] {
    flex: 1;
    min-width: 140px;
    padding: 1rem 1.25rem;
    border-radius: var(--op-radius-md);
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover[b-iwvs0ihbld] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.stat-card-primary[b-iwvs0ihbld] {
    background: linear-gradient(135deg, var(--op-primary) 0%, var(--op-primary-dark, #4a5fc1) 100%);
    color: white;
}

.stat-card-info[b-iwvs0ihbld] {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
}

.stat-card-warning[b-iwvs0ihbld] {
    background: linear-gradient(135deg, var(--op-warning) 0%, #f39c12 100%);
    color: white;
}

.stat-card-success[b-iwvs0ihbld] {
    background: linear-gradient(135deg, var(--op-success) 0%, #27ae60 100%);
    color: white;
}

.stat-icon[b-iwvs0ihbld] {
    font-size: 1.75rem;
    opacity: 0.8;
}

.stat-content[b-iwvs0ihbld] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-iwvs0ihbld] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.stat-label[b-iwvs0ihbld] {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Step Filters */
.step-filters[b-iwvs0ihbld] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.step-filter-btn[b-iwvs0ihbld] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-md);
    background: var(--op-bg-card);
    color: var(--op-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.step-filter-btn:hover[b-iwvs0ihbld] {
    border-color: var(--op-primary);
    color: var(--op-primary);
}

.step-filter-btn.active[b-iwvs0ihbld] {
    background: var(--op-primary);
    border-color: var(--op-primary);
    color: white;
}

.step-filter-btn .badge[b-iwvs0ihbld] {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    font-size: 0.7rem;
}

.step-filter-btn.active .badge[b-iwvs0ihbld] {
    background: rgba(255, 255, 255, 0.3);
}

/* Workflow Grid */
.workflow-grid[b-iwvs0ihbld] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1rem;
}

.workflow-card[b-iwvs0ihbld] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.workflow-card:hover[b-iwvs0ihbld] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.workflow-header[b-iwvs0ihbld] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.employee-avatar[b-iwvs0ihbld] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--op-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}

.employee-info[b-iwvs0ihbld] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.employee-info h4[b-iwvs0ihbld] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-text);
}

.employee-id[b-iwvs0ihbld] {
    font-size: 0.8rem;
    color: var(--op-primary);
    font-weight: 500;
}

.employee-dept[b-iwvs0ihbld] {
    font-size: 0.75rem;
    color: var(--op-text-muted);
}

/* Progress Section */
.progress-section[b-iwvs0ihbld] {
    margin-bottom: 1rem;
}

.progress-header[b-iwvs0ihbld] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--op-text-muted);
    margin-bottom: 0.35rem;
}

.progress-bar[b-iwvs0ihbld] {
    height: 8px;
    background: var(--op-bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-iwvs0ihbld] {
    height: 100%;
    background: linear-gradient(90deg, var(--op-primary) 0%, var(--op-success) 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-percentage[b-iwvs0ihbld] {
    font-size: 0.75rem;
    color: var(--op-text-muted);
    display: block;
    text-align: right;
    margin-top: 0.25rem;
}

/* Current Step */
.current-step[b-iwvs0ihbld] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--op-bg-secondary);
    border-radius: var(--op-radius-sm);
    margin-bottom: 0.75rem;
}

.step-label[b-iwvs0ihbld] {
    font-size: 0.8rem;
    color: var(--op-text-muted);
}

.step-name[b-iwvs0ihbld] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--op-primary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Timeline Info */
.timeline-info[b-iwvs0ihbld] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.timeline-item[b-iwvs0ihbld] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--op-text-muted);
}

/* Hold Reason */
.hold-reason[b-iwvs0ihbld] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--op-warning-rgb, 255, 193, 7), 0.1);
    border-radius: var(--op-radius-sm);
    margin-top: 0.75rem;
    color: var(--op-warning);
    font-size: 0.8rem;
}

/* Workflow Actions */
.workflow-actions[b-iwvs0ihbld] {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
}

/* Pagination */
.op-pagination[b-iwvs0ihbld] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 0;
}

.op-pagination span[b-iwvs0ihbld] {
    font-size: 0.9rem;
    color: var(--op-text-muted);
}
/* /Components/Pages/HRManagement/Payroll.razor.rz.scp.css */
.page-header[b-b8z0eakb3d] {
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}
/* /Components/Pages/HRManagement/Performance.razor.rz.scp.css */
.page-header[b-9kh9glo095] {
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}
/* /Components/Pages/HRManagement/Recruitment/Applications/List.razor.rz.scp.css */
.stats-row[b-qp4tcbdt80] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.stat-card[b-qp4tcbdt80] {
    flex: 1;
    min-width: 180px;
    padding: 1rem 1.25rem;
    border-radius: var(--op-radius-md);
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover[b-qp4tcbdt80] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.stat-card-primary[b-qp4tcbdt80] {
    background: linear-gradient(135deg, var(--op-primary) 0%, var(--op-primary-dark, #4a5fc1) 100%);
    color: white;
}

.stat-card-warning[b-qp4tcbdt80] {
    background: linear-gradient(135deg, var(--op-warning) 0%, #f39c12 100%);
    color: white;
}

.stat-card-info[b-qp4tcbdt80] {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
}

.stat-card-success[b-qp4tcbdt80] {
    background: linear-gradient(135deg, var(--op-success) 0%, #27ae60 100%);
    color: white;
}

.stat-icon[b-qp4tcbdt80] {
    font-size: 2rem;
    opacity: 0.8;
}

.stat-content[b-qp4tcbdt80] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-qp4tcbdt80] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.stat-label[b-qp4tcbdt80] {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Candidate Info Cell */
.candidate-info[b-qp4tcbdt80] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.candidate-avatar[b-qp4tcbdt80] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--op-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.candidate-details[b-qp4tcbdt80] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.candidate-name[b-qp4tcbdt80] {
    font-weight: 600;
    color: var(--op-text);
}

.candidate-contact[b-qp4tcbdt80] {
    font-size: 0.75rem;
    color: var(--op-text-muted);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.job-title-cell[b-qp4tcbdt80] {
    display: block;
    font-weight: 500;
}

.app-number[b-qp4tcbdt80] {
    display: block;
    font-size: 0.75rem;
    color: var(--op-text-muted);
}

.text-muted[b-qp4tcbdt80] {
    color: var(--op-text-muted);
}

.small[b-qp4tcbdt80] {
    font-size: 0.75rem;
    display: block;
}

/* Action Buttons */
.action-buttons[b-qp4tcbdt80] {
    display: flex;
    gap: 0.25rem;
}

/* Pagination */
.op-pagination[b-qp4tcbdt80] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 0;
}

.op-pagination span[b-qp4tcbdt80] {
    font-size: 0.9rem;
    color: var(--op-text-muted);
}
/* /Components/Pages/HRManagement/Recruitment/JobOpenings/List.razor.rz.scp.css */
.stats-row[b-hdy9nx1nzh] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.stat-card[b-hdy9nx1nzh] {
    flex: 1;
    min-width: 180px;
    padding: 1rem 1.25rem;
    border-radius: var(--op-radius-md);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-card-primary[b-hdy9nx1nzh] {
    background: linear-gradient(135deg, var(--op-primary) 0%, var(--op-primary-dark, #4a5fc1) 100%);
    color: white;
}

.stat-card-success[b-hdy9nx1nzh] {
    background: linear-gradient(135deg, var(--op-success) 0%, #27ae60 100%);
    color: white;
}

.stat-card-warning[b-hdy9nx1nzh] {
    background: linear-gradient(135deg, var(--op-warning) 0%, #f39c12 100%);
    color: white;
}

.stat-card-secondary[b-hdy9nx1nzh] {
    background: linear-gradient(135deg, var(--op-text-muted) 0%, #6c757d 100%);
    color: white;
}

.stat-icon[b-hdy9nx1nzh] {
    font-size: 2rem;
    opacity: 0.8;
}

.stat-content[b-hdy9nx1nzh] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-hdy9nx1nzh] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.stat-label[b-hdy9nx1nzh] {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Jobs Grid */
.jobs-grid[b-hdy9nx1nzh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.job-card[b-hdy9nx1nzh] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.job-card:hover[b-hdy9nx1nzh] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.job-header[b-hdy9nx1nzh] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.job-title[b-hdy9nx1nzh] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-text);
    margin: 0;
    flex: 1;
    line-height: 1.3;
}

.job-meta[b-hdy9nx1nzh] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--op-text-muted);
}

.job-meta span[b-hdy9nx1nzh] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.job-details[b-hdy9nx1nzh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.job-detail[b-hdy9nx1nzh] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--op-text-muted);
    background: var(--op-bg-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--op-radius-sm);
}

.job-stats[b-hdy9nx1nzh] {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--op-bg-secondary);
    border-radius: var(--op-radius-sm);
    margin-bottom: 0.75rem;
}

.job-stat[b-hdy9nx1nzh] {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.job-stat .stat-number[b-hdy9nx1nzh] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--op-primary);
}

.job-stat .stat-text[b-hdy9nx1nzh] {
    font-size: 0.7rem;
    color: var(--op-text-muted);
    text-transform: uppercase;
}

.job-deadline[b-hdy9nx1nzh] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--op-warning);
}

.job-actions[b-hdy9nx1nzh] {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
}

/* Pagination */
.op-pagination[b-hdy9nx1nzh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 0;
}

.op-pagination span[b-hdy9nx1nzh] {
    font-size: 0.9rem;
    color: var(--op-text-muted);
}
/* /Components/Pages/LibraryManagement/Index.razor.rz.scp.css */
.page-header[b-cx5wospf8n] {
    padding: 1rem 0;
}

.card[b-cx5wospf8n] {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover[b-cx5wospf8n] {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.stat-card[b-cx5wospf8n] {
    border-radius: 0.5rem;
}

.card-header[b-cx5wospf8n] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-weight: 600;
}

.avatar-circle[b-cx5wospf8n] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
}

.progress[b-cx5wospf8n] {
    border-radius: 0.5rem;
    background-color: #e9ecef;
}

.progress-bar[b-cx5wospf8n] {
    border-radius: 0.5rem;
}

.btn-group .btn[b-cx5wospf8n] {
    border-radius: 0.375rem;
    margin-left: 0.25rem;
}

.btn-group .btn:first-child[b-cx5wospf8n] {
    margin-left: 0;
}

.table th[b-cx5wospf8n] {
    font-weight: 600;
    font-size: 0.85rem;
}

.table td[b-cx5wospf8n] {
    vertical-align: middle;
}

.stat-mini[b-cx5wospf8n] {
    padding: 0.5rem;
}

.stat-mini i[b-cx5wospf8n] {
    margin-bottom: 0.25rem;
}

.list-group-item[b-cx5wospf8n] {
    border-left: none;
    border-right: none;
}

.list-group-item:first-child[b-cx5wospf8n] {
    border-top: none;
}

.list-group-item:last-child[b-cx5wospf8n] {
    border-bottom: none;
}

.badge[b-cx5wospf8n] {
    font-weight: 500;
}

.card-footer a:hover[b-cx5wospf8n] {
    text-decoration: underline !important;
}
/* /Components/Pages/OnlineExamination/ExamMonitoring.razor.rz.scp.css */
.spin[b-z3nei7bdfn] {
    animation: spin-b-z3nei7bdfn 1s linear infinite;
}

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

.pulse[b-z3nei7bdfn] {
    animation: pulse-b-z3nei7bdfn 1.5s infinite;
}

@keyframes pulse-b-z3nei7bdfn {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}
/* /Components/Pages/OnlineExamination/ExamPatterns.razor.rz.scp.css */
.spin[b-p532cbrgbh] {
    animation: spin-b-p532cbrgbh 1s linear infinite;
}

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

.pattern-card[b-p532cbrgbh] {
    transition: transform 0.2s, box-shadow 0.2s;
}

.pattern-card:hover[b-p532cbrgbh] {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
/* /Components/Pages/OnlineExamination/ExamSchedules.razor.rz.scp.css */
.spin[b-3hhu1pvk18] {
    animation: spin-b-3hhu1pvk18 1s linear infinite;
}

@keyframes spin-b-3hhu1pvk18 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Components/Pages/OnlineExamination/Index.razor.rz.scp.css */
.stat-card[b-sxdoclgn5j] {
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover[b-sxdoclgn5j] {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.quick-link-card[b-sxdoclgn5j] {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.quick-link-card:hover[b-sxdoclgn5j] {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.quick-link-card:hover i[b-sxdoclgn5j] {
    transform: scale(1.1);
}

.quick-link-card i[b-sxdoclgn5j] {
    transition: transform 0.2s;
}

.text-purple[b-sxdoclgn5j] {
    color: #6f42c1 !important;
}

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

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

.progress[b-sxdoclgn5j] {
    background-color: #e9ecef;
    border-radius: 0.5rem;
}

.progress-bar[b-sxdoclgn5j] {
    border-radius: 0.5rem;
}
/* /Components/Pages/OnlineExamination/PaperGeneration.razor.rz.scp.css */
.spin[b-h3b0wv5rc5] {
    animation: spin-b-h3b0wv5rc5 1s linear infinite;
}

@keyframes spin-b-h3b0wv5rc5 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Components/Pages/OnlineExamination/QuestionBank.razor.rz.scp.css */
.spin[b-e7sggpam6n] {
    animation: spin-b-e7sggpam6n 1s linear infinite;
}

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

.table-hover tbody tr:hover[b-e7sggpam6n] {
    background-color: rgba(0, 123, 255, 0.05);
}

.btn-group-sm > .btn[b-e7sggpam6n] {
    padding: 0.25rem 0.5rem;
}
/* /Components/Pages/OnlineExamination/ResultsAnalytics.razor.rz.scp.css */
.spin[b-snj8f98c4a] {
    animation: spin-b-snj8f98c4a 1s linear infinite;
}

@keyframes spin-b-snj8f98c4a {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Components/Pages/StudentManagement/Index.razor.rz.scp.css */
.page-header[b-wgtxjo8jw4] {
    padding: 1rem 0;
}

.card[b-wgtxjo8jw4] {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover[b-wgtxjo8jw4] {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.card-header[b-wgtxjo8jw4] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-weight: 600;
}

.avatar-circle[b-wgtxjo8jw4] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.progress[b-wgtxjo8jw4] {
    border-radius: 0.5rem;
    background-color: #e9ecef;
}

.progress-bar[b-wgtxjo8jw4] {
    border-radius: 0.5rem;
}

.btn-group .btn[b-wgtxjo8jw4] {
    border-radius: 0.375rem;
    margin-left: 0.25rem;
}

.btn-group .btn:first-child[b-wgtxjo8jw4] {
    margin-left: 0;
}

.table th[b-wgtxjo8jw4] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table td[b-wgtxjo8jw4] {
    vertical-align: middle;
}

.badge[b-wgtxjo8jw4] {
    font-weight: 500;
    padding: 0.4em 0.8em;
}

.nav-section-header[b-wgtxjo8jw4] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    pointer-events: none;
}

/* Quick Action Cards */
.btn-outline-primary.py-3[b-wgtxjo8jw4],
.btn-outline-success.py-3[b-wgtxjo8jw4],
.btn-outline-info.py-3[b-wgtxjo8jw4],
.btn-outline-warning.py-3[b-wgtxjo8jw4] {
    transition: all 0.2s;
}

.btn-outline-primary.py-3:hover[b-wgtxjo8jw4],
.btn-outline-success.py-3:hover[b-wgtxjo8jw4],
.btn-outline-info.py-3:hover[b-wgtxjo8jw4],
.btn-outline-warning.py-3:hover[b-wgtxjo8jw4] {
    transform: translateY(-2px);
}

/* Stats Cards */
.card.bg-primary[b-wgtxjo8jw4],
.card.bg-success[b-wgtxjo8jw4],
.card.bg-warning[b-wgtxjo8jw4],
.card.bg-info[b-wgtxjo8jw4] {
    border-radius: 0.75rem;
}

.card.bg-primary .card-body[b-wgtxjo8jw4],
.card.bg-success .card-body[b-wgtxjo8jw4],
.card.bg-warning .card-body[b-wgtxjo8jw4],
.card.bg-info .card-body[b-wgtxjo8jw4] {
    padding: 1.25rem;
}

.card-footer.bg-transparent[b-wgtxjo8jw4] {
    padding: 0.75rem 1.25rem;
}

/* Gender Distribution */
.rounded-circle.bg-light[b-wgtxjo8jw4] {
    background-color: #f8f9fa !important;
}

/* Table Styling */
.table-responsive[b-wgtxjo8jw4] {
    border-radius: 0 0 0.5rem 0.5rem;
    overflow: hidden;
}

.table-hover tbody tr:hover[b-wgtxjo8jw4] {
    background-color: rgba(0, 123, 255, 0.05);
}

/* Loading State */
.spinner-border[b-wgtxjo8jw4] {
    width: 3rem;
    height: 3rem;
}
/* /Components/Pages/StudyTracking/Index.razor.rz.scp.css */
.stat-icon[b-1h71dm4isr] {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

.card[b-1h71dm4isr] {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover[b-1h71dm4isr] {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.page-header[b-1h71dm4isr] {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 1rem;
}

.list-group-item[b-1h71dm4isr] {
    transition: background-color 0.15s ease-in-out;
}

.list-group-item:hover[b-1h71dm4isr] {
    background-color: #f8f9fa;
}

.progress[b-1h71dm4isr] {
    border-radius: 10px;
}

.progress-bar[b-1h71dm4isr] {
    border-radius: 10px;
}

.table th[b-1h71dm4isr] {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-footer[b-1h71dm4isr] {
    padding: 0.75rem 1rem;
}

.bg-primary-subtle[b-1h71dm4isr] {
    background-color: rgba(13, 110, 253, 0.1) !important;
}

.bg-success-subtle[b-1h71dm4isr] {
    background-color: rgba(25, 135, 84, 0.1) !important;
}

.bg-info-subtle[b-1h71dm4isr] {
    background-color: rgba(13, 202, 240, 0.1) !important;
}

.bg-warning-subtle[b-1h71dm4isr] {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

.bg-danger-subtle[b-1h71dm4isr] {
    background-color: rgba(220, 53, 69, 0.1) !important;
}
/* /Components/Pages/Subscriptions/Components/ModuleItem.razor.rz.scp.css */
/* Module Item Styles */
.module-item[b-sf81yhma0y] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--op-card-bg, #ffffff);
    border: 1px solid var(--op-border-color, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.module-item:hover[b-sf81yhma0y] {
    background: var(--op-bg-hover, #f8fafc);
    border-color: var(--op-primary, #6366f1);
}

.module-item.selected[b-sf81yhma0y] {
    background: rgba(var(--op-primary-rgb, 105, 108, 255), 0.1);
    border-color: var(--op-primary, #6366f1);
}

.module-item-icon[b-sf81yhma0y] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--op-primary, #6366f1), var(--op-primary-hover, #818cf8));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.module-item-icon i[b-sf81yhma0y] {
    font-size: 1.125rem;
    color: #ffffff;
}

.module-item-content[b-sf81yhma0y] {
    flex: 1;
    min-width: 0;
}

.module-item-name[b-sf81yhma0y] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--op-heading-color, #1e293b);
    margin-bottom: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.module-item-key[b-sf81yhma0y] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--op-muted-color, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.module-item input[type="checkbox"][b-sf81yhma0y] {
    width: 18px;
    height: 18px;
    accent-color: var(--op-primary, #6366f1);
    cursor: pointer;
}

.module-item .action-buttons[b-sf81yhma0y] {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.module-item:hover .action-buttons[b-sf81yhma0y] {
    opacity: 1;
}

/* Dark mode is handled via CSS variables from app.css */
/* /Components/Pages/Subscriptions/Components/PlanCard.razor.rz.scp.css */
/* Plan Card Styles */
.plan-card[b-q25n2qvnb2] {
    background: var(--op-card-bg, #ffffff);
    border: 1px solid var(--op-border-color, #e2e8f0);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.plan-card:hover[b-q25n2qvnb2] {
    transform: translateY(-4px);
    box-shadow: var(--op-shadow-lg, 0 12px 24px rgba(0, 0, 0, 0.1));
    border-color: var(--op-primary, #6366f1);
}

.plan-card.featured[b-q25n2qvnb2] {
    border: 2px solid var(--op-primary, #6366f1);
    position: relative;
    background: linear-gradient(135deg, rgba(var(--op-primary-rgb, 105, 108, 255), 0.08) 0%, rgba(var(--op-primary-rgb, 105, 108, 255), 0.02) 100%);
}

.plan-card.featured[b-q25n2qvnb2]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--op-primary, #6366f1), var(--op-primary-hover, #818cf8));
    border-radius: 10px 10px 0 0;
}

.plan-header[b-q25n2qvnb2] {
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--op-border-color, #e2e8f0);
    margin-bottom: 1rem;
}

.plan-name[b-q25n2qvnb2] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--op-heading-color, #1e293b);
    margin-bottom: 0.5rem;
}

.plan-price[b-q25n2qvnb2] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--op-primary, #6366f1);
    line-height: 1.2;
}

.plan-price-period[b-q25n2qvnb2] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--op-muted-color, #94a3b8);
}

.plan-features[b-q25n2qvnb2] {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    flex: 1;
}

.plan-features li[b-q25n2qvnb2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--op-body-color, #475569);
    border-bottom: 1px dashed var(--op-border-light, #e2e8f0);
}

.plan-features li:last-child[b-q25n2qvnb2] {
    border-bottom: none;
}

.plan-features li i[b-q25n2qvnb2] {
    color: var(--op-success, #22c55e);
    font-size: 1rem;
    flex-shrink: 0;
}

.plan-features li span[b-q25n2qvnb2] {
    flex: 1;
}

/* Dark mode is automatically handled via CSS variables from app.css */
/* These are kept for backward compatibility but CSS variables should handle most cases */
/* /Components/Pages/Subscriptions/Components/ProductCard.razor.rz.scp.css */
/* Product Card Styles */
.product-card[b-urj0rc6wjh] {
    background: var(--op-card-bg, #ffffff);
    border: 1px solid var(--op-border-color, #e2e8f0);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card:hover[b-urj0rc6wjh] {
    transform: translateY(-2px);
    box-shadow: var(--op-shadow-md, 0 8px 16px rgba(0, 0, 0, 0.08));
    border-color: var(--op-primary, #6366f1);
}

.product-header[b-urj0rc6wjh] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.product-icon[b-urj0rc6wjh] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--op-primary, #6366f1), var(--op-primary-hover, #818cf8));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.product-icon i[b-urj0rc6wjh] {
    font-size: 1.25rem;
    color: #ffffff;
}

.product-info[b-urj0rc6wjh] {
    flex: 1;
    min-width: 0;
}

.product-name[b-urj0rc6wjh] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color, #1e293b);
    margin-bottom: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-key[b-urj0rc6wjh] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--op-muted-color, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-description[b-urj0rc6wjh] {
    font-size: 0.875rem;
    color: var(--op-body-color, #475569);
    line-height: 1.5;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-modules[b-urj0rc6wjh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.product-module-tag[b-urj0rc6wjh] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--op-bg-secondary, #f1f5f9);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--op-body-color, #475569);
}

.product-module-tag i[b-urj0rc6wjh] {
    color: var(--op-success, #22c55e);
    font-size: 0.75rem;
}

/* Dark mode is handled via CSS variables from app.css */
/* /Components/Pages/Subscriptions/Plans/Form.razor.rz.scp.css */
/* ==========================================================================
   Subscription Plan Form Styles
   ========================================================================== */

.form-section[b-xtyt87cifo] {
    background: var(--op-bg-primary, #fff);
    border: 1px solid var(--op-border, #e4e6e8);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-section-title[b-xtyt87cifo] {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--op-heading-color, #566a7f);
}

.form-section-title i[b-xtyt87cifo] {
    color: var(--op-primary, #696cff);
}

/* Module Selection */
.module-selector[b-xtyt87cifo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.module-item[b-xtyt87cifo] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--op-border, #e4e6e8);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--op-bg-primary, #fff);
}

.module-item:hover[b-xtyt87cifo] {
    border-color: var(--op-primary, #696cff);
    background: var(--op-primary-light, rgba(105, 108, 255, 0.04));
}

.module-item.selected[b-xtyt87cifo] {
    border-color: var(--op-primary, #696cff);
    background: var(--op-primary-light, rgba(105, 108, 255, 0.08));
    box-shadow: 0 0 0 1px var(--op-primary, #696cff);
}

.module-item input[type="checkbox"][b-xtyt87cifo] {
    margin-top: 0.125rem;
    accent-color: var(--op-primary, #696cff);
    width: 18px;
    height: 18px;
}

.module-info[b-xtyt87cifo] {
    flex: 1;
}

.module-name[b-xtyt87cifo] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--op-heading-color, #566a7f);
    margin-bottom: 0.25rem;
}

.module-description[b-xtyt87cifo] {
    font-size: 0.8125rem;
    color: var(--op-text-muted, #a1acb8);
    line-height: 1.4;
}

/* Feature List */
.feature-list[b-xtyt87cifo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feature-item[b-xtyt87cifo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--op-bg-secondary, #f8f9fa);
    border-radius: 6px;
}

.feature-item i[b-xtyt87cifo] {
    color: var(--op-success, #71dd37);
}

.feature-item span[b-xtyt87cifo] {
    font-size: 0.875rem;
    color: var(--op-body-color, #697a8d);
}

/* Preview Section */
.preview-section[b-xtyt87cifo] {
    position: sticky;
    top: 1.5rem;
}

.plan-preview[b-xtyt87cifo] {
    text-align: center;
    padding: 2rem 1.5rem;
}

.preview-icon[b-xtyt87cifo] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--op-primary, #696cff) 0%, #8183ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: #fff;
    box-shadow: 0 8px 24px rgba(105, 108, 255, 0.3);
}

.preview-name[b-xtyt87cifo] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--op-heading-color, #566a7f);
    margin-bottom: 0.5rem;
}

.preview-price[b-xtyt87cifo] {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--op-primary, #696cff);
    margin-bottom: 0.25rem;
}

.preview-billing[b-xtyt87cifo] {
    font-size: 0.875rem;
    color: var(--op-text-muted, #a1acb8);
    margin-bottom: 1.5rem;
}

.preview-modules[b-xtyt87cifo] {
    text-align: left;
    padding-top: 1rem;
    border-top: 1px solid var(--op-border, #e4e6e8);
}

.preview-modules-title[b-xtyt87cifo] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--op-text-muted, #a1acb8);
    margin-bottom: 0.75rem;
}

/* Form Actions */
.form-actions[b-xtyt87cifo] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--op-border, #e4e6e8);
    margin-top: 1.5rem;
}
/* /Components/Pages/Support/SupportTickets.razor.rz.scp.css */
.op-kpi-grid[b-gzbxnyqsqh] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.op-filter-card[b-gzbxnyqsqh] {
    background: var(--op-surface, #fff);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--op-border-light, #F1F5F9);
}

.op-filter-row[b-gzbxnyqsqh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.op-filter-group[b-gzbxnyqsqh] {
    flex: 1;
    min-width: 150px;
}

.op-filter-actions[b-gzbxnyqsqh] {
    display: flex;
    gap: 0.5rem;
}

.op-input[b-gzbxnyqsqh],
.op-select[b-gzbxnyqsqh] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--op-border, #E2E8F0);
    border-radius: 8px;
    font-size: 0.875rem;
    background: var(--op-surface, #fff);
    color: var(--op-text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.op-input:focus[b-gzbxnyqsqh],
.op-select:focus[b-gzbxnyqsqh] {
    outline: none;
    border-color: var(--op-primary, #1EA7FD);
    box-shadow: 0 0 0 3px rgba(30, 167, 253, 0.1);
}

.row-highlight[b-gzbxnyqsqh] {
    background: rgba(239, 68, 68, 0.05) !important;
}

.op-link-primary[b-gzbxnyqsqh] {
    color: var(--op-primary, #1EA7FD);
    text-decoration: none;
    font-weight: 500;
}

.op-link-primary:hover[b-gzbxnyqsqh] {
    text-decoration: underline;
}

.op-text-muted[b-gzbxnyqsqh] {
    color: var(--op-text-muted, #94A3B8);
}

.op-text-sm[b-gzbxnyqsqh] {
    font-size: 0.8125rem;
}

/* Buttons */
.op-btn[b-gzbxnyqsqh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.op-btn-sm[b-gzbxnyqsqh] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.op-btn-primary[b-gzbxnyqsqh] {
    background: var(--op-primary, #1EA7FD);
    color: #fff;
}

.op-btn-primary:hover[b-gzbxnyqsqh] {
    background: var(--op-primary-dark, #0F4C81);
}

.op-btn-secondary[b-gzbxnyqsqh] {
    background: var(--op-surface, #fff);
    color: var(--op-text-primary);
    border: 1px solid var(--op-border, #E2E8F0);
}

.op-btn-secondary:hover[b-gzbxnyqsqh] {
    background: var(--op-bg, #F8FAFC);
}

.op-btn-ghost[b-gzbxnyqsqh] {
    background: transparent;
    color: var(--op-text-secondary);
}

.op-btn-ghost:hover[b-gzbxnyqsqh] {
    background: var(--op-bg, #F8FAFC);
    color: var(--op-primary);
}

/* Badges */
.op-badge[b-gzbxnyqsqh] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.op-badge-primary[b-gzbxnyqsqh] {
    background: rgba(30, 167, 253, 0.1);
    color: var(--op-primary, #1EA7FD);
}

.op-badge-success[b-gzbxnyqsqh] {
    background: rgba(34, 197, 94, 0.1);
    color: var(--op-success, #22C55E);
}

.op-badge-warning[b-gzbxnyqsqh] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--op-warning, #F59E0B);
}

.op-badge-error[b-gzbxnyqsqh] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--op-error, #EF4444);
}

.op-badge-info[b-gzbxnyqsqh] {
    background: rgba(0, 198, 255, 0.1);
    color: var(--op-info, #00C6FF);
}

.op-badge-secondary[b-gzbxnyqsqh] {
    background: var(--op-bg, #F8FAFC);
    color: var(--op-text-secondary, #64748B);
}

@media (max-width: 1200px) {
    .op-kpi-grid[b-gzbxnyqsqh] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .op-kpi-grid[b-gzbxnyqsqh] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .op-filter-row[b-gzbxnyqsqh] {
        flex-direction: column;
    }
    
    .op-filter-group[b-gzbxnyqsqh] {
        width: 100%;
    }
}
/* /Components/Pages/SyllabusTracking/Index.razor.rz.scp.css */
.page-header[b-ykw2pks1ks] {
    padding: 1rem 0;
}

.stat-icon[b-ykw2pks1ks] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card[b-ykw2pks1ks] {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover[b-ykw2pks1ks] {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.progress[b-ykw2pks1ks] {
    border-radius: 10px;
    background-color: #e9ecef;
}

.progress-bar[b-ykw2pks1ks] {
    border-radius: 10px;
    transition: width 0.6s ease;
}

.badge.rounded-circle[b-ykw2pks1ks] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-group-item-action:hover[b-ykw2pks1ks] {
    background-color: #f8f9fa;
}

.btn-group .btn[b-ykw2pks1ks] {
    border-radius: 0;
}

.btn-group .btn:first-child[b-ykw2pks1ks] {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.btn-group .btn:last-child[b-ykw2pks1ks] {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

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

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

.table th[b-ykw2pks1ks] {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
}

.table td[b-ykw2pks1ks] {
    vertical-align: middle;
}

.bg-primary-subtle[b-ykw2pks1ks] {
    background-color: rgba(13, 110, 253, 0.1) !important;
}

.bg-success-subtle[b-ykw2pks1ks] {
    background-color: rgba(25, 135, 84, 0.1) !important;
}

.bg-danger-subtle[b-ykw2pks1ks] {
    background-color: rgba(220, 53, 69, 0.1) !important;
}

.bg-warning-subtle[b-ykw2pks1ks] {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

.bg-info-subtle[b-ykw2pks1ks] {
    background-color: rgba(13, 202, 240, 0.1) !important;
}

.bg-secondary-subtle[b-ykw2pks1ks] {
    background-color: rgba(108, 117, 125, 0.1) !important;
}

.text-primary[b-ykw2pks1ks] {
    color: #0d6efd !important;
}

.text-success[b-ykw2pks1ks] {
    color: #198754 !important;
}

.text-danger[b-ykw2pks1ks] {
    color: #dc3545 !important;
}

.text-warning[b-ykw2pks1ks] {
    color: #ffc107 !important;
}

.text-info[b-ykw2pks1ks] {
    color: #0dcaf0 !important;
}

.quick-action-btn[b-ykw2pks1ks] {
    transition: all 0.3s ease;
}

.quick-action-btn:hover[b-ykw2pks1ks] {
    transform: scale(1.02);
}

.alert-item[b-ykw2pks1ks] {
    border-left: 3px solid;
}

.alert-item.critical[b-ykw2pks1ks] {
    border-left-color: #dc3545;
}

.alert-item.high[b-ykw2pks1ks] {
    border-left-color: #ffc107;
}

.alert-item.medium[b-ykw2pks1ks] {
    border-left-color: #0dcaf0;
}

.alert-item.low[b-ykw2pks1ks] {
    border-left-color: #6c757d;
}

.card-footer[b-ykw2pks1ks] {
    background-color: transparent;
    padding-top: 0;
}

.text-white-50[b-ykw2pks1ks] {
    color: rgba(255, 255, 255, 0.5) !important;
}

.fs-1[b-ykw2pks1ks] {
    font-size: 2.5rem !important;
}

.opacity-50[b-ykw2pks1ks] {
    opacity: 0.5 !important;
}
/* /Components/Pages/SystemSetup/Branches/List.razor.rz.scp.css */
.op-page[b-yvn24cu6sz] {
    max-width: 1600px;
    margin: 0 auto;
}

/* Filters */
.op-filters[b-yvn24cu6sz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-group[b-yvn24cu6sz] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-item[b-yvn24cu6sz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-item label[b-yvn24cu6sz] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--op-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-item.search[b-yvn24cu6sz] {
    min-width: 280px;
}

.search-input[b-yvn24cu6sz] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input i[b-yvn24cu6sz] {
    position: absolute;
    left: 12px;
    color: var(--op-text-muted);
    z-index: 1;
}

.search-input input[b-yvn24cu6sz] {
    padding: 0.5rem 2rem 0.5rem 2.25rem;
    width: 100%;
    font-size: 0.9375rem;
    color: var(--op-heading-color);
    background-color: var(--op-card-bg);
    border: 1px solid var(--op-border-color);
    border-radius: var(--op-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.search-input input:focus[b-yvn24cu6sz] {
    border-color: var(--op-primary);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--op-primary-rgb), 0.15);
}

.search-input input[b-yvn24cu6sz]::placeholder {
    color: var(--op-muted-color);
}

.search-input .clear-btn[b-yvn24cu6sz] {
    position: absolute;
    right: 8px;
    width: 20px;
    height: 20px;
    border: none;
    background: var(--op-bg-muted);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--op-text-secondary);
}

/* Data Table */
.op-data-table[b-yvn24cu6sz] {
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 12px;
    overflow: hidden;
}

.op-data-table table[b-yvn24cu6sz] {
    width: 100%;
    border-collapse: collapse;
}

.op-data-table thead[b-yvn24cu6sz] {
    background: var(--op-bg-subtle);
}

.op-data-table th[b-yvn24cu6sz] {
    padding: 12px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--op-text-secondary);
    text-align: left;
    border-bottom: 1px solid var(--op-border-light);
}

.op-data-table th.sortable[b-yvn24cu6sz] {
    cursor: pointer;
    user-select: none;
}

.op-data-table th.sortable:hover[b-yvn24cu6sz] {
    color: var(--op-primary);
}

.op-data-table th.sort-asc[b-yvn24cu6sz]::after {
    content: ' ↑';
}

.op-data-table th.sort-desc[b-yvn24cu6sz]::after {
    content: ' ↓';
}

.op-data-table th.actions[b-yvn24cu6sz] {
    width: 100px;
    text-align: center;
}

.op-data-table td[b-yvn24cu6sz] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--op-border-light);
    vertical-align: middle;
}

.op-data-table tbody tr:last-child td[b-yvn24cu6sz] {
    border-bottom: none;
}

.op-data-table tbody tr.clickable[b-yvn24cu6sz] {
    cursor: pointer;
}

.op-data-table tbody tr:hover[b-yvn24cu6sz] {
    background: var(--op-bg-hover);
}

.cell-primary[b-yvn24cu6sz] {
    font-weight: 500;
    color: var(--op-text-primary);
}

.code-badge[b-yvn24cu6sz] {
    background: var(--op-bg-muted);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: monospace;
}

.tenant-badge[b-yvn24cu6sz] {
    background: rgba(79, 70, 229, 0.1);
    color: var(--op-primary);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.status-badge[b-yvn24cu6sz] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.active[b-yvn24cu6sz] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--op-success);
}

.status-badge.inactive[b-yvn24cu6sz] {
    background: var(--op-bg-muted);
    color: var(--op-text-muted);
}

.contact-info[b-yvn24cu6sz],
.location-info[b-yvn24cu6sz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.85rem;
    color: var(--op-text-secondary);
}

.contact-info i[b-yvn24cu6sz],
.location-info i[b-yvn24cu6sz] {
    margin-right: 4px;
    font-size: 0.75rem;
}

.action-buttons[b-yvn24cu6sz] {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.action-btn[b-yvn24cu6sz] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--op-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.action-btn:hover[b-yvn24cu6sz] {
    background: var(--op-primary);
    color: white;
}

.action-btn.danger:hover[b-yvn24cu6sz] {
    background: var(--op-error);
}

/* Data Grid */
.op-data-grid[b-yvn24cu6sz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.grid-card[b-yvn24cu6sz] {
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

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

.grid-card .card-header[b-yvn24cu6sz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.grid-card .card-icon[b-yvn24cu6sz] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--op-primary), #7C3AED);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
}

.grid-card .card-body[b-yvn24cu6sz] {
    margin-bottom: 12px;
}

.grid-card .card-body h4[b-yvn24cu6sz] {
    margin: 8px 0 4px;
    font-size: 1rem;
    font-weight: 600;
}

.grid-card .card-footer[b-yvn24cu6sz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--op-border-light);
}

.grid-card .card-meta[b-yvn24cu6sz] {
    font-size: 0.8rem;
    color: var(--op-text-secondary);
}

.grid-card .card-meta i[b-yvn24cu6sz] {
    margin-right: 4px;
}

.grid-card .card-actions[b-yvn24cu6sz] {
    display: flex;
    gap: 4px;
}

/* Empty State */
.op-empty-state[b-yvn24cu6sz] {
    text-align: center;
    padding: 80px 24px;
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 12px;
}

.op-empty-state .empty-icon[b-yvn24cu6sz] {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: var(--op-bg-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--op-text-muted);
}

.op-empty-state h3[b-yvn24cu6sz] {
    margin: 0 0 8px;
    font-size: 1.25rem;
    color: var(--op-text-primary);
}

.op-empty-state p[b-yvn24cu6sz] {
    margin: 0 0 24px;
    color: var(--op-text-secondary);
}

/* Skeleton Loading */
.op-skeleton-container[b-yvn24cu6sz] {
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 12px;
    padding: 16px;
}

.skeleton-row[b-yvn24cu6sz] {
    display: flex;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--op-border-light);
    animation: pulse-b-yvn24cu6sz 1.5s infinite;
}

.skeleton-row:last-child[b-yvn24cu6sz] {
    border-bottom: none;
}

.skeleton-cell[b-yvn24cu6sz] {
    height: 20px;
    background: var(--op-bg-muted);
    border-radius: 4px;
}

.skeleton-cell[b-yvn24cu6sz] { width: 80px; }
.skeleton-cell.sm[b-yvn24cu6sz] { width: 60px; }
.skeleton-cell.md[b-yvn24cu6sz] { width: 120px; }
.skeleton-cell.lg[b-yvn24cu6sz] { flex: 1; }
.skeleton-cell.xs[b-yvn24cu6sz] { width: 40px; }

@keyframes pulse-b-yvn24cu6sz {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Responsive */
@media (max-width: 768px) {
    .op-page[b-yvn24cu6sz] {
        padding: 16px;
    }
    
    .op-filters[b-yvn24cu6sz] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group[b-yvn24cu6sz] {
        flex-direction: column;
    }
    
    .filter-item.search[b-yvn24cu6sz] {
        min-width: auto;
    }
    
    .op-data-grid[b-yvn24cu6sz] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/SystemSetup/Dashboard.razor.rz.scp.css */
/* ==========================================================================
   System Setup Dashboard Styles
   ========================================================================== */

/* Progress Overview Section */
.progress-overview-section[b-9460bedukf] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    padding: 2rem;
    background: var(--op-bg-primary);
    border: 1px solid var(--op-border);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.progress-main[b-9460bedukf] {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.progress-circle-large[b-9460bedukf] {
    position: relative;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.progress-circle-large svg[b-9460bedukf] {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.progress-circle-large circle[b-9460bedukf] {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
}

.progress-circle-large circle.bg[b-9460bedukf] {
    stroke: var(--op-border);
}

.progress-circle-large circle.progress[b-9460bedukf] {
    stroke: url(#progressGradient);
    stroke: var(--op-primary);
    transition: stroke-dasharray 0.5s ease;
}

.progress-circle-large .percentage[b-9460bedukf] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 700;
    color: var(--op-primary);
}

.progress-details h2[b-9460bedukf] {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--op-heading-color);
}

.progress-details p[b-9460bedukf] {
    margin: 0;
    color: var(--op-text-secondary);
}

.current-step-info[b-9460bedukf] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--op-primary-rgb), 0.1);
    border-radius: 8px;
}

.current-step-info .label[b-9460bedukf] {
    font-size: 0.75rem;
    color: var(--op-text-secondary);
    display: block;
}

.current-step-info .value[b-9460bedukf] {
    font-weight: 600;
    color: var(--op-primary);
}

.progress-stats[b-9460bedukf] {
    display: flex;
    gap: 1.5rem;
}

.stat-item[b-9460bedukf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--op-bg-secondary);
    border-radius: 8px;
    min-width: 100px;
}

.stat-item i[b-9460bedukf] {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.stat-item.completed i[b-9460bedukf] {
    color: var(--op-success);
}

.stat-item.pending i[b-9460bedukf] {
    color: var(--op-primary);
}

.stat-item.skipped i[b-9460bedukf] {
    color: var(--op-warning);
}

.stat-value[b-9460bedukf] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--op-heading-color);
}

.stat-label[b-9460bedukf] {
    font-size: 0.75rem;
    color: var(--op-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Steps Section */
.steps-section[b-9460bedukf] {
    margin-bottom: 1.5rem;
}

.steps-section h3[b-9460bedukf] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--op-heading-color);
}

.steps-grid[b-9460bedukf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.step-card[b-9460bedukf] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--op-bg-primary);
    border: 1px solid var(--op-border);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.step-card:hover[b-9460bedukf] {
    border-color: var(--op-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.step-card.completed[b-9460bedukf] {
    border-left: 3px solid var(--op-success);
}

.step-card.inprogress[b-9460bedukf] {
    border-left: 3px solid var(--op-primary);
    background: rgba(var(--op-primary-rgb), 0.02);
}

.step-card.skipped[b-9460bedukf] {
    border-left: 3px solid var(--op-warning);
    opacity: 0.8;
}

.step-card.pending[b-9460bedukf] {
    border-left: 3px solid var(--op-border);
}

.step-icon[b-9460bedukf] {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--op-bg-secondary);
}

.step-card.completed .step-icon[b-9460bedukf] {
    color: var(--op-success);
    background: rgba(var(--op-success-rgb), 0.1);
}

.step-card.inprogress .step-icon[b-9460bedukf] {
    color: var(--op-primary);
    background: rgba(var(--op-primary-rgb), 0.1);
}

.step-card.skipped .step-icon[b-9460bedukf] {
    color: var(--op-warning);
    background: rgba(var(--op-warning-rgb), 0.1);
}

.step-card.pending .step-icon[b-9460bedukf] {
    color: var(--op-text-tertiary);
}

.step-content[b-9460bedukf] {
    flex: 1;
}

.step-number[b-9460bedukf] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--op-text-tertiary);
    font-weight: 600;
}

.step-content h4[b-9460bedukf] {
    margin: 0.125rem 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--op-heading-color);
}

.step-content p[b-9460bedukf] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--op-text-secondary);
}

.step-badges[b-9460bedukf] {
    display: flex;
    gap: 0.5rem;
}

.step-action[b-9460bedukf] {
    flex-shrink: 0;
    align-self: center;
}

/* Quick Access Section */
.quick-access-section h3[b-9460bedukf] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--op-heading-color);
}

.modules-grid[b-9460bedukf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.module-card[b-9460bedukf] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--op-bg-primary);
    border: 1px solid var(--op-border);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.module-card:hover[b-9460bedukf] {
    border-color: var(--op-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.module-icon[b-9460bedukf] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.module-icon i[b-9460bedukf] {
    font-size: 1.25rem;
    color: white;
}

.module-info[b-9460bedukf] {
    flex: 1;
}

.module-info h4[b-9460bedukf] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--op-heading-color);
}

.module-info p[b-9460bedukf] {
    margin: 0.125rem 0 0;
    font-size: 0.75rem;
    color: var(--op-text-secondary);
}

.module-card > .bi-chevron-right[b-9460bedukf] {
    color: var(--op-text-tertiary);
    transition: transform 0.2s ease;
}

.module-card:hover > .bi-chevron-right[b-9460bedukf] {
    color: var(--op-primary);
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 992px) {
    .progress-overview-section[b-9460bedukf] {
        grid-template-columns: 1fr;
    }

    .progress-stats[b-9460bedukf] {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .progress-main[b-9460bedukf] {
        flex-direction: column;
        text-align: center;
    }

    .progress-stats[b-9460bedukf] {
        flex-wrap: wrap;
    }

    .stat-item[b-9460bedukf] {
        flex: 1;
        min-width: 80px;
    }
}
/* /Components/Pages/SystemSetup/DocumentTemplates/List.razor.rz.scp.css */
/* Document Templates - List Page Styles */

.template-type-cards[b-vntw1eus85] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.type-card[b-vntw1eus85] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.type-card:hover[b-vntw1eus85] {
    border-color: var(--op-primary);
    box-shadow: var(--op-shadow-sm);
}

.type-card.active[b-vntw1eus85] {
    background: rgba(var(--op-primary-rgb), 0.1);
    border-color: var(--op-primary);
}

.type-card i[b-vntw1eus85] {
    font-size: 1.25rem;
    color: var(--op-text-secondary);
}

.type-card.active i[b-vntw1eus85] {
    color: var(--op-primary);
}

.type-card span[b-vntw1eus85] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--op-text-primary);
}

.type-card .count[b-vntw1eus85] {
    background: var(--op-bg-muted);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--op-text-muted);
}

/* Template Grid */
.template-grid[b-vntw1eus85] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.template-card[b-vntw1eus85] {
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

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

.template-card.default[b-vntw1eus85] {
    border-color: var(--op-warning);
    box-shadow: 0 0 0 2px rgba(var(--op-warning-rgb), 0.2);
}

.template-header[b-vntw1eus85] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--op-bg-subtle);
    border-bottom: 1px solid var(--op-border-light);
}

.template-type[b-vntw1eus85] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--op-text-secondary);
}

.template-type i[b-vntw1eus85] {
    color: var(--op-primary);
}

.template-badges[b-vntw1eus85] {
    display: flex;
    gap: 6px;
}

.template-badges .badge[b-vntw1eus85] {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.template-badges .badge.default[b-vntw1eus85] {
    background: rgba(var(--op-warning-rgb), 0.15);
    color: var(--op-warning);
}

.template-badges .badge.active[b-vntw1eus85] {
    background: rgba(var(--op-success-rgb), 0.15);
    color: var(--op-success);
}

.template-badges .badge.inactive[b-vntw1eus85] {
    background: var(--op-bg-muted);
    color: var(--op-text-muted);
}

.template-preview[b-vntw1eus85] {
    position: relative;
    height: 160px;
    background: var(--op-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

.template-preview img[b-vntw1eus85] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.template-preview .preview-placeholder[b-vntw1eus85] {
    text-align: center;
    color: var(--op-text-muted);
}

.template-preview .preview-placeholder i[b-vntw1eus85] {
    font-size: 3rem;
    opacity: 0.5;
}

.template-preview .preview-placeholder span[b-vntw1eus85] {
    display: block;
    margin-top: 8px;
    font-size: 0.8rem;
}

.template-preview .preview-overlay[b-vntw1eus85] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s;
}

.template-preview:hover .preview-overlay[b-vntw1eus85] {
    opacity: 1;
}

.template-body[b-vntw1eus85] {
    padding: 16px;
}

.template-body h4[b-vntw1eus85] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color);
    margin: 0 0 8px 0;
}

.template-body .description[b-vntw1eus85] {
    font-size: 0.85rem;
    color: var(--op-text-secondary);
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.template-meta[b-vntw1eus85] {
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
    color: var(--op-text-muted);
}

.template-meta span[b-vntw1eus85] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.template-actions[b-vntw1eus85] {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    border-top: 1px solid var(--op-border-light);
    justify-content: center;
}

/* Preview Modal */
.preview-tabs[b-vntw1eus85] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--op-border-light);
    padding-bottom: 12px;
}

.preview-tabs button[b-vntw1eus85] {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--op-text-secondary);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.preview-tabs button:hover[b-vntw1eus85] {
    background: var(--op-bg-hover);
}

.preview-tabs button.active[b-vntw1eus85] {
    background: var(--op-primary);
    color: white;
}

.rendered-preview[b-vntw1eus85] {
    border: 1px solid var(--op-border-light);
    border-radius: 8px;
    overflow: hidden;
}

.preview-toolbar[b-vntw1eus85] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--op-bg-subtle);
    border-bottom: 1px solid var(--op-border-light);
}

.preview-label[b-vntw1eus85] {
    font-size: 0.8rem;
    color: var(--op-text-muted);
}

.preview-actions[b-vntw1eus85] {
    display: flex;
    gap: 8px;
}

.preview-frame[b-vntw1eus85] {
    padding: 20px;
    background: white;
    max-height: 500px;
    overflow: auto;
}

.code-preview[b-vntw1eus85] {
    background: var(--op-bg-subtle);
    border-radius: 8px;
    max-height: 500px;
    overflow: auto;
}

.code-preview pre[b-vntw1eus85] {
    margin: 0;
    padding: 16px;
}

.code-preview code[b-vntw1eus85] {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
    color: var(--op-text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Form Page Styles */
.template-editor-layout[b-vntw1eus85] {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1200px) {
    .template-editor-layout[b-vntw1eus85] {
        grid-template-columns: 1fr;
    }
    
    .editor-preview-panel[b-vntw1eus85] {
        order: -1;
    }
}

.editor-form-panel .op-card[b-vntw1eus85] {
    margin-bottom: 20px;
}

.editor-form-panel .op-card-header[b-vntw1eus85] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.editor-form-panel .header-actions[b-vntw1eus85] {
    display: flex;
    gap: 8px;
}

.editor-toolbar[b-vntw1eus85] {
    display: flex;
    gap: 4px;
    padding: 8px;
    background: var(--op-bg-subtle);
    border: 1px solid var(--op-border-light);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.editor-toolbar button[b-vntw1eus85] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--op-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.editor-toolbar button:hover[b-vntw1eus85] {
    background: var(--op-bg-hover);
    color: var(--op-primary);
}

.editor-toolbar .separator[b-vntw1eus85] {
    width: 1px;
    height: 24px;
    background: var(--op-border-light);
    margin: 0 8px;
    align-self: center;
}

.code-editor[b-vntw1eus85] {
    font-family: 'Fira Code', 'Consolas', monospace !important;
    font-size: 0.85rem !important;
    border-radius: 0 0 8px 8px !important;
    min-height: 400px;
}

.form-actions[b-vntw1eus85] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 0;
}

.sticky-preview[b-vntw1eus85] {
    position: sticky;
    top: 24px;
}

.preview-container[b-vntw1eus85] {
    border: 1px solid var(--op-border-light);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
}

.preview-container.desktop[b-vntw1eus85] {
    width: 100%;
}

.preview-container.tablet[b-vntw1eus85] {
    width: 768px;
    max-width: 100%;
    margin: 0 auto;
}

.preview-container.mobile[b-vntw1eus85] {
    width: 375px;
    max-width: 100%;
    margin: 0 auto;
}

.preview-controls[b-vntw1eus85] {
    display: flex;
    gap: 4px;
}

.preview-controls button[b-vntw1eus85] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--op-text-muted);
}

.preview-controls button:hover[b-vntw1eus85] {
    background: var(--op-bg-hover);
}

.preview-controls button.active[b-vntw1eus85] {
    background: var(--op-primary);
    color: white;
}

/* Placeholder Modal */
.placeholder-categories[b-vntw1eus85] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.placeholder-category h4[b-vntw1eus85] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--op-heading-color);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.placeholder-list[b-vntw1eus85] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.placeholder-list code[b-vntw1eus85] {
    padding: 4px 10px;
    background: var(--op-bg-muted);
    border: 1px solid var(--op-border-light);
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.placeholder-list code:hover[b-vntw1eus85] {
    background: var(--op-primary);
    color: white;
    border-color: var(--op-primary);
}

.hint[b-vntw1eus85] {
    margin-top: 20px;
    padding: 12px;
    background: rgba(var(--op-info-rgb), 0.1);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--op-info);
}
/* /Components/Pages/SystemSetup/MasterData/List.razor.rz.scp.css */
/* Master Data - List Page Styles */

.catalog-type-cards[b-diaht7w5pa] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.type-card[b-diaht7w5pa] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.type-card:hover[b-diaht7w5pa] {
    border-color: var(--op-primary);
    box-shadow: var(--op-shadow-sm);
}

.type-card.active[b-diaht7w5pa] {
    background: rgba(var(--op-primary-rgb), 0.1);
    border-color: var(--op-primary);
}

.type-card i[b-diaht7w5pa] {
    font-size: 1rem;
    color: var(--op-text-secondary);
}

.type-card.active i[b-diaht7w5pa] {
    color: var(--op-primary);
}

.type-card .type-name[b-diaht7w5pa] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--op-text-primary);
}

.type-card .type-count[b-diaht7w5pa] {
    background: var(--op-bg-muted);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    color: var(--op-text-muted);
    min-width: 20px;
    text-align: center;
}

.type-card.active .type-count[b-diaht7w5pa] {
    background: var(--op-primary);
    color: white;
}

/* Type Badge in Table */
.type-badge[b-diaht7w5pa] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--op-bg-muted);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--op-text-secondary);
}

.type-badge i[b-diaht7w5pa] {
    font-size: 0.8rem;
}

/* Card Header Badge */
.op-card-header h3 .badge[b-diaht7w5pa] {
    margin-left: 8px;
    padding: 4px 10px;
    background: var(--op-primary);
    color: white;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    vertical-align: middle;
}

/* Table padding override */
.op-card-body.p-0[b-diaht7w5pa] {
    padding: 0 !important;
}
/* /Components/Pages/SystemSetup/SchoolBranding/List.razor.rz.scp.css */
/* School Branding - List Page Styles */

.branding-grid[b-2b5gbewo37] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.branding-card[b-2b5gbewo37] {
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

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

.branding-card.inactive[b-2b5gbewo37] {
    opacity: 0.7;
}

.branding-header[b-2b5gbewo37] {
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
}

.branding-logo[b-2b5gbewo37] {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.branding-logo img[b-2b5gbewo37] {
    max-width: 50px;
    max-height: 50px;
    object-fit: contain;
}

.branding-logo i[b-2b5gbewo37] {
    font-size: 2rem;
    color: #ccc;
}

.branding-status .badge[b-2b5gbewo37] {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.branding-status .badge.active[b-2b5gbewo37] {
    background: rgba(255,255,255,0.2);
    color: white;
}

.branding-status .badge.inactive[b-2b5gbewo37] {
    background: rgba(0,0,0,0.2);
    color: white;
}

.branding-body[b-2b5gbewo37] {
    padding: 16px;
}

.branding-body h4[b-2b5gbewo37] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color);
    margin: 0 0 12px 0;
}

.color-palette[b-2b5gbewo37] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.color-swatch[b-2b5gbewo37] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.branding-details[b-2b5gbewo37] {
    margin-bottom: 12px;
}

.detail-item[b-2b5gbewo37] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--op-text-secondary);
    margin-bottom: 4px;
}

.detail-item i[b-2b5gbewo37] {
    color: var(--op-text-muted);
}

.detail-item .tagline[b-2b5gbewo37] {
    font-style: italic;
}

.theme-preview[b-2b5gbewo37] {
    background: var(--op-bg-subtle);
    border-radius: 8px;
    overflow: hidden;
}

.preview-bar[b-2b5gbewo37] {
    height: 6px;
}

.preview-content[b-2b5gbewo37] {
    padding: 12px;
    display: flex;
    justify-content: center;
}

.preview-btn[b-2b5gbewo37] {
    padding: 6px 16px;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 0.8rem;
    cursor: default;
}

.branding-actions[b-2b5gbewo37] {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    border-top: 1px solid var(--op-border-light);
    justify-content: center;
}

/* Preview Modal Layout */
.preview-layout[b-2b5gbewo37] {
    display: flex;
    gap: 0;
    border: 1px solid var(--op-border-light);
    border-radius: 8px;
    overflow: hidden;
    min-height: 400px;
}

.preview-sidebar[b-2b5gbewo37] {
    width: 200px;
    padding: 16px;
    color: white;
}

.sidebar-logo[b-2b5gbewo37] {
    margin-bottom: 20px;
    text-align: center;
}

.sidebar-logo img[b-2b5gbewo37] {
    max-width: 120px;
    max-height: 40px;
}

.logo-placeholder[b-2b5gbewo37] {
    padding: 10px 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    font-size: 0.9rem;
}

.sidebar-nav[b-2b5gbewo37] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-nav a[b-2b5gbewo37] {
    padding: 10px 12px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.sidebar-nav a:hover[b-2b5gbewo37] {
    background: rgba(255,255,255,0.1);
}

.preview-main[b-2b5gbewo37] {
    flex: 1;
    background: var(--op-bg-page);
    padding: 20px;
}

.preview-header[b-2b5gbewo37] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid;
}

.preview-header h2[b-2b5gbewo37] {
    font-size: 1.25rem;
    margin: 0 0 4px 0;
}

.preview-header p[b-2b5gbewo37] {
    margin: 0;
    color: var(--op-text-muted);
    font-size: 0.9rem;
}

.preview-cards[b-2b5gbewo37] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.preview-card[b-2b5gbewo37] {
    background: white;
    border-radius: 8px;
    padding: 16px;
    border-top: 3px solid;
    box-shadow: var(--op-shadow-sm);
}

.preview-card h4[b-2b5gbewo37] {
    font-size: 1rem;
    margin: 0 0 8px 0;
    color: var(--op-heading-color);
}

.preview-card p[b-2b5gbewo37] {
    font-size: 0.85rem;
    color: var(--op-text-muted);
    margin: 0 0 12px 0;
}

.preview-card button[b-2b5gbewo37] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
}

/* Form Page Styles */
.branding-editor-layout[b-2b5gbewo37] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1100px) {
    .branding-editor-layout[b-2b5gbewo37] {
        grid-template-columns: 1fr;
    }
}

.color-pickers[b-2b5gbewo37] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .color-pickers[b-2b5gbewo37] {
        grid-template-columns: 1fr;
    }
}

.color-picker-item[b-2b5gbewo37] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.color-picker-item label[b-2b5gbewo37] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--op-heading-color);
}

.color-input[b-2b5gbewo37] {
    display: flex;
    gap: 8px;
}

.color-input input[type="color"][b-2b5gbewo37] {
    width: 44px;
    height: 38px;
    padding: 2px;
    border: 1px solid var(--op-border-color);
    border-radius: var(--op-border-radius);
    cursor: pointer;
}

.color-input .op-form-input[b-2b5gbewo37] {
    flex: 1;
    font-family: monospace;
}

.color-presets[b-2b5gbewo37] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--op-border-light);
}

.color-presets > label[b-2b5gbewo37] {
    font-size: 0.8rem;
    color: var(--op-text-muted);
    display: block;
    margin-bottom: 8px;
}

.preset-list[b-2b5gbewo37] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.preset-btn[b-2b5gbewo37] {
    display: flex;
    gap: 2px;
    padding: 4px;
    border: 2px solid var(--op-border-light);
    background: var(--op-bg-card);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.preset-btn:hover[b-2b5gbewo37] {
    border-color: var(--op-primary);
    transform: scale(1.1);
}

.preset-btn span[b-2b5gbewo37] {
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

/* Branding Preview (in form) */
.branding-preview-container[b-2b5gbewo37] {
    display: flex;
    border: 1px solid var(--op-border-light);
    border-radius: 8px;
    overflow: hidden;
    min-height: 300px;
}

.branding-preview-container .preview-sidebar[b-2b5gbewo37] {
    width: 60px;
    padding: 12px 8px;
}

.branding-preview-container .preview-logo[b-2b5gbewo37] {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.branding-preview-container .preview-logo img[b-2b5gbewo37] {
    max-width: 32px;
    max-height: 32px;
}

.branding-preview-container .logo-placeholder[b-2b5gbewo37] {
    font-size: 0.6rem;
    padding: 4px;
}

.preview-nav[b-2b5gbewo37] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-item[b-2b5gbewo37] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
    cursor: default;
}

.nav-item.active[b-2b5gbewo37] {
    color: white;
}

.nav-item i[b-2b5gbewo37] {
    font-size: 1rem;
}

.branding-preview-container .preview-content[b-2b5gbewo37] {
    flex: 1;
    background: var(--op-bg-page);
    padding: 12px;
}

.branding-preview-container .preview-header[b-2b5gbewo37] {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

.branding-preview-container .preview-header span[b-2b5gbewo37] {
    font-size: 0.8rem;
}

.branding-preview-container .preview-body[b-2b5gbewo37] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.branding-preview-container .preview-card[b-2b5gbewo37] {
    background: white;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--op-shadow-sm);
}

.branding-preview-container .card-bar[b-2b5gbewo37] {
    width: 4px;
    height: 20px;
    border-radius: 2px;
}

.branding-preview-container .preview-card span[b-2b5gbewo37] {
    font-size: 0.75rem;
    color: var(--op-text-secondary);
}

.branding-preview-container .preview-btn[b-2b5gbewo37] {
    margin-top: 8px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 0.75rem;
    width: 100%;
}
/* /Components/Pages/SystemSetup/Sessions/List.razor.rz.scp.css */
/* Academic Sessions - List Page Styles */

.session-grid[b-0ky8nwrarn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.session-card[b-0ky8nwrarn] {
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

.session-card:hover[b-0ky8nwrarn] {
    box-shadow: var(--op-shadow-md);
    transform: translateY(-2px);
}

.session-card.current[b-0ky8nwrarn] {
    border-color: var(--op-primary);
    box-shadow: 0 0 0 2px rgba(var(--op-primary-rgb), 0.15);
}

.session-card.inactive[b-0ky8nwrarn] {
    opacity: 0.7;
}

.session-header[b-0ky8nwrarn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    background: var(--op-bg-subtle);
    border-bottom: 1px solid var(--op-border-light);
}

.session-info h4[b-0ky8nwrarn] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color);
    margin: 0 0 4px 0;
}

.session-code[b-0ky8nwrarn] {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--op-text-muted);
    background: var(--op-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
}

.session-badges[b-0ky8nwrarn] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.session-badges .badge[b-0ky8nwrarn] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.session-badges .badge.current[b-0ky8nwrarn] {
    background: rgba(var(--op-primary-rgb), 0.15);
    color: var(--op-primary);
}

.session-badges .badge.active[b-0ky8nwrarn] {
    background: rgba(var(--op-success-rgb), 0.15);
    color: var(--op-success);
}

.session-badges .badge.inactive[b-0ky8nwrarn] {
    background: var(--op-bg-muted);
    color: var(--op-text-muted);
}

.session-body[b-0ky8nwrarn] {
    padding: 16px;
}

.session-duration[b-0ky8nwrarn] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--op-text-secondary);
    margin-bottom: 16px;
}

.session-duration i[b-0ky8nwrarn] {
    color: var(--op-primary);
}

.session-terms[b-0ky8nwrarn] {
    background: var(--op-bg-subtle);
    border-radius: 8px;
    padding: 12px;
}

.terms-header[b-0ky8nwrarn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: var(--op-text-secondary);
}

.terms-list[b-0ky8nwrarn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.term-item[b-0ky8nwrarn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--op-bg-card);
    border-radius: 6px;
    font-size: 0.85rem;
}

.term-item.current[b-0ky8nwrarn] {
    background: rgba(var(--op-success-rgb), 0.1);
    border-left: 3px solid var(--op-success);
}

.term-name[b-0ky8nwrarn] {
    font-weight: 500;
    color: var(--op-text-primary);
}

.term-dates[b-0ky8nwrarn] {
    color: var(--op-text-muted);
    font-size: 0.75rem;
    margin-left: auto;
}

.term-badge[b-0ky8nwrarn] {
    background: var(--op-success);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
}

.more-terms[b-0ky8nwrarn] {
    text-align: center;
    padding: 6px;
    font-size: 0.8rem;
    color: var(--op-text-muted);
}

.no-terms[b-0ky8nwrarn] {
    text-align: center;
    padding: 12px;
    font-size: 0.85rem;
    color: var(--op-text-muted);
}

.session-actions[b-0ky8nwrarn] {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    border-top: 1px solid var(--op-border-light);
    justify-content: center;
}

.action-btn.success:hover[b-0ky8nwrarn] {
    background: var(--op-success);
    color: white;
}

/* Terms Modal */
.terms-toolbar[b-0ky8nwrarn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.terms-count[b-0ky8nwrarn] {
    font-size: 0.9rem;
    color: var(--op-text-secondary);
}

.term-form-card[b-0ky8nwrarn] {
    background: var(--op-bg-subtle);
    border: 1px solid var(--op-border-light);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.term-form-card h4[b-0ky8nwrarn] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--op-heading-color);
    margin: 0 0 12px 0;
}

.term-form-actions[b-0ky8nwrarn] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.terms-table[b-0ky8nwrarn] {
    border: 1px solid var(--op-border-light);
    border-radius: 8px;
    overflow: hidden;
}

.terms-table table[b-0ky8nwrarn] {
    width: 100%;
    border-collapse: collapse;
}

.terms-table thead[b-0ky8nwrarn] {
    background: var(--op-bg-subtle);
}

.terms-table th[b-0ky8nwrarn] {
    padding: 10px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--op-text-secondary);
    text-align: left;
    border-bottom: 1px solid var(--op-border-light);
}

.terms-table td[b-0ky8nwrarn] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--op-border-light);
    font-size: 0.9rem;
}

.terms-table tbody tr:last-child td[b-0ky8nwrarn] {
    border-bottom: none;
}

.terms-table tbody tr:hover[b-0ky8nwrarn] {
    background: var(--op-bg-hover);
}

.terms-table .current-term[b-0ky8nwrarn] {
    background: rgba(var(--op-success-rgb), 0.05);
}

.terms-table .empty-row[b-0ky8nwrarn] {
    text-align: center;
    padding: 24px;
    color: var(--op-text-muted);
}
/* /Components/Pages/SystemSetup/Wizard/SetupWizardPage.razor.rz.scp.css */
.wizard-page[b-j6n6ud3jou] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.step-placeholder[b-j6n6ud3jou] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    text-align: center;
    color: var(--op-text-secondary);
}

.step-placeholder i[b-j6n6ud3jou] {
    font-size: 3rem;
    color: var(--op-text-tertiary);
    margin-bottom: 1rem;
}
/* /Components/Pages/SystemSetup/Wizard/Steps/BranchSetupStep.razor.rz.scp.css */
/* ==========================================================================
   Wizard Steps Shared Styles
   ========================================================================== */

.step-content-wrapper[b-chsn4bc51q] {
    padding: 0.5rem 0;
}

.step-intro[b-chsn4bc51q] {
    margin-bottom: 1.5rem;
}

.step-intro h3[b-chsn4bc51q] {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--op-heading-color);
}

.step-intro p[b-chsn4bc51q] {
    margin: 0;
    color: var(--op-text-secondary);
    font-size: 0.9375rem;
}

/* Tabs */
.masters-tabs[b-chsn4bc51q] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--op-border);
    padding-bottom: 0;
}

.tab-btn[b-chsn4bc51q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--op-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -1px;
}

.tab-btn:hover[b-chsn4bc51q] {
    color: var(--op-primary);
}

.tab-btn.active[b-chsn4bc51q] {
    color: var(--op-primary);
    border-bottom-color: var(--op-primary);
}

.tab-btn i[b-chsn4bc51q] {
    font-size: 1rem;
}

.tab-content[b-chsn4bc51q] {
    padding: 0;
}

/* Session Cards */
.sessions-list[b-chsn4bc51q] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.session-card[b-chsn4bc51q] {
    padding: 1rem;
    background: var(--op-bg-secondary);
    border: 1px solid var(--op-border);
    border-radius: 8px;
}

.session-header[b-chsn4bc51q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.session-code[b-chsn4bc51q] {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--op-text-tertiary);
    font-family: var(--op-font-mono);
}

.session-dates[b-chsn4bc51q] {
    font-size: 0.8125rem;
    color: var(--op-text-secondary);
}

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

.empty-placeholder p[b-chsn4bc51q] {
    margin: 0 0 1rem;
}

/* Sample Data */
.sample-data h5[b-chsn4bc51q] {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--op-text-secondary);
}

.sample-grid[b-chsn4bc51q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
}

.sample-item[b-chsn4bc51q] {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    background: var(--op-bg-tertiary);
    border-radius: 6px;
}

.sample-item .code[b-chsn4bc51q] {
    font-size: 0.6875rem;
    font-family: var(--op-font-mono);
    color: var(--op-text-tertiary);
}

.sample-item .name[b-chsn4bc51q] {
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Review Grid */
.review-grid[b-chsn4bc51q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.review-card[b-chsn4bc51q] {
    padding: 1.25rem;
    background: var(--op-bg-primary);
    border: 1px solid var(--op-border);
    border-radius: 8px;
    text-align: center;
}

.review-header[b-chsn4bc51q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--op-text-secondary);
    font-size: 0.8125rem;
}

.review-header i[b-chsn4bc51q] {
    font-size: 1rem;
}

.review-value[b-chsn4bc51q] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--op-heading-color);
    margin-bottom: 0.5rem;
}

.review-status[b-chsn4bc51q] {
    font-size: 0.75rem;
    font-weight: 500;
}

.review-status.success[b-chsn4bc51q] {
    color: var(--op-success);
}

.review-status.warning[b-chsn4bc51q] {
    color: var(--op-warning);
}

/* Completion Summary */
.completion-summary[b-chsn4bc51q] {
    margin-bottom: 2rem;
}

.completion-summary h4[b-chsn4bc51q] {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.steps-status-list[b-chsn4bc51q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.step-status-item[b-chsn4bc51q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--op-bg-secondary);
    border-radius: 6px;
}

.step-status-item .step-indicator[b-chsn4bc51q] {
    font-size: 1.25rem;
}

.step-status-item.completed .step-indicator[b-chsn4bc51q] {
    color: var(--op-success);
}

.step-status-item.skipped .step-indicator[b-chsn4bc51q] {
    color: var(--op-warning);
}

.step-status-item.pending .step-indicator[b-chsn4bc51q] {
    color: var(--op-text-tertiary);
}

.step-status-item .step-name[b-chsn4bc51q] {
    flex: 1;
    font-weight: 500;
}

/* Final Notice */
.final-notice[b-chsn4bc51q] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(var(--op-primary-rgb), 0.1);
    border: 1px solid rgba(var(--op-primary-rgb), 0.3);
    border-radius: 8px;
}

.final-notice > i[b-chsn4bc51q] {
    font-size: 1.5rem;
    color: var(--op-primary);
    flex-shrink: 0;
}

.final-notice strong[b-chsn4bc51q] {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--op-primary);
}

.final-notice p[b-chsn4bc51q] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--op-text-secondary);
}
/* /Components/Pages/TenantManagement/Requests/List.razor.rz.scp.css */
/* ==========================================================================
   Tenant Requests List Page Styles
   ========================================================================== */

/* Request Card (for card view) */
.request-card[b-l1me63lyq2] {
    transition: all 0.2s ease;
}

.request-card:hover[b-l1me63lyq2] {
    transform: translateY(-2px);
}

/* Request Status Badge Styles */
.status-pending[b-l1me63lyq2] {
    background: rgba(var(--op-warning-rgb), 0.12);
    color: #c88700;
}

.status-approved[b-l1me63lyq2] {
    background: rgba(var(--op-success-rgb), 0.12);
    color: var(--op-success);
}

.status-rejected[b-l1me63lyq2] {
    background: rgba(var(--op-danger-rgb), 0.12);
    color: var(--op-danger);
}

.status-underreview[b-l1me63lyq2] {
    background: rgba(var(--op-info-rgb), 0.12);
    color: var(--op-info);
}

/* Request Details in Table */
.request-org[b-l1me63lyq2] {
    display: flex;
    flex-direction: column;
}

.request-org-name[b-l1me63lyq2] {
    font-weight: 600;
    color: var(--op-heading-color);
}

.request-org-type[b-l1me63lyq2] {
    font-size: 0.75rem;
    color: var(--op-text-muted);
}

/* Contact Info */
.request-contact[b-l1me63lyq2] {
    display: flex;
    flex-direction: column;
}

.request-contact-name[b-l1me63lyq2] {
    font-weight: 500;
    color: var(--op-heading-color);
}

.request-contact-email[b-l1me63lyq2] {
    font-size: 0.75rem;
    color: var(--op-text-muted);
}

/* Date Column */
.request-date[b-l1me63lyq2] {
    font-size: 0.875rem;
    color: var(--op-body-color);
}

.request-date-relative[b-l1me63lyq2] {
    font-size: 0.75rem;
    color: var(--op-text-muted);
}

/* Action Buttons */
.request-actions[b-l1me63lyq2] {
    display: flex;
    gap: 0.25rem;
}

/* Timeline/History */
.request-timeline[b-l1me63lyq2] {
    padding-left: 1rem;
    border-left: 2px solid var(--op-border-color);
}

.timeline-item[b-l1me63lyq2] {
    position: relative;
    padding-bottom: 1.25rem;
    padding-left: 1.25rem;
}

.timeline-item[b-l1me63lyq2]::before {
    content: '';
    position: absolute;
    left: -0.375rem;
    top: 0.25rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--op-bg-tertiary);
    border: 2px solid var(--op-border-color);
}

.timeline-item.current[b-l1me63lyq2]::before {
    background: var(--op-primary);
    border-color: var(--op-primary);
}

.timeline-item-date[b-l1me63lyq2] {
    font-size: 0.75rem;
    color: var(--op-text-muted);
    margin-bottom: 0.25rem;
}

.timeline-item-content[b-l1me63lyq2] {
    font-size: 0.875rem;
    color: var(--op-body-color);
}

/* Quick Stats Row */
.requests-stats[b-l1me63lyq2] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.request-stat[b-l1me63lyq2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--op-card-bg);
    border: 1px solid var(--op-border-color);
    border-radius: 8px;
    font-size: 0.875rem;
}

.request-stat-value[b-l1me63lyq2] {
    font-weight: 700;
    color: var(--op-heading-color);
}

.request-stat-label[b-l1me63lyq2] {
    color: var(--op-text-muted);
}
/* /Components/Pages/TenantManagement/Tenants/Form.razor.rz.scp.css */
/* ==========================================================================
   Tenant Form Styles
   ========================================================================== */

/* Tab Navigation */
.op-tabs[b-m9jovxi1bz] {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--op-border, #e4e6e8);
    padding-bottom: 0;
}

.op-tab[b-m9jovxi1bz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--op-text-secondary, #697a8d);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -1px;
}

.op-tab:hover[b-m9jovxi1bz] {
    color: var(--op-primary, #696cff);
}

.op-tab.active[b-m9jovxi1bz] {
    color: var(--op-primary, #696cff);
    border-bottom-color: var(--op-primary, #696cff);
}

.op-tab i[b-m9jovxi1bz] {
    font-size: 1rem;
}

.form-section[b-m9jovxi1bz] {
    background: var(--op-bg-primary, #fff);
    border: 1px solid var(--op-border, #e4e6e8);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-section-title[b-m9jovxi1bz] {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--op-heading-color, #566a7f);
}

.form-section-title i[b-m9jovxi1bz] {
    color: var(--op-primary, #696cff);
}

/* Logo Upload Section */
.logo-upload-area[b-m9jovxi1bz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    border: 2px dashed var(--op-border, #e4e6e8);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--op-bg-secondary, #f8f9fa);
}

.logo-upload-area:hover[b-m9jovxi1bz] {
    border-color: var(--op-primary, #696cff);
    background: var(--op-primary-light, rgba(105, 108, 255, 0.04));
}

.logo-preview[b-m9jovxi1bz] {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
    border: 3px solid var(--op-border, #e4e6e8);
    margin-bottom: 1rem;
}

.logo-placeholder[b-m9jovxi1bz] {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    background: var(--op-bg-tertiary, #f1f3f5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--op-text-muted, #a1acb8);
    margin-bottom: 1rem;
}

/* Plan Selection */
.plan-selector[b-m9jovxi1bz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.plan-card[b-m9jovxi1bz] {
    padding: 1.25rem;
    border: 2px solid var(--op-border, #e4e6e8);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    background: var(--op-bg-primary, #fff);
}

.plan-card:hover[b-m9jovxi1bz] {
    border-color: var(--op-primary, #696cff);
}

.plan-card.selected[b-m9jovxi1bz] {
    border-color: var(--op-primary, #696cff);
    background: var(--op-primary-light, rgba(105, 108, 255, 0.08));
    box-shadow: 0 0 0 1px var(--op-primary, #696cff);
}

.plan-card .plan-icon[b-m9jovxi1bz] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--op-primary, #696cff) 0%, #8183ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-size: 1.25rem;
    color: #fff;
}

.plan-card .plan-name[b-m9jovxi1bz] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--op-heading-color, #566a7f);
    margin-bottom: 0.25rem;
}

.plan-card .plan-price[b-m9jovxi1bz] {
    font-size: 0.875rem;
    color: var(--op-primary, #696cff);
    font-weight: 600;
}

/* Contact Section */
.contact-card[b-m9jovxi1bz] {
    background: var(--op-bg-secondary, #f8f9fa);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.contact-card .contact-icon[b-m9jovxi1bz] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--op-primary-light, rgba(105, 108, 255, 0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--op-primary, #696cff);
}

.contact-card .contact-info[b-m9jovxi1bz] {
    flex: 1;
}

.contact-card .contact-info .label[b-m9jovxi1bz] {
    font-size: 0.75rem;
    color: var(--op-text-muted, #a1acb8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-card .contact-info .value[b-m9jovxi1bz] {
    font-weight: 500;
    color: var(--op-heading-color, #566a7f);
}

/* Status Badge in Form */
.status-switch[b-m9jovxi1bz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--op-bg-secondary, #f8f9fa);
    border-radius: 10px;
}

.status-switch label[b-m9jovxi1bz] {
    font-weight: 500;
    color: var(--op-heading-color, #566a7f);
}

/* Form Actions */
.form-actions[b-m9jovxi1bz] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--op-border, #e4e6e8);
    margin-top: 1.5rem;
}

/* Form Error */
.op-form-error[b-m9jovxi1bz] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--op-danger, #ff3e1d);
}

/* Required Label */
.op-form-label.required[b-m9jovxi1bz]::after {
    content: ' *';
    color: var(--op-danger, #ff3e1d);
}
/* /Components/Pages/TenantManagement/Tenants/List.razor.rz.scp.css */
/* ==========================================================================
   Tenant List Styles
   ========================================================================== */

/* Stats Grid */
.stats-grid[b-wixluzynuj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

/* Tenant Grid */
.tenants-grid[b-wixluzynuj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

/* Tenant Card */
.tenant-card[b-wixluzynuj] {
    transition: all 0.2s ease;
}

.tenant-card:hover[b-wixluzynuj] {
    transform: translateY(-2px);
}

.tenant-card .op-card-body[b-wixluzynuj] {
    display: flex;
    gap: 1rem;
}

.tenant-logo[b-wixluzynuj] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid var(--op-border, #e4e6e8);
    flex-shrink: 0;
}

.tenant-logo-placeholder[b-wixluzynuj] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--op-primary, #696cff) 0%, #8183ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.tenant-info[b-wixluzynuj] {
    flex: 1;
    min-width: 0;
}

.tenant-name[b-wixluzynuj] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--op-heading-color, #566a7f);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tenant-code[b-wixluzynuj] {
    font-size: 0.75rem;
    font-family: monospace;
    background: var(--op-bg-tertiary, #f1f3f5);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    color: var(--op-text-secondary, #697a8d);
    display: inline-block;
    margin-bottom: 0.5rem;
}

.tenant-meta[b-wixluzynuj] {
    display: flex;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--op-text-muted, #a1acb8);
    flex-wrap: wrap;
}

.tenant-meta span[b-wixluzynuj] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Card Footer Actions */
.tenant-actions[b-wixluzynuj] {
    display: flex;
    gap: 0.25rem;
}

/* Empty State */
.empty-state[b-wixluzynuj] {
    text-align: center;
    padding: 3rem 2rem;
}

.empty-state-icon[b-wixluzynuj] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--op-bg-secondary, #f8f9fa);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2.5rem;
    color: var(--op-text-muted, #a1acb8);
}

.empty-state-title[b-wixluzynuj] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
    margin-bottom: 0.5rem;
}

.empty-state-text[b-wixluzynuj] {
    color: var(--op-text-muted, #a1acb8);
    margin-bottom: 1.5rem;
}

/* View Toggle */
.view-toggle[b-wixluzynuj] {
    display: flex;
    background: var(--op-bg-secondary, #f8f9fa);
    border-radius: 6px;
    padding: 2px;
}

.view-toggle button[b-wixluzynuj] {
    padding: 0.375rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--op-text-muted, #a1acb8);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle button:hover[b-wixluzynuj] {
    color: var(--op-heading-color, #566a7f);
}

.view-toggle button.active[b-wixluzynuj] {
    background: var(--op-bg-primary, #fff);
    color: var(--op-primary, #696cff);
    box-shadow: var(--op-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}

/* Setup Status Cell */
.setup-status-cell[b-wixluzynuj] {
    min-width: 140px;
}

.setup-progress-bar[b-wixluzynuj] {
    height: 4px;
    background: var(--op-border, #e4e6e8);
    border-radius: 2px;
    margin-bottom: 0.375rem;
    overflow: hidden;
}

.setup-progress-fill[b-wixluzynuj] {
    height: 100%;
    background: linear-gradient(90deg, var(--op-primary, #696cff), var(--op-success, #28a745));
    border-radius: 2px;
    transition: width 0.3s ease;
}

.setup-status-info[b-wixluzynuj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.setup-percentage[b-wixluzynuj] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--op-primary, #696cff);
}
/* /Components/Pages/TenantManagement/Tenants/PublicApiConfigTab.razor.rz.scp.css */
.public-api-config[b-21lcz2kdqp] {
    padding: 1rem 0;
}

.security-warning[b-21lcz2kdqp] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(var(--op-warning-rgb), 0.1);
    border: 1px solid rgba(var(--op-warning-rgb), 0.3);
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.security-warning i[b-21lcz2kdqp] {
    font-size: 1.25rem;
    color: var(--op-warning);
    flex-shrink: 0;
}

.security-warning strong[b-21lcz2kdqp] {
    display: block;
    color: var(--op-warning);
    margin-bottom: 0.25rem;
}

.security-warning p[b-21lcz2kdqp] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--op-text-secondary);
}

.config-list[b-21lcz2kdqp] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.config-card[b-21lcz2kdqp] {
    background: var(--op-bg-secondary);
    border: 1px solid var(--op-border);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.2s ease;
}

.config-card:hover[b-21lcz2kdqp] {
    border-color: var(--op-primary);
}

.config-card.selected[b-21lcz2kdqp] {
    border-color: var(--op-primary);
    box-shadow: 0 0 0 3px rgba(var(--op-primary-rgb), 0.1);
}

.config-card.revoked[b-21lcz2kdqp] {
    opacity: 0.6;
    background: rgba(var(--op-error-rgb), 0.05);
    border-color: var(--op-error);
}

.config-card.inactive[b-21lcz2kdqp] {
    opacity: 0.7;
}

.config-card-header[b-21lcz2kdqp] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.config-info h4[b-21lcz2kdqp] {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
}

.config-badges[b-21lcz2kdqp] {
    display: flex;
    gap: 0.5rem;
}

.config-actions[b-21lcz2kdqp] {
    display: flex;
    gap: 0.25rem;
}

.api-key-section[b-21lcz2kdqp] {
    background: var(--op-bg-tertiary);
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.api-key-section label[b-21lcz2kdqp] {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--op-text-tertiary);
    margin-bottom: 0.25rem;
}

.key-display[b-21lcz2kdqp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.key-display code[b-21lcz2kdqp] {
    font-family: var(--op-font-mono);
    font-size: 0.875rem;
    flex: 1;
}

.config-details[b-21lcz2kdqp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-row[b-21lcz2kdqp] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 0.8125rem;
    padding: 0.25rem 0;
}

.detail-label[b-21lcz2kdqp] {
    color: var(--op-text-secondary);
}

.detail-value[b-21lcz2kdqp] {
    text-align: right;
}

.endpoint-chips[b-21lcz2kdqp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-end;
}

.endpoint-chip[b-21lcz2kdqp] {
    background: var(--op-bg-tertiary);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: var(--op-font-mono);
}

.add-config-section[b-21lcz2kdqp] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--op-border);
}

.new-secret-display[b-21lcz2kdqp] {
    margin-top: 1.5rem;
    background: rgba(var(--op-success-rgb), 0.1);
    border: 1px solid var(--op-success);
    border-radius: 8px;
    padding: 1.5rem;
}

.secret-header[b-21lcz2kdqp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--op-success);
    margin-bottom: 1rem;
}

.secret-header i[b-21lcz2kdqp] {
    font-size: 1.25rem;
}

.secret-warning[b-21lcz2kdqp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(var(--op-warning-rgb), 0.15);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--op-warning);
    margin-bottom: 1rem;
}

.secret-content[b-21lcz2kdqp] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.secret-field label[b-21lcz2kdqp] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--op-text-secondary);
    margin-bottom: 0.25rem;
}

.secret-value[b-21lcz2kdqp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--op-bg-primary);
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--op-border);
}

.secret-value code[b-21lcz2kdqp] {
    font-family: var(--op-font-mono);
    font-size: 0.8125rem;
    flex: 1;
    word-break: break-all;
}

.secret-value.secret[b-21lcz2kdqp] {
    background: var(--op-bg-tertiary);
}

.secret-actions[b-21lcz2kdqp] {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

.endpoint-selection[b-21lcz2kdqp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--op-bg-secondary);
    border: 1px solid var(--op-border);
    border-radius: 6px;
}

.modal-actions[b-21lcz2kdqp] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--op-border);
}

.text-error[b-21lcz2kdqp] {
    color: var(--op-error) !important;
}

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

.op-btn-xs[b-21lcz2kdqp] {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
}
/* /Components/Pages/TenantManagement/Tenants/PublicApiStatusCard.razor.rz.scp.css */
.public-api-section[b-34qnnnu05p] {
    margin-top: 1.5rem;
}

.empty-state[b-34qnnnu05p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.api-config-list[b-34qnnnu05p] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.api-config-card[b-34qnnnu05p] {
    background: var(--op-bg-secondary);
    border: 1px solid var(--op-border);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.2s ease;
}

.api-config-card:hover[b-34qnnnu05p] {
    border-color: var(--op-primary);
}

.api-config-card.inactive[b-34qnnnu05p] {
    opacity: 0.7;
}

.api-config-header[b-34qnnnu05p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.api-config-name[b-34qnnnu05p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.api-config-name strong[b-34qnnnu05p] {
    font-size: 0.9375rem;
}

.api-config-summary[b-34qnnnu05p] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.api-key-display[b-34qnnnu05p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.api-key-display .label[b-34qnnnu05p] {
    font-size: 0.75rem;
    color: var(--op-text-secondary);
}

.masked-key[b-34qnnnu05p] {
    font-family: var(--op-font-mono);
    font-size: 0.8125rem;
    background: var(--op-bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.api-stats[b-34qnnnu05p] {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--op-text-secondary);
}

.api-stats span[b-34qnnnu05p] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.api-config-details[b-34qnnnu05p] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--op-border);
}

.detail-grid[b-34qnnnu05p] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.detail-item[b-34qnnnu05p] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-label[b-34qnnnu05p] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--op-text-tertiary);
}

.detail-value[b-34qnnnu05p] {
    font-size: 0.8125rem;
}

.detail-description[b-34qnnnu05p] {
    margin-top: 1rem;
}

.detail-description p[b-34qnnnu05p] {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--op-text-secondary);
}

.revoked-info[b-34qnnnu05p] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(var(--op-error-rgb), 0.1);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--op-error);
}

.revoked-info i[b-34qnnnu05p] {
    flex-shrink: 0;
    margin-top: 2px;
}

.section-footer[b-34qnnnu05p] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--op-border);
    display: flex;
    justify-content: flex-end;
}

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

.op-btn-xs[b-34qnnnu05p] {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
}
/* /Components/Pages/TransportManagement/Index.razor.rz.scp.css */
.page-header[b-ttan5qsrdg] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 1.5rem 2rem;
    border-radius: 12px;
    color: white;
}

.page-header h4[b-ttan5qsrdg], .page-header p[b-ttan5qsrdg] {
    color: white;
}

.page-header .btn-outline-primary[b-ttan5qsrdg] {
    color: white;
    border-color: rgba(255, 255, 255, 0.5);
}

.page-header .btn-outline-primary:hover[b-ttan5qsrdg] {
    background: rgba(255, 255, 255, 0.2);
    border-color: white;
    color: white;
}

.stat-card[b-ttan5qsrdg] {
    border: none;
    border-radius: 12px;
    transition: transform 0.2s ease;
}

.stat-card:hover[b-ttan5qsrdg] {
    transform: translateY(-5px);
}

.stat-card .card-footer[b-ttan5qsrdg] {
    padding-top: 0;
}

.expense-icon[b-ttan5qsrdg] {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.performance-circle[b-ttan5qsrdg] {
    position: relative;
    width: 120px;
    height: 120px;
}

.performance-value[b-ttan5qsrdg] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.quick-action-card[b-ttan5qsrdg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    transition: all 0.2s ease;
    color: #495057;
}

.quick-action-card:hover[b-ttan5qsrdg] {
    border-color: #0d6efd;
    background: #f8f9fa;
    transform: translateY(-2px);
}

.quick-action-icon[b-ttan5qsrdg] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

/* Real-time Status Bar */
.realtime-status-bar[b-ttan5qsrdg] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    color: white;
}

.live-indicator[b-ttan5qsrdg] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.live-indicator.active[b-ttan5qsrdg] {
    background: rgba(25, 135, 84, 0.3);
}

.pulse-dot[b-ttan5qsrdg] {
    width: 8px;
    height: 8px;
    background: #6c757d;
    border-radius: 50%;
}

.live-indicator.active .pulse-dot[b-ttan5qsrdg] {
    background: #198754;
    animation: pulse-b-ttan5qsrdg 1.5s ease-in-out infinite;
}

@keyframes pulse-b-ttan5qsrdg {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.realtime-stat[b-ttan5qsrdg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.realtime-stat i[b-ttan5qsrdg] {
    font-size: 1rem;
}

/* Spinning animation for refresh */
.spinning[b-ttan5qsrdg] {
    animation: spin-b-ttan5qsrdg 1s linear infinite;
}

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

/* Live dot indicator */
.live-dot[b-ttan5qsrdg] {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #198754;
    border-radius: 50%;
    animation: pulse-b-ttan5qsrdg 1.5s ease-in-out infinite;
}

/* Vehicle icon styling */
.vehicle-icon[b-ttan5qsrdg] {
    width: 40px;
    height: 40px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* Refresh controls */
.refresh-controls[b-ttan5qsrdg] {
    display: flex;
    align-items: center;
}

.refresh-controls .btn[b-ttan5qsrdg] {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}
/* /Components/Pages/UserManagement/AccessConfiguration/Components/PermissionGrid.razor.rz.scp.css */
/* Permission Grid Styles */
.permission-grid[b-790henq0cx] {
    background: var(--op-card-bg);
    border: 1px solid var(--op-border-color);
    border-radius: 12px;
    overflow: hidden;
}

.permission-grid-header[b-790henq0cx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--op-bg-secondary);
    border-bottom: 1px solid var(--op-border-color);
    gap: 1rem;
    flex-wrap: wrap;
}

.permission-grid-title[b-790henq0cx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--op-heading-color);
}

.permission-grid-title i[b-790henq0cx] {
    color: var(--op-primary);
}

.permission-count[b-790henq0cx] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--op-muted-color);
    background: var(--op-bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
}

.permission-grid-actions[b-790henq0cx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.permission-grid-search[b-790henq0cx] {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--op-border-light);
}

.permission-grid-body[b-790henq0cx] {
    max-height: 500px;
    overflow-y: auto;
    padding: 0.75rem;
}

.permission-grid-loading[b-790henq0cx],
.permission-grid-empty[b-790henq0cx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--op-muted-color);
    gap: 1rem;
}

.permission-grid-empty i[b-790henq0cx] {
    font-size: 2.5rem;
    opacity: 0.5;
}

.permission-grid-legend[b-790henq0cx] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--op-bg-secondary);
    border-top: 1px solid var(--op-border-color);
    flex-wrap: wrap;
}

.legend-item[b-790henq0cx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--op-muted-color);
}

.legend-indicator[b-790henq0cx] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-indicator.inherited[b-790henq0cx] {
    background: var(--op-info);
}

.legend-indicator.direct[b-790henq0cx] {
    background: var(--op-success);
}

.legend-indicator.disabled[b-790henq0cx] {
    background: var(--op-muted-color);
    opacity: 0.5;
}

/* Scrollbar Styling */
.permission-grid-body[b-790henq0cx]::-webkit-scrollbar {
    width: 6px;
}

.permission-grid-body[b-790henq0cx]::-webkit-scrollbar-track {
    background: var(--op-bg-secondary);
}

.permission-grid-body[b-790henq0cx]::-webkit-scrollbar-thumb {
    background: var(--op-border-color);
    border-radius: 3px;
}

.permission-grid-body[b-790henq0cx]::-webkit-scrollbar-thumb:hover {
    background: var(--op-muted-color);
}
/* /Components/Pages/UserManagement/AccessConfiguration/Components/TreeNode.razor.rz.scp.css */
/* Tree Node Styles */
.tree-node[b-9c67kzbv6l] {
    user-select: none;
}

.tree-node.nested[b-9c67kzbv6l] {
    margin-left: 0;
}

.tree-node-header[b-9c67kzbv6l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tree-node-header:hover[b-9c67kzbv6l] {
    background-color: var(--op-bg-hover);
}

.tree-node-header.selected[b-9c67kzbv6l] {
    background-color: rgba(var(--op-primary-rgb), 0.1);
    border-left: 3px solid var(--op-primary);
}

.tree-node-header.partial[b-9c67kzbv6l] {
    background-color: rgba(var(--op-primary-rgb), 0.05);
    border-left: 3px solid rgba(var(--op-primary-rgb), 0.5);
}

.tree-toggle[b-9c67kzbv6l] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--op-muted-color);
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
}

.tree-toggle:hover[b-9c67kzbv6l] {
    background-color: var(--op-bg-tertiary);
    color: var(--op-heading-color);
}

.tree-toggle-placeholder[b-9c67kzbv6l] {
    width: 24px;
    flex-shrink: 0;
}

.tree-checkbox[b-9c67kzbv6l] {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.tree-checkbox input[b-9c67kzbv6l] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.tree-checkbox .checkmark[b-9c67kzbv6l] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--op-border-color);
    border-radius: 4px;
    background-color: var(--op-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.tree-checkbox input:checked + .checkmark[b-9c67kzbv6l] {
    background-color: var(--op-primary);
    border-color: var(--op-primary);
}

.tree-checkbox input:checked + .checkmark[b-9c67kzbv6l]::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

.tree-checkbox .checkmark.partial[b-9c67kzbv6l] {
    background-color: var(--op-primary);
    border-color: var(--op-primary);
}

.tree-checkbox .checkmark.partial[b-9c67kzbv6l]::after {
    content: '';
    width: 8px;
    height: 2px;
    background: white;
}

.tree-checkbox input:disabled + .checkmark[b-9c67kzbv6l] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tree-icon[b-9c67kzbv6l] {
    color: var(--op-primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.tree-label[b-9c67kzbv6l] {
    flex: 1;
    font-size: 0.875rem;
    color: var(--op-heading-color);
    font-weight: 500;
}

.tree-badge[b-9c67kzbv6l] {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    background-color: var(--op-bg-secondary);
    color: var(--op-muted-color);
    border-radius: 10px;
    font-weight: 500;
}

.tree-inherited-indicator[b-9c67kzbv6l] {
    color: var(--op-info);
    font-size: 0.875rem;
}

.tree-direct-indicator[b-9c67kzbv6l] {
    color: var(--op-success);
    font-size: 0.875rem;
}

.tree-children[b-9c67kzbv6l] {
    border-left: 1px dashed var(--op-border-light);
    margin-left: 0.75rem;
}
/* /Components/Pages/UserManagement/AccessConfiguration/RoleAccessIndex.razor.rz.scp.css */
/* Role Access Index Styles */
.roles-access-grid[b-4rrx4d7ft6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.role-access-card[b-4rrx4d7ft6] {
    background: var(--op-card-bg);
    border: 1px solid var(--op-border-color);
    transition: all 0.2s ease;
}

.role-access-card:hover[b-4rrx4d7ft6] {
    border-color: var(--op-primary);
    box-shadow: 0 4px 12px rgba(var(--op-primary-rgb), 0.15);
}

.role-header[b-4rrx4d7ft6] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.role-icon[b-4rrx4d7ft6] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--op-primary), var(--op-primary-hover));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.role-info[b-4rrx4d7ft6] {
    flex: 1;
    min-width: 0;
}

.role-info h4[b-4rrx4d7ft6] {
    margin: 0 0 0.25rem;
    font-weight: 600;
    color: var(--op-heading-color);
    font-size: 1rem;
}

.role-code[b-4rrx4d7ft6] {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    background: var(--op-bg-tertiary);
    border-radius: 4px;
    color: var(--op-muted-color);
}

.role-description[b-4rrx4d7ft6] {
    font-size: 0.8125rem;
    color: var(--op-muted-color);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.role-access-actions[b-4rrx4d7ft6] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    background: var(--op-bg-secondary);
    border-top: 1px solid var(--op-border-color);
}

.role-access-actions .op-btn[b-4rrx4d7ft6] {
    flex: 1;
    min-width: 120px;
}

.role-access-actions .op-btn-ghost[b-4rrx4d7ft6] {
    flex: 0;
    min-width: auto;
}

/* Help Styles */
.help-content[b-4rrx4d7ft6] {
    padding: 0;
}

.help-section[b-4rrx4d7ft6] {
    margin-bottom: 1.5rem;
}

.help-section:last-child[b-4rrx4d7ft6] {
    margin-bottom: 0;
}

.help-section-title[b-4rrx4d7ft6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--op-heading-color);
    margin-bottom: 0.5rem;
}

.help-section-title i[b-4rrx4d7ft6] {
    color: var(--op-primary);
}

.help-section p[b-4rrx4d7ft6] {
    color: var(--op-body-color);
    margin: 0;
    font-size: 0.875rem;
}

.help-list[b-4rrx4d7ft6] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-list li[b-4rrx4d7ft6] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: var(--op-body-color);
}

.help-list li i[b-4rrx4d7ft6] {
    color: var(--op-success);
    margin-top: 0.125rem;
}

/* Responsive */
@media (max-width: 768px) {
    .roles-access-grid[b-4rrx4d7ft6] {
        grid-template-columns: 1fr;
    }

    .role-access-actions[b-4rrx4d7ft6] {
        flex-direction: column;
    }

    .role-access-actions .op-btn[b-4rrx4d7ft6] {
        width: 100%;
    }
}
/* /Components/Pages/UserManagement/AccessConfiguration/Roles/RoleMenusConfig.razor.rz.scp.css */
/* Role Menus Config Page Styles */
.config-layout[b-rbi9pafjbk] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Module Filter Tabs */
.module-filter-tabs[b-rbi9pafjbk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--op-card-bg);
    border: 1px solid var(--op-border-color);
    border-radius: 12px;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.module-tab[b-rbi9pafjbk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--op-body-color);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.module-tab:hover[b-rbi9pafjbk] {
    background: var(--op-bg-secondary);
    color: var(--op-heading-color);
}

.module-tab.active[b-rbi9pafjbk] {
    background: var(--op-primary);
    color: #fff;
    border-color: var(--op-primary);
}

.module-tab i[b-rbi9pafjbk] {
    font-size: 1rem;
}

.tab-count[b-rbi9pafjbk] {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.module-tab:not(.active) .tab-count[b-rbi9pafjbk] {
    background: var(--op-bg-tertiary);
    color: var(--op-muted-color);
}

/* No Results */
.no-results[b-rbi9pafjbk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--op-muted-color);
    gap: 0.5rem;
}

.no-results i[b-rbi9pafjbk] {
    font-size: 1.5rem;
    opacity: 0.5;
}

/* Unsaved Changes Bar */
.unsaved-changes-bar[b-rbi9pafjbk] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--op-warning);
    color: #fff;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.unsaved-changes-bar i[b-rbi9pafjbk] {
    font-size: 1.25rem;
}

.unsaved-changes-bar span[b-rbi9pafjbk] {
    flex: 1;
    font-weight: 500;
}

.unsaved-changes-bar .op-btn-ghost[b-rbi9pafjbk] {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

.unsaved-changes-bar .op-btn-primary[b-rbi9pafjbk] {
    background: #fff;
    color: var(--op-warning);
}

/* Help Content */
.help-content[b-rbi9pafjbk] {
    padding: 0;
}

.help-section[b-rbi9pafjbk] {
    margin-bottom: 1.5rem;
}

.help-section:last-child[b-rbi9pafjbk] {
    margin-bottom: 0;
}

.help-section-title[b-rbi9pafjbk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--op-heading-color);
    margin-bottom: 0.5rem;
}

.help-section-title i[b-rbi9pafjbk] {
    color: var(--op-primary);
}

.help-section p[b-rbi9pafjbk] {
    color: var(--op-body-color);
    margin: 0;
    font-size: 0.875rem;
}

.help-list[b-rbi9pafjbk] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-list li[b-rbi9pafjbk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: var(--op-body-color);
}

.help-list li i[b-rbi9pafjbk] {
    color: var(--op-success);
}

/* Scrollbar for tabs */
.module-filter-tabs[b-rbi9pafjbk]::-webkit-scrollbar {
    height: 4px;
}

.module-filter-tabs[b-rbi9pafjbk]::-webkit-scrollbar-track {
    background: transparent;
}

.module-filter-tabs[b-rbi9pafjbk]::-webkit-scrollbar-thumb {
    background: var(--op-border-color);
    border-radius: 2px;
}

/* Responsive */
@media (max-width: 768px) {
    .op-page-header[b-rbi9pafjbk] {
        flex-direction: column;
        align-items: flex-start;
    }

    .op-page-actions[b-rbi9pafjbk] {
        width: 100%;
        justify-content: flex-end;
    }

    .module-filter-tabs[b-rbi9pafjbk] {
        padding: 0.375rem;
    }

    .module-tab[b-rbi9pafjbk] {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .unsaved-changes-bar[b-rbi9pafjbk] {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* /Components/Pages/UserManagement/AccessConfiguration/Roles/RoleModulesConfig.razor.rz.scp.css */
/* Role Modules Config Page Styles */
.config-layout[b-zbdii7bqjy] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Role Info Card */
.role-info-card[b-zbdii7bqjy] {
    background: var(--op-card-bg);
}

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

.role-avatar[b-zbdii7bqjy] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--op-primary), var(--op-primary-hover));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.role-details h5[b-zbdii7bqjy] {
    margin: 0 0 0.25rem;
    font-weight: 600;
    color: var(--op-heading-color);
}

.role-details p[b-zbdii7bqjy] {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: var(--op-muted-color);
}

.role-meta[b-zbdii7bqjy] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
}

/* No Results */
.no-results[b-zbdii7bqjy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--op-muted-color);
    gap: 0.5rem;
}

.no-results i[b-zbdii7bqjy] {
    font-size: 1.5rem;
    opacity: 0.5;
}

/* Unsaved Changes Bar */
.unsaved-changes-bar[b-zbdii7bqjy] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--op-warning);
    color: #fff;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.unsaved-changes-bar i[b-zbdii7bqjy] {
    font-size: 1.25rem;
}

.unsaved-changes-bar span[b-zbdii7bqjy] {
    flex: 1;
    font-weight: 500;
}

.unsaved-changes-bar .op-btn-ghost[b-zbdii7bqjy] {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

.unsaved-changes-bar .op-btn-primary[b-zbdii7bqjy] {
    background: #fff;
    color: var(--op-warning);
}

/* Skeleton Loader */
.skeleton-loader[b-zbdii7bqjy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-line[b-zbdii7bqjy] {
    height: 16px;
    background: linear-gradient(90deg, var(--op-bg-secondary) 25%, var(--op-bg-tertiary) 50%, var(--op-bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-zbdii7bqjy 1.5s infinite;
    border-radius: 4px;
}

.skeleton-line.w-50[b-zbdii7bqjy] {
    width: 50%;
}

.skeleton-line.w-75[b-zbdii7bqjy] {
    width: 75%;
}

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

/* Help Content */
.help-content[b-zbdii7bqjy] {
    padding: 0;
}

.help-section[b-zbdii7bqjy] {
    margin-bottom: 1.5rem;
}

.help-section:last-child[b-zbdii7bqjy] {
    margin-bottom: 0;
}

.help-section-title[b-zbdii7bqjy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--op-heading-color);
    margin-bottom: 0.5rem;
}

.help-section-title i[b-zbdii7bqjy] {
    color: var(--op-primary);
}

.help-section p[b-zbdii7bqjy] {
    color: var(--op-body-color);
    margin: 0;
    font-size: 0.875rem;
}

.help-list[b-zbdii7bqjy] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-list li[b-zbdii7bqjy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: var(--op-body-color);
}

.help-list li i[b-zbdii7bqjy] {
    color: var(--op-success);
}

/* Responsive */
@media (max-width: 768px) {
    .op-page-header[b-zbdii7bqjy] {
        flex-direction: column;
        align-items: flex-start;
    }

    .op-page-actions[b-zbdii7bqjy] {
        width: 100%;
        justify-content: flex-end;
    }

    .role-info[b-zbdii7bqjy] {
        flex-direction: column;
        text-align: center;
    }

    .role-meta[b-zbdii7bqjy] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .unsaved-changes-bar[b-zbdii7bqjy] {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* /Components/Pages/UserManagement/AccessConfiguration/UserAccessIndex.razor.rz.scp.css */
/* User Access Index Styles */
.user-avatar-sm[b-nmf00r9owy] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--op-primary), var(--op-primary-hover));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Help Styles */
.help-content[b-nmf00r9owy] {
    padding: 0;
}

.help-section[b-nmf00r9owy] {
    margin-bottom: 1.5rem;
}

.help-section:last-child[b-nmf00r9owy] {
    margin-bottom: 0;
}

.help-section-title[b-nmf00r9owy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--op-heading-color);
    margin-bottom: 0.5rem;
}

.help-section-title i[b-nmf00r9owy] {
    color: var(--op-primary);
}

.help-section p[b-nmf00r9owy] {
    color: var(--op-body-color);
    margin: 0;
    font-size: 0.875rem;
}

.help-list[b-nmf00r9owy] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-list li[b-nmf00r9owy] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: var(--op-body-color);
}

.help-list li i[b-nmf00r9owy] {
    color: var(--op-success);
    margin-top: 0.125rem;
}

/* Responsive Table */
@media (max-width: 992px) {
    .op-table[b-nmf00r9owy] {
        display: block;
        overflow-x: auto;
    }
}
/* /Components/Pages/UserManagement/AccessConfiguration/Users/UserAccessConfig.razor.rz.scp.css */
/* User Access Config Page Styles */
.config-layout[b-fqb9a96c7r] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* User Info Card */
.user-info-card[b-fqb9a96c7r] {
    background: var(--op-card-bg);
}

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

.user-avatar[b-fqb9a96c7r] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--op-primary), var(--op-primary-hover));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    flex-shrink: 0;
}

.user-details h5[b-fqb9a96c7r] {
    margin: 0 0 0.25rem;
    font-weight: 600;
    color: var(--op-heading-color);
}

.user-details p[b-fqb9a96c7r] {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: var(--op-muted-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-meta[b-fqb9a96c7r] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
    flex-wrap: wrap;
}

/* Access Tabs */
.access-tabs[b-fqb9a96c7r] {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem;
    background: var(--op-bg-secondary);
    border-radius: 12px;
    width: fit-content;
}

.access-tab[b-fqb9a96c7r] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--op-body-color);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.access-tab:hover[b-fqb9a96c7r] {
    background: var(--op-bg-tertiary);
    color: var(--op-heading-color);
}

.access-tab.active[b-fqb9a96c7r] {
    background: var(--op-card-bg);
    color: var(--op-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.access-tab i[b-fqb9a96c7r] {
    font-size: 1rem;
}

.tab-badge[b-fqb9a96c7r] {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    background: var(--op-bg-tertiary);
    border-radius: 10px;
    color: var(--op-muted-color);
}

.access-tab.active .tab-badge[b-fqb9a96c7r] {
    background: rgba(var(--op-primary-rgb), 0.15);
    color: var(--op-primary);
}

/* Tab Content */
.tab-content[b-fqb9a96c7r] {
    min-height: 400px;
}

/* Skeleton Loader */
.skeleton-loader[b-fqb9a96c7r] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.skeleton-avatar[b-fqb9a96c7r] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--op-bg-secondary) 25%, var(--op-bg-tertiary) 50%, var(--op-bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-fqb9a96c7r 1.5s infinite;
}

.skeleton-content[b-fqb9a96c7r] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-line[b-fqb9a96c7r] {
    height: 16px;
    background: linear-gradient(90deg, var(--op-bg-secondary) 25%, var(--op-bg-tertiary) 50%, var(--op-bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-fqb9a96c7r 1.5s infinite;
    border-radius: 4px;
}

.skeleton-line.w-50[b-fqb9a96c7r] { width: 50%; }
.skeleton-line.w-75[b-fqb9a96c7r] { width: 75%; }

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

/* Legend Dots in Help */
.legend-dot[b-fqb9a96c7r] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 0.5rem;
}

.legend-dot.inherited[b-fqb9a96c7r] {
    background: var(--op-info);
}

.legend-dot.direct[b-fqb9a96c7r] {
    background: var(--op-success);
}

/* Unsaved Changes Bar */
.unsaved-changes-bar[b-fqb9a96c7r] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--op-warning);
    color: #fff;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.unsaved-changes-bar i[b-fqb9a96c7r] { font-size: 1.25rem; }
.unsaved-changes-bar span[b-fqb9a96c7r] { flex: 1; font-weight: 500; }
.unsaved-changes-bar .op-btn-ghost[b-fqb9a96c7r] { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.unsaved-changes-bar .op-btn-primary[b-fqb9a96c7r] { background: #fff; color: var(--op-warning); }

/* Help Content */
.help-content[b-fqb9a96c7r] { padding: 0; }
.help-section[b-fqb9a96c7r] { margin-bottom: 1.5rem; }
.help-section:last-child[b-fqb9a96c7r] { margin-bottom: 0; }
.help-section-title[b-fqb9a96c7r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--op-heading-color);
    margin-bottom: 0.5rem;
}
.help-section-title i[b-fqb9a96c7r] { color: var(--op-primary); }
.help-section p[b-fqb9a96c7r] { color: var(--op-body-color); margin: 0; font-size: 0.875rem; }
.help-list[b-fqb9a96c7r] { list-style: none; padding: 0; margin: 0; }
.help-list li[b-fqb9a96c7r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: var(--op-body-color);
}
.help-list li i[b-fqb9a96c7r] { color: var(--op-success); }

/* Responsive */
@media (max-width: 768px) {
    .op-page-header[b-fqb9a96c7r] {
        flex-direction: column;
        align-items: flex-start;
    }

    .op-page-actions[b-fqb9a96c7r] {
        width: 100%;
        justify-content: flex-end;
    }

    .user-info[b-fqb9a96c7r] {
        flex-direction: column;
        text-align: center;
    }

    .user-meta[b-fqb9a96c7r] {
        justify-content: center;
    }

    .access-tabs[b-fqb9a96c7r] {
        width: 100%;
    }

    .access-tab[b-fqb9a96c7r] {
        flex: 1;
        justify-content: center;
    }

    .unsaved-changes-bar[b-fqb9a96c7r] {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* /Components/Pages/UserManagement/AccessConfiguration/Users/UserRolesConfig.razor.rz.scp.css */
/* User Roles Config Page Styles */
.config-layout[b-hzbsljy6fw] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* User Info Card */
.user-info-card[b-hzbsljy6fw] {
    background: var(--op-card-bg);
}

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

.user-avatar[b-hzbsljy6fw] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--op-primary), var(--op-primary-hover));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    flex-shrink: 0;
}

.user-details h5[b-hzbsljy6fw] {
    margin: 0 0 0.25rem;
    font-weight: 600;
    color: var(--op-heading-color);
}

.user-details p[b-hzbsljy6fw] {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: var(--op-muted-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-meta[b-hzbsljy6fw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
}

/* Dual Panel Container */
.dual-panel-container[b-hzbsljy6fw] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: start;
}

.panel[b-hzbsljy6fw] {
    background: var(--op-card-bg);
    border-radius: 12px;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.panel-header[b-hzbsljy6fw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--op-bg-secondary);
    border-bottom: 1px solid var(--op-border-color);
}

.panel-header h6[b-hzbsljy6fw] {
    margin: 0;
    font-weight: 600;
    color: var(--op-heading-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.panel-header h6 i[b-hzbsljy6fw] {
    color: var(--op-primary);
}

.panel-count[b-hzbsljy6fw] {
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    background: var(--op-bg-tertiary);
    color: var(--op-muted-color);
    border-radius: 10px;
    font-weight: 600;
}

.panel-count.assigned[b-hzbsljy6fw] {
    background: rgba(var(--op-success-rgb), 0.15);
    color: var(--op-success);
}

.panel-search[b-hzbsljy6fw] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--op-border-light);
}

.panel-body[b-hzbsljy6fw] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    max-height: 350px;
}

.panel-loading[b-hzbsljy6fw],
.panel-empty[b-hzbsljy6fw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--op-muted-color);
    gap: 0.75rem;
}

.panel-empty i[b-hzbsljy6fw] {
    font-size: 2rem;
    opacity: 0.5;
}

/* Role Item */
.role-item[b-hzbsljy6fw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 0.25rem;
}

.role-item:hover[b-hzbsljy6fw] {
    background: var(--op-bg-hover);
}

.role-item.assigned[b-hzbsljy6fw] {
    background: rgba(var(--op-success-rgb), 0.08);
}

.role-icon[b-hzbsljy6fw] {
    width: 36px;
    height: 36px;
    background: var(--op-bg-secondary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--op-primary);
    flex-shrink: 0;
}

.role-icon.assigned[b-hzbsljy6fw] {
    background: rgba(var(--op-success-rgb), 0.15);
    color: var(--op-success);
}

.role-content[b-hzbsljy6fw] {
    flex: 1;
    min-width: 0;
}

.role-name[b-hzbsljy6fw] {
    display: block;
    font-weight: 500;
    color: var(--op-heading-color);
    font-size: 0.875rem;
}

.role-description[b-hzbsljy6fw] {
    display: block;
    font-size: 0.75rem;
    color: var(--op-muted-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Transfer Buttons */
.transfer-buttons[b-hzbsljy6fw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
}

.transfer-buttons .op-btn[b-hzbsljy6fw] {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Skeleton Loader */
.skeleton-loader[b-hzbsljy6fw] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.skeleton-avatar[b-hzbsljy6fw] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--op-bg-secondary) 25%, var(--op-bg-tertiary) 50%, var(--op-bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-hzbsljy6fw 1.5s infinite;
}

.skeleton-content[b-hzbsljy6fw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-line[b-hzbsljy6fw] {
    height: 16px;
    background: linear-gradient(90deg, var(--op-bg-secondary) 25%, var(--op-bg-tertiary) 50%, var(--op-bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-hzbsljy6fw 1.5s infinite;
    border-radius: 4px;
}

.skeleton-line.w-50[b-hzbsljy6fw] { width: 50%; }
.skeleton-line.w-75[b-hzbsljy6fw] { width: 75%; }

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

/* Unsaved Changes Bar */
.unsaved-changes-bar[b-hzbsljy6fw] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--op-warning);
    color: #fff;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.unsaved-changes-bar i[b-hzbsljy6fw] { font-size: 1.25rem; }
.unsaved-changes-bar span[b-hzbsljy6fw] { flex: 1; font-weight: 500; }
.unsaved-changes-bar .op-btn-ghost[b-hzbsljy6fw] { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.unsaved-changes-bar .op-btn-primary[b-hzbsljy6fw] { background: #fff; color: var(--op-warning); }

/* Help Content */
.help-content[b-hzbsljy6fw] { padding: 0; }
.help-section[b-hzbsljy6fw] { margin-bottom: 1.5rem; }
.help-section:last-child[b-hzbsljy6fw] { margin-bottom: 0; }
.help-section-title[b-hzbsljy6fw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--op-heading-color);
    margin-bottom: 0.5rem;
}
.help-section-title i[b-hzbsljy6fw] { color: var(--op-primary); }
.help-section p[b-hzbsljy6fw] { color: var(--op-body-color); margin: 0; font-size: 0.875rem; }
.help-list[b-hzbsljy6fw] { list-style: none; padding: 0; margin: 0; }
.help-list li[b-hzbsljy6fw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: var(--op-body-color);
}
.help-list li i[b-hzbsljy6fw] { color: var(--op-success); }

/* Responsive */
@media (max-width: 992px) {
    .dual-panel-container[b-hzbsljy6fw] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .transfer-buttons[b-hzbsljy6fw] {
        flex-direction: row;
        justify-content: center;
        padding: 0.5rem 0;
    }

    .transfer-buttons .op-btn[b-hzbsljy6fw] {
        transform: rotate(90deg);
    }
}

@media (max-width: 768px) {
    .op-page-header[b-hzbsljy6fw] {
        flex-direction: column;
        align-items: flex-start;
    }

    .op-page-actions[b-hzbsljy6fw] {
        width: 100%;
        justify-content: flex-end;
    }

    .user-info[b-hzbsljy6fw] {
        flex-direction: column;
        text-align: center;
    }

    .user-meta[b-hzbsljy6fw] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .unsaved-changes-bar[b-hzbsljy6fw] {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* /Components/Pages/UserManagement/Index.razor.rz.scp.css */
.module-link[b-g9gp1yki8v] {
    text-decoration: none;
    color: inherit;
}

.module-link:hover[b-g9gp1yki8v] {
    text-decoration: none;
}

.module-icon[b-g9gp1yki8v] {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.op-card-hover[b-g9gp1yki8v] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.op-card-hover:hover[b-g9gp1yki8v] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.help-content[b-g9gp1yki8v] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.help-section[b-g9gp1yki8v] {
    background: var(--op-bg-tertiary);
    padding: 1rem;
    border-radius: 8px;
}

.help-section-title[b-g9gp1yki8v] {
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.help-list[b-g9gp1yki8v] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-list li[b-g9gp1yki8v] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--op-text-secondary);
}

.help-list li i[b-g9gp1yki8v] {
    color: var(--op-success);
    margin-top: 2px;
}
/* /Components/Pages/UserManagement/Menus/List.razor.rz.scp.css */
.menus-grid[b-v5pqijhyqj] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.menu-card[b-v5pqijhyqj] { text-align: center; }
.menu-card .op-card-body[b-v5pqijhyqj] { padding: 1.25rem; }

.menu-icon[b-v5pqijhyqj] { width: 48px; height: 48px; border-radius: 12px; background: rgba(108, 117, 125, 0.1); color: #6c757d; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; font-size: 1.25rem; }
.menu-card h4[b-v5pqijhyqj] { margin: 0 0 0.25rem; font-size: 0.9rem; }
.menu-code[b-v5pqijhyqj] { font-family: monospace; font-size: 0.7rem; color: var(--op-text-muted); margin: 0 0 0.25rem; }
.menu-route[b-v5pqijhyqj] { font-size: 0.75rem; color: var(--op-text-secondary); margin: 0 0 0.75rem; }
.menu-actions[b-v5pqijhyqj] { display: flex; justify-content: center; gap: 0.5rem; padding: 0.5rem !important; }

.view-toggle[b-v5pqijhyqj] { display: flex; background: var(--op-bg-tertiary); border-radius: 8px; padding: 4px; }
.toggle-btn[b-v5pqijhyqj] { background: transparent; border: none; padding: 0.5rem 0.75rem; cursor: pointer; border-radius: 6px; color: var(--op-text-muted); transition: all 0.2s ease; }
.toggle-btn:hover[b-v5pqijhyqj] { color: var(--op-text-primary); }
.toggle-btn.active[b-v5pqijhyqj] { background: var(--op-bg-primary); color: var(--op-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

.op-table[b-v5pqijhyqj] { width: 100%; border-collapse: collapse; }
.op-table th[b-v5pqijhyqj], .op-table td[b-v5pqijhyqj] { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--op-border); }
.op-table th[b-v5pqijhyqj] { font-weight: 600; font-size: 0.75rem; text-transform: uppercase; color: var(--op-text-muted); background: var(--op-bg-tertiary); }
.op-table tbody tr:hover[b-v5pqijhyqj] { background: var(--op-bg-tertiary); }
.op-table code[b-v5pqijhyqj] { background: var(--op-bg-tertiary); padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.75rem; }

.help-content[b-v5pqijhyqj] { display: flex; flex-direction: column; gap: 1.5rem; }
.help-section[b-v5pqijhyqj] { background: var(--op-bg-tertiary); padding: 1rem; border-radius: 8px; }
.help-section-title[b-v5pqijhyqj] { font-weight: 600; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
/* /Components/Pages/UserManagement/Menus/View.razor.rz.scp.css */
.view-layout[b-kl4m21h7pl] { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
@media (max-width: 1024px) { .view-layout[b-kl4m21h7pl] { grid-template-columns: 1fr; } }

.form-section[b-kl4m21h7pl] { background: var(--op-bg-secondary); border: 1px solid var(--op-border); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
.form-section-title[b-kl4m21h7pl] { font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; color: var(--op-text-primary); }

.info-grid[b-kl4m21h7pl] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.info-item.full-width[b-kl4m21h7pl] { grid-column: 1 / -1; }
@media (max-width: 768px) { .info-grid[b-kl4m21h7pl] { grid-template-columns: 1fr; } }

.info-item[b-kl4m21h7pl] { display: flex; flex-direction: column; gap: 0.25rem; }
.info-label[b-kl4m21h7pl] { font-size: 0.75rem; text-transform: uppercase; color: var(--op-text-muted); font-weight: 500; }
.info-value[b-kl4m21h7pl] { font-weight: 500; color: var(--op-text-primary); }
.info-value code[b-kl4m21h7pl] { background: var(--op-bg-tertiary); padding: 0.25rem 0.5rem; border-radius: 4px; font-family: monospace; }

.danger-zone[b-kl4m21h7pl] { border-color: var(--op-error); }

.menu-preview-section[b-kl4m21h7pl] { text-align: center; }
.menu-preview[b-kl4m21h7pl] { padding: 1rem; }
.preview-icon[b-kl4m21h7pl] { width: 64px; height: 64px; border-radius: 16px; background: rgba(108, 117, 125, 0.1); color: #6c757d; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.5rem; }
.menu-preview h4[b-kl4m21h7pl] { margin: 0 0 0.5rem; font-size: 1.1rem; }
.preview-url[b-kl4m21h7pl] { font-size: 0.875rem; color: var(--op-text-secondary); margin: 0 0 1rem; }
/* /Components/Pages/UserManagement/Modules/Form.razor.rz.scp.css */
.form-layout[b-zk8xip1ywf] { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
@media (max-width: 1024px) { .form-layout[b-zk8xip1ywf] { grid-template-columns: 1fr; } }

.form-section[b-zk8xip1ywf] { background: var(--op-bg-secondary); border: 1px solid var(--op-border); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
.form-section-title[b-zk8xip1ywf] { font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; color: var(--op-text-primary); }

.form-grid-2[b-zk8xip1ywf] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 768px) { .form-grid-2[b-zk8xip1ywf] { grid-template-columns: 1fr; } }

.preview-section[b-zk8xip1ywf] { position: sticky; top: 1rem; }

.module-preview[b-zk8xip1ywf] { text-align: center; padding: 1rem 0; }
.preview-icon[b-zk8xip1ywf] { width: 64px; height: 64px; border-radius: 12px; background: rgba(23, 162, 184, 0.1); color: #17a2b8; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.5rem; }
.module-preview h4[b-zk8xip1ywf] { margin: 0 0 0.25rem; }
.preview-code[b-zk8xip1ywf] { font-family: monospace; color: var(--op-text-muted); font-size: 0.75rem; margin: 0 0 0.75rem; }

.form-actions[b-zk8xip1ywf] { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 0.5rem; }
/* /Components/Pages/UserManagement/Modules/List.razor.rz.scp.css */
.modules-grid[b-fgj6kr8bp7] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.module-card[b-fgj6kr8bp7] { text-align: center; }
.module-card .op-card-body[b-fgj6kr8bp7] { padding: 1.25rem; }

.module-icon[b-fgj6kr8bp7] { width: 56px; height: 56px; border-radius: 12px; background: rgba(23, 162, 184, 0.1); color: #17a2b8; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; font-size: 1.5rem; }
.module-card h4[b-fgj6kr8bp7] { margin: 0 0 0.25rem; font-size: 0.9rem; }
.module-code[b-fgj6kr8bp7] { font-family: monospace; font-size: 0.7rem; color: var(--op-text-muted); margin: 0 0 0.5rem; }
.module-description[b-fgj6kr8bp7] { font-size: 0.8rem; color: var(--op-text-secondary); margin: 0 0 0.75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.module-actions[b-fgj6kr8bp7] { display: flex; justify-content: center; gap: 0.5rem; padding: 0.5rem !important; }

.view-toggle[b-fgj6kr8bp7] { display: flex; background: var(--op-bg-tertiary); border-radius: 8px; padding: 4px; }
.toggle-btn[b-fgj6kr8bp7] { background: transparent; border: none; padding: 0.5rem 0.75rem; cursor: pointer; border-radius: 6px; color: var(--op-text-muted); transition: all 0.2s ease; }
.toggle-btn:hover[b-fgj6kr8bp7] { color: var(--op-text-primary); }
.toggle-btn.active[b-fgj6kr8bp7] { background: var(--op-bg-primary); color: var(--op-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

.op-table[b-fgj6kr8bp7] { width: 100%; border-collapse: collapse; }
.op-table th[b-fgj6kr8bp7], .op-table td[b-fgj6kr8bp7] { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--op-border); }
.op-table th[b-fgj6kr8bp7] { font-weight: 600; font-size: 0.75rem; text-transform: uppercase; color: var(--op-text-muted); background: var(--op-bg-tertiary); }
.op-table tbody tr:hover[b-fgj6kr8bp7] { background: var(--op-bg-tertiary); }
.op-table code[b-fgj6kr8bp7] { background: var(--op-bg-tertiary); padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.75rem; }

.help-content[b-fgj6kr8bp7] { display: flex; flex-direction: column; gap: 1.5rem; }
.help-section[b-fgj6kr8bp7] { background: var(--op-bg-tertiary); padding: 1rem; border-radius: 8px; }
.help-section-title[b-fgj6kr8bp7] { font-weight: 600; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
/* /Components/Pages/UserManagement/Modules/View.razor.rz.scp.css */
.view-layout[b-g7q8uvzyn7] { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
@media (max-width: 1024px) { .view-layout[b-g7q8uvzyn7] { grid-template-columns: 1fr; } }

.form-section[b-g7q8uvzyn7] { background: var(--op-bg-secondary); border: 1px solid var(--op-border); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
.form-section-title[b-g7q8uvzyn7] { font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; color: var(--op-text-primary); }

.info-grid[b-g7q8uvzyn7] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.info-item.full-width[b-g7q8uvzyn7] { grid-column: 1 / -1; }
@media (max-width: 768px) { .info-grid[b-g7q8uvzyn7] { grid-template-columns: 1fr; } }

.info-item[b-g7q8uvzyn7] { display: flex; flex-direction: column; gap: 0.25rem; }
.info-label[b-g7q8uvzyn7] { font-size: 0.75rem; text-transform: uppercase; color: var(--op-text-muted); font-weight: 500; }
.info-value[b-g7q8uvzyn7] { font-weight: 500; color: var(--op-text-primary); }
.info-value code[b-g7q8uvzyn7] { background: var(--op-bg-tertiary); padding: 0.25rem 0.5rem; border-radius: 4px; font-family: monospace; }

.danger-zone[b-g7q8uvzyn7] { border-color: var(--op-error); }
/* /Components/Pages/UserManagement/Permissions/Form.razor.rz.scp.css */
.form-layout[b-0xdtab68ks] { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
@media (max-width: 1024px) { .form-layout[b-0xdtab68ks] { grid-template-columns: 1fr; } }

.form-section[b-0xdtab68ks] { background: var(--op-bg-secondary); border: 1px solid var(--op-border); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
.form-section-title[b-0xdtab68ks] { font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; color: var(--op-text-primary); }

.form-grid-2[b-0xdtab68ks] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.form-grid-3[b-0xdtab68ks] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 768px) { .form-grid-2[b-0xdtab68ks], .form-grid-3[b-0xdtab68ks] { grid-template-columns: 1fr; } }

.preview-section[b-0xdtab68ks] { position: sticky; top: 1rem; }

.permission-preview[b-0xdtab68ks] { text-align: center; padding: 1rem 0; }
.preview-icon[b-0xdtab68ks] { width: 64px; height: 64px; border-radius: 12px; background: rgba(255, 193, 7, 0.1); color: #ffc107; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.5rem; }
.permission-preview h4[b-0xdtab68ks] { margin: 0 0 0.25rem; }
.preview-code[b-0xdtab68ks] { font-family: monospace; color: var(--op-text-muted); font-size: 0.75rem; margin: 0 0 0.75rem; }
.preview-meta[b-0xdtab68ks] { display: flex; gap: 0.25rem; justify-content: center; }

.form-actions[b-0xdtab68ks] { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 0.5rem; }

.help-content[b-0xdtab68ks] { display: flex; flex-direction: column; gap: 1.5rem; }
.help-section[b-0xdtab68ks] { background: var(--op-bg-tertiary); padding: 1rem; border-radius: 8px; }
.help-section-title[b-0xdtab68ks] { font-weight: 600; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
/* /Components/Pages/UserManagement/Permissions/List.razor.rz.scp.css */
.permissions-grid[b-5sfa5g1jet] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.permission-card[b-5sfa5g1jet] { text-align: center; }
.permission-card .op-card-body[b-5sfa5g1jet] { padding: 1.25rem; }

.permission-icon[b-5sfa5g1jet] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-size: 1.25rem;
}

.permission-card h4[b-5sfa5g1jet] { margin: 0 0 0.25rem; font-size: 0.9rem; }
.permission-code[b-5sfa5g1jet] { font-family: monospace; font-size: 0.7rem; color: var(--op-text-muted); margin: 0 0 0.5rem; }
.permission-meta[b-5sfa5g1jet] { display: flex; gap: 0.25rem; justify-content: center; flex-wrap: wrap; }
.permission-actions[b-5sfa5g1jet] { display: flex; justify-content: center; gap: 0.5rem; padding: 0.5rem !important; }

.view-toggle[b-5sfa5g1jet] { display: flex; background: var(--op-bg-tertiary); border-radius: 8px; padding: 4px; }
.toggle-btn[b-5sfa5g1jet] { background: transparent; border: none; padding: 0.5rem 0.75rem; cursor: pointer; border-radius: 6px; color: var(--op-text-muted); transition: all 0.2s ease; }
.toggle-btn:hover[b-5sfa5g1jet] { color: var(--op-text-primary); }
.toggle-btn.active[b-5sfa5g1jet] { background: var(--op-bg-primary); color: var(--op-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

.pagination-container[b-5sfa5g1jet] { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding: 0 0.5rem; }
.pagination-info[b-5sfa5g1jet] { color: var(--op-text-muted); font-size: 0.875rem; }
.pagination[b-5sfa5g1jet] { display: flex; gap: 0.25rem; }
.pagination-btn[b-5sfa5g1jet] { background: var(--op-bg-secondary); border: 1px solid var(--op-border); padding: 0.5rem 0.75rem; border-radius: 6px; cursor: pointer; color: var(--op-text-primary); font-size: 0.875rem; min-width: 36px; transition: all 0.2s ease; }
.pagination-btn:hover:not(:disabled)[b-5sfa5g1jet] { background: var(--op-bg-tertiary); border-color: var(--op-primary); }
.pagination-btn.active[b-5sfa5g1jet] { background: var(--op-primary); border-color: var(--op-primary); color: white; }
.pagination-btn:disabled[b-5sfa5g1jet] { opacity: 0.5; cursor: not-allowed; }

.op-table[b-5sfa5g1jet] { width: 100%; border-collapse: collapse; }
.op-table th[b-5sfa5g1jet], .op-table td[b-5sfa5g1jet] { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--op-border); }
.op-table th[b-5sfa5g1jet] { font-weight: 600; font-size: 0.75rem; text-transform: uppercase; color: var(--op-text-muted); background: var(--op-bg-tertiary); }
.op-table tbody tr:hover[b-5sfa5g1jet] { background: var(--op-bg-tertiary); }
.op-table code[b-5sfa5g1jet] { background: var(--op-bg-tertiary); padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.75rem; }

.help-content[b-5sfa5g1jet] { display: flex; flex-direction: column; gap: 1.5rem; }
.help-section[b-5sfa5g1jet] { background: var(--op-bg-tertiary); padding: 1rem; border-radius: 8px; }
.help-section-title[b-5sfa5g1jet] { font-weight: 600; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
/* /Components/Pages/UserManagement/Permissions/View.razor.rz.scp.css */
.view-layout[b-050y1k5vk5] { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
@media (max-width: 1024px) { .view-layout[b-050y1k5vk5] { grid-template-columns: 1fr; } }

.form-section[b-050y1k5vk5] { background: var(--op-bg-secondary); border: 1px solid var(--op-border); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
.form-section-title[b-050y1k5vk5] { font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; color: var(--op-text-primary); }

.info-grid[b-050y1k5vk5] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.info-item.full-width[b-050y1k5vk5] { grid-column: 1 / -1; }
@media (max-width: 768px) { .info-grid[b-050y1k5vk5] { grid-template-columns: 1fr; } }

.info-item[b-050y1k5vk5] { display: flex; flex-direction: column; gap: 0.25rem; }
.info-label[b-050y1k5vk5] { font-size: 0.75rem; text-transform: uppercase; color: var(--op-text-muted); font-weight: 500; }
.info-value[b-050y1k5vk5] { font-weight: 500; color: var(--op-text-primary); }
.info-value code[b-050y1k5vk5] { background: var(--op-bg-tertiary); padding: 0.25rem 0.5rem; border-radius: 4px; font-family: monospace; }

.danger-zone[b-050y1k5vk5] { border-color: var(--op-error); }
/* /Components/Pages/UserManagement/Roles/Form.razor.rz.scp.css */
.form-layout[b-iri2so24xg] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .form-layout[b-iri2so24xg] {
        grid-template-columns: 1fr;
    }
}

.form-section[b-iri2so24xg] {
    background: var(--op-bg-secondary);
    border: 1px solid var(--op-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-section-title[b-iri2so24xg] {
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--op-text-primary);
}

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

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

.preview-section[b-iri2so24xg] {
    position: sticky;
    top: 1rem;
}

.role-preview[b-iri2so24xg] {
    text-align: center;
    padding: 1rem 0;
}

.preview-icon[b-iri2so24xg] {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: rgba(30, 200, 165, 0.1);
    color: var(--op-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
}

.role-preview h4[b-iri2so24xg] {
    margin: 0 0 0.25rem;
}

.preview-code[b-iri2so24xg] {
    font-family: monospace;
    color: var(--op-text-muted);
    font-size: 0.75rem;
    margin: 0 0 0.75rem;
}

.preview-description[b-iri2so24xg] {
    color: var(--op-text-secondary);
    font-size: 0.875rem;
    margin: 0 0 1rem;
}

.preview-status[b-iri2so24xg] {
    margin-top: 0.5rem;
}

.form-actions[b-iri2so24xg] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.help-content[b-iri2so24xg] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.help-section[b-iri2so24xg] {
    background: var(--op-bg-tertiary);
    padding: 1rem;
    border-radius: 8px;
}

.help-section-title[b-iri2so24xg] {
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.help-list[b-iri2so24xg] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-list li[b-iri2so24xg] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--op-text-secondary);
}

.help-list li i[b-iri2so24xg] {
    color: var(--op-success);
    margin-top: 2px;
}
/* /Components/Pages/UserManagement/Roles/List.razor.rz.scp.css */
.roles-grid[b-0t8czm23ou] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.role-card[b-0t8czm23ou] {
    text-align: center;
}

.role-card .op-card-body[b-0t8czm23ou] {
    padding: 1.5rem;
}

.role-icon[b-0t8czm23ou] {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: rgba(30, 200, 165, 0.1);
    color: var(--op-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
}

.role-icon-sm[b-0t8czm23ou] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(30, 200, 165, 0.1);
    color: var(--op-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.role-info h4[b-0t8czm23ou] {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.role-code[b-0t8czm23ou] {
    color: var(--op-text-muted);
    font-size: 0.75rem;
    font-family: monospace;
    margin: 0 0 0.5rem;
}

.role-description[b-0t8czm23ou] {
    color: var(--op-text-secondary);
    font-size: 0.875rem;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.role-status[b-0t8czm23ou] {
    margin-top: 1rem;
}

.role-actions[b-0t8czm23ou] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem !important;
}

.view-toggle[b-0t8czm23ou] {
    display: flex;
    background: var(--op-bg-tertiary);
    border-radius: 8px;
    padding: 4px;
}

.toggle-btn[b-0t8czm23ou] {
    background: transparent;
    border: none;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: 6px;
    color: var(--op-text-muted);
    transition: all 0.2s ease;
}

.toggle-btn:hover[b-0t8czm23ou] {
    color: var(--op-text-primary);
}

.toggle-btn.active[b-0t8czm23ou] {
    background: var(--op-bg-primary);
    color: var(--op-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pagination-container[b-0t8czm23ou] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding: 0 0.5rem;
}

.pagination-info[b-0t8czm23ou] {
    color: var(--op-text-muted);
    font-size: 0.875rem;
}

.pagination[b-0t8czm23ou] {
    display: flex;
    gap: 0.25rem;
}

.pagination-btn[b-0t8czm23ou] {
    background: var(--op-bg-secondary);
    border: 1px solid var(--op-border);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--op-text-primary);
    font-size: 0.875rem;
    min-width: 36px;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled)[b-0t8czm23ou] {
    background: var(--op-bg-tertiary);
    border-color: var(--op-primary);
}

.pagination-btn.active[b-0t8czm23ou] {
    background: var(--op-primary);
    border-color: var(--op-primary);
    color: white;
}

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

.op-table[b-0t8czm23ou] {
    width: 100%;
    border-collapse: collapse;
}

.op-table th[b-0t8czm23ou],
.op-table td[b-0t8czm23ou] {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--op-border);
}

.op-table th[b-0t8czm23ou] {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--op-text-muted);
    background: var(--op-bg-tertiary);
}

.op-table tbody tr:hover[b-0t8czm23ou] {
    background: var(--op-bg-tertiary);
}

.help-content[b-0t8czm23ou] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.help-section[b-0t8czm23ou] {
    background: var(--op-bg-tertiary);
    padding: 1rem;
    border-radius: 8px;
}

.help-section-title[b-0t8czm23ou] {
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.help-list[b-0t8czm23ou] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-list li[b-0t8czm23ou] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--op-text-secondary);
}

.help-list li i[b-0t8czm23ou] {
    color: var(--op-success);
    margin-top: 2px;
}
/* /Components/Pages/UserManagement/Roles/View.razor.rz.scp.css */
.view-layout[b-xy2r2j3y16] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .view-layout[b-xy2r2j3y16] {
        grid-template-columns: 1fr;
    }
}

.form-section[b-xy2r2j3y16] {
    background: var(--op-bg-secondary);
    border: 1px solid var(--op-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-section-title[b-xy2r2j3y16] {
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--op-text-primary);
}

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

.info-item.full-width[b-xy2r2j3y16] {
    grid-column: 1 / -1;
}

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

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

.info-label[b-xy2r2j3y16] {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--op-text-muted);
    font-weight: 500;
}

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

.info-value code[b-xy2r2j3y16] {
    background: var(--op-bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: monospace;
}

.role-card-preview[b-xy2r2j3y16] {
    text-align: center;
    position: sticky;
    top: 1rem;
}

.preview-icon[b-xy2r2j3y16] {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: rgba(30, 200, 165, 0.1);
    color: var(--op-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
}

.role-card-preview h3[b-xy2r2j3y16] {
    margin: 0 0 0.25rem;
}

.preview-code[b-xy2r2j3y16] {
    font-family: monospace;
    color: var(--op-text-muted);
    font-size: 0.75rem;
    margin: 0 0 0.75rem;
}

.preview-description[b-xy2r2j3y16] {
    color: var(--op-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.preview-status[b-xy2r2j3y16] {
    margin-top: 1rem;
}

.danger-zone[b-xy2r2j3y16] {
    border-color: var(--op-error);
}

.help-content[b-xy2r2j3y16] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.help-section[b-xy2r2j3y16] {
    background: var(--op-bg-tertiary);
    padding: 1rem;
    border-radius: 8px;
}

.help-section-title[b-xy2r2j3y16] {
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* /Components/Pages/UserManagement/Users/Form.razor.rz.scp.css */
.form-layout[b-zehf4vf92i] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .form-layout[b-zehf4vf92i] {
        grid-template-columns: 1fr;
    }
}

.form-section[b-zehf4vf92i] {
    background: var(--op-bg-secondary);
    border: 1px solid var(--op-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-section-title[b-zehf4vf92i] {
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--op-text-primary);
}

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

.form-grid-3[b-zehf4vf92i] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .form-grid-2[b-zehf4vf92i],
    .form-grid-3[b-zehf4vf92i] {
        grid-template-columns: 1fr;
    }
}

.roles-selector[b-zehf4vf92i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
}

.role-checkbox[b-zehf4vf92i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--op-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--op-bg-primary);
}

.role-checkbox:hover[b-zehf4vf92i] {
    border-color: var(--op-primary);
}

.role-checkbox.checked[b-zehf4vf92i] {
    border-color: var(--op-primary);
    background: rgba(var(--op-primary-rgb), 0.05);
}

.role-checkbox input[b-zehf4vf92i] {
    accent-color: var(--op-primary);
}

.role-info[b-zehf4vf92i] {
    display: flex;
    flex-direction: column;
}

.role-name[b-zehf4vf92i] {
    font-weight: 500;
    font-size: 0.875rem;
}

.role-code[b-zehf4vf92i] {
    font-size: 0.75rem;
    color: var(--op-text-muted);
}

.preview-section[b-zehf4vf92i] {
    position: sticky;
    top: 1rem;
}

.user-preview[b-zehf4vf92i] {
    text-align: center;
    padding: 1rem 0;
}

.preview-avatar[b-zehf4vf92i] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--op-primary), var(--op-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: white;
    font-weight: 600;
    font-size: 1.5rem;
}

.user-preview h4[b-zehf4vf92i] {
    margin: 0 0 0.25rem;
}

.preview-email[b-zehf4vf92i] {
    color: var(--op-text-secondary);
    font-size: 0.875rem;
    margin: 0 0 0.25rem;
}

.preview-username[b-zehf4vf92i] {
    color: var(--op-text-muted);
    font-size: 0.75rem;
    margin: 0 0 1rem;
}

.preview-roles[b-zehf4vf92i] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.preview-status[b-zehf4vf92i] {
    margin-top: 0.5rem;
}

.form-actions[b-zehf4vf92i] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.help-content[b-zehf4vf92i] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.help-section[b-zehf4vf92i] {
    background: var(--op-bg-tertiary);
    padding: 1rem;
    border-radius: 8px;
}

.help-section-title[b-zehf4vf92i] {
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* /Components/Pages/UserManagement/Users/List.razor.rz.scp.css */
.users-grid[b-dio1xii0h3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.user-card[b-dio1xii0h3] {
    text-align: center;
}

.user-card .op-card-body[b-dio1xii0h3] {
    padding: 1.5rem;
}

.user-avatar[b-dio1xii0h3] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--op-primary), var(--op-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: white;
    font-weight: 600;
    font-size: 1.25rem;
}

.user-avatar-sm[b-dio1xii0h3] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--op-primary), var(--op-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.user-info h4[b-dio1xii0h3] {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.user-email[b-dio1xii0h3] {
    color: var(--op-text-secondary);
    font-size: 0.875rem;
    margin: 0 0 0.25rem;
}

.user-username[b-dio1xii0h3] {
    color: var(--op-text-muted);
    font-size: 0.75rem;
    margin: 0;
}

.user-badges[b-dio1xii0h3] {
    margin: 1rem 0;
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    flex-wrap: wrap;
}

.user-status[b-dio1xii0h3] {
    margin-top: 0.5rem;
}

.user-actions[b-dio1xii0h3] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem !important;
}

.view-toggle[b-dio1xii0h3] {
    display: flex;
    background: var(--op-bg-tertiary);
    border-radius: 8px;
    padding: 4px;
}

.toggle-btn[b-dio1xii0h3] {
    background: transparent;
    border: none;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: 6px;
    color: var(--op-text-muted);
    transition: all 0.2s ease;
}

.toggle-btn:hover[b-dio1xii0h3] {
    color: var(--op-text-primary);
}

.toggle-btn.active[b-dio1xii0h3] {
    background: var(--op-bg-primary);
    color: var(--op-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pagination-container[b-dio1xii0h3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding: 0 0.5rem;
}

.pagination-info[b-dio1xii0h3] {
    color: var(--op-text-muted);
    font-size: 0.875rem;
}

.pagination[b-dio1xii0h3] {
    display: flex;
    gap: 0.25rem;
}

.pagination-btn[b-dio1xii0h3] {
    background: var(--op-bg-secondary);
    border: 1px solid var(--op-border);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--op-text-primary);
    font-size: 0.875rem;
    min-width: 36px;
    transition: all 0.2s ease;
}

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

.pagination-btn.active[b-dio1xii0h3] {
    background: var(--op-primary);
    border-color: var(--op-primary);
    color: white;
}

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

.op-table[b-dio1xii0h3] {
    width: 100%;
    border-collapse: collapse;
}

.op-table th[b-dio1xii0h3],
.op-table td[b-dio1xii0h3] {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--op-border);
}

.op-table th[b-dio1xii0h3] {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--op-text-muted);
    background: var(--op-bg-tertiary);
}

.op-table tbody tr:hover[b-dio1xii0h3] {
    background: var(--op-bg-tertiary);
}

.help-content[b-dio1xii0h3] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.help-section[b-dio1xii0h3] {
    background: var(--op-bg-tertiary);
    padding: 1rem;
    border-radius: 8px;
}

.help-section-title[b-dio1xii0h3] {
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.help-list[b-dio1xii0h3] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-list li[b-dio1xii0h3] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--op-text-secondary);
}

.help-list li i[b-dio1xii0h3] {
    color: var(--op-success);
    margin-top: 2px;
}
/* /Components/Pages/UserManagement/Users/View.razor.rz.scp.css */
.view-layout[b-t0rjseky2k] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .view-layout[b-t0rjseky2k] {
        grid-template-columns: 1fr;
    }
}

.form-section[b-t0rjseky2k] {
    background: var(--op-bg-secondary);
    border: 1px solid var(--op-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-section-title[b-t0rjseky2k] {
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--op-text-primary);
}

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

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

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

.info-label[b-t0rjseky2k] {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--op-text-muted);
    font-weight: 500;
}

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

.roles-list[b-t0rjseky2k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
}

.role-item[b-t0rjseky2k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--op-bg-tertiary);
    border-radius: 8px;
    font-weight: 500;
}

.profile-card[b-t0rjseky2k] {
    text-align: center;
    position: sticky;
    top: 1rem;
}

.profile-avatar[b-t0rjseky2k] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--op-primary), var(--op-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: white;
    font-weight: 600;
    font-size: 2rem;
}

.profile-card h3[b-t0rjseky2k] {
    margin: 0 0 0.25rem;
}

.profile-email[b-t0rjseky2k] {
    color: var(--op-text-secondary);
    font-size: 0.875rem;
    margin: 0 0 0.25rem;
}

.profile-username[b-t0rjseky2k] {
    color: var(--op-text-muted);
    font-size: 0.75rem;
    margin: 0 0 1rem;
}

.profile-roles[b-t0rjseky2k] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    flex-wrap: wrap;
}

.profile-stats[b-t0rjseky2k] {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.stat-item[b-t0rjseky2k] {
    text-align: center;
}

.stat-value[b-t0rjseky2k] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--op-primary);
}

.stat-label[b-t0rjseky2k] {
    font-size: 0.75rem;
    color: var(--op-text-muted);
    text-transform: uppercase;
}

.danger-zone[b-t0rjseky2k] {
    border-color: var(--op-error);
}

.help-content[b-t0rjseky2k] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.help-section[b-t0rjseky2k] {
    background: var(--op-bg-tertiary);
    padding: 1rem;
    border-radius: 8px;
}

.help-section-title[b-t0rjseky2k] {
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* /Components/Shared/Breadcrumb.razor.rz.scp.css */
.op-breadcrumb[b-wvzu47v7oq] {
    margin-bottom: 1rem;
}

.op-breadcrumb ol[b-wvzu47v7oq] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}

.op-breadcrumb li[b-wvzu47v7oq] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--op-text-muted, #94A3B8);
}

.op-breadcrumb a[b-wvzu47v7oq] {
    color: var(--op-text-secondary, #64748B);
    text-decoration: none;
    transition: color 0.2s;
}

.op-breadcrumb a:hover[b-wvzu47v7oq] {
    color: var(--op-primary, #1EA7FD);
}

.op-breadcrumb .bi-chevron-right[b-wvzu47v7oq] {
    font-size: 0.625rem;
}

.op-breadcrumb .current[b-wvzu47v7oq] {
    color: var(--op-text-primary, #1E293B);
    font-weight: 500;
}
/* /Components/Shared/DataTable.razor.rz.scp.css */
.op-data-table[b-9l52mg7wn9] {
    background: var(--op-surface, #fff);
    border-radius: 12px;
    border: 1px solid var(--op-border-light, #F1F5F9);
    overflow: hidden;
}

.op-data-table-header[b-9l52mg7wn9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--op-border-light, #F1F5F9);
    gap: 1rem;
}

.op-data-table-title[b-9l52mg7wn9] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-text-primary, #1E293B);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.op-data-table-title i[b-9l52mg7wn9] {
    color: var(--op-text-muted, #94A3B8);
}

.op-data-table-actions[b-9l52mg7wn9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.op-data-table-container[b-9l52mg7wn9] {
    overflow-x: auto;
}

.op-data-table table[b-9l52mg7wn9] {
    width: 100%;
    border-collapse: collapse;
}

.op-data-table th[b-9l52mg7wn9] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--op-text-secondary, #64748B);
    background: var(--op-bg, #F8FAFC);
    border-bottom: 1px solid var(--op-border-light, #F1F5F9);
    white-space: nowrap;
}

.op-data-table td[b-9l52mg7wn9] {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    color: var(--op-text-primary, #1E293B);
    border-bottom: 1px solid var(--op-border-light, #F1F5F9);
    vertical-align: middle;
}

.op-data-table tbody tr:hover[b-9l52mg7wn9] {
    background: var(--op-bg, #F8FAFC);
}

.op-data-table tbody tr:last-child td[b-9l52mg7wn9] {
    border-bottom: none;
}

.op-data-table-loading[b-9l52mg7wn9],
.op-data-table-empty[b-9l52mg7wn9] {
    padding: 3rem;
    text-align: center;
    color: var(--op-text-muted, #94A3B8);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.op-data-table-loading i[b-9l52mg7wn9],
.op-data-table-empty i[b-9l52mg7wn9] {
    font-size: 2.5rem;
}

.op-spinner[b-9l52mg7wn9] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--op-border, #E2E8F0);
    border-top-color: var(--op-primary, #1EA7FD);
    border-radius: 50%;
    animation: spin-b-9l52mg7wn9 0.8s linear infinite;
}

@keyframes spin-b-9l52mg7wn9 {
    to { transform: rotate(360deg); }
}
/* /Components/Shared/KpiCard.razor.rz.scp.css */
.op-kpi-card[b-kuffmrtlrx] {
    background: var(--op-surface, #fff);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--op-border-light, #F1F5F9);
    transition: all 0.2s;
}

.op-kpi-card:hover[b-kuffmrtlrx] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.op-kpi-icon[b-kuffmrtlrx] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.op-kpi-card--primary .op-kpi-icon[b-kuffmrtlrx] {
    background: rgba(30, 167, 253, 0.1);
    color: var(--op-primary, #1EA7FD);
}

.op-kpi-card--success .op-kpi-icon[b-kuffmrtlrx] {
    background: rgba(34, 197, 94, 0.1);
    color: var(--op-success, #22C55E);
}

.op-kpi-card--warning .op-kpi-icon[b-kuffmrtlrx] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--op-warning, #F59E0B);
}

.op-kpi-card--error .op-kpi-icon[b-kuffmrtlrx] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--op-error, #EF4444);
}

.op-kpi-card--info .op-kpi-icon[b-kuffmrtlrx] {
    background: rgba(0, 198, 255, 0.1);
    color: var(--op-info, #00C6FF);
}

.op-kpi-content[b-kuffmrtlrx] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.op-kpi-label[b-kuffmrtlrx] {
    font-size: 0.8125rem;
    color: var(--op-text-secondary, #64748B);
    font-weight: 500;
}

.op-kpi-value[b-kuffmrtlrx] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--op-text-primary, #1E293B);
    line-height: 1.2;
}

.op-kpi-subvalue[b-kuffmrtlrx] {
    font-size: 0.75rem;
    color: var(--op-text-muted, #94A3B8);
}
/* /Components/Shared/ModalDialog.razor.rz.scp.css */
.modal-backdrop[b-tsfweo809g] {
    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: 1050;
    backdrop-filter: blur(4px);
    animation: fadeIn-b-tsfweo809g 0.15s ease;
}

@keyframes fadeIn-b-tsfweo809g {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-container[b-tsfweo809g] {
    background: var(--op-bg-primary, #fff);
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-tsfweo809g 0.2s ease;
}

@keyframes slideUp-b-tsfweo809g {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-sm[b-tsfweo809g] { width: 400px; }
.modal-md[b-tsfweo809g] { width: 560px; }
.modal-lg[b-tsfweo809g] { width: 720px; }
.modal-xl[b-tsfweo809g] { width: 960px; }

.modal-header[b-tsfweo809g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--op-border, #e4e6e8);
}

.modal-header h3[b-tsfweo809g] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--op-heading-color, #566a7f);
}

.modal-body[b-tsfweo809g] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

@media (max-width: 640px) {
    .modal-container[b-tsfweo809g] {
        width: 95% !important;
        margin: 1rem;
    }
}
/* /Components/Shared/ModuleCard.razor.rz.scp.css */
.op-module-card[b-9rir1wtl6j] {
    display: flex;
    flex-direction: column;
    background: var(--op-surface, #fff);
    border-radius: 12px;
    border: 1px solid var(--op-border-light, #F1F5F9);
    text-decoration: none;
    transition: all 0.2s;
    overflow: hidden;
}

.op-module-card:hover[b-9rir1wtl6j] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.op-module-card-icon[b-9rir1wtl6j] {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #fff;
    margin: 1.5rem auto 0;
}

.op-module-card--primary .op-module-card-icon[b-9rir1wtl6j] {
    background: linear-gradient(135deg, #1EA7FD, #0F4C81);
}

.op-module-card--success .op-module-card-icon[b-9rir1wtl6j] {
    background: linear-gradient(135deg, #22C55E, #16A34A);
}

.op-module-card--warning .op-module-card-icon[b-9rir1wtl6j] {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.op-module-card--error .op-module-card-icon[b-9rir1wtl6j] {
    background: linear-gradient(135deg, #EF4444, #DC2626);
}

.op-module-card--info .op-module-card-icon[b-9rir1wtl6j] {
    background: linear-gradient(135deg, #06B6D4, #0891B2);
}

.op-module-card--secondary .op-module-card-icon[b-9rir1wtl6j] {
    background: linear-gradient(135deg, #64748B, #475569);
}

.op-module-card--dark .op-module-card-icon[b-9rir1wtl6j] {
    background: linear-gradient(135deg, #1E293B, #0F172A);
}

.op-module-card--purple .op-module-card-icon[b-9rir1wtl6j] {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
}

.op-module-card-content[b-9rir1wtl6j] {
    padding: 1rem 1.25rem;
    text-align: center;
    flex: 1;
}

.op-module-card-content h3[b-9rir1wtl6j] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-text-primary, #1E293B);
    margin: 0 0 0.5rem;
}

.op-module-card-content p[b-9rir1wtl6j] {
    font-size: 0.8125rem;
    color: var(--op-text-secondary, #64748B);
    margin: 0;
    line-height: 1.5;
}

.op-module-card-footer[b-9rir1wtl6j] {
    padding: 0.875rem 1.25rem;
    text-align: center;
    border-top: 1px solid var(--op-border-light, #F1F5F9);
    background: var(--op-bg, #F8FAFC);
}

.op-module-card-footer span[b-9rir1wtl6j] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--op-primary, #1EA7FD);
}

.op-module-card-footer i[b-9rir1wtl6j] {
    margin-left: 0.25rem;
    transition: transform 0.2s;
}

.op-module-card:hover .op-module-card-footer i[b-9rir1wtl6j] {
    transform: translateX(4px);
}
/* /Components/Shared/PageHeader.razor.rz.scp.css */
.op-page-header-wrapper[b-rshtnk0f8o] {
    margin-bottom: 1.5rem;
}

.op-page-header[b-rshtnk0f8o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.op-page-header-content[b-rshtnk0f8o] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.op-page-header-icon[b-rshtnk0f8o] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--op-primary, #1EA7FD), var(--op-secondary, #1EC8A5));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
}

.op-page-header-text h1[b-rshtnk0f8o] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--op-text-primary, #1E293B);
    margin: 0;
}

.op-page-header-text p[b-rshtnk0f8o] {
    font-size: 0.875rem;
    color: var(--op-text-secondary, #64748B);
    margin: 0.25rem 0 0;
}

.op-page-header-actions[b-rshtnk0f8o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .op-page-header[b-rshtnk0f8o] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .op-page-header-actions[b-rshtnk0f8o] {
        width: 100%;
        justify-content: flex-start;
    }
}
/* /Components/Shared/Pagination.razor.rz.scp.css */
.pagination-container[b-hvt7djchqg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    margin-top: 16px;
    border-top: 1px solid var(--op-border-light);
}

.pagination-info[b-hvt7djchqg] {
    font-size: 0.85rem;
    color: var(--op-text-secondary);
}

.pagination-controls[b-hvt7djchqg] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-btn[b-hvt7djchqg] {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--op-border-light);
    background: var(--op-bg-card);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--op-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.page-btn:hover:not(:disabled)[b-hvt7djchqg] {
    background: var(--op-bg-muted);
    border-color: var(--op-primary);
    color: var(--op-primary);
}

.page-btn.active[b-hvt7djchqg] {
    background: var(--op-primary);
    border-color: var(--op-primary);
    color: white;
}

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

.page-ellipsis[b-hvt7djchqg] {
    width: 36px;
    text-align: center;
    color: var(--op-text-muted);
}

@media (max-width: 640px) {
    .pagination-container[b-hvt7djchqg] {
        flex-direction: column;
        gap: 12px;
    }
}
/* /Components/Shared/SetupWizard/CsvUploadComponent.razor.rz.scp.css */
.csv-upload-component[b-nuw2j29s9o] {
    border: 1px solid var(--op-border);
    border-radius: 8px;
    padding: 1rem;
    background: var(--op-bg-secondary);
}

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

.upload-header h4[b-nuw2j29s9o] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.upload-area[b-nuw2j29s9o] {
    border: 2px dashed var(--op-border);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: all 0.2s ease;
    background: var(--op-bg-primary);
}

.upload-area.drag-over[b-nuw2j29s9o] {
    border-color: var(--op-primary);
    background: rgba(var(--op-primary-rgb), 0.05);
}

.upload-area.has-file[b-nuw2j29s9o] {
    border-style: solid;
    padding: 1rem;
}

.upload-placeholder[b-nuw2j29s9o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--op-text-secondary);
}

.upload-placeholder i[b-nuw2j29s9o] {
    font-size: 2.5rem;
    color: var(--op-primary);
}

.upload-placeholder p[b-nuw2j29s9o] {
    margin: 0;
    font-size: 0.9375rem;
}

.upload-placeholder span[b-nuw2j29s9o] {
    font-size: 0.75rem;
    color: var(--op-text-tertiary);
}

.file-preview[b-nuw2j29s9o] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.file-preview > i[b-nuw2j29s9o] {
    font-size: 2rem;
    color: var(--op-success);
}

.file-info[b-nuw2j29s9o] {
    flex: 1;
    text-align: left;
}

.file-name[b-nuw2j29s9o] {
    display: block;
    font-weight: 500;
}

.file-size[b-nuw2j29s9o] {
    display: block;
    font-size: 0.75rem;
    color: var(--op-text-secondary);
}

.upload-actions[b-nuw2j29s9o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--op-border);
}

.upload-result[b-nuw2j29s9o] {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 8px;
}

.upload-result.success[b-nuw2j29s9o] {
    background: rgba(var(--op-success-rgb), 0.1);
    border: 1px solid var(--op-success);
}

.upload-result.error[b-nuw2j29s9o] {
    background: rgba(var(--op-error-rgb), 0.1);
    border: 1px solid var(--op-error);
}

.result-header[b-nuw2j29s9o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.upload-result.success .result-header[b-nuw2j29s9o] {
    color: var(--op-success);
}

.upload-result.error .result-header[b-nuw2j29s9o] {
    color: var(--op-error);
}

.result-stats[b-nuw2j29s9o] {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
}

.result-stats .success[b-nuw2j29s9o] {
    color: var(--op-success);
}

.result-stats .error[b-nuw2j29s9o] {
    color: var(--op-error);
}

.result-errors[b-nuw2j29s9o] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--op-border);
}

.result-errors h5[b-nuw2j29s9o] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.5rem;
}

.error-list[b-nuw2j29s9o] {
    max-height: 200px;
    overflow-y: auto;
}

.error-item[b-nuw2j29s9o] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.8125rem;
    padding: 0.25rem 0;
}

.error-item .row-num[b-nuw2j29s9o] {
    font-weight: 600;
    color: var(--op-text-primary);
}

.error-item .field[b-nuw2j29s9o] {
    color: var(--op-text-secondary);
}

.error-item .message[b-nuw2j29s9o] {
    color: var(--op-error);
}

.more-errors[b-nuw2j29s9o] {
    font-size: 0.75rem;
    color: var(--op-text-tertiary);
    padding-top: 0.5rem;
}
/* /Components/Shared/SetupWizard/MultiRecordEntryGrid.razor.rz.scp.css */
.multi-record-grid[b-u9tbu1wxag] {
    background: var(--op-bg-primary);
    border: 1px solid var(--op-border);
    border-radius: 8px;
    overflow: hidden;
}

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

.grid-header h4[b-u9tbu1wxag] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.grid-actions[b-u9tbu1wxag] {
    display: flex;
    gap: 0.5rem;
}

.grid-content[b-u9tbu1wxag] {
    min-height: 200px;
}

.empty-grid[b-u9tbu1wxag] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: var(--op-text-secondary);
}

.empty-grid i[b-u9tbu1wxag] {
    font-size: 2.5rem;
    color: var(--op-text-tertiary);
    margin-bottom: 0.5rem;
}

.empty-grid p[b-u9tbu1wxag] {
    margin: 0 0 1rem;
}

.op-table-wrapper[b-u9tbu1wxag] {
    overflow-x: auto;
}

tr.editing[b-u9tbu1wxag] {
    background: rgba(var(--op-primary-rgb), 0.05);
}

tr.editing td[b-u9tbu1wxag] {
    padding: 0.5rem 0.75rem;
}

.action-buttons[b-u9tbu1wxag] {
    display: flex;
    gap: 0.25rem;
}

.text-error[b-u9tbu1wxag] {
    color: var(--op-error) !important;
}

.grid-footer[b-u9tbu1wxag] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--op-bg-secondary);
    border-top: 1px solid var(--op-border);
    font-size: 0.8125rem;
}

.record-count[b-u9tbu1wxag] {
    color: var(--op-text-secondary);
}

.requirement[b-u9tbu1wxag] {
    font-weight: 500;
}

.requirement.met[b-u9tbu1wxag] {
    color: var(--op-success);
}

.requirement.not-met[b-u9tbu1wxag] {
    color: var(--op-warning);
}
/* /Components/Shared/SetupWizard/ProgressTrackerComponent.razor.rz.scp.css */
.progress-tracker[b-mvmqt2z2z2] {
    padding: 1rem 1.5rem;
    background: var(--op-bg-primary);
    border-bottom: 1px solid var(--op-border);
}

.progress-bar-container[b-mvmqt2z2z2] {
    height: 4px;
    background: var(--op-border);
    border-radius: 2px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.progress-bar-fill[b-mvmqt2z2z2] {
    height: 100%;
    background: linear-gradient(90deg, var(--op-primary), var(--op-success));
    border-radius: 2px;
    transition: width 0.3s ease;
}

.steps-container[b-mvmqt2z2z2] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.step-item[b-mvmqt2z2z2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 80px;
    flex: 1;
    text-align: center;
    position: relative;
}

.step-item.clickable[b-mvmqt2z2z2] {
    cursor: pointer;
}

.step-item.clickable:hover .step-indicator[b-mvmqt2z2z2] {
    transform: scale(1.1);
}

.step-indicator[b-mvmqt2z2z2] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background: var(--op-bg-tertiary);
    color: var(--op-text-secondary);
    border: 2px solid var(--op-border);
}

.step-item.completed .step-indicator[b-mvmqt2z2z2] {
    background: var(--op-success);
    border-color: var(--op-success);
    color: white;
}

.step-item.in-progress .step-indicator[b-mvmqt2z2z2],
.step-item.current .step-indicator[b-mvmqt2z2z2] {
    background: var(--op-primary);
    border-color: var(--op-primary);
    color: white;
    box-shadow: 0 0 0 4px rgba(var(--op-primary-rgb), 0.2);
}

.step-item.skipped .step-indicator[b-mvmqt2z2z2] {
    background: var(--op-warning);
    border-color: var(--op-warning);
    color: white;
}

.step-label[b-mvmqt2z2z2] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.step-name[b-mvmqt2z2z2] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--op-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.step-status[b-mvmqt2z2z2] {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--op-text-tertiary);
}

.step-item.completed .step-status[b-mvmqt2z2z2] {
    color: var(--op-success);
}

.step-item.in-progress .step-status[b-mvmqt2z2z2],
.step-item.current .step-status[b-mvmqt2z2z2] {
    color: var(--op-primary);
}

.step-item.skipped .step-status[b-mvmqt2z2z2] {
    color: var(--op-warning);
}

@media (max-width: 768px) {
    .steps-container[b-mvmqt2z2z2] {
        justify-content: flex-start;
    }

    .step-item[b-mvmqt2z2z2] {
        min-width: 70px;
    }

    .step-name[b-mvmqt2z2z2] {
        max-width: 70px;
        font-size: 0.6875rem;
    }
}
/* /Components/Shared/SetupWizard/SetupProgressCard.razor.rz.scp.css */
.setup-progress-card[b-m5jiajw36m] {
    background: var(--op-bg-primary);
    border: 1px solid var(--op-border);
    border-radius: 12px;
    overflow: hidden;
}

.card-header[b-m5jiajw36m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--op-bg-secondary);
    border-bottom: 1px solid var(--op-border);
}

.header-title[b-m5jiajw36m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-title i[b-m5jiajw36m] {
    font-size: 1.25rem;
    color: var(--op-primary);
}

.header-title h3[b-m5jiajw36m] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.card-loading[b-m5jiajw36m] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.card-empty[b-m5jiajw36m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.card-empty i[b-m5jiajw36m] {
    font-size: 2.5rem;
    color: var(--op-text-tertiary);
    margin-bottom: 0.5rem;
}

.card-empty p[b-m5jiajw36m] {
    margin: 0 0 1rem;
    color: var(--op-text-secondary);
}

.progress-overview[b-m5jiajw36m] {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--op-border);
}

.progress-circle[b-m5jiajw36m] {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.progress-circle svg[b-m5jiajw36m] {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.progress-circle circle[b-m5jiajw36m] {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
}

.progress-circle circle.bg[b-m5jiajw36m] {
    stroke: var(--op-border);
}

.progress-circle circle.progress[b-m5jiajw36m] {
    stroke: var(--op-primary);
    transition: stroke-dasharray 0.5s ease;
}

.progress-circle .percentage[b-m5jiajw36m] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--op-primary);
}

.progress-stats[b-m5jiajw36m] {
    display: flex;
    gap: 2rem;
}

.progress-stats .stat[b-m5jiajw36m] {
    text-align: center;
}

.progress-stats .value[b-m5jiajw36m] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--op-heading-color);
}

.progress-stats .label[b-m5jiajw36m] {
    font-size: 0.75rem;
    color: var(--op-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.steps-list[b-m5jiajw36m] {
    padding: 1rem;
}

.step-row[b-m5jiajw36m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--op-border);
}

.step-row:last-child[b-m5jiajw36m] {
    border-bottom: none;
}

.step-icon[b-m5jiajw36m] {
    font-size: 1rem;
}

.step-row.completed .step-icon[b-m5jiajw36m] {
    color: var(--op-success);
}

.step-row.inprogress .step-icon[b-m5jiajw36m] {
    color: var(--op-primary);
}

.step-row.skipped .step-icon[b-m5jiajw36m] {
    color: var(--op-warning);
}

.step-row.pending .step-icon[b-m5jiajw36m] {
    color: var(--op-text-tertiary);
}

.step-info[b-m5jiajw36m] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.step-name[b-m5jiajw36m] {
    font-size: 0.875rem;
}

.step-date[b-m5jiajw36m] {
    font-size: 0.75rem;
    color: var(--op-text-tertiary);
}

.completion-banner[b-m5jiajw36m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(var(--op-success-rgb), 0.1);
    color: var(--op-success);
    font-weight: 500;
}

.completion-banner i[b-m5jiajw36m] {
    font-size: 1.25rem;
}
/* /Components/Shared/SetupWizard/SetupWizardContainer.razor.rz.scp.css */
.setup-wizard[b-o87cdz2dyd] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--op-bg-primary);
}

.setup-wizard.wizard-modal[b-o87cdz2dyd] {
    border-radius: 12px;
    max-height: 90vh;
    overflow: hidden;
}

.setup-wizard.wizard-embedded[b-o87cdz2dyd] {
    border: 1px solid var(--op-border);
    border-radius: 12px;
}

.wizard-loading[b-o87cdz2dyd],
.wizard-error[b-o87cdz2dyd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    text-align: center;
    color: var(--op-text-secondary);
}

.wizard-error i[b-o87cdz2dyd] {
    font-size: 2.5rem;
    color: var(--op-warning);
}

.wizard-header[b-o87cdz2dyd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--op-border);
    background: var(--op-bg-secondary);
}

.wizard-title h2[b-o87cdz2dyd] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--op-heading-color);
}

.wizard-title p[b-o87cdz2dyd] {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--op-text-secondary);
}

.wizard-progress-summary[b-o87cdz2dyd] {
    text-align: right;
}

.wizard-progress-summary .progress-text[b-o87cdz2dyd] {
    font-size: 0.75rem;
    color: var(--op-text-secondary);
    display: block;
}

.wizard-progress-summary .progress-percentage[b-o87cdz2dyd] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--op-primary);
}

.wizard-content[b-o87cdz2dyd] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.step-header[b-o87cdz2dyd] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--op-border);
}

.step-info .step-number[b-o87cdz2dyd] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--op-primary);
    font-weight: 600;
}

.step-info h3[b-o87cdz2dyd] {
    margin: 0.25rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--op-heading-color);
}

.step-info p[b-o87cdz2dyd] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--op-text-secondary);
}

.step-badges[b-o87cdz2dyd] {
    display: flex;
    gap: 0.5rem;
}

.step-body[b-o87cdz2dyd] {
    min-height: 300px;
}

.wizard-footer[b-o87cdz2dyd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--op-border);
    background: var(--op-bg-secondary);
}

.footer-left[b-o87cdz2dyd],
.footer-right[b-o87cdz2dyd] {
    display: flex;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .wizard-header[b-o87cdz2dyd] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .wizard-progress-summary[b-o87cdz2dyd] {
        text-align: center;
    }

    .wizard-footer[b-o87cdz2dyd] {
        flex-direction: column;
        gap: 1rem;
    }

    .footer-left[b-o87cdz2dyd],
    .footer-right[b-o87cdz2dyd] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Shared/SetupWizard/StepSummaryCard.razor.rz.scp.css */
.step-summary-card[b-ixpzar6fna] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--op-bg-primary);
    border: 1px solid var(--op-border);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.step-summary-card:hover[b-ixpzar6fna] {
    border-color: var(--op-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.step-summary-card.completed[b-ixpzar6fna] {
    border-left: 3px solid var(--op-success);
}

.step-summary-card.in-progress[b-ixpzar6fna] {
    border-left: 3px solid var(--op-primary);
    background: rgba(var(--op-primary-rgb), 0.02);
}

.step-summary-card.skipped[b-ixpzar6fna] {
    border-left: 3px solid var(--op-warning);
    opacity: 0.8;
}

.step-summary-card.pending[b-ixpzar6fna] {
    border-left: 3px solid var(--op-border);
}

.card-icon[b-ixpzar6fna] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.step-summary-card.completed .card-icon[b-ixpzar6fna] {
    color: var(--op-success);
}

.step-summary-card.in-progress .card-icon[b-ixpzar6fna] {
    color: var(--op-primary);
}

.step-summary-card.skipped .card-icon[b-ixpzar6fna] {
    color: var(--op-warning);
}

.step-summary-card.pending .card-icon[b-ixpzar6fna] {
    color: var(--op-text-tertiary);
}

.card-content[b-ixpzar6fna] {
    flex: 1;
}

.card-header[b-ixpzar6fna] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.step-number[b-ixpzar6fna] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--op-text-tertiary);
    font-weight: 600;
}

.card-content h4[b-ixpzar6fna] {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--op-heading-color);
}

.card-content p[b-ixpzar6fna] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--op-text-secondary);
}

.completed-date[b-ixpzar6fna] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--op-success);
    margin-top: 0.5rem;
}

.card-action[b-ixpzar6fna] {
    flex-shrink: 0;
}
/* /Components/Shared/SetupWizard/StepValidationPanel.razor.rz.scp.css */
.validation-panel[b-j7u4fmh2bp] {
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.validation-panel.valid[b-j7u4fmh2bp] {
    background: rgba(var(--op-success-rgb), 0.1);
    border: 1px solid var(--op-success);
}

.validation-panel.invalid[b-j7u4fmh2bp] {
    background: rgba(var(--op-error-rgb), 0.1);
    border: 1px solid var(--op-error);
}

.validation-header[b-j7u4fmh2bp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.validation-panel.valid .validation-header[b-j7u4fmh2bp] {
    color: var(--op-success);
}

.validation-panel.invalid .validation-header[b-j7u4fmh2bp] {
    color: var(--op-error);
}

.validation-header .op-btn[b-j7u4fmh2bp] {
    margin-left: auto;
}

.validation-requirement[b-j7u4fmh2bp] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--op-border);
    margin-top: 0.5rem;
}

.validation-messages[b-j7u4fmh2bp] {
    margin-top: 0.75rem;
}

.validation-messages h5[b-j7u4fmh2bp] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.5rem;
    color: var(--op-text-secondary);
}

.validation-messages ul[b-j7u4fmh2bp] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.validation-messages li[b-j7u4fmh2bp] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
}

.validation-messages li.error[b-j7u4fmh2bp] {
    color: var(--op-error);
}

.validation-messages li.warning[b-j7u4fmh2bp] {
    color: var(--op-warning);
}

.validation-messages li i[b-j7u4fmh2bp] {
    flex-shrink: 0;
    margin-top: 2px;
}
/* /Components/Shared/SystemSetup/BranchFormModal.razor.rz.scp.css */
.modal-overlay[b-g92met6h4h] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
    backdrop-filter: blur(4px);
}

.modal-container[b-g92met6h4h] {
    background: var(--op-bg-card);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--op-shadow-xl);
    animation: modalSlideIn-b-g92met6h4h 0.2s ease;
}

.modal-container.lg[b-g92met6h4h] {
    max-width: 640px;
}

.modal-container.xl[b-g92met6h4h] {
    max-width: 800px;
}

@keyframes modalSlideIn-b-g92met6h4h {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-g92met6h4h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--op-border-light);
}

.modal-header h3[b-g92met6h4h] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--op-text-primary);
}

.close-btn[b-g92met6h4h] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--op-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.close-btn:hover[b-g92met6h4h] {
    background: var(--op-bg-muted);
    color: var(--op-text-primary);
}

.modal-body[b-g92met6h4h] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-g92met6h4h] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--op-border-light);
    margin-top: 24px;
}

/* Form Sections */
.form-section[b-g92met6h4h] {
    margin-bottom: 24px;
}

.form-section:last-of-type[b-g92met6h4h] {
    margin-bottom: 0;
}

.form-section h4[b-g92met6h4h] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--op-text-primary);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--op-border-light);
}

.form-section h4 i[b-g92met6h4h] {
    color: var(--op-primary);
}

.form-grid[b-g92met6h4h] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-group[b-g92met6h4h] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full[b-g92met6h4h] {
    grid-column: 1 / -1;
}

.form-group label[b-g92met6h4h] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--op-text-secondary);
}

.form-group label .required[b-g92met6h4h] {
    color: var(--op-error);
}

.field-hint[b-g92met6h4h] {
    font-size: 0.75rem;
    color: var(--op-text-muted);
}

.toggle-label[b-g92met6h4h] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.toggle-label span[b-g92met6h4h] {
    font-weight: 500;
    color: var(--op-text-primary);
}

/* Input Styles */
.op-input[b-g92met6h4h],
.op-select[b-g92met6h4h] {
    padding: 10px 12px;
    border: 1px solid var(--op-border-light);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--op-bg-input);
    color: var(--op-text-primary);
    transition: all 0.2s;
}

.op-input:focus[b-g92met6h4h],
.op-select:focus[b-g92met6h4h] {
    outline: none;
    border-color: var(--op-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.op-input:disabled[b-g92met6h4h],
.op-select:disabled[b-g92met6h4h] {
    background: var(--op-bg-muted);
    cursor: not-allowed;
}

.op-input[b-g92met6h4h]::placeholder {
    color: var(--op-text-muted);
}

/* Validation */
.validation-message[b-g92met6h4h] {
    font-size: 0.75rem;
    color: var(--op-error);
}

/* Spinner */
.spinner[b-g92met6h4h] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-g92met6h4h 0.8s linear infinite;
    display: inline-block;
    margin-right: 8px;
}

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

/* Responsive */
@media (max-width: 640px) {
    .modal-overlay[b-g92met6h4h] {
        padding: 16px;
    }
    
    .modal-container[b-g92met6h4h],
    .modal-container.lg[b-g92met6h4h],
    .modal-container.xl[b-g92met6h4h] {
        max-width: 100%;
        max-height: 100%;
        border-radius: 12px;
    }
    
    .form-grid[b-g92met6h4h] {
        grid-template-columns: 1fr;
    }
    
    .modal-footer[b-g92met6h4h] {
        flex-direction: column-reverse;
    }
    
    .modal-footer .op-btn[b-g92met6h4h] {
        width: 100%;
    }
}
/* /Components/Shared/SystemSetup/ModuleConfigurationCard.razor.rz.scp.css */
.module-card[b-11k497xfy6] {
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.module-card:hover[b-11k497xfy6] {
    box-shadow: var(--op-shadow-md);
}

.module-card.expanded[b-11k497xfy6] {
    border-color: var(--op-primary);
}

.module-header[b-11k497xfy6] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.module-header:hover[b-11k497xfy6] {
    background: var(--op-bg-muted);
}

.module-icon[b-11k497xfy6] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.module-info[b-11k497xfy6] {
    flex: 1;
    min-width: 0;
}

.module-info h4[b-11k497xfy6] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-text-primary);
}

.module-stats[b-11k497xfy6] {
    font-size: 0.85rem;
    color: var(--op-text-secondary);
}

.module-progress[b-11k497xfy6] {
    flex-shrink: 0;
}

.progress-ring[b-11k497xfy6] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: conic-gradient(
        var(--op-primary) calc(var(--progress) * 1%),
        var(--op-bg-muted) calc(var(--progress) * 1%)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.progress-ring[b-11k497xfy6]::before {
    content: '';
    position: absolute;
    width: 38px;
    height: 38px;
    background: var(--op-bg-card);
    border-radius: 50%;
}

.progress-ring span[b-11k497xfy6] {
    position: relative;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--op-text-primary);
}

.module-status[b-11k497xfy6] {
    flex-shrink: 0;
}

.status-badge[b-11k497xfy6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.complete[b-11k497xfy6] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--op-success);
}

.status-badge.critical[b-11k497xfy6] {
    background: rgba(220, 38, 38, 0.1);
    color: var(--op-error);
}

.status-badge.pending[b-11k497xfy6] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--op-warning);
}

.expand-btn[b-11k497xfy6] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--op-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.expand-btn:hover[b-11k497xfy6] {
    background: var(--op-bg-muted);
    color: var(--op-primary);
}

/* Entity List */
.module-entities[b-11k497xfy6] {
    border-top: 1px solid var(--op-border-light);
    background: var(--op-bg-subtle);
}

.entity-row[b-11k497xfy6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px 12px 32px;
    border-bottom: 1px solid var(--op-border-light);
    cursor: pointer;
    transition: background 0.2s;
}

.entity-row:last-child[b-11k497xfy6] {
    border-bottom: none;
}

.entity-row:hover[b-11k497xfy6] {
    background: var(--op-bg-card);
}

.entity-row.notstarted[b-11k497xfy6] {
    opacity: 0.7;
}

.entity-icon[b-11k497xfy6] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--op-bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--op-text-secondary);
    flex-shrink: 0;
}

.entity-row.complete .entity-icon[b-11k497xfy6] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--op-success);
}

.entity-row.partial .entity-icon[b-11k497xfy6] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--op-warning);
}

.entity-info[b-11k497xfy6] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.entity-name[b-11k497xfy6] {
    font-size: 0.9rem;
    color: var(--op-text-primary);
    font-weight: 500;
}

.required-badge[b-11k497xfy6] {
    font-size: 0.65rem;
    background: rgba(220, 38, 38, 0.1);
    color: var(--op-error);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

.entity-count[b-11k497xfy6] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 60px;
}

.count-value[b-11k497xfy6] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-text-primary);
}

.count-label[b-11k497xfy6] {
    font-size: 0.7rem;
    color: var(--op-text-muted);
}

.entity-status[b-11k497xfy6] {
    width: 24px;
    display: flex;
    justify-content: center;
}

.entity-status .text-success[b-11k497xfy6] {
    color: var(--op-success);
}

.entity-status .text-warning[b-11k497xfy6] {
    color: var(--op-warning);
}

.entity-status .text-muted[b-11k497xfy6] {
    color: var(--op-text-muted);
}

.entity-arrow[b-11k497xfy6] {
    color: var(--op-text-muted);
    font-size: 0.85rem;
}

.entity-row:hover .entity-arrow[b-11k497xfy6] {
    color: var(--op-primary);
}
/* /Components/Shared/SystemSetup/ModuleGridCard.razor.rz.scp.css */
.module-grid-card[b-92gkbjz31l] {
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.module-grid-card:hover[b-92gkbjz31l] {
    transform: translateY(-4px);
    box-shadow: var(--op-shadow-lg);
    border-color: var(--op-primary);
}

.module-grid-card.complete[b-92gkbjz31l] {
    border-color: var(--op-success);
}

.module-grid-card.critical[b-92gkbjz31l] {
    border-color: var(--op-error);
}

.card-header[b-92gkbjz31l] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.card-icon[b-92gkbjz31l] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.alert-indicator[b-92gkbjz31l] {
    width: 28px;
    height: 28px;
    background: var(--op-error);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    animation: pulse-alert-b-92gkbjz31l 2s infinite;
}

@keyframes pulse-alert-b-92gkbjz31l {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.card-body h4[b-92gkbjz31l] {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--op-text-primary);
}

.card-progress[b-92gkbjz31l] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.progress-bar[b-92gkbjz31l] {
    flex: 1;
    height: 6px;
    background: var(--op-bg-muted);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-92gkbjz31l] {
    height: 100%;
    background: var(--op-primary);
    border-radius: 3px;
    transition: width 0.3s;
}

.module-grid-card.complete .progress-fill[b-92gkbjz31l] {
    background: var(--op-success);
}

.progress-text[b-92gkbjz31l] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--op-text-primary);
    min-width: 40px;
    text-align: right;
}

.card-stats[b-92gkbjz31l] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-stats span[b-92gkbjz31l] {
    font-size: 0.8rem;
    color: var(--op-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-stats i[b-92gkbjz31l] {
    font-size: 0.85rem;
}

.card-footer[b-92gkbjz31l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--op-border-light);
}

.entity-count[b-92gkbjz31l] {
    font-size: 0.85rem;
    color: var(--op-text-muted);
}

.card-footer i[b-92gkbjz31l] {
    color: var(--op-primary);
    transition: transform 0.2s;
}

.module-grid-card:hover .card-footer i[b-92gkbjz31l] {
    transform: translateX(4px);
}
/* /Components/Shared/Widgets/QuickAccessWidget.razor.rz.scp.css */
/* Quick Access Widget Styles */

.quick-access-widget[b-jcb18y1scr] {
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 12px;
    padding: 20px;
}

.quick-access-header[b-jcb18y1scr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.quick-access-header h4[b-jcb18y1scr] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-access-header h4 i[b-jcb18y1scr] {
    color: var(--op-primary);
}

.view-all-btn[b-jcb18y1scr] {
    background: none;
    border: none;
    color: var(--op-primary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.view-all-btn:hover[b-jcb18y1scr] {
    background: rgba(var(--op-primary-rgb), 0.1);
}

.quick-access-grid[b-jcb18y1scr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
/* /Components/Shared/Widgets/QuickActionCard.razor.rz.scp.css */
/* Quick Action Card Styles */

.quick-action-card[b-pkxljc6jsd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--op-bg-subtle);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.quick-action-card:hover[b-pkxljc6jsd] {
    background: var(--op-bg-hover);
    border-color: var(--op-border-light);
    transform: translateY(-2px);
}

.quick-action-card.active[b-pkxljc6jsd] {
    background: rgba(var(--op-primary-rgb), 0.1);
    border-color: var(--op-primary);
}

.quick-action-icon[b-pkxljc6jsd] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.quick-action-icon.primary[b-pkxljc6jsd] {
    background: rgba(var(--op-primary-rgb), 0.15);
    color: var(--op-primary);
}

.quick-action-icon.success[b-pkxljc6jsd] {
    background: rgba(var(--op-success-rgb), 0.15);
    color: var(--op-success);
}

.quick-action-icon.warning[b-pkxljc6jsd] {
    background: rgba(var(--op-warning-rgb), 0.15);
    color: var(--op-warning);
}

.quick-action-icon.danger[b-pkxljc6jsd] {
    background: rgba(var(--op-danger-rgb), 0.15);
    color: var(--op-danger);
}

.quick-action-icon.info[b-pkxljc6jsd] {
    background: rgba(var(--op-info-rgb), 0.15);
    color: var(--op-info);
}

.quick-action-label[b-pkxljc6jsd] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--op-text-secondary);
    text-align: center;
    line-height: 1.3;
}

.quick-action-badge[b-pkxljc6jsd] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--op-danger);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}
/* /Components/Shared/Widgets/StatWidget.razor.rz.scp.css */
/* Stat Widget Component Styles */

.stat-widget[b-yvr97a4hw5] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    transition: all 0.2s;
    overflow: hidden;
}

.stat-widget:hover[b-yvr97a4hw5] {
    box-shadow: var(--op-shadow-md);
    transform: translateY(-2px);
}

.stat-widget[b-yvr97a4hw5]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 4px 0 0 4px;
}

/* Color Variants */
.stat-widget-primary[b-yvr97a4hw5]::before { background: var(--op-primary); }
.stat-widget-success[b-yvr97a4hw5]::before { background: var(--op-success); }
.stat-widget-warning[b-yvr97a4hw5]::before { background: var(--op-warning); }
.stat-widget-danger[b-yvr97a4hw5]::before { background: var(--op-danger); }
.stat-widget-info[b-yvr97a4hw5]::before { background: var(--op-info); }

.stat-widget-primary .stat-widget-icon[b-yvr97a4hw5] { background: rgba(var(--op-primary-rgb), 0.15); color: var(--op-primary); }
.stat-widget-success .stat-widget-icon[b-yvr97a4hw5] { background: rgba(var(--op-success-rgb), 0.15); color: var(--op-success); }
.stat-widget-warning .stat-widget-icon[b-yvr97a4hw5] { background: rgba(var(--op-warning-rgb), 0.15); color: var(--op-warning); }
.stat-widget-danger .stat-widget-icon[b-yvr97a4hw5] { background: rgba(var(--op-danger-rgb), 0.15); color: var(--op-danger); }
.stat-widget-info .stat-widget-icon[b-yvr97a4hw5] { background: rgba(var(--op-info-rgb), 0.15); color: var(--op-info); }

.stat-widget-icon[b-yvr97a4hw5] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.stat-widget-content[b-yvr97a4hw5] {
    flex: 1;
    min-width: 0;
}

.stat-widget-value[b-yvr97a4hw5] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--op-heading-color);
    line-height: 1.2;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-widget-value .prefix[b-yvr97a4hw5] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--op-text-muted);
}

.stat-widget-value .suffix[b-yvr97a4hw5] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--op-text-muted);
}

.stat-widget-label[b-yvr97a4hw5] {
    font-size: 0.875rem;
    color: var(--op-text-secondary);
    margin-top: 4px;
}

.stat-widget-change[b-yvr97a4hw5] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 8px;
}

.stat-widget-change.positive[b-yvr97a4hw5] {
    color: var(--op-success);
}

.stat-widget-change.negative[b-yvr97a4hw5] {
    color: var(--op-danger);
}

.stat-widget-change .change-period[b-yvr97a4hw5] {
    color: var(--op-text-muted);
    font-weight: 400;
}

.stat-widget-action[b-yvr97a4hw5] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: var(--op-bg-subtle);
    color: var(--op-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.stat-widget-action:hover[b-yvr97a4hw5] {
    background: var(--op-primary);
    color: white;
}

.stat-skeleton[b-yvr97a4hw5] {
    width: 80px;
    height: 28px;
    background: linear-gradient(90deg, var(--op-bg-subtle) 25%, var(--op-bg-muted) 50%, var(--op-bg-subtle) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-yvr97a4hw5 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading-b-yvr97a4hw5 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* /Components/Shared/Widgets/SystemHealthWidget.razor.rz.scp.css */
/* System Health Widget Styles */

.system-health-widget[b-gwijiwwbbs] {
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 12px;
    padding: 20px;
}

.system-health-widget .widget-header[b-gwijiwwbbs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.system-health-widget .widget-header h4[b-gwijiwwbbs] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.system-health-widget .widget-header h4 i[b-gwijiwwbbs] {
    color: var(--op-success);
}

.last-updated[b-gwijiwwbbs] {
    font-size: 0.75rem;
    color: var(--op-text-muted);
}

.health-metrics[b-gwijiwwbbs] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.health-metric[b-gwijiwwbbs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.metric-name[b-gwijiwwbbs] {
    font-size: 0.85rem;
    color: var(--op-text-secondary);
}

.metric-value[b-gwijiwwbbs] {
    font-size: 0.85rem;
    font-weight: 600;
}

.metric-value.good[b-gwijiwwbbs] { color: var(--op-success); }
.metric-value.warning[b-gwijiwwbbs] { color: var(--op-warning); }
.metric-value.critical[b-gwijiwwbbs] { color: var(--op-danger); }

.metric-bar[b-gwijiwwbbs] {
    height: 6px;
    background: var(--op-bg-muted);
    border-radius: 3px;
    overflow: hidden;
}

.metric-fill[b-gwijiwwbbs] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.metric-fill.good[b-gwijiwwbbs] { background: var(--op-success); }
.metric-fill.warning[b-gwijiwwbbs] { background: var(--op-warning); }
.metric-fill.critical[b-gwijiwwbbs] { background: var(--op-danger); }

.health-summary[b-gwijiwwbbs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--op-border-light);
}

.summary-item[b-gwijiwwbbs] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.summary-item > i[b-gwijiwwbbs] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--op-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--op-primary);
    font-size: 16px;
}

.summary-content[b-gwijiwwbbs] {
    display: flex;
    flex-direction: column;
}

.summary-label[b-gwijiwwbbs] {
    font-size: 0.7rem;
    color: var(--op-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-value[b-gwijiwwbbs] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--op-heading-color);
}
/* /Components/Shared/Widgets/TenantListWidget.razor.rz.scp.css */
/* Tenant List Widget Styles */

.tenant-list-widget[b-29v44lhj4k] {
    background: var(--op-bg-card);
    border: 1px solid var(--op-border-light);
    border-radius: 12px;
    padding: 20px;
}

.widget-header[b-29v44lhj4k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.widget-header h4[b-29v44lhj4k] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--op-heading-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-header h4 i[b-29v44lhj4k] {
    color: var(--op-primary);
}

.view-all-btn[b-29v44lhj4k] {
    background: none;
    border: none;
    color: var(--op-primary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.view-all-btn:hover[b-29v44lhj4k] {
    background: rgba(var(--op-primary-rgb), 0.1);
}

.tenant-list[b-29v44lhj4k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tenant-item[b-29v44lhj4k] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--op-bg-subtle);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.tenant-item:hover[b-29v44lhj4k] {
    background: var(--op-bg-hover);
}

.tenant-item.inactive[b-29v44lhj4k] {
    opacity: 0.6;
}

.tenant-avatar[b-29v44lhj4k] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.tenant-info[b-29v44lhj4k] {
    flex: 1;
    min-width: 0;
}

.tenant-name[b-29v44lhj4k] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--op-heading-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tenant-meta[b-29v44lhj4k] {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--op-text-muted);
    margin-top: 2px;
}

.tenant-meta span[b-29v44lhj4k] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tenant-status .status-badge[b-29v44lhj4k] {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
}

.status-badge.active[b-29v44lhj4k] {
    background: rgba(var(--op-success-rgb), 0.15);
    color: var(--op-success);
}

.status-badge.inactive[b-29v44lhj4k] {
    background: var(--op-bg-muted);
    color: var(--op-text-muted);
}

/* Skeleton Loading */
.tenant-item.skeleton[b-29v44lhj4k] {
    cursor: default;
}

.tenant-avatar-skeleton[b-29v44lhj4k] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--op-bg-muted) 25%, var(--op-border-light) 50%, var(--op-bg-muted) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-29v44lhj4k 1.5s infinite;
}

.tenant-info-skeleton[b-29v44lhj4k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skeleton-line[b-29v44lhj4k] {
    height: 12px;
    background: linear-gradient(90deg, var(--op-bg-muted) 25%, var(--op-border-light) 50%, var(--op-bg-muted) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-29v44lhj4k 1.5s infinite;
    border-radius: 4px;
}

.skeleton-line.w-60[b-29v44lhj4k] { width: 60%; }
.skeleton-line.w-40[b-29v44lhj4k] { width: 40%; }

.empty-state[b-29v44lhj4k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px;
    color: var(--op-text-muted);
}

.empty-state i[b-29v44lhj4k] {
    font-size: 2rem;
    opacity: 0.5;
}

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