/* _content/alkpi/Components/Layout/AdminLayout.razor.rz.scp.css */
.admin-layout[b-q8m4k2sgk3] {
    display: flex;
    min-height: 100vh;
    background-color: var(--bs-body-bg);
}

/* Sidebar */
.admin-sidebar[b-q8m4k2sgk3] {
    width: 260px;
    background: var(--admin-sidebar-bg);
    color: var(--admin-sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    transition: left 0.3s ease, right 0.3s ease;
}

/* RTL Sidebar positioning */
.admin-sidebar-rtl[b-q8m4k2sgk3] {
    left: auto !important;
    right: 0 !important;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1) !important;
}

/* Dark Theme Colors */
[data-theme="dark"][b-q8m4k2sgk3] {
    --admin-sidebar-bg: #222831;
    --admin-sidebar-text: #EEEEEE;
    --admin-sidebar-hover: #393E46;
    --admin-sidebar-active: #00ADB5;
    --admin-content-bg: #1a202c;
    --admin-card-bg: #2d3748;
    --admin-border-color: #4a5568;
}

/* Light Theme Colors */
[data-theme="light"][b-q8m4k2sgk3] {
    --admin-sidebar-bg: #71C9CE;
    --admin-sidebar-text: #ffffff;
    --admin-sidebar-hover: #A6E3E9;
    --admin-sidebar-active: #E3FDFD;
    --admin-content-bg: #f8f9fa;
    --admin-card-bg: #ffffff;
    --admin-border-color: #dee2e6;
}

.admin-sidebar-header[b-q8m4k2sgk3] {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-logo[b-q8m4k2sgk3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--admin-sidebar-text);
}

    .admin-logo i[b-q8m4k2sgk3] {
        font-size: 1.5rem;
    }

/* Navigation */
.admin-nav[b-q8m4k2sgk3] {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
}

.admin-nav-item[b-q8m4k2sgk3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    color: var(--admin-sidebar-text);
    text-decoration: none;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

[dir="rtl"] .admin-nav-item[b-q8m4k2sgk3] {
    border-left: none;
    border-right: 3px solid transparent;
}

.admin-nav-item:hover[b-q8m4k2sgk3] {
    background-color: var(--admin-sidebar-hover);
    color: var(--admin-sidebar-text);
}

.admin-nav-item.active[b-q8m4k2sgk3] {
    background-color: var(--admin-sidebar-hover);
    border-left-color: var(--admin-sidebar-active);
    color: var(--admin-sidebar-active);
}

[dir="rtl"] .admin-nav-item.active[b-q8m4k2sgk3] {
    border-left-color: transparent;
    border-right-color: var(--admin-sidebar-active);
}

.admin-nav-item i[b-q8m4k2sgk3] {
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
}

.admin-nav-divider[b-q8m4k2sgk3] {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 1rem 1.5rem;
}

/* Main Content */
.admin-main[b-q8m4k2sgk3] {
    flex: 1;
    margin-left: 260px;
    display: flex;
    flex-direction: column;
    background: var(--admin-content-bg);
    transition: margin-left 0.3s ease, margin-right 0.3s ease;
}

/* RTL Main content positioning */
.admin-main-rtl[b-q8m4k2sgk3] {
    margin-left: 0 !important;
    margin-right: 260px !important;
}

.admin-header[b-q8m4k2sgk3] {
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--admin-border-color);
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 999;
}

.admin-sidebar-toggle[b-q8m4k2sgk3] {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--bs-body-color);
    cursor: pointer;
    padding: 0.5rem;
}

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

.admin-page-title[b-q8m4k2sgk3] {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
    color: var(--bs-body-color);
}

.admin-header-actions[b-q8m4k2sgk3] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.admin-content[b-q8m4k2sgk3] {
    flex: 1;
    padding: 2rem;
    background: var(--admin-content-bg);
}

.admin-footer[b-q8m4k2sgk3] {
    background: var(--bs-body-bg);
    border-top: 1px solid var(--admin-border-color);
    padding: 1rem 2rem;
}

.admin-footer-content[b-q8m4k2sgk3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

/* Responsive */
@media (max-width: 768px) {
    .admin-sidebar[b-q8m4k2sgk3] {
        transform: translateX(-100%);
        transition: transform 0.3s;
    }

    [dir="rtl"] .admin-sidebar[b-q8m4k2sgk3] {
        transform: translateX(100%);
    }

    .admin-sidebar.show[b-q8m4k2sgk3] {
        transform: translateX(0);
    }

    .admin-main[b-q8m4k2sgk3] {
        margin-left: 0;
    }

    .admin-main-rtl[b-q8m4k2sgk3] {
        margin-right: 0 !important;
    }

    .admin-sidebar-toggle[b-q8m4k2sgk3] {
        display: block;
    }

    .admin-page-title[b-q8m4k2sgk3] {
        font-size: 1.25rem;
    }

    .admin-content[b-q8m4k2sgk3] {
        padding: 1rem;
    }
}
/* _content/alkpi/Components/Layout/header.razor.rz.scp.css */
.navbar-logo[b-td5r001q31] {
    height: 40px;
    width: auto;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.navbar-brand:hover .navbar-logo[b-td5r001q31] {
    transform: scale(1.05);
}

/* Adjust logo size for smaller screens */
@media (max-width: 576px) {
    .navbar-logo[b-td5r001q31] {
        height: 32px;
    }
}
/* _content/alkpi/Components/Layout/notificationbell.razor.rz.scp.css */
/* Notification Bell Styles */
.notification-bell[b-ljbl21fep4] {
    position: relative;
    display: inline-block;
}

/* Fixed notification badge positioning */
.notification-badge[b-ljbl21fep4] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    z-index: 10;
    animation: pulse-badge-b-ljbl21fep4 2s infinite;
    line-height: 1;
    padding: 0;
    text-align: center;
}

@keyframes pulse-badge-b-ljbl21fep4 {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.6);
    }
}

/* Bell button improvements */
.notification-bell .btn[b-ljbl21fep4] {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    transition: var(--transition);
    overflow: visible; /* Ensure badge is not clipped */
}

    .notification-bell .btn:hover[b-ljbl21fep4] {
        transform: translateY(-1px);
        box-shadow: var(--shadow);
    }

    .notification-bell .btn i[b-ljbl21fep4] {
        font-size: 1.1rem;
    }

.notification-dropdown[b-ljbl21fep4] {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 380px;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    max-height: 500px;
    display: flex;
    flex-direction: column;
    animation: slideInDown-b-ljbl21fep4 0.3s ease-out;
}

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

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

.notification-header[b-ljbl21fep4] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--clr-border-light);
    background: var(--clr-surface);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

    .notification-header h6[b-ljbl21fep4] {
        color: var(--clr-text);
        font-weight: 600;
        margin: 0;
    }

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

    .notification-actions .btn[b-ljbl21fep4] {
        font-size: 0.8rem;
        padding: 0.375rem 0.75rem;
    }

.notification-body[b-ljbl21fep4] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.notification-list[b-ljbl21fep4] {
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
}

    .notification-list[b-ljbl21fep4]::-webkit-scrollbar {
        width: 6px;
    }

    .notification-list[b-ljbl21fep4]::-webkit-scrollbar-track {
        background: var(--clr-border-light);
        border-radius: 3px;
    }

    .notification-list[b-ljbl21fep4]::-webkit-scrollbar-thumb {
        background: var(--clr-text-muted);
        border-radius: 3px;
    }

        .notification-list[b-ljbl21fep4]::-webkit-scrollbar-thumb:hover {
            background: var(--clr-text-secondary);
        }

.notification-item[b-ljbl21fep4] {
    display: flex;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--clr-border-light);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    gap: 0.75rem;
}

    .notification-item:hover[b-ljbl21fep4] {
        background: color-mix(in srgb, var(--clr-accent) 5%, transparent);
    }

    .notification-item.unread[b-ljbl21fep4] {
        background: color-mix(in srgb, var(--clr-accent) 3%, transparent);
        border-left: 3px solid var(--clr-accent);
        padding-left: calc(1.25rem - 3px);
    }

    .notification-item:last-child[b-ljbl21fep4] {
        border-bottom: none;
    }

.notification-icon[b-ljbl21fep4] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

    .notification-icon.info[b-ljbl21fep4] {
        background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    }

    .notification-icon.success[b-ljbl21fep4] {
        background: linear-gradient(135deg, #10b981, #059669);
    }

    .notification-icon.warning[b-ljbl21fep4] {
        background: linear-gradient(135deg, #f59e0b, #d97706);
    }

    .notification-icon.error[b-ljbl21fep4] {
        background: linear-gradient(135deg, #ef4444, #dc2626);
    }

    .notification-icon.invitation[b-ljbl21fep4] {
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    }

    .notification-icon.reminder[b-ljbl21fep4] {
        background: linear-gradient(135deg, #f59e0b, #d97706);
    }

    .notification-icon.achievement[b-ljbl21fep4] {
        background: linear-gradient(135deg, #f59e0b, #d97706);
    }

    .notification-icon.data[b-ljbl21fep4] {
        background: linear-gradient(135deg, #06b6d4, #0891b2);
    }

    .notification-icon.project[b-ljbl21fep4] {
        background: linear-gradient(135deg, #10b981, #059669);
    }

    .notification-icon.role[b-ljbl21fep4] {
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    }

.notification-content[b-ljbl21fep4] {
    flex: 1;
    min-width: 0;
}

.notification-title[b-ljbl21fep4] {
    font-weight: 600;
    color: var(--clr-text);
    font-size: 0.9rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.notification-message[b-ljbl21fep4] {
    color: var(--clr-text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-time[b-ljbl21fep4] {
    color: var(--clr-text-muted);
    font-size: 0.7rem;
    font-weight: 500;
}

.unread-indicator[b-ljbl21fep4] {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--clr-accent);
    border-radius: 50%;
    animation: pulse-indicator-b-ljbl21fep4 2s infinite;
}

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

    50% {
        opacity: 0.6;
    }
}

.notification-menu[b-ljbl21fep4] {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.notification-item:hover .notification-menu[b-ljbl21fep4] {
    opacity: 1;
}

.notification-footer[b-ljbl21fep4] {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--clr-border-light);
    background: var(--clr-surface);
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

.notification-overlay[b-ljbl21fep4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 1040;
}

.btn-ghost[b-ljbl21fep4] {
    background: none;
    border: none;
    color: var(--clr-text-muted);
    padding: 0.25rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-ghost:hover[b-ljbl21fep4] {
        background: var(--clr-border-light);
        color: var(--clr-text);
    }

/* Empty state */
.notification-body .text-center[b-ljbl21fep4] {
    padding: 3rem 1rem;
}

    .notification-body .text-center i[b-ljbl21fep4] {
        opacity: 0.5;
        margin-bottom: 1rem;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .notification-dropdown[b-ljbl21fep4] {
        width: 320px;
        right: -50px;
    }

    .notification-actions[b-ljbl21fep4] {
        flex-direction: column;
        gap: 0.25rem;
        align-items: stretch;
    }

        .notification-actions .btn[b-ljbl21fep4] {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }

    .notification-badge[b-ljbl21fep4] {
        top: -6px;
        right: -6px;
        min-width: 18px;
        height: 18px;
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    .notification-dropdown[b-ljbl21fep4] {
        width: calc(100vw - 2rem);
        right: -20px;
        max-width: 340px;
    }

    .notification-item[b-ljbl21fep4] {
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }

    .notification-icon[b-ljbl21fep4] {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .unread-indicator[b-ljbl21fep4] {
        right: 1rem;
    }
}

/* Dark theme support */
:root[data-theme="dark"] .notification-dropdown[b-ljbl21fep4] {
    background: var(--clr-secondary);
    border-color: var(--clr-border);
}

:root[data-theme="dark"] .notification-header[b-ljbl21fep4] {
    background: var(--clr-secondary);
    border-bottom-color: var(--clr-border);
}

:root[data-theme="dark"] .notification-item[b-ljbl21fep4] {
    border-bottom-color: var(--clr-border);
}

    :root[data-theme="dark"] .notification-item:hover[b-ljbl21fep4] {
        background: color-mix(in srgb, var(--clr-accent) 8%, transparent);
    }

    :root[data-theme="dark"] .notification-item.unread[b-ljbl21fep4] {
        background: color-mix(in srgb, var(--clr-accent) 5%, transparent);
    }

:root[data-theme="dark"] .notification-footer[b-ljbl21fep4] {
    background: var(--clr-secondary);
    border-top-color: var(--clr-border);
}

:root[data-theme="dark"] .notification-badge[b-ljbl21fep4] {
    border-color: var(--clr-surface);
}

/* RTL Support */
[dir="rtl"] .notification-dropdown[b-ljbl21fep4] {
    right: auto;
    left: 0;
}

[dir="rtl"] .notification-badge[b-ljbl21fep4] {
    right: auto;
    left: -8px;
}

[dir="rtl"] .notification-item.unread[b-ljbl21fep4] {
    border-left: none;
    border-right: 3px solid var(--clr-accent);
    padding-left: 1.25rem;
    padding-right: calc(1.25rem - 3px);
}

[dir="rtl"] .unread-indicator[b-ljbl21fep4] {
    right: auto;
    left: 1.25rem;
}

[dir="rtl"] .dropdown-menu[b-ljbl21fep4] {
    right: auto;
    left: 0;
}

/* Focus and Accessibility */
.notification-bell .btn:focus-visible[b-ljbl21fep4] {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}

.notification-item:focus-visible[b-ljbl21fep4] {
    outline: 2px solid var(--clr-accent);
    outline-offset: -2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .notification-badge[b-ljbl21fep4] {
        border-width: 3px;
    }

    .notification-icon[b-ljbl21fep4] {
        border: 2px solid var(--clr-text);
    }

    .notification-item.unread[b-ljbl21fep4] {
        border-left-width: 4px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .notification-badge[b-ljbl21fep4],
    .unread-indicator[b-ljbl21fep4] {
        animation: none;
    }

    .notification-dropdown[b-ljbl21fep4] {
        animation: none;
    }

    .notification-bell .btn:hover[b-ljbl21fep4] {
        transform: none;
    }
}

/* Print styles */
@media print {
    .notification-bell[b-ljbl21fep4] {
        display: none;
    }
}
/* _content/alkpi/Components/Pages/Admin/Dashboard.razor.rz.scp.css */
.admin-dashboard[b-3zg77r36ap] {
    animation: fadeIn-b-3zg77r36ap 0.3s ease-in;
}

@keyframes fadeIn-b-3zg77r36ap {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Stat Cards - FIXED */
.stat-card[b-3zg77r36ap] {
    background: var(--clr-surface); /* Changed from --bs-body-bg */
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    transition: all 0.3s;
    height: 100%;
}

    .stat-card:hover[b-3zg77r36ap] {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        border-color: var(--clr-accent);
    }

.stat-card-icon[b-3zg77r36ap] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.stat-card-primary .stat-card-icon[b-3zg77r36ap] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.stat-card-success .stat-card-icon[b-3zg77r36ap] {
    background: linear-gradient(135deg, #48c6ef 0%, #6f86d6 100%);
    color: white;
}

.stat-card-info .stat-card-icon[b-3zg77r36ap] {
    background: linear-gradient(135deg, #00ADB5 0%, #00919b 100%);
    color: white;
}

.stat-card-warning .stat-card-icon[b-3zg77r36ap] {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    color: #495057;
}

.stat-card-secondary .stat-card-icon[b-3zg77r36ap] {
    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
    color: white;
}

[data-theme="dark"] .stat-card[b-3zg77r36ap] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

.stat-card-content[b-3zg77r36ap] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* FIXED: Force text colors */
.stat-card-value[b-3zg77r36ap] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--clr-text) !important;
    line-height: 1;
}

.stat-card-label[b-3zg77r36ap] {
    font-size: 0.875rem;
    color: var(--clr-text-secondary) !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card-meta[b-3zg77r36ap] {
    margin-top: 0.5rem;
}

/* Health Indicators - FIXED */
.health-indicator[b-3zg77r36ap] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.health-icon[b-3zg77r36ap] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.health-success[b-3zg77r36ap] {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

[data-theme="dark"] .health-success[b-3zg77r36ap] {
    background: rgba(40, 167, 69, 0.2);
    color: #48c774;
}

.health-warning[b-3zg77r36ap] {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

[data-theme="dark"] .health-warning[b-3zg77r36ap] {
    background: rgba(255, 193, 7, 0.2);
    color: #ffdd57;
}

.health-danger[b-3zg77r36ap] {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

[data-theme="dark"] .health-danger[b-3zg77r36ap] {
    background: rgba(220, 53, 69, 0.2);
    color: #f14668;
}

.health-secondary[b-3zg77r36ap] {
    background: rgba(108, 117, 125, 0.15);
    color: #6c757d;
}

[data-theme="dark"] .health-secondary[b-3zg77r36ap] {
    background: rgba(108, 117, 125, 0.2);
    color: #9ca3af;
}

.health-label[b-3zg77r36ap] {
    font-size: 0.875rem;
    color: var(--clr-text-secondary) !important;
    font-weight: 500;
}

.health-value[b-3zg77r36ap] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--clr-text) !important;
}

/* Card Styles - FIXED */
.card[b-3zg77r36ap] {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    overflow: hidden;
}

[data-theme="dark"] .card[b-3zg77r36ap] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

.card-header[b-3zg77r36ap] {
    background: transparent;
    border-bottom: 1px solid var(--clr-border);
    padding: 1.25rem 1.5rem;
}

.card-title[b-3zg77r36ap] {
    color: var(--clr-text) !important;
    font-weight: 600;
}

.card-body[b-3zg77r36ap] {
    padding: 1.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .stat-card[b-3zg77r36ap] {
        padding: 1rem;
    }

    .stat-card-icon[b-3zg77r36ap] {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .stat-card-value[b-3zg77r36ap] {
        font-size: 1.5rem;
    }

    .health-indicator[b-3zg77r36ap] {
        flex-direction: column;
        text-align: center;
    }
}
/* _content/alkpi/Components/Pages/Admin/SubscriptionPlans.razor.rz.scp.css */
.subscription-plans-page[b-c9wjdspvy8] {
    animation: fadeIn-b-c9wjdspvy8 0.3s ease-in;
}

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

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

.page-header[b-c9wjdspvy8] {
    margin-bottom: 2rem;
}

/* Plan Cards */
.plan-card[b-c9wjdspvy8] {
    background: var(--clr-surface); /* FIXED */
    border: 2px solid var(--clr-border); /* FIXED */
    border-radius: 16px;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .plan-card[b-c9wjdspvy8]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .plan-card:hover[b-c9wjdspvy8] {
        transform: translateY(-8px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

        .plan-card:hover[b-c9wjdspvy8]::before {
            opacity: 1;
        }

[data-theme="dark"] .plan-card[b-c9wjdspvy8] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

.plan-inactive[b-c9wjdspvy8] {
    opacity: 0.6;
}

    .plan-inactive[b-c9wjdspvy8]::before {
        background: linear-gradient(90deg, #6c757d 0%, #495057 100%);
    }

/* Plan Header */
.plan-header[b-c9wjdspvy8] {
    margin-bottom: 1.5rem;
}

.plan-name[b-c9wjdspvy8] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-text) !important; /* FIXED */
}

.plan-price[b-c9wjdspvy8] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.price-amount[b-c9wjdspvy8] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--clr-accent); /* FIXED */
    line-height: 1;
}

.price-period[b-c9wjdspvy8] {
    font-size: 1rem;
    color: var(--clr-text-secondary) !important; /* FIXED */
}

.price-free[b-c9wjdspvy8],
.price-custom[b-c9wjdspvy8] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--clr-success); /* FIXED */
}

.price-custom[b-c9wjdspvy8] {
    color: var(--clr-info); /* FIXED */
}

/* Plan Description */
.plan-description[b-c9wjdspvy8] {
    color: var(--clr-text-secondary) !important; /* FIXED */
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* Plan Features */
.plan-features[b-c9wjdspvy8] {
    flex: 1;
    margin-bottom: 1.5rem;
}

.feature-item[b-c9wjdspvy8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    font-size: 0.9rem;
    color: var(--clr-text) !important; /* FIXED */
    border-bottom: 1px solid var(--clr-border); /* FIXED */
}

    .feature-item:last-child[b-c9wjdspvy8] {
        border-bottom: none;
    }

    .feature-item i[b-c9wjdspvy8] {
        width: 20px;
        font-size: 1rem;
    }

/* Plan Actions */
.plan-actions[b-c9wjdspvy8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--clr-border); /* FIXED */
}

    .plan-actions .btn[b-c9wjdspvy8] {
        flex: 1;
        min-width: 100px;
    }

/* Modal Styles */
.modal.show[b-c9wjdspvy8] {
    display: block;
}

.modal-content[b-c9wjdspvy8] {
    border-radius: 12px;
    border: 1px solid var(--clr-border); /* FIXED */
    background: var(--clr-surface); /* ADDED */
}

[data-theme="dark"] .modal-content[b-c9wjdspvy8] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

.modal-header[b-c9wjdspvy8] {
    border-bottom: 1px solid var(--clr-border); /* FIXED */
    background: transparent;
}

.modal-title[b-c9wjdspvy8] {
    color: var(--clr-text) !important; /* FIXED */
    font-weight: 600;
}

.modal-body[b-c9wjdspvy8] {
    padding: 1.5rem;
    color: var(--clr-text); /* ADDED */
}

.modal-footer[b-c9wjdspvy8] {
    border-top: 1px solid var(--clr-border); /* FIXED */
    background: transparent;
}

/* Form Styles */
.form-label[b-c9wjdspvy8] {
    font-weight: 500;
    color: var(--clr-text) !important; /* FIXED */
    margin-bottom: 0.5rem;
}

.form-control[b-c9wjdspvy8],
.form-select[b-c9wjdspvy8] {
    border: 1px solid var(--clr-border); /* FIXED */
    border-radius: 8px;
    padding: 0.625rem 0.875rem;
    transition: all 0.2s;
    background: var(--clr-surface); /* ADDED */
    color: var(--clr-text); /* ADDED */
}

    .form-control:focus[b-c9wjdspvy8],
    .form-select:focus[b-c9wjdspvy8] {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

[data-theme="dark"] .form-control[b-c9wjdspvy8],
[data-theme="dark"] .form-select[b-c9wjdspvy8] {
    background: var(--clr-secondary);
    color: var(--clr-text);
    border-color: var(--clr-border);
}

.form-check-input[b-c9wjdspvy8] {
    width: 2.5rem;
    height: 1.25rem;
    cursor: pointer;
}

    .form-check-input:checked[b-c9wjdspvy8] {
        background-color: #667eea;
        border-color: #667eea;
    }

.form-check-label[b-c9wjdspvy8] {
    cursor: pointer;
    margin-left: 0.5rem;
    color: var(--clr-text) !important; /* FIXED */
}

/* Responsive */
@media (max-width: 768px) {
    .plan-card[b-c9wjdspvy8] {
        margin-bottom: 1rem;
    }

    .plan-actions[b-c9wjdspvy8] {
        flex-direction: column;
    }

        .plan-actions .btn[b-c9wjdspvy8] {
            width: 100%;
        }

    .modal-dialog[b-c9wjdspvy8] {
        margin: 0.5rem;
    }
}
/* _content/alkpi/Components/Pages/Admin/SystemMonitoring.razor.rz.scp.css */
.system-monitoring-page[b-vlu7xjlb8h] {
    animation: fadeIn-b-vlu7xjlb8h 0.3s ease-in;
}

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

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

/* Health Status Card */
.health-status-card[b-vlu7xjlb8h] {
    border-width: 2px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .health-status-card.border-success[b-vlu7xjlb8h] {
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.05) 0%, rgba(40, 167, 69, 0.02) 100%);
    }

    .health-status-card.border-warning[b-vlu7xjlb8h] {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.05) 0%, rgba(255, 193, 7, 0.02) 100%);
    }

    .health-status-card.border-danger[b-vlu7xjlb8h] {
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.05) 0%, rgba(220, 53, 69, 0.02) 100%);
    }

[data-theme="dark"] .health-status-card[b-vlu7xjlb8h] {
    background: var(--clr-surface);
}

.health-icon-large[b-vlu7xjlb8h] {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white !important;
}

.health-status-card.border-success .health-icon-large[b-vlu7xjlb8h] {
    background: linear-gradient(135deg, #48c6ef 0%, #6f86d6 100%);
}

.health-status-card.border-warning .health-icon-large[b-vlu7xjlb8h] {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    color: #495057 !important;
}

.health-status-card.border-danger .health-icon-large[b-vlu7xjlb8h] {
    background: linear-gradient(135deg, #ff6b6b 0%, #c92a2a 100%);
}

/* Service Cards */
.service-card[b-vlu7xjlb8h] {
    background: var(--clr-surface); /* FIXED */
    border: 1px solid var(--clr-border); /* FIXED */
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1.25rem;
    transition: all 0.3s;
    height: 100%;
}

    .service-card:hover[b-vlu7xjlb8h] {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

[data-theme="dark"] .service-card[b-vlu7xjlb8h] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

.service-icon[b-vlu7xjlb8h] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white !important;
    flex-shrink: 0;
}

.service-info[b-vlu7xjlb8h] {
    flex: 1;
}

    .service-info h5[b-vlu7xjlb8h] {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--clr-text) !important; /* FIXED */
        margin-bottom: 0.75rem;
    }

/* Resource Display */
.resource-display[b-vlu7xjlb8h] {
    text-align: center;
}

.resource-value[b-vlu7xjlb8h] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--clr-text) !important; /* FIXED */
    margin-bottom: 1rem;
}

.progress[b-vlu7xjlb8h] {
    border-radius: 8px;
    background: var(--clr-surface-hover); /* FIXED */
    overflow: hidden;
}

[data-theme="dark"] .progress[b-vlu7xjlb8h] {
    background: var(--clr-secondary);
}

.progress-bar[b-vlu7xjlb8h] {
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.6s ease;
}

/* Storage Info */
.storage-info[b-vlu7xjlb8h] {
    padding: 1rem;
    background: var(--clr-surface-hover); /* FIXED */
    border-radius: 8px;
}

[data-theme="dark"] .storage-info[b-vlu7xjlb8h] {
    background: var(--clr-secondary);
}

/* Card Styles */
.card[b-vlu7xjlb8h] {
    border: 1px solid var(--clr-border); /* FIXED */
    border-radius: 12px;
    background: var(--clr-surface); /* ADDED */
}

[data-theme="dark"] .card[b-vlu7xjlb8h] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

.card-header[b-vlu7xjlb8h] {
    background: transparent;
    border-bottom: 1px solid var(--clr-border); /* FIXED */
    padding: 1.25rem 1.5rem;
}

.card-title[b-vlu7xjlb8h] {
    color: var(--clr-text) !important; /* FIXED */
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-body[b-vlu7xjlb8h] {
    padding: 1.5rem;
    color: var(--clr-text); /* ADDED */
}

/* Responsive */
@media (max-width: 768px) {
    .health-icon-large[b-vlu7xjlb8h] {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }

    .service-card[b-vlu7xjlb8h] {
        flex-direction: column;
        text-align: center;
    }

    .service-icon[b-vlu7xjlb8h] {
        margin: 0 auto;
    }

    .resource-value[b-vlu7xjlb8h] {
        font-size: 2rem;
    }
}
/* _content/alkpi/Components/Pages/Admin/Users.razor.rz.scp.css */
.users-management-page[b-4h8tt6yha4] {
    animation: fadeIn-b-4h8tt6yha4 0.3s ease-in;
}

@keyframes fadeIn-b-4h8tt6yha4 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Search Box */
.search-box[b-4h8tt6yha4] {
    position: relative;
}

    .search-box i[b-4h8tt6yha4] {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--clr-text-secondary); /* FIXED */
        pointer-events: none;
    }

    .search-box .form-control[b-4h8tt6yha4] {
        padding-left: 2.75rem;
        padding-right: 2.75rem;
        border-radius: 12px;
        border: 2px solid var(--clr-border); /* FIXED */
        transition: all 0.3s;
        background: var(--clr-surface); /* ADDED */
        color: var(--clr-text); /* ADDED */
    }

        .search-box .form-control:focus[b-4h8tt6yha4] {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }

    .search-box .btn-clear[b-4h8tt6yha4] {
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: var(--clr-text-secondary); /* FIXED */
        padding: 0.5rem;
        cursor: pointer;
        border-radius: 6px;
        transition: all 0.2s;
    }

        .search-box .btn-clear:hover[b-4h8tt6yha4] {
            background: var(--clr-surface-hover); /* FIXED */
            color: var(--clr-danger);
        }

/* Mini Stat Cards */
.mini-stat-card[b-4h8tt6yha4] {
    background: var(--clr-surface); /* FIXED */
    border: 1px solid var(--clr-border); /* FIXED */
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s;
}

    .mini-stat-card:hover[b-4h8tt6yha4] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

[data-theme="dark"] .mini-stat-card[b-4h8tt6yha4] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

.mini-stat-icon[b-4h8tt6yha4] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.mini-stat-content[b-4h8tt6yha4] {
    flex: 1;
}

.mini-stat-value[b-4h8tt6yha4] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--clr-text) !important; /* FIXED */
    line-height: 1;
}

.mini-stat-label[b-4h8tt6yha4] {
    font-size: 0.8rem;
    color: var(--clr-text-secondary) !important; /* FIXED */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

/* Table Styles */
.table-responsive[b-4h8tt6yha4] {
    border-radius: 12px;
}

.table[b-4h8tt6yha4] {
    margin-bottom: 0;
}

    .table thead[b-4h8tt6yha4] {
        background: var(--clr-surface-hover); /* FIXED */
        border-bottom: 2px solid var(--clr-border); /* FIXED */
    }

[data-theme="dark"] .table thead[b-4h8tt6yha4] {
    background: var(--clr-secondary);
}

.table thead th[b-4h8tt6yha4] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    color: var(--clr-text-secondary) !important; /* FIXED */
    padding: 1rem;
    border: none;
}

.table tbody tr[b-4h8tt6yha4] {
    border-bottom: 1px solid var(--clr-border); /* FIXED */
    transition: all 0.2s;
}

    .table tbody tr:hover[b-4h8tt6yha4] {
        background: var(--clr-surface-hover); /* FIXED */
    }

[data-theme="dark"] .table tbody tr:hover[b-4h8tt6yha4] {
    background: var(--clr-surface-hover);
}

.table tbody td[b-4h8tt6yha4] {
    padding: 1rem;
    vertical-align: middle;
    color: var(--clr-text) !important; /* ADDED */
}

/* User Avatar */
.user-avatar[b-4h8tt6yha4] {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white !important; /* FIXED */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}

.user-avatar-lg[b-4h8tt6yha4] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white !important; /* FIXED */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.25rem;
}

.user-name[b-4h8tt6yha4] {
    font-weight: 600;
    color: var(--clr-text) !important; /* FIXED */
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-email[b-4h8tt6yha4] {
    color: var(--clr-text-secondary) !important; /* FIXED */
    font-size: 0.85rem;
}

/* Subscription Info */
.subscription-info[b-4h8tt6yha4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.plan-badge[b-4h8tt6yha4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--clr-surface-hover); /* FIXED */
    color: var(--clr-text); /* FIXED */
    border: 1px solid var(--clr-border); /* FIXED */
    width: fit-content;
}

.plan-badge-starter[b-4h8tt6yha4] {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    color: #0369a1 !important;
    border-color: #7dd3fc;
}

.plan-badge-professional[b-4h8tt6yha4] {
    background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
    color: #6d28d9 !important;
    border-color: #a78bfa;
}

.plan-badge-enterprise[b-4h8tt6yha4] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e !important;
    border-color: #fbbf24;
}

[data-theme="dark"] .plan-badge[b-4h8tt6yha4] {
    background: var(--clr-surface);
}

/* Credit Display */
.credit-display[b-4h8tt6yha4] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.credit-value[b-4h8tt6yha4] {
    font-weight: 700;
    color: var(--clr-text) !important; /* FIXED */
    font-size: 1.1rem;
}

.credit-separator[b-4h8tt6yha4] {
    color: var(--clr-text-secondary) !important; /* FIXED */
}

.credit-total[b-4h8tt6yha4] {
    color: var(--clr-text-secondary) !important; /* FIXED */
}

.credit-progress[b-4h8tt6yha4] {
    height: 6px;
    border-radius: 3px;
    background: var(--clr-surface-hover); /* FIXED */
    overflow: hidden;
}

[data-theme="dark"] .credit-progress[b-4h8tt6yha4] {
    background: var(--clr-secondary);
}

.credit-progress .progress-bar[b-4h8tt6yha4] {
    transition: width 0.3s ease;
    border-radius: 3px;
}

/* Modal Styles */
.modal.show[b-4h8tt6yha4] {
    display: block;
}

.modal-content[b-4h8tt6yha4] {
    border-radius: 16px;
    border: 1px solid var(--clr-border); /* FIXED */
    background: var(--clr-surface); /* ADDED */
}

[data-theme="dark"] .modal-content[b-4h8tt6yha4] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

.modal-header[b-4h8tt6yha4] {
    border-bottom: 1px solid var(--clr-border); /* FIXED */
    padding: 1.5rem;
}

.modal-title[b-4h8tt6yha4] {
    color: var(--clr-text) !important; /* FIXED */
    font-weight: 600;
    font-size: 1.25rem;
}

.modal-body[b-4h8tt6yha4] {
    padding: 1.5rem;
    color: var(--clr-text); /* ADDED */
}

.modal-footer[b-4h8tt6yha4] {
    border-top: 1px solid var(--clr-border); /* FIXED */
    padding: 1rem 1.5rem;
}

/* User Info Header in Modal */
.user-info-header[b-4h8tt6yha4] {
    background: var(--clr-surface-hover); /* FIXED */
    padding: 1rem;
    border-radius: 12px;
}

[data-theme="dark"] .user-info-header[b-4h8tt6yha4] {
    background: var(--clr-secondary);
}

/* Credits Form */
.credits-form[b-4h8tt6yha4] {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.credit-item[b-4h8tt6yha4] {
    padding: 1rem;
    background: var(--clr-surface-hover); /* FIXED */
    border-radius: 12px;
    border: 1px solid var(--clr-border); /* FIXED */
}

[data-theme="dark"] .credit-item[b-4h8tt6yha4] {
    background: var(--clr-secondary);
}

.credit-item .form-label[b-4h8tt6yha4] {
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--clr-text) !important; /* ADDED */
}

.credit-item .input-group[b-4h8tt6yha4] {
    margin-bottom: 0.5rem;
}

    .credit-item .input-group .btn[b-4h8tt6yha4] {
        min-width: 45px;
    }

.credit-item input[type="number"][b-4h8tt6yha4] {
    font-weight: 700;
    font-size: 1.125rem;
    background: var(--clr-surface); /* ADDED */
    color: var(--clr-text); /* ADDED */
    border-color: var(--clr-border); /* ADDED */
}

/* Plan Preview */
.plan-preview[b-4h8tt6yha4] {
    background: var(--clr-surface-hover); /* FIXED */
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
}

[data-theme="dark"] .plan-preview[b-4h8tt6yha4] {
    background: var(--clr-secondary);
}

.plan-preview ul li[b-4h8tt6yha4] {
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--clr-text); /* ADDED */
}

    .plan-preview ul li i[b-4h8tt6yha4] {
        width: 24px;
    }

/* Button Group */
.btn-group .btn[b-4h8tt6yha4] {
    padding: 0.375rem 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
    .mini-stat-card[b-4h8tt6yha4] {
        margin-bottom: 0.75rem;
    }

    .search-box[b-4h8tt6yha4] {
        margin-bottom: 1rem;
    }

    .table thead[b-4h8tt6yha4] {
        display: none;
    }

    .table tbody tr[b-4h8tt6yha4] {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--clr-border);
        border-radius: 12px;
        padding: 1rem;
    }

    .table tbody td[b-4h8tt6yha4] {
        display: block;
        text-align: left !important;
        padding: 0.5rem 0;
        border: none;
    }

        .table tbody td[b-4h8tt6yha4]::before {
            content: attr(data-label);
            font-weight: 600;
            display: block;
            margin-bottom: 0.25rem;
            color: var(--clr-text-secondary);
            font-size: 0.8rem;
            text-transform: uppercase;
        }

    .user-avatar[b-4h8tt6yha4] {
        width: 40px;
        height: 40px;
    }
}
/* _content/alkpi/Components/Pages/Admin/Visitors.razor.rz.scp.css */
.visitors-page[b-qdemrl1r58] {
    padding: 0;
}

/* Loading Container */
.loading-container[b-qdemrl1r58] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: var(--clr-text-muted);
}

/* Stat Cards */
.stat-card[b-qdemrl1r58] {
    background: var(--clr-surface);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    height: 100%;
    border: 1px solid var(--clr-border);
}

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

.stat-card-body[b-qdemrl1r58] {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.stat-icon[b-qdemrl1r58] {
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.stat-card-primary .stat-icon[b-qdemrl1r58] {
    background: var(--gradient-primary);
    color: white;
}

.stat-card-success .stat-icon[b-qdemrl1r58] {
    background: linear-gradient(135deg, var(--clr-success) 0%, color-mix(in srgb, var(--clr-success) 80%, #38ef7d) 100%);
    color: white;
}

.stat-card-warning .stat-icon[b-qdemrl1r58] {
    background: linear-gradient(135deg, var(--clr-warning) 0%, color-mix(in srgb, var(--clr-warning) 80%, #f5576c) 100%);
    color: white;
}

.stat-card-info .stat-icon[b-qdemrl1r58] {
    background: linear-gradient(135deg, var(--clr-info) 0%, color-mix(in srgb, var(--clr-info) 80%, #00f2fe) 100%);
    color: white;
}

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

.stat-label[b-qdemrl1r58] {
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.stat-value[b-qdemrl1r58] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1.2;
}

.stat-change[b-qdemrl1r58] {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    font-weight: 600;
}

    .stat-change.positive[b-qdemrl1r58] {
        color: var(--clr-success);
    }

    .stat-change.negative[b-qdemrl1r58] {
        color: var(--clr-danger);
    }

.stat-subtitle[b-qdemrl1r58] {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    margin-top: 0.25rem;
}

/* Info Cards */
.info-card[b-qdemrl1r58] {
    background: var(--clr-surface);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    height: 100%;
    border: 1px solid var(--clr-border);
}

.info-card-header[b-qdemrl1r58] {
    padding: 1rem 1.5rem;
    background: var(--clr-secondary);
    border-bottom: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--clr-text);
}

    .info-card-header i[b-qdemrl1r58] {
        color: var(--clr-accent);
    }

.info-card-body[b-qdemrl1r58] {
    padding: 1.5rem;
    text-align: center;
}

.info-value[b-qdemrl1r58] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: 0.5rem;
}

.info-label[b-qdemrl1r58] {
    font-size: 0.875rem;
    color: var(--clr-text-muted);
}

/* Sessions Card */
.sessions-card[b-qdemrl1r58] {
    background: var(--clr-surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    border: 1px solid var(--clr-border);
}

.sessions-card-header[b-qdemrl1r58] {
    padding: 1.5rem;
    border-bottom: 2px solid var(--clr-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--clr-secondary);
}

    .sessions-card-header h5[b-qdemrl1r58] {
        margin: 0;
        color: var(--clr-text);
        font-weight: 600;
    }

    .sessions-card-header i[b-qdemrl1r58] {
        color: var(--clr-accent);
        margin-right: 0.5rem;
    }

.session-status-legend[b-qdemrl1r58] {
    display: flex;
    gap: 1.5rem;
    font-size: 0.875rem;
}

.status-indicator[b-qdemrl1r58] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--clr-text-secondary);
}

    .status-indicator.status-active i[b-qdemrl1r58] {
        color: var(--clr-success);
    }

    .status-indicator.status-idle i[b-qdemrl1r58] {
        color: var(--clr-warning);
    }

    .status-indicator.status-expiring i[b-qdemrl1r58] {
        color: var(--clr-danger);
    }

.sessions-card-body[b-qdemrl1r58] {
    padding: 0;
}

/* Sessions Table */
.sessions-table[b-qdemrl1r58] {
    width: 100%;
    border-collapse: collapse;
}

    .sessions-table thead[b-qdemrl1r58] {
        background: var(--clr-secondary);
    }

    .sessions-table th[b-qdemrl1r58] {
        padding: 1rem 1.5rem;
        text-align: left;
        font-weight: 600;
        font-size: 0.875rem;
        color: var(--clr-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid var(--clr-border);
    }

    .sessions-table tbody tr[b-qdemrl1r58] {
        border-bottom: 1px solid var(--clr-border-light);
        transition: var(--transition);
    }

        .sessions-table tbody tr:hover[b-qdemrl1r58] {
            background-color: var(--clr-surface-hover);
        }

        .sessions-table tbody tr:last-child[b-qdemrl1r58] {
            border-bottom: none;
        }

    .sessions-table td[b-qdemrl1r58] {
        padding: 1rem 1.5rem;
        vertical-align: middle;
    }

.session-id[b-qdemrl1r58] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Courier New', monospace;
}

    .session-id i[b-qdemrl1r58] {
        color: var(--clr-accent);
    }

    .session-id code[b-qdemrl1r58] {
        background: var(--clr-secondary);
        padding: 0.25rem 0.5rem;
        border-radius: var(--border-radius-sm);
        font-size: 0.875rem;
        color: var(--clr-text);
        border: 1px solid var(--clr-border);
    }

.user-badge[b-qdemrl1r58] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
}

    .user-badge i[b-qdemrl1r58] {
        font-size: 0.75rem;
    }

.user-authenticated[b-qdemrl1r58] {
    background: color-mix(in srgb, var(--clr-success) 20%, transparent);
    color: var(--clr-success);
    border: 1px solid color-mix(in srgb, var(--clr-success) 30%, transparent);
}

.user-anonymous[b-qdemrl1r58] {
    background: color-mix(in srgb, var(--clr-warning) 20%, transparent);
    color: var(--clr-warning);
    border: 1px solid color-mix(in srgb, var(--clr-warning) 30%, transparent);
}

.time-info[b-qdemrl1r58] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    color: var(--clr-text-secondary);
}

    .time-info i[b-qdemrl1r58] {
        color: var(--clr-accent);
        font-size: 0.75rem;
    }

.idle-badge[b-qdemrl1r58] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
}

.idle-active[b-qdemrl1r58] {
    background: color-mix(in srgb, var(--clr-success) 20%, transparent);
    color: var(--clr-success);
    border: 1px solid color-mix(in srgb, var(--clr-success) 30%, transparent);
}

.idle-recent[b-qdemrl1r58] {
    background: color-mix(in srgb, var(--clr-info) 20%, transparent);
    color: var(--clr-info);
    border: 1px solid color-mix(in srgb, var(--clr-info) 30%, transparent);
}

.idle-idle[b-qdemrl1r58] {
    background: color-mix(in srgb, var(--clr-warning) 20%, transparent);
    color: var(--clr-warning);
    border: 1px solid color-mix(in srgb, var(--clr-warning) 30%, transparent);
}

.idle-expiring[b-qdemrl1r58] {
    background: color-mix(in srgb, var(--clr-danger) 20%, transparent);
    color: var(--clr-danger);
    border: 1px solid color-mix(in srgb, var(--clr-danger) 30%, transparent);
}

.pageview-badge[b-qdemrl1r58] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--clr-accent-light);
    color: var(--clr-accent);
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid color-mix(in srgb, var(--clr-accent) 30%, transparent);
}

.duration-text[b-qdemrl1r58] {
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    color: var(--clr-text-secondary);
}

.status-badge[b-qdemrl1r58] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
}

    .status-badge i[b-qdemrl1r58] {
        font-size: 0.625rem;
    }

.status-active[b-qdemrl1r58] {
    background: color-mix(in srgb, var(--clr-success) 20%, transparent);
    color: var(--clr-success);
    border: 1px solid color-mix(in srgb, var(--clr-success) 30%, transparent);
}

    .status-active i[b-qdemrl1r58] {
        color: var(--clr-success);
    }

.status-idle[b-qdemrl1r58] {
    background: color-mix(in srgb, var(--clr-warning) 20%, transparent);
    color: var(--clr-warning);
    border: 1px solid color-mix(in srgb, var(--clr-warning) 30%, transparent);
}

    .status-idle i[b-qdemrl1r58] {
        color: var(--clr-warning);
    }

.status-expiring[b-qdemrl1r58] {
    background: color-mix(in srgb, var(--clr-danger) 20%, transparent);
    color: var(--clr-danger);
    border: 1px solid color-mix(in srgb, var(--clr-danger) 30%, transparent);
}

    .status-expiring i[b-qdemrl1r58] {
        color: var(--clr-danger);
    }

/* Empty State */
.empty-state[b-qdemrl1r58] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state-icon[b-qdemrl1r58] {
    font-size: 4rem;
    color: var(--clr-border);
    margin-bottom: 1rem;
}

.empty-state h5[b-qdemrl1r58] {
    color: var(--clr-text-secondary);
    margin-bottom: 0.5rem;
}

.empty-state p[b-qdemrl1r58] {
    color: var(--clr-text-muted);
}

/* Top Pages Card */
.top-pages-card[b-qdemrl1r58] {
    background: var(--clr-surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    border: 1px solid var(--clr-border);
}

.top-pages-header[b-qdemrl1r58] {
    padding: 1.5rem;
    border-bottom: 2px solid var(--clr-border);
    background: var(--clr-secondary);
}

    .top-pages-header h5[b-qdemrl1r58] {
        margin: 0;
        color: var(--clr-text);
        font-weight: 600;
    }

    .top-pages-header i[b-qdemrl1r58] {
        color: var(--clr-accent);
        margin-right: 0.5rem;
    }

.top-pages-body[b-qdemrl1r58] {
    padding: 1.5rem;
}

.page-item[b-qdemrl1r58] {
    margin-bottom: 1.5rem;
    transition: var(--transition);
    padding: 0.75rem;
    border-radius: var(--border-radius-sm);
}

    .page-item:hover[b-qdemrl1r58] {
        background: var(--clr-surface-hover);
    }

    .page-item:last-child[b-qdemrl1r58] {
        margin-bottom: 0;
    }

.page-info[b-qdemrl1r58] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.page-path[b-qdemrl1r58] {
    font-weight: 500;
    color: var(--clr-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .page-path i[b-qdemrl1r58] {
        color: var(--clr-accent);
        font-size: 0.875rem;
    }

.page-stats[b-qdemrl1r58] {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
}

.page-views[b-qdemrl1r58] {
    color: var(--clr-text-muted);
}

.page-percentage[b-qdemrl1r58] {
    font-weight: 600;
    color: var(--clr-accent);
}

.page-progress[b-qdemrl1r58] {
    height: 8px;
    background: var(--clr-border-light);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.page-progress-bar[b-qdemrl1r58] {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: var(--border-radius-sm);
    transition: width 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sessions-card-header[b-qdemrl1r58] {
        flex-direction: column;
        align-items: flex-start;
    }

    .session-status-legend[b-qdemrl1r58] {
        width: 100%;
        justify-content: space-between;
    }

    .sessions-table[b-qdemrl1r58] {
        font-size: 0.875rem;
    }

        .sessions-table th[b-qdemrl1r58],
        .sessions-table td[b-qdemrl1r58] {
            padding: 0.75rem 1rem;
        }

    .stat-value[b-qdemrl1r58] {
        font-size: 1.5rem;
    }

    .stat-icon[b-qdemrl1r58] {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .page-info[b-qdemrl1r58] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* Animations */
@keyframes fadeIn-b-qdemrl1r58 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.stat-card[b-qdemrl1r58],
.info-card[b-qdemrl1r58],
.sessions-card[b-qdemrl1r58],
.top-pages-card[b-qdemrl1r58] {
    animation: fadeIn-b-qdemrl1r58 0.4s ease-out;
}

/* Loading state animation */
@keyframes pulse-b-qdemrl1r58 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.loading-container .spinner-border[b-qdemrl1r58] {
    animation: pulse-b-qdemrl1r58 1.5s ease-in-out infinite;
}

/* Active state for buttons */
.btn:active[b-qdemrl1r58] {
    transform: scale(var(--active-scale));
}

/* Smooth transitions for theme switching */
*[b-qdemrl1r58] {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* User Info */
.user-info[b-qdemrl1r58] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.user-email[b-qdemrl1r58] {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    font-style: italic;
}

/* IP Address */
.ip-address[b-qdemrl1r58] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
}

    .ip-address i[b-qdemrl1r58] {
        color: var(--clr-accent);
        font-size: 0.75rem;
    }

    .ip-address code[b-qdemrl1r58] {
        background: var(--clr-secondary);
        padding: 0.25rem 0.5rem;
        border-radius: var(--border-radius-sm);
        color: var(--clr-text);
        border: 1px solid var(--clr-border);
    }

/* Time Info with Date */
.time-info[b-qdemrl1r58] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .time-info > div[b-qdemrl1r58] {
        display: flex;
        flex-direction: column;
    }

.time-value[b-qdemrl1r58] {
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    color: var(--clr-text-secondary);
    font-weight: 500;
}

.time-date[b-qdemrl1r58] {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    font-family: 'Courier New', monospace;
}
/* _content/alkpi/Components/Pages/Auth/Login.razor.rz.scp.css */
/* ===== LOGIN PAGE STYLES ===== */

.auth-wrap[b-n063de821c] {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-secondary) 50%, var(--clr-primary) 100%);
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

    /* Animated background elements */
    .auth-wrap[b-n063de821c]::before {
        content: '';
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(var(--clr-accent-rgb), 0.15) 0%, transparent 70%);
        top: -250px;
        right: -250px;
        animation: pulse-b-n063de821c 8s ease-in-out infinite;
    }

    .auth-wrap[b-n063de821c]::after {
        content: '';
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(var(--clr-accent-rgb), 0.1) 0%, transparent 70%);
        bottom: -200px;
        left: -200px;
        animation: pulse-b-n063de821c 10s ease-in-out infinite reverse;
    }

@keyframes pulse-b-n063de821c {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Auth card */
.auth-card[b-n063de821c] {
    max-width: 480px;
    width: 100%;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
    transition: var(--transition);
}

    .auth-card:hover[b-n063de821c] {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    }

    /* Icon styling */
    .auth-card .fa-3x[b-n063de821c] {
        font-size: 3rem;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: slideDown-b-n063de821c 0.6s ease-out;
    }

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

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

/* Headings */
.auth-card h3[b-n063de821c] {
    color: var(--clr-text);
    font-weight: 700;
    animation: slideDown-b-n063de821c 0.7s ease-out;
}

.auth-card p.text-secondary[b-n063de821c] {
    color: var(--clr-text-secondary) !important;
    animation: slideDown-b-n063de821c 0.8s ease-out;
}

/* Alert messages */
.auth-card .alert[b-n063de821c] {
    border: none;
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    animation: slideDown-b-n063de821c 0.5s ease-out;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.auth-card .alert-danger[b-n063de821c] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
    color: var(--clr-danger);
    border-left: 4px solid var(--clr-danger);
}

.auth-card .alert-success[b-n063de821c] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    color: var(--clr-success);
    border-left: 4px solid var(--clr-success);
}

/* Form elements */
.auth-card .form-label[b-n063de821c] {
    color: var(--clr-text);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.auth-card .input-group[b-n063de821c] {
    margin-bottom: 0.5rem;
    box-shadow: var(--shadow-sm);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
}

    .auth-card .input-group:focus-within[b-n063de821c] {
        box-shadow: 0 0 0 3px var(--clr-accent-light), var(--shadow);
        transform: translateY(-1px);
    }

.auth-card .input-group-text[b-n063de821c] {
    background: var(--clr-secondary);
    border: 1px solid var(--clr-border);
    border-right: none;
    color: var(--clr-accent);
    padding: 0.75rem 1rem;
    transition: var(--transition);
}

.auth-card .input-group:focus-within .input-group-text[b-n063de821c] {
    background: var(--clr-accent-light);
    color: var(--clr-accent);
}

.auth-card .form-control[b-n063de821c] {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-left: none;
    color: var(--clr-text);
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: var(--transition);
}

    .auth-card .form-control:focus[b-n063de821c] {
        background: var(--clr-surface);
        border-color: var(--clr-border);
        color: var(--clr-text);
        box-shadow: none;
    }

    .auth-card .form-control[b-n063de821c]::placeholder {
        color: var(--clr-text-muted);
        opacity: 0.7;
    }

/* Checkbox styling */
.auth-card .form-check[b-n063de821c] {
    padding-left: 1.75rem;
}

.auth-card .form-check-input[b-n063de821c] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--clr-border);
    background-color: var(--clr-surface);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: var(--transition);
}

    .auth-card .form-check-input:checked[b-n063de821c] {
        background-color: var(--clr-accent);
        border-color: var(--clr-accent);
    }

    .auth-card .form-check-input:focus[b-n063de821c] {
        border-color: var(--clr-accent);
        box-shadow: 0 0 0 3px var(--clr-accent-light);
    }

.auth-card .form-check-label[b-n063de821c] {
    color: var(--clr-text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}

/* Links */
.auth-card a[b-n063de821c] {
    color: var(--clr-accent);
    transition: var(--transition);
    position: relative;
}

    .auth-card a[b-n063de821c]::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--clr-accent);
        transition: width 0.3s ease;
    }

    .auth-card a:hover[b-n063de821c] {
        color: var(--clr-accent-hover);
    }

        .auth-card a:hover[b-n063de821c]::after {
            width: 100%;
        }

/* Submit button */
.auth-card .btn-accent[b-n063de821c] {
    background: var(--gradient-primary);
    border: none;
    color: white;
    font-weight: 600;
    padding: 0.875rem 1.5rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
}

    .auth-card .btn-accent[b-n063de821c]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }

    .auth-card .btn-accent:hover[b-n063de821c] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(var(--clr-accent-rgb), 0.4);
    }

        .auth-card .btn-accent:hover[b-n063de821c]::before {
            left: 100%;
        }

    .auth-card .btn-accent:active[b-n063de821c] {
        transform: translateY(0);
    }

    .auth-card .btn-accent:disabled[b-n063de821c] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Divider */
.auth-card hr[b-n063de821c] {
    border-color: var(--clr-border);
    opacity: 0.5;
    margin: 1.5rem 0;
}

/* Bottom text */
.auth-card .text-center p[b-n063de821c] {
    color: var(--clr-text-secondary);
    font-size: 0.95rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .auth-wrap[b-n063de821c] {
        padding: 1rem;
    }

    .auth-card[b-n063de821c] {
        padding: 2rem 1.5rem !important;
    }

        .auth-card .fa-3x[b-n063de821c] {
            font-size: 2.5rem;
        }

        .auth-card h3[b-n063de821c] {
            font-size: 1.5rem;
        }
}

/* Focus visible for accessibility */
.auth-card *:focus-visible[b-n063de821c] {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}

/* Animation for form elements */
.auth-card .mb-3[b-n063de821c] {
    animation: slideUp-b-n063de821c 0.5s ease-out backwards;
}

    .auth-card .mb-3:nth-child(1)[b-n063de821c] {
        animation-delay: 0.1s;
    }

    .auth-card .mb-3:nth-child(2)[b-n063de821c] {
        animation-delay: 0.2s;
    }

    .auth-card .mb-3:nth-child(3)[b-n063de821c] {
        animation-delay: 0.3s;
    }

.auth-card .mb-4[b-n063de821c] {
    animation-delay: 0.4s;
}

@keyframes slideUp-b-n063de821c {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/alkpi/Components/Pages/Auth/profilemodal.razor.rz.scp.css */
/* Modal Enhancements */
.modal-xl[b-3g7fqanj8i] {
    max-width: 1200px;
}

.modal-content[b-3g7fqanj8i] {
    border-radius: 16px;
    border: 1px solid var(--bs-border-color);
}

[data-theme="dark"] .modal-content[b-3g7fqanj8i] {
    background: #2d3748;
    border-color: #4a5568;
}

.modal-header[b-3g7fqanj8i] {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1.5rem;
}

.modal-body[b-3g7fqanj8i] {
    padding: 2rem;
}

/* User Avatar */
.user-avatar-large[b-3g7fqanj8i] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s;
}

    .user-avatar-large:hover[b-3g7fqanj8i] {
        transform: scale(1.05);
    }

/* Card Styling */
.card[b-3g7fqanj8i] {
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    overflow: hidden;
}

[data-theme="dark"] .card[b-3g7fqanj8i] {
    background: #1a202c;
    border-color: #4a5568;
}

.card-header[b-3g7fqanj8i] {
    background: var(--bs-light);
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1rem 1.25rem;
}

[data-theme="dark"] .card-header[b-3g7fqanj8i] {
    background: #2d3748;
}

.card-header h6[b-3g7fqanj8i] {
    color: var(--bs-body-color);
    font-weight: 600;
    margin: 0;
}

/* Subscription Widget */
.subscription-widget[b-3g7fqanj8i] {
    position: sticky;
    top: 20px;
}

.bg-gradient-primary[b-3g7fqanj8i] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.plan-badge-large[b-3g7fqanj8i] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-size: 1.125rem;
    font-weight: 700;
    display: inline-block;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Usage Summary */
.usage-summary[b-3g7fqanj8i] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.usage-item[b-3g7fqanj8i] {
    padding: 1rem;
    background: var(--bs-light);
    border-radius: 10px;
    transition: all 0.3s;
}

[data-theme="dark"] .usage-item[b-3g7fqanj8i] {
    background: #2d3748;
}

.usage-item:hover[b-3g7fqanj8i] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.usage-label[b-3g7fqanj8i] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.usage-value[b-3g7fqanj8i] {
    font-size: 0.95rem;
    color: var(--bs-secondary-color);
}

    .usage-value strong[b-3g7fqanj8i] {
        color: #667eea;
        font-size: 1.125rem;
    }

.progress[b-3g7fqanj8i] {
    height: 6px;
    border-radius: 3px;
    background: var(--bs-body-bg);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

[data-theme="dark"] .progress[b-3g7fqanj8i] {
    background: #1a202c;
}

.progress-bar[b-3g7fqanj8i] {
    border-radius: 3px;
    transition: width 0.6s ease;
}

/* Quick Stats */
.quick-stat-item[b-3g7fqanj8i] {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

    .quick-stat-item:last-child[b-3g7fqanj8i] {
        border-bottom: none;
        padding-bottom: 0;
    }

    .quick-stat-item:first-child[b-3g7fqanj8i] {
        padding-top: 0;
    }

/* Form Styling */
.form-control[b-3g7fqanj8i],
.form-select[b-3g7fqanj8i] {
    border-radius: 8px;
    border: 1px solid var(--bs-border-color);
    padding: 0.625rem 0.875rem;
}

    .form-control:focus[b-3g7fqanj8i],
    .form-select:focus[b-3g7fqanj8i] {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

[data-theme="dark"] .form-control[b-3g7fqanj8i],
[data-theme="dark"] .form-select[b-3g7fqanj8i] {
    background: #1a202c;
    color: #e2e8f0;
    border-color: #4a5568;
}

/* Buttons */
.btn[b-3g7fqanj8i] {
    border-radius: 8px;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.3s;
}

.btn-primary[b-3g7fqanj8i] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

    .btn-primary:hover[b-3g7fqanj8i] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

/* Alerts */
.alert[b-3g7fqanj8i] {
    border-radius: 10px;
    border: none;
}

.alert-success[b-3g7fqanj8i] {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.alert-danger[b-3g7fqanj8i] {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.alert-info[b-3g7fqanj8i] {
    background: rgba(23, 162, 184, 0.1);
    color: #17a2b8;
}

[data-theme="dark"] .alert-success[b-3g7fqanj8i] {
    background: rgba(40, 167, 69, 0.2);
}

[data-theme="dark"] .alert-danger[b-3g7fqanj8i] {
    background: rgba(220, 53, 69, 0.2);
}

[data-theme="dark"] .alert-info[b-3g7fqanj8i] {
    background: rgba(23, 162, 184, 0.2);
}

/* Badges */
.badge[b-3g7fqanj8i] {
    padding: 0.375rem 0.75rem;
    font-weight: 600;
    border-radius: 6px;
}

/* Responsive */
@media (max-width: 991px) {
    .modal-xl[b-3g7fqanj8i] {
        max-width: 90%;
    }

    .subscription-widget[b-3g7fqanj8i] {
        position: relative;
        top: 0;
        margin-top: 1rem;
    }

    .modal-body[b-3g7fqanj8i] {
        padding: 1.5rem;
    }
}

@media (max-width: 768px) {
    .modal-body[b-3g7fqanj8i] {
        padding: 1rem;
    }

    .user-avatar-large[b-3g7fqanj8i] {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.5rem !important;
        line-height: 60px !important;
    }
}
/* _content/alkpi/Components/Pages/Auth/register.razor.rz.scp.css */
/* ===== REGISTER PAGE STYLES ===== */

.auth-wrap[b-s2xzir7n5t] {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-secondary) 50%, var(--clr-primary) 100%);
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

    /* Animated background elements */
    .auth-wrap[b-s2xzir7n5t]::before {
        content: '';
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(var(--clr-accent-rgb), 0.15) 0%, transparent 70%);
        top: -300px;
        right: -300px;
        animation: pulse-b-s2xzir7n5t 8s ease-in-out infinite;
    }

    .auth-wrap[b-s2xzir7n5t]::after {
        content: '';
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(var(--clr-accent-rgb), 0.1) 0%, transparent 70%);
        bottom: -250px;
        left: -250px;
        animation: pulse-b-s2xzir7n5t 10s ease-in-out infinite reverse;
    }

@keyframes pulse-b-s2xzir7n5t {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Auth card - wider for register form */
.auth-card[b-s2xzir7n5t] {
    max-width: 640px;
    width: 100%;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
    transition: var(--transition);
}

    .auth-card:hover[b-s2xzir7n5t] {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    }

    /* Icon styling */
    .auth-card .fa-3x[b-s2xzir7n5t] {
        font-size: 3rem;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: slideDown-b-s2xzir7n5t 0.6s ease-out;
    }

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

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

/* Headings */
.auth-card h3[b-s2xzir7n5t] {
    color: var(--clr-text);
    font-weight: 700;
    animation: slideDown-b-s2xzir7n5t 0.7s ease-out;
}

.auth-card p.text-secondary[b-s2xzir7n5t] {
    color: var(--clr-text-secondary) !important;
    animation: slideDown-b-s2xzir7n5t 0.8s ease-out;
}

/* Alert messages */
.auth-card .alert[b-s2xzir7n5t] {
    border: none;
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    animation: slideDown-b-s2xzir7n5t 0.5s ease-out;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.auth-card .alert-danger[b-s2xzir7n5t] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
    color: var(--clr-danger);
    border-left: 4px solid var(--clr-danger);
}

.auth-card .alert-success[b-s2xzir7n5t] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    color: var(--clr-success);
    border-left: 4px solid var(--clr-success);
}

/* Form elements */
.auth-card .form-label[b-s2xzir7n5t] {
    color: var(--clr-text);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.auth-card .input-group[b-s2xzir7n5t] {
    margin-bottom: 0.5rem;
    box-shadow: var(--shadow-sm);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
}

    .auth-card .input-group:focus-within[b-s2xzir7n5t] {
        box-shadow: 0 0 0 3px var(--clr-accent-light), var(--shadow);
        transform: translateY(-1px);
    }

.auth-card .input-group-text[b-s2xzir7n5t] {
    background: var(--clr-secondary);
    border: 1px solid var(--clr-border);
    border-right: none;
    color: var(--clr-accent);
    padding: 0.75rem 1rem;
    transition: var(--transition);
}

.auth-card .input-group:focus-within .input-group-text[b-s2xzir7n5t] {
    background: var(--clr-accent-light);
    color: var(--clr-accent);
}

.auth-card .form-control[b-s2xzir7n5t] {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-left: none;
    color: var(--clr-text);
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: var(--transition);
}

    .auth-card .form-control:focus[b-s2xzir7n5t] {
        background: var(--clr-surface);
        border-color: var(--clr-border);
        color: var(--clr-text);
        box-shadow: none;
    }

    .auth-card .form-control[b-s2xzir7n5t]::placeholder {
        color: var(--clr-text-muted);
        opacity: 0.7;
    }

/* Validation messages */
.auth-card .text-danger[b-s2xzir7n5t] {
    font-size: 0.85rem;
    margin-top: 0.25rem;
    display: block;
    animation: shake-b-s2xzir7n5t 0.3s ease-in-out;
}

@keyframes shake-b-s2xzir7n5t {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* Password requirements card */
.auth-card .bg-light[b-s2xzir7n5t] {
    background: var(--clr-secondary) !important;
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

    .auth-card .bg-light .text-muted[b-s2xzir7n5t] {
        color: var(--clr-text-secondary) !important;
    }

    .auth-card .bg-light strong[b-s2xzir7n5t] {
        color: var(--clr-text);
    }

/* Checkbox styling - ENHANCED VISIBILITY WITH IMPORTANT FLAGS */
.auth-card .form-check[b-s2xzir7n5t] {
    padding-left: 2rem !important;
    position: relative;
    display: flex !important;
    align-items: flex-start;
    gap: 0.5rem;
}

.auth-card .form-check-input[b-s2xzir7n5t] {
    width: 1.5rem !important;
    height: 1.5rem !important;
    min-width: 1.5rem !important;
    border: 2px solid var(--clr-accent) !important;
    background-color: var(--clr-secondary) !important;
    border-radius: 0.5rem !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    margin-top: 0.15rem !important;
    margin-left: -2rem !important;
    flex-shrink: 0 !important;
    position: relative !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

    /* Unchecked state - more visible border */
    .auth-card .form-check-input:not(:checked)[b-s2xzir7n5t] {
        border-color: var(--clr-accent) !important;
        background-color: var(--clr-secondary) !important;
        box-shadow: 0 0 0 1px var(--clr-accent-light) !important;
    }

    /* Checked state */
    .auth-card .form-check-input:checked[b-s2xzir7n5t] {
        background-color: var(--clr-accent) !important;
        border-color: var(--clr-accent) !important;
        box-shadow: 0 0 0 3px var(--clr-accent-light) !important;
    }

        /* Add a checkmark icon */
        .auth-card .form-check-input:checked[b-s2xzir7n5t]::after {
            content: '✓' !important;
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            color: white !important;
            font-size: 1.1rem !important;
            font-weight: bold !important;
            display: block !important;
        }

    /* Hover state */
    .auth-card .form-check-input:hover[b-s2xzir7n5t] {
        border-color: var(--clr-accent-hover) !important;
        box-shadow: 0 0 0 3px var(--clr-accent-light) !important;
        transform: scale(1.05) !important;
    }

    /* Focus state */
    .auth-card .form-check-input:focus[b-s2xzir7n5t] {
        border-color: var(--clr-accent) !important;
        box-shadow: 0 0 0 4px var(--clr-accent-light) !important;
        outline: none !important;
    }

/* Label styling - better visibility */
.auth-card .form-check-label[b-s2xzir7n5t] {
    color: var(--clr-text) !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    user-select: none !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    flex: 1;
}

    /* Links within checkbox label */
    .auth-card .form-check-label a[b-s2xzir7n5t] {
        color: var(--clr-accent) !important;
        font-weight: 600 !important;
        text-decoration: underline !important;
        text-decoration-color: transparent !important;
        transition: var(--transition) !important;
    }

        .auth-card .form-check-label a:hover[b-s2xzir7n5t] {
            color: var(--clr-accent-hover) !important;
            text-decoration-color: var(--clr-accent-hover) !important;
        }

/* Light theme adjustments for better visibility */
:root[data-theme="light"] .auth-card .form-check-input:not(:checked)[b-s2xzir7n5t] {
    border-color: var(--clr-accent) !important;
    background-color: white !important;
    box-shadow: 0 0 0 1px var(--clr-accent-light), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Dark theme adjustments */
:root[data-theme="dark"] .auth-card .form-check-input:not(:checked)[b-s2xzir7n5t] {
    border-color: var(--clr-accent) !important;
    background-color: var(--clr-secondary) !important;
    box-shadow: 0 0 0 1px var(--clr-accent-light), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Error state for checkbox */
.auth-card .form-check-input.is-invalid[b-s2xzir7n5t],
.auth-card .form-check-input:invalid[b-s2xzir7n5t] {
    border-color: var(--clr-danger) !important;
}

    .auth-card .form-check-input.is-invalid:not(:checked)[b-s2xzir7n5t],
    .auth-card .form-check-input:invalid:not(:checked)[b-s2xzir7n5t] {
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
    }

/* Animation when checking */
.auth-card .form-check-input:checked[b-s2xzir7n5t] {
    animation: checkboxPop-b-s2xzir7n5t 0.3s ease-out;
}

@keyframes checkboxPop-b-s2xzir7n5t {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

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

/* Links */
.auth-card a[b-s2xzir7n5t] {
    color: var(--clr-accent);
    transition: var(--transition);
    position: relative;
}

    .auth-card a[b-s2xzir7n5t]::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--clr-accent);
        transition: width 0.3s ease;
    }

    .auth-card a:hover[b-s2xzir7n5t] {
        color: var(--clr-accent-hover);
    }

        .auth-card a:hover[b-s2xzir7n5t]::after {
            width: 100%;
        }

/* Submit button */
.auth-card .btn-accent[b-s2xzir7n5t] {
    background: var(--gradient-primary);
    border: none;
    color: white;
    font-weight: 600;
    padding: 0.875rem 1.5rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
}

    .auth-card .btn-accent[b-s2xzir7n5t]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }

    .auth-card .btn-accent:hover:not(:disabled)[b-s2xzir7n5t] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(var(--clr-accent-rgb), 0.4);
    }

        .auth-card .btn-accent:hover:not(:disabled)[b-s2xzir7n5t]::before {
            left: 100%;
        }

    .auth-card .btn-accent:active:not(:disabled)[b-s2xzir7n5t] {
        transform: translateY(0);
    }

    .auth-card .btn-accent:disabled[b-s2xzir7n5t] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Spinner animation */
.auth-card .spinner-border[b-s2xzir7n5t] {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

/* Divider */
.auth-card hr[b-s2xzir7n5t] {
    border-color: var(--clr-border);
    opacity: 0.5;
    margin: 1.5rem 0;
}

/* Bottom text */
.auth-card .text-center p[b-s2xzir7n5t] {
    color: var(--clr-text-secondary);
    font-size: 0.95rem;
}

/* Row gutters */
.auth-card .row.g-3[b-s2xzir7n5t] {
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

    .auth-card .row.g-3 > *[b-s2xzir7n5t] {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

/* Form text helper */
.auth-card .form-text[b-s2xzir7n5t] {
    color: var(--clr-text-muted);
    font-size: 0.85rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .auth-wrap[b-s2xzir7n5t] {
        padding: 1rem;
    }

    .auth-card[b-s2xzir7n5t] {
        padding: 2rem 1.5rem !important;
    }

        .auth-card .fa-3x[b-s2xzir7n5t] {
            font-size: 2.5rem;
        }

        .auth-card h3[b-s2xzir7n5t] {
            font-size: 1.5rem;
        }

        .auth-card .row.g-3 > .col-md-6[b-s2xzir7n5t] {
            margin-bottom: 1rem;
        }

            .auth-card .row.g-3 > .col-md-6:last-child[b-s2xzir7n5t] {
                margin-bottom: 0;
            }
}

/* Focus visible for accessibility */
.auth-card *:focus-visible[b-s2xzir7n5t] {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}

/* Staggered animation for form elements */
.auth-card .row[b-s2xzir7n5t],
.auth-card .mb-3[b-s2xzir7n5t],
.auth-card .mb-4[b-s2xzir7n5t] {
    animation: slideUp-b-s2xzir7n5t 0.5s ease-out backwards;
}

.auth-card > form > *:nth-child(1)[b-s2xzir7n5t] {
    animation-delay: 0.1s;
}

.auth-card > form > *:nth-child(2)[b-s2xzir7n5t] {
    animation-delay: 0.15s;
}

.auth-card > form > *:nth-child(3)[b-s2xzir7n5t] {
    animation-delay: 0.2s;
}

.auth-card > form > *:nth-child(4)[b-s2xzir7n5t] {
    animation-delay: 0.25s;
}

.auth-card > form > *:nth-child(5)[b-s2xzir7n5t] {
    animation-delay: 0.3s;
}

.auth-card > form > *:nth-child(6)[b-s2xzir7n5t] {
    animation-delay: 0.35s;
}

.auth-card > form > *:nth-child(7)[b-s2xzir7n5t] {
    animation-delay: 0.4s;
}

@keyframes slideUp-b-s2xzir7n5t {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Enhanced hover effects for inputs in light theme */
:root[data-theme="light"] .auth-card .input-group:hover[b-s2xzir7n5t] {
    box-shadow: 0 4px 8px rgba(113, 201, 206, 0.15);
}

/* Enhanced button glow in dark theme */
:root[data-theme="dark"] .auth-card .btn-accent:hover:not(:disabled)[b-s2xzir7n5t] {
    box-shadow: 0 8px 20px rgba(0, 173, 181, 0.5), 0 0 30px rgba(0, 173, 181, 0.3);
}
/* _content/alkpi/Components/Pages/home.razor.rz.scp.css */
/* ===== HOME PAGE SPECIFIC STYLES ===== */
.home-container[b-z00exj8oa3] {
    min-height: 100vh;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* ===== HERO SECTION ===== */
.hero-section[b-z00exj8oa3] {
    padding: 4rem 0 6rem;
    background: var(--gradient-primary);
    color: white;
    position: relative;
    overflow: hidden;
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.hero-content[b-z00exj8oa3] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-title[b-z00exj8oa3] {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hero-subtitle[b-z00exj8oa3] {
    font-size: 1.3rem;
    opacity: 0.9;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.hero-actions[b-z00exj8oa3] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.floating-elements[b-z00exj8oa3] {
    position: relative;
    height: 400px;
}

.floating-card[b-z00exj8oa3] {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: float-b-z00exj8oa3 3s ease-in-out infinite;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .floating-card:nth-child(1)[b-z00exj8oa3] {
        top: 20%;
        right: 20%;
        animation-delay: 0s;
    }

    .floating-card:nth-child(2)[b-z00exj8oa3] {
        top: 50%;
        right: 40%;
        animation-delay: 1s;
    }

    .floating-card:nth-child(3)[b-z00exj8oa3] {
        top: 70%;
        right: 10%;
        animation-delay: 2s;
    }

@keyframes float-b-z00exj8oa3 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* ===== NAVIGATION PILLS ===== */
.nav-pills-container[b-z00exj8oa3] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(var(--clr-surface), 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--clr-border-light);
    padding: 1.5rem 0;
    margin-bottom: 3rem;
}

.nav-pills[b-z00exj8oa3] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.nav-pill[b-z00exj8oa3] {
    background: var(--clr-surface);
    color: var(--clr-text-secondary);
    border: 1px solid var(--clr-border);
    padding: 0.875rem 1.5rem;
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}

    .nav-pill:hover[b-z00exj8oa3] {
        background: var(--clr-surface-hover);
        color: var(--clr-text);
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

    .nav-pill.active[b-z00exj8oa3] {
        background: var(--clr-accent);
        color: white;
        border-color: var(--clr-accent);
        box-shadow: 0 4px 15px var(--clr-accent-light);
    }

/* ===== MAIN CONTENT ===== */
.main-content[b-z00exj8oa3] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
}

.content-section[b-z00exj8oa3] {
    margin-bottom: 4rem;
}

.section-header[b-z00exj8oa3] {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title[b-z00exj8oa3] {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--clr-text);
}

.section-subtitle[b-z00exj8oa3] {
    font-size: 1.1rem;
    color: var(--clr-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* ===== FEATURES GRID ===== */
.features-grid[b-z00exj8oa3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card[b-z00exj8oa3] {
    text-align: center;
    padding: 2rem;
    border: none;
    border-radius: var(--border-radius-lg);
    transition: var(--transition);
}

.feature-icon[b-z00exj8oa3] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

    .feature-icon.rocket[b-z00exj8oa3] {
        background: linear-gradient(135deg, #667eea, #764ba2);
    }

    .feature-icon.users[b-z00exj8oa3] {
        background: linear-gradient(135deg, #f093fb, #f5576c);
    }

    .feature-icon.diamond[b-z00exj8oa3] {
        background: linear-gradient(135deg, #4facfe, #00f2fe);
    }

    .feature-icon.network[b-z00exj8oa3] {
        background: linear-gradient(135deg, #fa709a, #fee140);
    }

/* ===== ACHIEVEMENTS GRID ===== */
.achievements-grid[b-z00exj8oa3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.achievement-card[b-z00exj8oa3] {
    text-align: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.achievement-badge[b-z00exj8oa3] {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: var(--shadow);
}

/* ===== SERVICES GRID ===== */
.services-grid[b-z00exj8oa3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.service-card[b-z00exj8oa3] {
    padding: 0;
    overflow: hidden;
}

.service-header[b-z00exj8oa3] {
    padding: 2rem 2rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--clr-surface);
}

.service-icon[b-z00exj8oa3] {
    padding: 1rem;
    background: var(--clr-accent-light);
    border-radius: var(--border-radius);
    color: var(--clr-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CLIENTS SECTION ===== */
.clients-section[b-z00exj8oa3] {
    margin-top: 2rem;
}

.client-list[b-z00exj8oa3],
.consultant-list[b-z00exj8oa3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.client-item[b-z00exj8oa3],
.consultant-item[b-z00exj8oa3] {
    padding: 1rem 1.5rem;
    background: var(--clr-surface-hover);
    border-radius: var(--border-radius);
    transition: var(--transition);
    border-right: 3px solid var(--clr-accent);
}

.consultant-item[b-z00exj8oa3] {
    border-right-color: var(--clr-warning);
}

    .client-item:hover[b-z00exj8oa3],
    .consultant-item:hover[b-z00exj8oa3] {
        background: var(--clr-accent-light);
        transform: translateX(5px);
    }

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 992px) {
    .hero-content[b-z00exj8oa3] {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .hero-title[b-z00exj8oa3] {
        font-size: 2.5rem;
    }

    .floating-elements[b-z00exj8oa3] {
        height: 200px;
    }

    .nav-pills[b-z00exj8oa3] {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    .hero-section[b-z00exj8oa3] {
        padding: 2rem 0 4rem;
        min-height: 50vh;
    }

    .hero-title[b-z00exj8oa3] {
        font-size: 2rem;
    }

    .hero-subtitle[b-z00exj8oa3] {
        font-size: 1.1rem;
    }

    .nav-pills[b-z00exj8oa3] {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-pill[b-z00exj8oa3] {
        justify-content: center;
    }

    .section-title[b-z00exj8oa3] {
        font-size: 2rem;
    }

    .features-grid[b-z00exj8oa3],
    .achievements-grid[b-z00exj8oa3],
    .services-grid[b-z00exj8oa3] {
        grid-template-columns: 1fr;
    }

    .main-content[b-z00exj8oa3] {
        padding: 0 1rem 2rem;
    }
}

/* ===== THEME SPECIFIC OVERRIDES ===== */
:root[data-theme="light"] .hero-section[b-z00exj8oa3] {
    background: linear-gradient(135deg, var(--clr-accent) 0%, color-mix(in srgb, var(--clr-accent) 80%, #6366f1) 100%);
}

:root[data-theme="dark"] .hero-section[b-z00exj8oa3] {
    background: linear-gradient(135deg, var(--clr-accent) 0%, color-mix(in srgb, var(--clr-accent) 70%, #1e293b) 100%);
}

:root[data-theme="light"] .nav-pills-container[b-z00exj8oa3] {
    background: rgba(255, 255, 255, 0.95);
}

:root[data-theme="dark"] .nav-pills-container[b-z00exj8oa3] {
    background: rgba(55, 65, 81, 0.95);
}
/* _content/alkpi/Components/Pages/Projects/AI/aIInsightsinterface.razor.rz.scp.css */
/* ===== AI INSIGHTS INTERFACE - ENHANCED UI/UX ===== */
.ai-insights-interface[b-5g3sfb2mtz] {
    min-height: 100vh;
    background: var(--clr-secondary);
    padding: 0;
}

/* ===== LOADING STATE ===== */
.ai-loading-container[b-5g3sfb2mtz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 3rem;
    background: var(--clr-surface);
    border-radius: var(--border-radius-lg);
    margin: 1rem;
    box-shadow: var(--shadow);
}

.ai-spinner[b-5g3sfb2mtz] {
    width: 64px;
    height: 64px;
    border: 4px solid var(--clr-border);
    border-top: 4px solid var(--project-color, var(--clr-accent));
    border-radius: 50%;
    animation: ai-spin-b-5g3sfb2mtz 1s linear infinite;
    margin-bottom: 1.5rem;
}

@keyframes ai-spin-b-5g3sfb2mtz {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-5g3sfb2mtz] {
    font-size: 1.1rem;
    color: var(--clr-text-secondary);
    font-weight: 500;
    text-align: center;
}

/* ===== ERROR STATES ===== */
.ai-error-container[b-5g3sfb2mtz] {
    background: var(--clr-surface);
    border-radius: var(--border-radius-lg);
    margin: 1rem;
    box-shadow: var(--shadow);
    overflow: hidden;
    border-left: 4px solid var(--clr-danger);
}

.error-header[b-5g3sfb2mtz] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
    padding: 1.5rem;
    border-bottom: 1px solid var(--clr-border-light);
}

.error-icon[b-5g3sfb2mtz] {
    width: 48px;
    height: 48px;
    background: var(--clr-danger);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.error-title[b-5g3sfb2mtz] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--clr-text);
    margin-bottom: 0.5rem;
}

.error-message[b-5g3sfb2mtz] {
    color: var(--clr-text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.error-details[b-5g3sfb2mtz] {
    background: var(--clr-primary);
    border-radius: var(--border-radius);
    padding: 1rem;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--clr-text-muted);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

.error-actions[b-5g3sfb2mtz] {
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ===== EMPTY STATES ===== */
.ai-empty-state[b-5g3sfb2mtz] {
    background: var(--clr-surface);
    border-radius: var(--border-radius-lg);
    margin: 1rem;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: var(--shadow);
}

.empty-icon[b-5g3sfb2mtz] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--project-color, var(--clr-accent)), color-mix(in srgb, var(--project-color, var(--clr-accent)) 70%, transparent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    margin: 0 auto 1.5rem;
}

.empty-title[b-5g3sfb2mtz] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--clr-text);
    margin-bottom: 1rem;
}

.empty-description[b-5g3sfb2mtz] {
    color: var(--clr-text-secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== INSIGHTS HEADER ===== */
.insights-header[b-5g3sfb2mtz] {
    background: var(--clr-surface);
    border-radius: var(--border-radius-lg);
    margin: 1rem;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.insights-header-content[b-5g3sfb2mtz] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.header-info[b-5g3sfb2mtz] {
    flex: 1;
    min-width: 0;
}

.insights-title[b-5g3sfb2mtz] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ai-badge[b-5g3sfb2mtz] {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.insights-meta[b-5g3sfb2mtz] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--clr-text-secondary);
    font-size: 0.9rem;
}

.meta-item[b-5g3sfb2mtz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-actions[b-5g3sfb2mtz] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.confidence-badge[b-5g3sfb2mtz] {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.confidence-high[b-5g3sfb2mtz] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--clr-success);
}

.confidence-medium[b-5g3sfb2mtz] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--clr-warning);
}

.confidence-low[b-5g3sfb2mtz] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--clr-danger);
}

.refresh-btn[b-5g3sfb2mtz] {
    background: var(--project-color, var(--clr-accent));
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
    justify-content: center;
}

    .refresh-btn:hover:not(:disabled)[b-5g3sfb2mtz] {
        background: color-mix(in srgb, var(--project-color, var(--clr-accent)) 80%, black);
        transform: translateY(-1px);
        box-shadow: var(--shadow);
    }

    .refresh-btn:disabled[b-5g3sfb2mtz] {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* ===== INSIGHTS CONTENT ===== */
.insights-content[b-5g3sfb2mtz] {
    margin: 1rem;
}

.structured-insights[b-5g3sfb2mtz] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ===== OVERVIEW STATS ===== */
.overview-stats[b-5g3sfb2mtz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-5g3sfb2mtz] {
    background: var(--clr-surface);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

    .stat-card[b-5g3sfb2mtz]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--project-color, var(--clr-accent));
    }

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

.stat-header[b-5g3sfb2mtz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.stat-icon[b-5g3sfb2mtz] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--project-color, var(--clr-accent)), color-mix(in srgb, var(--project-color, var(--clr-accent)) 70%, transparent));
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.stat-number[b-5g3sfb2mtz] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1;
}

.stat-label[b-5g3sfb2mtz] {
    font-size: 0.9rem;
    color: var(--clr-text-secondary);
    font-weight: 500;
    margin-top: 0.5rem;
}

/* ===== INSIGHT SECTIONS ===== */
.insight-section[b-5g3sfb2mtz] {
    background: var(--clr-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 2rem;
}

.section-header[b-5g3sfb2mtz] {
    background: linear-gradient(135deg, var(--project-color, var(--clr-accent)), color-mix(in srgb, var(--project-color, var(--clr-accent)) 80%, transparent));
    color: white;
    padding: 1.5rem;
    position: relative;
}

    .section-header[b-5g3sfb2mtz]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M20 20c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10z'/%3E%3C/g%3E%3C/svg%3E") repeat;
    }

.section-title[b-5g3sfb2mtz] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.section-content[b-5g3sfb2mtz] {
    padding: 2rem;
}

/* ===== EXECUTIVE SUMMARY ===== */
.summary-overview[b-5g3sfb2mtz] {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--clr-text);
    margin-bottom: 2rem;
}

.achievements[b-5g3sfb2mtz],
.challenges[b-5g3sfb2mtz] {
    margin-bottom: 1.5rem;
}

    .achievements h6[b-5g3sfb2mtz],
    .challenges h6[b-5g3sfb2mtz] {
        font-size: 1rem;
        font-weight: 600;
        color: var(--clr-text);
        margin-bottom: 1rem;
    }

.achievement-list[b-5g3sfb2mtz],
.challenge-list[b-5g3sfb2mtz] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.achievement-item[b-5g3sfb2mtz],
.challenge-item[b-5g3sfb2mtz] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--clr-primary);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

    .achievement-item:hover[b-5g3sfb2mtz],
    .challenge-item:hover[b-5g3sfb2mtz] {
        background: var(--clr-surface-hover);
        transform: translateX(4px);
    }

    .achievement-item i[b-5g3sfb2mtz] {
        color: var(--clr-success);
        font-size: 1.1rem;
        margin-top: 0.1rem;
    }

    .challenge-item i[b-5g3sfb2mtz] {
        color: var(--clr-warning);
        font-size: 1.1rem;
        margin-top: 0.1rem;
    }

/* ===== PERFORMANCE TRENDS ===== */
.trends-grid[b-5g3sfb2mtz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.trend-group[b-5g3sfb2mtz] {
    background: var(--clr-primary);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--clr-border-light);
}

    .trend-group.improving[b-5g3sfb2mtz] {
        border-left: 4px solid var(--clr-success);
    }

    .trend-group.declining[b-5g3sfb2mtz] {
        border-left: 4px solid var(--clr-danger);
    }

    .trend-group h6[b-5g3sfb2mtz] {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.trend-item[b-5g3sfb2mtz] {
    background: var(--clr-surface);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 1rem;
    transition: var(--transition);
    border: 1px solid var(--clr-border-light);
}

    .trend-item:hover[b-5g3sfb2mtz] {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

.trend-header[b-5g3sfb2mtz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.trend-name[b-5g3sfb2mtz] {
    font-weight: 600;
    color: var(--clr-text);
}

.trend-change[b-5g3sfb2mtz] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.trend-details[b-5g3sfb2mtz] {
    font-size: 0.9rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.5rem;
}

.trend-analysis[b-5g3sfb2mtz] {
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    font-style: italic;
    display: block;
    margin-top: 0.5rem;
}

/* ===== ACTIONABLE INSIGHTS ===== */
.insight-card[b-5g3sfb2mtz] {
    background: var(--clr-primary);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--clr-border-light);
    transition: var(--transition);
    position: relative;
}

    .insight-card[b-5g3sfb2mtz]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        border-radius: 2px 0 0 2px;
    }

    .insight-card.high[b-5g3sfb2mtz]::before {
        background: var(--clr-danger);
    }

    .insight-card.medium[b-5g3sfb2mtz]::before {
        background: var(--clr-warning);
    }

    .insight-card.low[b-5g3sfb2mtz]::before {
        background: var(--clr-info);
    }

    .insight-card:hover[b-5g3sfb2mtz] {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

.insight-header[b-5g3sfb2mtz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.insight-title[b-5g3sfb2mtz] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--clr-text);
    margin: 0;
}

.impact-badge[b-5g3sfb2mtz] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

    .impact-badge.high[b-5g3sfb2mtz] {
        background: rgba(239, 68, 68, 0.1);
        color: var(--clr-danger);
    }

    .impact-badge.medium[b-5g3sfb2mtz] {
        background: rgba(245, 158, 11, 0.1);
        color: var(--clr-warning);
    }

    .impact-badge.low[b-5g3sfb2mtz] {
        background: rgba(6, 182, 212, 0.1);
        color: var(--clr-info);
    }

.insight-description[b-5g3sfb2mtz] {
    color: var(--clr-text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.related-kpis[b-5g3sfb2mtz] {
    margin-bottom: 1rem;
}

.kpi-tag[b-5g3sfb2mtz] {
    display: inline-block;
    background: var(--project-color, var(--clr-accent));
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    margin: 0.25rem 0.5rem 0.25rem 0;
}

.actionable-steps[b-5g3sfb2mtz] {
    background: var(--clr-surface);
    border-radius: var(--border-radius);
    padding: 1rem;
    border: 1px solid var(--clr-border-light);
}

.steps-list[b-5g3sfb2mtz] {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
    color: var(--clr-text-secondary);
}

    .steps-list li[b-5g3sfb2mtz] {
        margin-bottom: 0.5rem;
        line-height: 1.5;
    }

/* ===== RECOMMENDATIONS ===== */
.recommendation-card[b-5g3sfb2mtz] {
    background: var(--clr-primary);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--clr-border-light);
    transition: var(--transition);
    position: relative;
}

    .recommendation-card[b-5g3sfb2mtz]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        border-radius: 2px 0 0 2px;
    }

    .recommendation-card.high[b-5g3sfb2mtz]::before {
        background: var(--clr-danger);
    }

    .recommendation-card.medium[b-5g3sfb2mtz]::before {
        background: var(--clr-warning);
    }

    .recommendation-card.low[b-5g3sfb2mtz]::before {
        background: var(--clr-success);
    }

    .recommendation-card:hover[b-5g3sfb2mtz] {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

.recommendation-header[b-5g3sfb2mtz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.recommendation-title[b-5g3sfb2mtz] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--clr-text);
    margin: 0;
}

.recommendation-badges[b-5g3sfb2mtz] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.priority-badge[b-5g3sfb2mtz],
.effort-badge[b-5g3sfb2mtz] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .priority-badge.high[b-5g3sfb2mtz] {
        background: rgba(239, 68, 68, 0.1);
        color: var(--clr-danger);
    }

    .priority-badge.medium[b-5g3sfb2mtz] {
        background: rgba(245, 158, 11, 0.1);
        color: var(--clr-warning);
    }

    .priority-badge.low[b-5g3sfb2mtz] {
        background: rgba(16, 185, 129, 0.1);
        color: var(--clr-success);
    }

    .effort-badge.high[b-5g3sfb2mtz] {
        background: rgba(107, 114, 128, 0.1);
        color: var(--clr-text-muted);
    }

    .effort-badge.medium[b-5g3sfb2mtz] {
        background: rgba(245, 158, 11, 0.1);
        color: var(--clr-warning);
    }

    .effort-badge.low[b-5g3sfb2mtz] {
        background: rgba(16, 185, 129, 0.1);
        color: var(--clr-success);
    }

.recommendation-description[b-5g3sfb2mtz] {
    color: var(--clr-text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.recommendation-details[b-5g3sfb2mtz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.detail-item[b-5g3sfb2mtz] {
    background: var(--clr-surface);
    padding: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--clr-border-light);
}

.success-metrics[b-5g3sfb2mtz] {
    background: var(--clr-surface);
    border-radius: var(--border-radius);
    padding: 1rem;
    border: 1px solid var(--clr-border-light);
}

.metrics-list[b-5g3sfb2mtz] {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
    color: var(--clr-text-secondary);
}

    .metrics-list li[b-5g3sfb2mtz] {
        margin-bottom: 0.5rem;
        line-height: 1.5;
    }

/* ===== DATA QUALITY ALERTS ===== */
.alert-card[b-5g3sfb2mtz] {
    background: var(--clr-primary);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--clr-border-light);
    transition: var(--transition);
    position: relative;
}

    .alert-card[b-5g3sfb2mtz]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        border-radius: 2px 0 0 2px;
    }

    .alert-card.critical[b-5g3sfb2mtz]::before {
        background: var(--clr-danger);
    }

    .alert-card.high[b-5g3sfb2mtz]::before {
        background: var(--clr-warning);
    }

    .alert-card.medium[b-5g3sfb2mtz]::before {
        background: var(--clr-info);
    }

    .alert-card.low[b-5g3sfb2mtz]::before {
        background: var(--clr-success);
    }

    .alert-card:hover[b-5g3sfb2mtz] {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

.alert-header[b-5g3sfb2mtz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.alert-title[b-5g3sfb2mtz] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--clr-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.severity-badge[b-5g3sfb2mtz] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .severity-badge.critical[b-5g3sfb2mtz] {
        background: rgba(239, 68, 68, 0.1);
        color: var(--clr-danger);
    }

    .severity-badge.high[b-5g3sfb2mtz] {
        background: rgba(245, 158, 11, 0.1);
        color: var(--clr-warning);
    }

    .severity-badge.medium[b-5g3sfb2mtz] {
        background: rgba(6, 182, 212, 0.1);
        color: var(--clr-info);
    }

    .severity-badge.low[b-5g3sfb2mtz] {
        background: rgba(16, 185, 129, 0.1);
        color: var(--clr-success);
    }

.alert-details[b-5g3sfb2mtz] {
    background: var(--clr-surface);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--clr-border-light);
}

    .alert-details p[b-5g3sfb2mtz] {
        margin-bottom: 0.5rem;
        line-height: 1.5;
    }

.recommended-actions[b-5g3sfb2mtz] {
    background: var(--clr-surface);
    border-radius: var(--border-radius);
    padding: 1rem;
    border: 1px solid var(--clr-border-light);
}

.actions-list[b-5g3sfb2mtz] {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
    color: var(--clr-text-secondary);
}

    .actions-list li[b-5g3sfb2mtz] {
        margin-bottom: 0.5rem;
        line-height: 1.5;
    }

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .ai-insights-interface[b-5g3sfb2mtz] {
        margin: 0;
    }

    .insights-header-content[b-5g3sfb2mtz] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .header-actions[b-5g3sfb2mtz] {
        justify-content: space-between;
    }

    .insights-meta[b-5g3sfb2mtz] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .overview-stats[b-5g3sfb2mtz] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }

    .trends-grid[b-5g3sfb2mtz] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .insight-header[b-5g3sfb2mtz],
    .recommendation-header[b-5g3sfb2mtz] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .recommendation-badges[b-5g3sfb2mtz] {
        justify-content: flex-start;
    }

    .recommendation-details[b-5g3sfb2mtz] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .section-content[b-5g3sfb2mtz] {
        padding: 1.5rem;
    }
}

/* ===== RTL SUPPORT ===== */
[dir="rtl"] .trend-item:hover[b-5g3sfb2mtz] {
    transform: translateY(-2px) translateX(4px);
}

[dir="rtl"] .achievement-item:hover[b-5g3sfb2mtz],
[dir="rtl"] .challenge-item:hover[b-5g3sfb2mtz] {
    transform: translateX(-4px);
}

[dir="rtl"] .steps-list[b-5g3sfb2mtz],
[dir="rtl"] .metrics-list[b-5g3sfb2mtz],
[dir="rtl"] .actions-list[b-5g3sfb2mtz] {
    padding-right: 1.5rem;
    padding-left: 0;
}

/* ===== DARK THEME ENHANCEMENTS ===== */
[data-theme="dark"] .ai-error-container[b-5g3sfb2mtz] {
    border-left-color: #ef4444;
}

[data-theme="dark"] .error-details[b-5g3sfb2mtz] {
    background: #1a1f2e;
    border: 1px solid #374151;
}

[data-theme="dark"] .trend-group[b-5g3sfb2mtz],
[data-theme="dark"] .insight-card[b-5g3sfb2mtz],
[data-theme="dark"] .recommendation-card[b-5g3sfb2mtz],
[data-theme="dark"] .alert-card[b-5g3sfb2mtz] {
    background: #2d3748;
}

[data-theme="dark"] .actionable-steps[b-5g3sfb2mtz],
[data-theme="dark"] .success-metrics[b-5g3sfb2mtz],
[data-theme="dark"] .recommended-actions[b-5g3sfb2mtz],
[data-theme="dark"] .alert-details[b-5g3sfb2mtz],
[data-theme="dark"] .detail-item[b-5g3sfb2mtz] {
    background: #1a1f2e;
}

/* ===== ANIMATIONS ===== */
.fade-in-up[b-5g3sfb2mtz] {
    animation: fadeInUp-b-5g3sfb2mtz 0.6s ease-out forwards;
}

@keyframes fadeInUp-b-5g3sfb2mtz {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.stagger-animation > *[b-5g3sfb2mtz] {
    opacity: 0;
    animation: fadeInUp-b-5g3sfb2mtz 0.6s ease-out forwards;
}

    .stagger-animation > *:nth-child(1)[b-5g3sfb2mtz] {
        animation-delay: 0.1s;
    }

    .stagger-animation > *:nth-child(2)[b-5g3sfb2mtz] {
        animation-delay: 0.2s;
    }

    .stagger-animation > *:nth-child(3)[b-5g3sfb2mtz] {
        animation-delay: 0.3s;
    }

    .stagger-animation > *:nth-child(4)[b-5g3sfb2mtz] {
        animation-delay: 0.4s;
    }

    .stagger-animation > *:nth-child(5)[b-5g3sfb2mtz] {
        animation-delay: 0.5s;
    }
/* _content/alkpi/Components/Pages/Projects/Analytics/Analytics.razor.rz.scp.css */
/* ============================================================================
   Analytics Page - Clean & Modern Styling
   ============================================================================ */

/* Page Container */
.analytics-page[b-i4o3o7tcmf] {
    padding: 1.5rem;
    min-height: 100vh;
    background: var(--clr-primary);
    animation: fadeIn-b-i4o3o7tcmf 0.3s ease-out;
}

/* Header Section */
.analytics-header[b-i4o3o7tcmf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem;
    background: var(--clr-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

.header-left[b-i4o3o7tcmf],
.header-right[b-i4o3o7tcmf] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Window Dropdown */
.analytics-dropdown[b-i4o3o7tcmf]  .rz-dropdown {
    background: var(--clr-surface) !important;
    border-color: var(--clr-border) !important;
    color: var(--clr-text) !important;
}

    .analytics-dropdown[b-i4o3o7tcmf]  .rz-dropdown:hover {
        border-color: var(--clr-accent) !important;
    }

/* Actions Menu */
.actions-menu-wrapper[b-i4o3o7tcmf] {
    position: relative;
}

.actions-menu-btn[b-i4o3o7tcmf] {
    min-width: 40px;
    height: 40px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius);
    background: var(--clr-surface);
    color: var(--clr-text);
    cursor: pointer;
    transition: var(--transition);
}

    .actions-menu-btn:hover[b-i4o3o7tcmf] {
        background: var(--clr-surface-hover);
        border-color: var(--clr-accent);
        transform: translateY(-1px);
        box-shadow: var(--shadow);
    }

    .actions-menu-btn i[b-i4o3o7tcmf] {
        font-size: 1.25rem;
    }

    .actions-menu-btn[b-i4o3o7tcmf]::after {
        display: none !important;
    }

/* Dropdown Menu Styling */
.actions-dropdown-menu[b-i4o3o7tcmf] {
    background: var(--clr-secondary);
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    padding: 0.5rem;
    margin-top: 0.5rem;
}

    .actions-dropdown-menu .dropdown-item[b-i4o3o7tcmf] {
        color: var(--clr-text);
        padding: 0.75rem 1rem;
        border-radius: var(--border-radius-sm);
        transition: background 0.15s ease, transform 0.15s ease;
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        font-weight: 500;
    }

        .actions-dropdown-menu .dropdown-item:hover[b-i4o3o7tcmf] {
            background: var(--clr-surface-hover);
            color: var(--clr-text);
            transform: translateX(4px);
        }

        .actions-dropdown-menu .dropdown-item i[b-i4o3o7tcmf] {
            font-size: 1.1rem;
            color: var(--clr-text-secondary);
            min-width: 20px;
        }

        .actions-dropdown-menu .dropdown-item.active[b-i4o3o7tcmf] {
            background: var(--clr-accent-light);
            color: var(--clr-accent);
        }

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

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

.menu-item[b-i4o3o7tcmf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    color: var(--clr-text);
    text-align: left;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    font-size: 0.9rem;
    font-weight: 500;
}

    .menu-item:hover[b-i4o3o7tcmf] {
        background: var(--clr-surface-hover);
        transform: translateX(4px);
    }

    .menu-item i[b-i4o3o7tcmf] {
        font-size: 1.1rem;
        color: var(--clr-text-secondary);
        min-width: 20px;
    }

.menu-item-danger:hover[b-i4o3o7tcmf] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--clr-danger);
}

    .menu-item-danger:hover i[b-i4o3o7tcmf] {
        color: var(--clr-danger);
    }

.menu-divider[b-i4o3o7tcmf] {
    border: none;
    border-top: 1px solid var(--clr-border);
    margin: 0.5rem 0;
    opacity: 0.5;
}

/* Edit Mode Toggle */
.edit-mode-toggle[b-i4o3o7tcmf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius);
}

.toggle-text[b-i4o3o7tcmf] {
    color: var(--clr-text);
    font-weight: 500;
    font-size: 0.9rem;
    user-select: none;
}

.toggle-label[b-i4o3o7tcmf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    color: var(--clr-text);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Time Range Section */
.time-range-section[b-i4o3o7tcmf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-group[b-i4o3o7tcmf] {
    display: flex;
    box-shadow: var(--shadow);
    border-radius: var(--border-radius);
    overflow: hidden;
}

    .btn-group .btn[b-i4o3o7tcmf] {
        border-radius: 0;
        border: none;
        border-right: 1px solid var(--clr-border);
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        font-weight: 600;
        transition: var(--transition);
    }

        .btn-group .btn:last-child[b-i4o3o7tcmf] {
            border-right: none;
        }

.btn-outline-primary[b-i4o3o7tcmf] {
    color: var(--clr-text);
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

    .btn-outline-primary:hover[b-i4o3o7tcmf] {
        background: var(--clr-accent);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(var(--clr-accent-rgb), 0.3);
    }

.btn-primary[b-i4o3o7tcmf] {
    background: var(--clr-accent);
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(var(--clr-accent-rgb), 0.4);
}

.custom-date-range[b-i4o3o7tcmf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-separator[b-i4o3o7tcmf] {
    color: var(--clr-text);
    font-weight: 500;
}

.analytics-datepicker[b-i4o3o7tcmf]  .rz-datepicker {
    background: var(--clr-surface) !important;
    border-color: var(--clr-border) !important;
}

.clear-filter-btn[b-i4o3o7tcmf] {
    min-width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
}

    .clear-filter-btn:hover[b-i4o3o7tcmf] {
        background: var(--clr-danger);
        border-color: var(--clr-danger);
        color: white;
    }

/* Add Chart Button */
.add-chart-btn[b-i4o3o7tcmf] {
    box-shadow: 0 4px 12px rgba(var(--clr-accent-rgb), 0.3);
}

    .add-chart-btn:hover[b-i4o3o7tcmf] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(var(--clr-accent-rgb), 0.4);
    }

/* Filter Badge */
.filter-badge-container[b-i4o3o7tcmf] {
    margin-bottom: 1rem;
}

/* Content Area */
.analytics-content[b-i4o3o7tcmf] {
    min-height: 400px;
    position: relative;
    z-index: 1;
}

/* Loading State */
.loading-state[b-i4o3o7tcmf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 400px;
    padding: 3rem;
}

    .loading-state p[b-i4o3o7tcmf] {
        color: var(--clr-text-secondary);
        font-size: 1.1rem;
        font-weight: 500;
    }

/* Empty State */
.empty-state[b-i4o3o7tcmf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 500px;
    padding: 3rem;
    text-align: center;
}

.empty-icon[b-i4o3o7tcmf] {
    font-size: 5rem;
    color: var(--clr-text-muted);
    opacity: 0.3;
}

.empty-state h3[b-i4o3o7tcmf] {
    color: var(--clr-text);
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.empty-state p[b-i4o3o7tcmf] {
    color: var(--clr-text-secondary);
    font-size: 1.1rem;
    max-width: 500px;
    margin: 0;
}

.empty-state-btn[b-i4o3o7tcmf] {
    margin-top: 1rem;
}

/* Dialog Inputs */
.analytics-input[b-i4o3o7tcmf] {
    background: var(--clr-surface) !important;
    border-color: var(--clr-border) !important;
    color: var(--clr-text) !important;
}

    .analytics-input:focus[b-i4o3o7tcmf] {
        border-color: var(--clr-accent) !important;
        box-shadow: 0 0 0 0.2rem var(--clr-accent-light) !important;
    }

/* ============================================================================
   ANALYTICS PAGE - CHART WIDGET FIXES
   ============================================================================ */

/* Fix Radzen theme conflicts */
.analytics-content[b-i4o3o7tcmf]  .rz-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure widgets fill their containers */
.analytics-content[b-i4o3o7tcmf]  .workspace-container {
    height: 100%;
}

/* Force edit mode buttons to be visible */
.analytics-page[b-i4o3o7tcmf]  .chart-actions {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1000 !important;
}

    .analytics-page[b-i4o3o7tcmf]  .chart-actions > * {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

/* Better card backgrounds */
.analytics-content[b-i4o3o7tcmf]  .widget-wrapper {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

/* Ensure chart content fills space */
.analytics-content[b-i4o3o7tcmf]  .chart-content {
    flex: 1;
    min-height: 0;
}

/* Fix chart SVG sizing */
.analytics-content[b-i4o3o7tcmf]  .rz-chart {
    width: 100% !important;
    height: 100% !important;
}

/* Fix pie/donut chart sizing */
.analytics-content[b-i4o3o7tcmf]  .rz-pie-series,
.analytics-content[b-i4o3o7tcmf]  .rz-donut-series {
    width: 100% !important;
    height: 100% !important;
}

/* Maximize donut/pie chart display area */
.analytics-content[b-i4o3o7tcmf]  g[clip-path] {
    transform: scale(1.2);
    transform-origin: center center;
}

/* Better text visibility in charts */
.analytics-content[b-i4o3o7tcmf]  .rz-chart text {
    fill: var(--clr-text) !important;
}

.analytics-content[b-i4o3o7tcmf]  .rz-chart-axis text {
    fill: var(--clr-text-secondary) !important;
}

/* Grid lines visibility */
.analytics-content[b-i4o3o7tcmf]  .rz-chart-grid line {
    stroke: var(--clr-border) !important;
    stroke-opacity: 0.6;
}

/* ============================================================================
   DARK THEME OVERRIDES
   ============================================================================ */

:root[data-theme="dark"] .analytics-header[b-i4o3o7tcmf] {
    background: var(--clr-surface);
}

:root[data-theme="dark"] .actions-menu-btn[b-i4o3o7tcmf] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

:root[data-theme="dark"] .actions-dropdown-menu[b-i4o3o7tcmf] {
    background: var(--clr-secondary);
    border-color: var(--clr-border);
}

:root[data-theme="dark"] .btn-group[b-i4o3o7tcmf] {
    box-shadow: var(--shadow);
}

:root[data-theme="dark"] .btn-outline-primary[b-i4o3o7tcmf] {
    background: var(--clr-surface);
    color: var(--clr-text);
}

/* ============================================================================
   LIGHT THEME OVERRIDES
   ============================================================================ */

:root[data-theme="light"] .analytics-header[b-i4o3o7tcmf] {
    background: var(--clr-surface);
}

:root[data-theme="light"] .actions-menu-btn[b-i4o3o7tcmf] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

:root[data-theme="light"] .actions-dropdown-menu[b-i4o3o7tcmf] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

:root[data-theme="light"] .btn-group[b-i4o3o7tcmf] {
    box-shadow: var(--shadow);
}

:root[data-theme="light"] .btn-outline-primary[b-i4o3o7tcmf] {
    background: var(--clr-surface);
    color: var(--clr-text);
}

/* ============================================================================
   RTL SUPPORT
   ============================================================================ */

[dir="rtl"] .actions-menu-dropdown[b-i4o3o7tcmf] {
    right: auto;
    left: 0;
}

[dir="rtl"] .menu-item[b-i4o3o7tcmf] {
    text-align: right;
}

    [dir="rtl"] .menu-item:hover[b-i4o3o7tcmf] {
        transform: translateX(-4px);
    }

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 1200px) {
    .analytics-header[b-i4o3o7tcmf] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-left[b-i4o3o7tcmf],
    .header-right[b-i4o3o7tcmf] {
        width: 100%;
        justify-content: space-between;
    }
}

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

    .analytics-header[b-i4o3o7tcmf] {
        padding: 0.75rem;
    }

    .btn-group .btn[b-i4o3o7tcmf] {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    .time-range-section[b-i4o3o7tcmf] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-group[b-i4o3o7tcmf] {
        width: 100%;
    }

        .btn-group .btn[b-i4o3o7tcmf] {
            flex: 1;
        }
}

@media (max-width: 480px) {
    .header-left[b-i4o3o7tcmf],
    .header-right[b-i4o3o7tcmf] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .analytics-dropdown[b-i4o3o7tcmf] {
        width: 100%;
    }

    .btn-group[b-i4o3o7tcmf] {
        flex-direction: column;
    }

        .btn-group .btn[b-i4o3o7tcmf] {
            border-right: none;
            border-bottom: 1px solid var(--clr-border);
        }

            .btn-group .btn:last-child[b-i4o3o7tcmf] {
                border-bottom: none;
            }
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes fadeIn-b-i4o3o7tcmf {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    *[b-i4o3o7tcmf],
    .analytics-page[b-i4o3o7tcmf],
    .actions-dropdown-menu[b-i4o3o7tcmf],
    .menu-item[b-i4o3o7tcmf],
    .btn[b-i4o3o7tcmf] {
        animation: none !important;
        transition: none !important;
    }
}

/* Focus states for keyboard navigation */
.actions-menu-btn:focus-visible[b-i4o3o7tcmf],
.menu-item:focus-visible[b-i4o3o7tcmf],
.btn:focus-visible[b-i4o3o7tcmf] {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .analytics-header[b-i4o3o7tcmf],
    .actions-dropdown-menu[b-i4o3o7tcmf] {
        border-width: 2px;
    }

    .btn-group .btn[b-i4o3o7tcmf] {
        border-width: 2px;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .analytics-header[b-i4o3o7tcmf] {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .actions-menu-btn[b-i4o3o7tcmf],
    .edit-mode-toggle[b-i4o3o7tcmf],
    .time-range-section[b-i4o3o7tcmf],
    .add-chart-btn[b-i4o3o7tcmf] {
        display: none !important;
    }

    .analytics-content[b-i4o3o7tcmf] {
        background: white;
    }
}
/* _content/alkpi/Components/Pages/Projects/Analytics/ChartConfigurationModal.razor.rz.scp.css */
/* ============================================================================
   Unified Chart Configuration Modal - Complete Styling
   With Dark Mode, Responsive Design, Animations & Accessibility
   ============================================================================ */

/* ============================================================================
   CHART TYPE SELECTION
   ============================================================================ */

.chart-type-selection[b-6cjx1b3v1n] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem 0;
}

.chart-type-item[b-6cjx1b3v1n] {
    border: 2px solid var(--clr-border);
    border-radius: 12px;
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--clr-surface);
    color: var(--clr-text);
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
}

    .chart-type-item:hover[b-6cjx1b3v1n] {
        border-color: var(--clr-accent);
        box-shadow: var(--shadow);
        transform: translateY(-2px);
        background: var(--clr-surface-hover);
    }

    .chart-type-item.selected[b-6cjx1b3v1n] {
        border-color: var(--clr-accent);
        background: var(--clr-accent-light);
        box-shadow: 0 0 0 3px var(--clr-accent-light);
    }

.chart-type-icon[b-6cjx1b3v1n] {
    font-size: 3rem;
    color: var(--clr-accent);
    line-height: 1;
}

.chart-type-item[b-6cjx1b3v1n]  .rz-text-subtitle2 {
    color: var(--clr-text) !important;
    font-weight: 600;
}

.chart-type-item[b-6cjx1b3v1n]  .rz-text-caption {
    color: var(--clr-text-secondary) !important;
    font-size: 0.875rem;
}

.check-badge[b-6cjx1b3v1n] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--clr-success);
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    z-index: 10;
}

    .check-badge i[b-6cjx1b3v1n] {
        font-size: 1rem;
        line-height: 1;
    }

/* ============================================================================
   KPI LIST BOX
   ============================================================================ */

.kpi-list-box[b-6cjx1b3v1n] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    background: var(--clr-secondary);
}

.kpi-list-item[b-6cjx1b3v1n] {
    padding: 0.75rem;
    margin: 0.25rem 0;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--clr-surface);
    color: var(--clr-text);
    border: 1px solid transparent;
}

    .kpi-list-item:hover[b-6cjx1b3v1n] {
        background: var(--clr-surface-hover);
        border-color: var(--clr-border);
        transform: translateX(2px);
    }

    .kpi-list-item.selected[b-6cjx1b3v1n] {
        background: var(--clr-accent-light);
        border-left: 3px solid var(--clr-accent);
        border-color: var(--clr-accent);
        padding-left: calc(0.75rem - 2px);
    }

    /* Fix Bootstrap Icons rendering in KPI list */
    .kpi-list-item i.bi[b-6cjx1b3v1n] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        font-style: normal;
        font-weight: normal;
    }

        .kpi-list-item i.bi[b-6cjx1b3v1n]::before {
            font-family: "bootstrap-icons" !important;
            font-style: normal;
            font-weight: normal !important;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

    .kpi-list-item[b-6cjx1b3v1n]  .rz-text {
        color: var(--clr-text) !important;
    }

    .kpi-list-item[b-6cjx1b3v1n]  .rz-text-body2 {
        color: var(--clr-text) !important;
        font-size: 0.875rem;
    }

    .kpi-list-item[b-6cjx1b3v1n]  .rz-chkbox {
        background: var(--clr-surface) !important;
        border-color: var(--clr-border) !important;
        cursor: default !important;
    }

    .kpi-list-item.selected[b-6cjx1b3v1n]  .rz-chkbox {
        background: var(--clr-accent) !important;
        border-color: var(--clr-accent) !important;
    }

        .kpi-list-item.selected[b-6cjx1b3v1n]  .rz-chkbox .rz-chkbox-icon {
            color: white !important;
        }

    .kpi-list-item[b-6cjx1b3v1n]  .rz-badge {
        background: var(--clr-surface-hover) !important;
        color: var(--clr-text-secondary) !important;
        border: 1px solid var(--clr-border) !important;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

/* Scrollbar Styling */
.kpi-list-box[b-6cjx1b3v1n]::-webkit-scrollbar {
    width: 8px;
}

.kpi-list-box[b-6cjx1b3v1n]::-webkit-scrollbar-track {
    background: var(--clr-surface);
    border-radius: 4px;
}

.kpi-list-box[b-6cjx1b3v1n]::-webkit-scrollbar-thumb {
    background: var(--clr-border);
    border-radius: 4px;
}

    .kpi-list-box[b-6cjx1b3v1n]::-webkit-scrollbar-thumb:hover {
        background: var(--clr-accent);
    }

/* Firefox scrollbar */
.kpi-list-box[b-6cjx1b3v1n] {
    scrollbar-width: thin;
    scrollbar-color: var(--clr-border) var(--clr-surface);
}

/* ============================================================================
   RADZEN FORM COMPONENTS STYLING
   ============================================================================ */

/* Form Fields */
[b-6cjx1b3v1n] .rz-formfield {
    margin-bottom: 0 !important;
}

[b-6cjx1b3v1n] .rz-formfield-label {
    color: var(--clr-text) !important;
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

/* Text Inputs & TextArea */
[b-6cjx1b3v1n] .rz-textbox,
[b-6cjx1b3v1n] .rz-textarea {
    background: var(--clr-surface) !important;
    border-color: var(--clr-border) !important;
    color: var(--clr-text) !important;
    transition: all 0.2s ease;
}

    [b-6cjx1b3v1n] .rz-textbox:hover,
    [b-6cjx1b3v1n] .rz-textarea:hover {
        border-color: var(--clr-accent) !important;
    }

    [b-6cjx1b3v1n] .rz-textbox:focus,
    [b-6cjx1b3v1n] .rz-textarea:focus {
        border-color: var(--clr-accent) !important;
        box-shadow: 0 0 0 0.2rem var(--clr-accent-light) !important;
        background: var(--clr-surface) !important;
    }

    [b-6cjx1b3v1n] .rz-textbox::placeholder,
    [b-6cjx1b3v1n] .rz-textarea::placeholder {
        color: var(--clr-text-muted) !important;
        opacity: 0.6;
    }

/* Dropdowns */
[b-6cjx1b3v1n] .rz-dropdown {
    background: var(--clr-surface) !important;
    border-color: var(--clr-border) !important;
    color: var(--clr-text) !important;
    transition: all 0.2s ease;
}

    [b-6cjx1b3v1n] .rz-dropdown:hover {
        border-color: var(--clr-accent) !important;
    }

    [b-6cjx1b3v1n] .rz-dropdown:focus,
    [b-6cjx1b3v1n] .rz-dropdown:focus-within {
        border-color: var(--clr-accent) !important;
        box-shadow: 0 0 0 0.2rem var(--clr-accent-light) !important;
    }

    [b-6cjx1b3v1n] .rz-dropdown input {
        color: var(--clr-text) !important;
        background: transparent !important;
    }

[b-6cjx1b3v1n] .rz-dropdown-label {
    color: var(--clr-text) !important;
}

[b-6cjx1b3v1n] .rz-dropdown-trigger-icon {
    color: var(--clr-text-secondary) !important;
}

/* Dropdown Panel */
[b-6cjx1b3v1n] .rz-dropdown-panel {
    background: var(--clr-secondary) !important;
    border: 1px solid var(--clr-border) !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: var(--border-radius);
}

[b-6cjx1b3v1n] .rz-dropdown-item {
    color: var(--clr-text) !important;
    padding: 0.5rem 1rem;
    transition: background 0.15s ease;
}

    [b-6cjx1b3v1n] .rz-dropdown-item:hover {
        background: var(--clr-surface-hover) !important;
    }

    [b-6cjx1b3v1n] .rz-dropdown-item.rz-state-highlight {
        background: var(--clr-accent-light) !important;
        color: var(--clr-accent) !important;
    }

/* Checkboxes */
[b-6cjx1b3v1n] .rz-chkbox {
    background: var(--clr-surface) !important;
    border-color: var(--clr-border) !important;
    transition: all 0.2s ease;
}

    [b-6cjx1b3v1n] .rz-chkbox:hover {
        border-color: var(--clr-accent) !important;
    }

    [b-6cjx1b3v1n] .rz-chkbox.rz-state-active {
        background: var(--clr-accent) !important;
        border-color: var(--clr-accent) !important;
    }

[b-6cjx1b3v1n] .rz-chkbox-icon {
    color: white !important;
}

/* Labels */
[b-6cjx1b3v1n] .rz-label {
    color: var(--clr-text) !important;
    cursor: pointer;
    user-select: none;
}

/* Card */
[b-6cjx1b3v1n] .rz-card {
    background: var(--clr-surface) !important;
    border: 1px solid var(--clr-border-light) !important;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
}

[b-6cjx1b3v1n] .rz-card-content {
    color: var(--clr-text);
}

/* Badges */
[b-6cjx1b3v1n] .rz-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

[b-6cjx1b3v1n] .rz-badge-light {
    background: var(--clr-surface-hover) !important;
    color: var(--clr-text-secondary) !important;
    border: 1px solid var(--clr-border) !important;
}

/* Buttons */
[b-6cjx1b3v1n] .rz-button {
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
    font-weight: 500;
}

    [b-6cjx1b3v1n] .rz-button:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: var(--shadow);
    }

    [b-6cjx1b3v1n] .rz-button:active:not(:disabled) {
        transform: translateY(0);
    }

[b-6cjx1b3v1n] .rz-button-light {
    background: var(--clr-surface) !important;
    border-color: var(--clr-border) !important;
    color: var(--clr-text) !important;
}

    [b-6cjx1b3v1n] .rz-button-light:hover:not(:disabled) {
        background: var(--clr-surface-hover) !important;
        border-color: var(--clr-border) !important;
    }

[b-6cjx1b3v1n] .rz-button-primary {
    background: var(--clr-accent) !important;
    border-color: var(--clr-accent) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(var(--clr-accent-rgb, 99, 102, 241), 0.3);
}

    [b-6cjx1b3v1n] .rz-button-primary:hover:not(:disabled) {
        background: var(--clr-accent-hover) !important;
        border-color: var(--clr-accent-hover) !important;
        box-shadow: 0 4px 12px rgba(var(--clr-accent-rgb, 99, 102, 241), 0.4);
    }

[b-6cjx1b3v1n] .rz-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Icons */
[b-6cjx1b3v1n] .rz-icon {
    color: var(--clr-text-secondary);
}

/* Text Elements */
[b-6cjx1b3v1n] .rz-text {
    color: var(--clr-text) !important;
}

[b-6cjx1b3v1n] .rz-text-h6 {
    color: var(--clr-text) !important;
    font-weight: 600;
    font-size: 1.25rem;
}

[b-6cjx1b3v1n] .rz-text-subtitle2 {
    color: var(--clr-text) !important;
    font-weight: 600;
    font-size: 0.875rem;
}

[b-6cjx1b3v1n] .rz-text-body2 {
    color: var(--clr-text) !important;
    font-size: 0.875rem;
}

[b-6cjx1b3v1n] .rz-text-caption {
    color: var(--clr-text-secondary) !important;
    font-size: 0.75rem;
}

[b-6cjx1b3v1n] .text-muted {
    color: var(--clr-text-secondary) !important;
}

/* ============================================================================
   COLOR SCHEME PREVIEW
   ============================================================================ */

.color-scheme-preview[b-6cjx1b3v1n] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--clr-border);
}

/* ============================================================================
   DARK THEME SPECIFIC OVERRIDES
   ============================================================================ */

:root[data-theme="dark"] .chart-type-item[b-6cjx1b3v1n] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

    :root[data-theme="dark"] .chart-type-item:hover[b-6cjx1b3v1n] {
        background: var(--clr-surface-hover);
        border-color: var(--clr-accent);
    }

    :root[data-theme="dark"] .chart-type-item.selected[b-6cjx1b3v1n] {
        background: var(--clr-accent-light);
    }

:root[data-theme="dark"] .kpi-list-box[b-6cjx1b3v1n] {
    background: var(--clr-secondary);
    border-color: var(--clr-border);
}

:root[data-theme="dark"] .kpi-list-item[b-6cjx1b3v1n] {
    background: var(--clr-surface);
}

    :root[data-theme="dark"] .kpi-list-item:hover[b-6cjx1b3v1n] {
        background: var(--clr-surface-hover);
    }

    :root[data-theme="dark"] .kpi-list-item.selected[b-6cjx1b3v1n] {
        background: var(--clr-accent-light);
    }

:root[data-theme="dark"][b-6cjx1b3v1n]  .rz-card {
    background: var(--clr-surface) !important;
}

/* ============================================================================
   LIGHT THEME SPECIFIC
   ============================================================================ */

:root[data-theme="light"][b-6cjx1b3v1n]  .rz-textbox,
:root[data-theme="light"][b-6cjx1b3v1n]  .rz-textarea,
:root[data-theme="light"][b-6cjx1b3v1n]  .rz-dropdown {
    background: white !important;
}

:root[data-theme="light"] .kpi-list-box[b-6cjx1b3v1n] {
    background: #f8f9fa;
}

:root[data-theme="light"] .kpi-list-item[b-6cjx1b3v1n] {
    background: white;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
    .chart-type-selection[b-6cjx1b3v1n] {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart-type-item[b-6cjx1b3v1n] {
        min-height: 150px;
        padding: 1.5rem 0.75rem;
    }

    .chart-type-icon[b-6cjx1b3v1n] {
        font-size: 2.5rem;
    }

    .kpi-list-box[b-6cjx1b3v1n] {
        max-height: 250px;
    }

    [b-6cjx1b3v1n] .rz-card {
        margin-top: 1rem;
    }

    [b-6cjx1b3v1n] .rz-button {
        width: 100%;
        margin-top: 0.5rem;
    }
}

@media (max-width: 480px) {
    .chart-type-selection[b-6cjx1b3v1n] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .chart-type-item[b-6cjx1b3v1n] {
        min-height: 140px;
        padding: 1.25rem 0.5rem;
        gap: 0.5rem;
    }

    .chart-type-icon[b-6cjx1b3v1n] {
        font-size: 2rem;
    }

    .kpi-list-box[b-6cjx1b3v1n] {
        max-height: 200px;
    }

    .kpi-list-item[b-6cjx1b3v1n] {
        padding: 0.5rem;
    }

    [b-6cjx1b3v1n] .rz-formfield-label {
        font-size: 0.8rem;
    }
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes fadeIn-b-6cjx1b3v1n {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes slideIn-b-6cjx1b3v1n {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

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

.chart-type-item[b-6cjx1b3v1n] {
    animation: fadeIn-b-6cjx1b3v1n 0.3s ease-out;
}

.kpi-list-item[b-6cjx1b3v1n] {
    animation: slideIn-b-6cjx1b3v1n 0.2s ease-out;
}

/* Stagger animation for chart type items */
.chart-type-item:nth-child(1)[b-6cjx1b3v1n] {
    animation-delay: 0s;
}

.chart-type-item:nth-child(2)[b-6cjx1b3v1n] {
    animation-delay: 0.05s;
}

.chart-type-item:nth-child(3)[b-6cjx1b3v1n] {
    animation-delay: 0.1s;
}

.chart-type-item:nth-child(4)[b-6cjx1b3v1n] {
    animation-delay: 0.15s;
}

.chart-type-item:nth-child(5)[b-6cjx1b3v1n] {
    animation-delay: 0.2s;
}

.chart-type-item:nth-child(6)[b-6cjx1b3v1n] {
    animation-delay: 0.25s;
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Focus states for keyboard navigation */
.chart-type-item:focus-visible[b-6cjx1b3v1n] {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}

.kpi-list-item:focus-visible[b-6cjx1b3v1n] {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}

[b-6cjx1b3v1n] .rz-textbox:focus-visible,
[b-6cjx1b3v1n] .rz-dropdown:focus-visible,
[b-6cjx1b3v1n] .rz-chkbox:focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .chart-type-item[b-6cjx1b3v1n],
    .kpi-list-item[b-6cjx1b3v1n],
    [b-6cjx1b3v1n] .rz-textbox,
    [b-6cjx1b3v1n] .rz-dropdown {
        border-width: 2px;
    }

        .kpi-list-item.selected[b-6cjx1b3v1n] {
            border-left-width: 4px;
        }

    [b-6cjx1b3v1n] .rz-text {
        font-weight: 500;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *[b-6cjx1b3v1n],
    .chart-type-item[b-6cjx1b3v1n],
    .kpi-list-item[b-6cjx1b3v1n],
    [b-6cjx1b3v1n] .rz-button,
    [b-6cjx1b3v1n] .rz-dropdown,
    [b-6cjx1b3v1n] .rz-textbox {
        animation: none !important;
        transition: none !important;
    }

        .chart-type-item:hover[b-6cjx1b3v1n],
        [b-6cjx1b3v1n] .rz-button:hover {
            transform: none !important;
        }
}

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

/* ============================================================================
   RTL (Right-to-Left) SUPPORT
   ============================================================================ */

[dir="rtl"] .kpi-list-item.selected[b-6cjx1b3v1n] {
    border-left: none;
    border-right: 3px solid var(--clr-accent);
    padding-left: 0.75rem;
    padding-right: calc(0.75rem - 2px);
}

[dir="rtl"] .kpi-list-item:hover[b-6cjx1b3v1n] {
    transform: translateX(-2px);
}

[dir="rtl"] .check-badge[b-6cjx1b3v1n] {
    right: auto;
    left: 10px;
}

[dir="rtl"][b-6cjx1b3v1n]  .rz-badge {
    margin-left: 0;
    margin-right: auto;
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .chart-type-selection[b-6cjx1b3v1n],
    [b-6cjx1b3v1n] .rz-button,
    [b-6cjx1b3v1n] .rz-dropdown-trigger-icon {
        display: none !important;
    }

    .kpi-list-box[b-6cjx1b3v1n],
    [b-6cjx1b3v1n] .rz-card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }

    [b-6cjx1b3v1n] .rz-textbox,
    [b-6cjx1b3v1n] .rz-dropdown {
        background: white !important;
        color: black !important;
        border: 1px solid #000 !important;
    }
}

/* ============================================================================
   CUSTOM UTILITIES
   ============================================================================ */

.mb-0[b-6cjx1b3v1n] {
    margin-bottom: 0 !important;
}

.mb-2[b-6cjx1b3v1n] {
    margin-bottom: 0.5rem !important;
}

.mb-3[b-6cjx1b3v1n] {
    margin-bottom: 1rem !important;
}

.mt-1[b-6cjx1b3v1n] {
    margin-top: 0.25rem !important;
}

.mt-2[b-6cjx1b3v1n] {
    margin-top: 0.5rem !important;
}

.mt-3[b-6cjx1b3v1n] {
    margin-top: 1rem !important;
}

.me-2[b-6cjx1b3v1n] {
    margin-right: 0.5rem !important;
}

.ms-auto[b-6cjx1b3v1n] {
    margin-left: auto !important;
}

.fw-bold[b-6cjx1b3v1n] {
    font-weight: 600 !important;
}

.text-center[b-6cjx1b3v1n] {
    text-align: center !important;
}

.py-3[b-6cjx1b3v1n] {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* ============================================================================
   ENHANCED CHART TYPE SELECTION WITH ICONS
   ============================================================================ */

.chart-type-selection[b-6cjx1b3v1n] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem 0;
}

.chart-type-item[b-6cjx1b3v1n] {
    border: 2px solid var(--clr-border);
    border-radius: 12px;
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--clr-surface);
    color: var(--clr-text);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
}

    /* Subtle gradient background */
    .chart-type-item[b-6cjx1b3v1n]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, transparent 0%, rgba(var(--clr-accent-rgb, 99, 102, 241), 0.03) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 0;
    }

    .chart-type-item:hover[b-6cjx1b3v1n]::before {
        opacity: 1;
    }

    .chart-type-item:hover[b-6cjx1b3v1n] {
        border-color: var(--clr-accent);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        transform: translateY(-4px);
    }

    .chart-type-item.selected[b-6cjx1b3v1n] {
        border-color: var(--clr-accent);
        background: linear-gradient(135deg, var(--clr-accent-light) 0%, rgba(var(--clr-accent-rgb, 99, 102, 241), 0.1) 100%);
        box-shadow: 0 0 0 3px var(--clr-accent-light), 0 8px 24px rgba(var(--clr-accent-rgb, 99, 102, 241), 0.2);
    }

/* Icon Wrapper with Circle Background */
.chart-type-icon-wrapper[b-6cjx1b3v1n] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-accent-light) 0%, rgba(var(--clr-accent-rgb, 99, 102, 241), 0.15) 100%);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.chart-type-item:hover .chart-type-icon-wrapper[b-6cjx1b3v1n] {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(var(--clr-accent-rgb, 99, 102, 241), 0.3);
}

.chart-type-item.selected .chart-type-icon-wrapper[b-6cjx1b3v1n] {
    background: var(--clr-accent);
    box-shadow: 0 4px 16px rgba(var(--clr-accent-rgb, 99, 102, 241), 0.4);
}

/* Icon Styling */
.chart-type-icon[b-6cjx1b3v1n] {
    font-size: 2.5rem;
    color: var(--clr-accent);
    line-height: 1;
    transition: all 0.3s ease;
}

.chart-type-item.selected .chart-type-icon[b-6cjx1b3v1n] {
    color: white;
    transform: scale(1.1);
}

.chart-type-item:hover .chart-type-icon[b-6cjx1b3v1n] {
    color: var(--clr-accent);
}

/* Text Styling */
.chart-type-title[b-6cjx1b3v1n] {
    color: var(--clr-text) !important;
    font-weight: 600;
    font-size: 1rem;
    position: relative;
    z-index: 1;
    margin: 0;
}

.chart-type-description[b-6cjx1b3v1n] {
    color: var(--clr-text-secondary) !important;
    font-size: 0.875rem;
    position: relative;
    z-index: 1;
    margin: 0;
}

/* Check Badge */
.check-badge[b-6cjx1b3v1n] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--clr-success);
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    z-index: 10;
    animation: checkBadgeAppear-b-6cjx1b3v1n 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

    .check-badge i[b-6cjx1b3v1n] {
        font-size: 1.125rem;
        line-height: 1;
        font-weight: bold;
    }

@keyframes checkBadgeAppear-b-6cjx1b3v1n {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* ============================================================================
   DARK THEME ADJUSTMENTS
   ============================================================================ */

:root[data-theme="dark"] .chart-type-item[b-6cjx1b3v1n] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

    :root[data-theme="dark"] .chart-type-item:hover[b-6cjx1b3v1n] {
        background: var(--clr-surface-hover);
    }

    :root[data-theme="dark"] .chart-type-item.selected[b-6cjx1b3v1n] {
        background: linear-gradient(135deg, rgba(var(--clr-accent-rgb, 99, 102, 241), 0.15) 0%, rgba(var(--clr-accent-rgb, 99, 102, 241), 0.05) 100%);
    }

:root[data-theme="dark"] .chart-type-icon-wrapper[b-6cjx1b3v1n] {
    background: rgba(var(--clr-accent-rgb, 99, 102, 241), 0.2);
}

:root[data-theme="dark"] .chart-type-item.selected .chart-type-icon-wrapper[b-6cjx1b3v1n] {
    background: var(--clr-accent);
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
    .chart-type-selection[b-6cjx1b3v1n] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .chart-type-item[b-6cjx1b3v1n] {
        min-height: 180px;
        padding: 1.5rem 0.75rem;
    }

    .chart-type-icon-wrapper[b-6cjx1b3v1n] {
        width: 64px;
        height: 64px;
    }

    .chart-type-icon[b-6cjx1b3v1n] {
        font-size: 2rem;
    }

    .chart-type-title[b-6cjx1b3v1n] {
        font-size: 0.875rem;
    }

    .chart-type-description[b-6cjx1b3v1n] {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .chart-type-selection[b-6cjx1b3v1n] {
        grid-template-columns: 1fr;
    }

    .chart-type-item[b-6cjx1b3v1n] {
        min-height: 160px;
    }
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes chartTypeAppear-b-6cjx1b3v1n {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chart-type-item[b-6cjx1b3v1n] {
    animation: chartTypeAppear-b-6cjx1b3v1n 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stagger animation */
.chart-type-item:nth-child(1)[b-6cjx1b3v1n] { animation-delay: 0s; }
.chart-type-item:nth-child(2)[b-6cjx1b3v1n] { animation-delay: 0.05s; }
.chart-type-item:nth-child(3)[b-6cjx1b3v1n] { animation-delay: 0.1s; }
.chart-type-item:nth-child(4)[b-6cjx1b3v1n] { animation-delay: 0.15s; }
.chart-type-item:nth-child(5)[b-6cjx1b3v1n] { animation-delay: 0.2s; }
.chart-type-item:nth-child(6)[b-6cjx1b3v1n] { animation-delay: 0.25s; }

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .chart-type-item[b-6cjx1b3v1n],
    .chart-type-icon-wrapper[b-6cjx1b3v1n],
    .check-badge[b-6cjx1b3v1n] {
        animation: none !important;
        transition: none !important;
    }

    .chart-type-item:hover[b-6cjx1b3v1n] {
        transform: none !important;
    }

    .chart-type-item:hover .chart-type-icon-wrapper[b-6cjx1b3v1n] {
        transform: none !important;
    }
}

.chart-type-item:focus-visible[b-6cjx1b3v1n] {
    outline: 3px solid var(--clr-accent);
    outline-offset: 4px;
}

/* ============================================================================
   ENHANCED CHART TYPE SELECTION WITH ICONS
   ============================================================================ */

.chart-type-selection[b-6cjx1b3v1n] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem 0;
}

.chart-type-item[b-6cjx1b3v1n] {
    border: 2px solid var(--clr-border);
    border-radius: 12px;
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--clr-surface);
    color: var(--clr-text);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
}

    /* Subtle gradient background */
    .chart-type-item[b-6cjx1b3v1n]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, transparent 0%, rgba(var(--clr-accent-rgb, 99, 102, 241), 0.03) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 0;
    }

    .chart-type-item:hover[b-6cjx1b3v1n]::before {
        opacity: 1;
    }

    .chart-type-item:hover[b-6cjx1b3v1n] {
        border-color: var(--clr-accent);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        transform: translateY(-4px);
    }

    .chart-type-item.selected[b-6cjx1b3v1n] {
        border-color: var(--clr-accent);
        background: linear-gradient(135deg, var(--clr-accent-light) 0%, rgba(var(--clr-accent-rgb, 99, 102, 241), 0.1) 100%);
        box-shadow: 0 0 0 3px var(--clr-accent-light), 0 8px 24px rgba(var(--clr-accent-rgb, 99, 102, 241), 0.2);
    }

/* Icon Wrapper with Circle Background */
.chart-type-icon-wrapper[b-6cjx1b3v1n] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-accent-light) 0%, rgba(var(--clr-accent-rgb, 99, 102, 241), 0.15) 100%);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.chart-type-item:hover .chart-type-icon-wrapper[b-6cjx1b3v1n] {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(var(--clr-accent-rgb, 99, 102, 241), 0.3);
}

.chart-type-item.selected .chart-type-icon-wrapper[b-6cjx1b3v1n] {
    background: var(--clr-accent);
    box-shadow: 0 4px 16px rgba(var(--clr-accent-rgb, 99, 102, 241), 0.4);
}

/* Icon Styling */
.chart-type-icon[b-6cjx1b3v1n] {
    font-size: 2.5rem;
    color: var(--clr-accent);
    line-height: 1;
    transition: all 0.3s ease;
}

.chart-type-item.selected .chart-type-icon[b-6cjx1b3v1n] {
    color: white;
    transform: scale(1.1);
}

.chart-type-item:hover .chart-type-icon[b-6cjx1b3v1n] {
    color: var(--clr-accent);
}

/* Text Styling */
.chart-type-title[b-6cjx1b3v1n] {
    color: var(--clr-text) !important;
    font-weight: 600;
    font-size: 1rem;
    position: relative;
    z-index: 1;
    margin: 0;
}

.chart-type-description[b-6cjx1b3v1n] {
    color: var(--clr-text-secondary) !important;
    font-size: 0.875rem;
    position: relative;
    z-index: 1;
    margin: 0;
}

/* Check Badge */
.check-badge[b-6cjx1b3v1n] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--clr-success);
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    z-index: 10;
    animation: checkBadgeAppear-b-6cjx1b3v1n 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

    .check-badge i[b-6cjx1b3v1n] {
        font-size: 1.125rem;
        line-height: 1;
        font-weight: bold;
    }

@keyframes checkBadgeAppear-b-6cjx1b3v1n {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* ============================================================================
   DARK THEME ADJUSTMENTS
   ============================================================================ */

:root[data-theme="dark"] .chart-type-item[b-6cjx1b3v1n] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

    :root[data-theme="dark"] .chart-type-item:hover[b-6cjx1b3v1n] {
        background: var(--clr-surface-hover);
    }

    :root[data-theme="dark"] .chart-type-item.selected[b-6cjx1b3v1n] {
        background: linear-gradient(135deg, rgba(var(--clr-accent-rgb, 99, 102, 241), 0.15) 0%, rgba(var(--clr-accent-rgb, 99, 102, 241), 0.05) 100%);
    }

:root[data-theme="dark"] .chart-type-icon-wrapper[b-6cjx1b3v1n] {
    background: rgba(var(--clr-accent-rgb, 99, 102, 241), 0.2);
}

:root[data-theme="dark"] .chart-type-item.selected .chart-type-icon-wrapper[b-6cjx1b3v1n] {
    background: var(--clr-accent);
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
    .chart-type-selection[b-6cjx1b3v1n] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .chart-type-item[b-6cjx1b3v1n] {
        min-height: 180px;
        padding: 1.5rem 0.75rem;
    }

    .chart-type-icon-wrapper[b-6cjx1b3v1n] {
        width: 64px;
        height: 64px;
    }

    .chart-type-icon[b-6cjx1b3v1n] {
        font-size: 2rem;
    }

    .chart-type-title[b-6cjx1b3v1n] {
        font-size: 0.875rem;
    }

    .chart-type-description[b-6cjx1b3v1n] {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .chart-type-selection[b-6cjx1b3v1n] {
        grid-template-columns: 1fr;
    }

    .chart-type-item[b-6cjx1b3v1n] {
        min-height: 160px;
    }
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes chartTypeAppear-b-6cjx1b3v1n {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

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

.chart-type-item[b-6cjx1b3v1n] {
    animation: chartTypeAppear-b-6cjx1b3v1n 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    /* Stagger animation */
    .chart-type-item:nth-child(1)[b-6cjx1b3v1n] {
        animation-delay: 0s;
    }

    .chart-type-item:nth-child(2)[b-6cjx1b3v1n] {
        animation-delay: 0.05s;
    }

    .chart-type-item:nth-child(3)[b-6cjx1b3v1n] {
        animation-delay: 0.1s;
    }

    .chart-type-item:nth-child(4)[b-6cjx1b3v1n] {
        animation-delay: 0.15s;
    }

    .chart-type-item:nth-child(5)[b-6cjx1b3v1n] {
        animation-delay: 0.2s;
    }

    .chart-type-item:nth-child(6)[b-6cjx1b3v1n] {
        animation-delay: 0.25s;
    }

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .chart-type-item[b-6cjx1b3v1n],
    .chart-type-icon-wrapper[b-6cjx1b3v1n],
    .check-badge[b-6cjx1b3v1n] {
        animation: none !important;
        transition: none !important;
    }

        .chart-type-item:hover[b-6cjx1b3v1n] {
            transform: none !important;
        }

            .chart-type-item:hover .chart-type-icon-wrapper[b-6cjx1b3v1n] {
                transform: none !important;
            }
}

.chart-type-item:focus-visible[b-6cjx1b3v1n] {
    outline: 3px solid var(--clr-accent);
    outline-offset: 4px;
}
/* _content/alkpi/Components/Pages/Projects/Analytics/ChartWidget.razor.rz.scp.css */
/* Only styles specific to this component structure */
.chart-actions[b-dccu7n5xoy] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Dark mode for Radzen theme */
[data-theme="dark"][b-dccu7n5xoy]  .rz-text {
    color: var(--clr-text) !important;
}

/* RTL Support */
[dir="rtl"] .chart-header[b-dccu7n5xoy] {
    flex-direction: row-reverse;
}

[dir="rtl"] .chart-actions[b-dccu7n5xoy] {
    flex-direction: row-reverse;
}
/* _content/alkpi/Components/Pages/Projects/datahistoryinterface.razor.rz.scp.css */
.data-history-interface[b-sslzrzoi07] {
    margin: 0;
}

/* Activity Summary Cards - More compact */
.activity-summary-card[b-sslzrzoi07] {
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

    .activity-summary-card:hover[b-sslzrzoi07] {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

.user-avatar-small[b-sslzrzoi07] {
    width: 28px;
    height: 28px;
    background: var(--bs-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.user-avatar-xs[b-sslzrzoi07] {
    width: 24px;
    height: 24px;
    background: var(--bs-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Compact Timeline */
.history-timeline[b-sslzrzoi07] {
    position: relative;
    padding: 0.75rem 0;
}

.timeline-item[b-sslzrzoi07] {
    position: relative;
    display: flex;
    padding-bottom: 1rem;
    transition: all 0.2s ease;
}

    .timeline-item:hover[b-sslzrzoi07] {
        transform: translateX(2px);
    }

    .timeline-item:not(:last-child)[b-sslzrzoi07]::after {
        content: '';
        position: absolute;
        left: 16px;
        top: 36px;
        bottom: -8px;
        width: 1px;
        background: linear-gradient(to bottom, #e9ecef, transparent);
    }

/* Compact Timeline Markers */
.timeline-marker[b-sslzrzoi07] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 0.75rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

    .timeline-marker:hover[b-sslzrzoi07] {
        transform: scale(1.05);
    }

    .timeline-marker i[b-sslzrzoi07] {
        font-size: 0.75rem;
    }

.timeline-marker-success[b-sslzrzoi07] {
    background: linear-gradient(135deg, #d4edda, #a3d977);
    color: #155724;
    border: 2px solid #c3e6cb;
}

.timeline-marker-warning[b-sslzrzoi07] {
    background: linear-gradient(135deg, #fff3cd, #ffdd57);
    color: #856404;
    border: 2px solid #ffeaa7;
}

.timeline-marker-danger[b-sslzrzoi07] {
    background: linear-gradient(135deg, #f8d7da, #ff6b6b);
    color: #721c24;
    border: 2px solid #f5c6cb;
}

.timeline-marker-info[b-sslzrzoi07] {
    background: linear-gradient(135deg, #d1ecf1, #74c0fc);
    color: #0c5460;
    border: 2px solid #bee5eb;
}

/* Compact Timeline Content */
.timeline-content[b-sslzrzoi07] {
    flex-grow: 1;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: -2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

    .timeline-content:hover[b-sslzrzoi07] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-color: var(--bs-primary);
    }

/* Compact Timeline Header */
.timeline-header[b-sslzrzoi07] {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.3;
}

    .timeline-header .fw-medium[b-sslzrzoi07] {
        font-weight: 600;
        color: var(--bs-primary);
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.3px;
    }

    .timeline-header .text-muted[b-sslzrzoi07] {
        font-weight: 500;
        color: #495057;
        margin: 0 0.35rem;
        font-size: 0.85rem;
    }

    .timeline-header .text-primary[b-sslzrzoi07] {
        background: linear-gradient(135deg, var(--bs-primary), #5856eb);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 600;
        font-size: 0.85rem;
    }

/* Compact KPI Data Value Display */
.kpi-data-change[b-sslzrzoi07] {
    background: linear-gradient(135deg, #f8fbff, #e3f2fd);
    border: 1px solid #bbdefb;
    border-radius: 6px;
    padding: 0.75rem;
    margin: 0.5rem 0;
    position: relative;
    overflow: hidden;
}

    .kpi-data-change[b-sslzrzoi07]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(to bottom, var(--bs-primary), #5856eb);
    }

.kpi-data-header[b-sslzrzoi07] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.kpi-icon-wrapper[b-sslzrzoi07] {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--bs-primary), #5856eb);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 0.5rem;
    box-shadow: 0 1px 4px rgba(99, 102, 241, 0.3);
}

    .kpi-icon-wrapper i[b-sslzrzoi07] {
        font-size: 0.75rem;
    }

.kpi-name[b-sslzrzoi07] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.kpi-period[b-sslzrzoi07] {
    background: #e8f4f8;
    color: #0c5460;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    margin-left: auto;
    border: 1px solid #bee5eb;
}

.kpi-value-changes[b-sslzrzoi07] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.value-change-item[b-sslzrzoi07] {
    flex: 1;
    padding: 0.5rem;
    border-radius: 6px;
    text-align: center;
    position: relative;
}

.old-value-item[b-sslzrzoi07] {
    background: linear-gradient(135deg, #fee, #fdd);
    border: 1px solid #f5c6cb;
}

.new-value-item[b-sslzrzoi07] {
    background: linear-gradient(135deg, #eff, #dfd);
    border: 1px solid #c3e6cb;
}

.value-label[b-sslzrzoi07] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.25rem;
    opacity: 0.8;
}

.value-display[b-sslzrzoi07] {
    font-size: 1rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    min-width: 60px;
}

.old-value-item .value-display[b-sslzrzoi07] {
    background: #721c24;
    color: white;
    box-shadow: 0 1px 3px rgba(114, 28, 36, 0.3);
}

.new-value-item .value-display[b-sslzrzoi07] {
    background: #155724;
    color: white;
    box-shadow: 0 1px 3px rgba(21, 87, 36, 0.3);
}

.value-arrow[b-sslzrzoi07] {
    font-size: 1rem;
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: white;
    border-radius: 50%;
    border: 1px solid var(--bs-primary);
    box-shadow: 0 1px 4px rgba(99, 102, 241, 0.2);
}

/* Compact Regular Changes */
.timeline-changes[b-sslzrzoi07] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 6px;
    padding: 0.5rem;
    border-left: 3px solid var(--bs-primary);
    margin: 0.5rem 0;
}

.change-item[b-sslzrzoi07] {
    margin-bottom: 0.4rem;
    padding: 0.35rem;
    border-radius: 4px;
    background: white;
    border: 1px solid #e9ecef;
}

    .change-item:last-child[b-sslzrzoi07] {
        margin-bottom: 0;
    }

    .change-item .value-display[b-sslzrzoi07] {
        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
        font-size: 0.8rem;
        font-weight: 600;
        padding: 0.15rem 0.35rem;
        border-radius: 3px;
        display: inline-block;
    }

.old-value .value-display[b-sslzrzoi07] {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.new-value .value-display[b-sslzrzoi07] {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Compact Timeline Notes */
.timeline-notes[b-sslzrzoi07] {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 0.5rem;
    font-style: italic;
    color: #6c757d;
    font-size: 0.8rem;
    border-left: 2px solid #dee2e6;
    margin-top: 0.5rem;
}

/* Compact Timeline Meta */
.timeline-meta[b-sslzrzoi07] {
    margin-left: 1rem;
    min-width: 120px;
}

.user-info[b-sslzrzoi07] {
    text-align: right;
    background: #f8f9fa;
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

    .user-info .small[b-sslzrzoi07] {
        font-weight: 500;
        font-size: 0.8rem;
    }

.smaller[b-sslzrzoi07] {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* Empty State */
.empty-state[b-sslzrzoi07] {
    padding: 3rem 2rem;
    text-align: center;
}

    .empty-state i[b-sslzrzoi07] {
        opacity: 0.6;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .timeline-item[b-sslzrzoi07] {
        flex-direction: column;
    }

    .timeline-marker[b-sslzrzoi07] {
        margin-bottom: 0.5rem;
        margin-right: 0;
    }

    .timeline-meta[b-sslzrzoi07] {
        margin-left: 0;
        margin-top: 0.75rem;
        min-width: auto;
    }

    .user-info[b-sslzrzoi07] {
        text-align: left;
    }

    .kpi-value-changes[b-sslzrzoi07] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .value-arrow[b-sslzrzoi07] {
        transform: rotate(90deg);
        margin: 0.25rem 0;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .activity-summary-card[b-sslzrzoi07] {
    background: var(--bs-dark);
    border-color: #4a5568;
}

[data-theme="dark"] .timeline-content[b-sslzrzoi07] {
    background: var(--bs-dark);
    border-color: #4a5568;
    color: #e2e8f0;
}

[data-theme="dark"] .timeline-changes[b-sslzrzoi07] {
    background: linear-gradient(135deg, #2d3748, #4a5568);
    border-left-color: var(--bs-primary);
}

[data-theme="dark"] .timeline-item:not(:last-child)[b-sslzrzoi07]::after {
    background: linear-gradient(to bottom, #4a5568, transparent);
}

[data-theme="dark"] .kpi-data-change[b-sslzrzoi07] {
    background: linear-gradient(135deg, #2d3748, #4a5568);
    border-color: #718096;
    color: #e2e8f0;
}

[data-theme="dark"] .kpi-name[b-sslzrzoi07] {
    color: #e2e8f0;
}

[data-theme="dark"] .kpi-period[b-sslzrzoi07] {
    background: #4a5568;
    color: #cbd5e0;
    border-color: #718096;
}

[data-theme="dark"] .value-change-item[b-sslzrzoi07] {
    color: #e2e8f0;
}

[data-theme="dark"] .old-value-item[b-sslzrzoi07] {
    background: linear-gradient(135deg, #742a2a, #9c4221);
    border-color: #fc8181;
}

[data-theme="dark"] .new-value-item[b-sslzrzoi07] {
    background: linear-gradient(135deg, #276749, #22543d);
    border-color: #68d391;
}

[data-theme="dark"] .change-item[b-sslzrzoi07] {
    background: #4a5568;
    border-color: #718096;
    color: #e2e8f0;
}

[data-theme="dark"] .timeline-notes[b-sslzrzoi07] {
    background: #4a5568;
    color: #cbd5e0;
    border-left-color: #718096;
}

[data-theme="dark"] .user-info[b-sslzrzoi07] {
    background: #4a5568;
    border-color: #718096;
    color: #e2e8f0;
}

/* Animation Effects */
@keyframes slideInLeft-b-sslzrzoi07 {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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

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

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

.timeline-item[b-sslzrzoi07] {
    animation: fadeInUp-b-sslzrzoi07 0.3s ease-out;
}

    .timeline-item:nth-child(odd)[b-sslzrzoi07] {
        animation-delay: 0.05s;
    }

    .timeline-item:nth-child(even)[b-sslzrzoi07] {
        animation-delay: 0.1s;
    }

/* Pulse animation for new entries - more subtle */
@keyframes pulse-b-sslzrzoi07 {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(99, 102, 241, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }
}

.timeline-marker-success[b-sslzrzoi07] {
    animation: pulse-b-sslzrzoi07 2s infinite;
}

/* Additional compact view styles */
.compact-mode .timeline-item[b-sslzrzoi07] {
    padding-bottom: 0.75rem;
}

.compact-mode .timeline-content[b-sslzrzoi07] {
    padding: 0.5rem;
}

.compact-mode .timeline-header[b-sslzrzoi07] {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.compact-mode .kpi-data-change[b-sslzrzoi07] {
    padding: 0.5rem;
    margin: 0.25rem 0;
}

.compact-mode .timeline-changes[b-sslzrzoi07] {
    padding: 0.35rem;
    margin: 0.25rem 0;
}

.compact-mode .timeline-notes[b-sslzrzoi07] {
    padding: 0.35rem;
    font-size: 0.75rem;
}

.compact-mode .user-info[b-sslzrzoi07] {
    padding: 0.35rem;
}

.compact-mode .activity-summary-card[b-sslzrzoi07] {
    padding: 0.35rem;
}
/* _content/alkpi/Components/Pages/Projects/KPIs/AIKPIGeneration.razor.rz.scp.css */
/* ========== MODERN AI MODAL STYLES ========== */

.modern-ai-modal[b-3cjdhct2lm] {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

/* ========== MODAL HEADER ========== */

.modal-header-modern[b-3cjdhct2lm] {
    background: var(--clr-primary);
    border-bottom: 2px solid var(--clr-border);
    padding: 0;
}

.modal-header-content[b-3cjdhct2lm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
}

.modal-icon-header[b-3cjdhct2lm] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.icon-wrapper-animated[b-3cjdhct2lm] {
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius);
    background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    box-shadow: 0 8px 16px rgba(var(--clr-accent-rgb), 0.3);
    animation: pulse-icon-b-3cjdhct2lm 2s ease-in-out infinite;
}

@keyframes pulse-icon-b-3cjdhct2lm {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.header-text[b-3cjdhct2lm] {
    flex: 1;
}

.modal-title-modern[b-3cjdhct2lm] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-text);
    margin: 0;
    line-height: 1.2;
}

.modal-subtitle-modern[b-3cjdhct2lm] {
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    margin: 0.25rem 0 0;
}

.btn-close-modern[b-3cjdhct2lm] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--clr-surface-hover);
    border: 1px solid var(--clr-border);
    color: var(--clr-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

    .btn-close-modern:hover:not(:disabled)[b-3cjdhct2lm] {
        background: var(--clr-danger);
        color: white;
        border-color: var(--clr-danger);
        transform: rotate(90deg);
    }

    .btn-close-modern:disabled[b-3cjdhct2lm] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ========== STEPS INDICATOR ========== */

.steps-indicator[b-3cjdhct2lm] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 2rem;
    background: var(--clr-secondary);
    gap: 0.5rem;
}

.step[b-3cjdhct2lm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition);
}

.step-circle[b-3cjdhct2lm] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--clr-surface);
    border: 2px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: var(--clr-text-muted);
    transition: var(--transition);
}

.step.active .step-circle[b-3cjdhct2lm] {
    background: var(--clr-accent);
    border-color: var(--clr-accent);
    color: white;
    box-shadow: 0 4px 12px rgba(var(--clr-accent-rgb), 0.4);
    animation: bounce-in-b-3cjdhct2lm 0.5s ease;
}

.step.completed .step-circle[b-3cjdhct2lm] {
    background: var(--clr-success);
    border-color: var(--clr-success);
    color: white;
}

@keyframes bounce-in-b-3cjdhct2lm {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.1);
    }

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

.step-label[b-3cjdhct2lm] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.step.active .step-label[b-3cjdhct2lm],
.step.completed .step-label[b-3cjdhct2lm] {
    color: var(--clr-text);
}

.step-line[b-3cjdhct2lm] {
    width: 60px;
    height: 2px;
    background: var(--clr-border);
    transition: var(--transition);
}

    .step-line.active[b-3cjdhct2lm] {
        background: var(--clr-accent);
    }

/* ========== MODAL BODY ========== */

.modal-body-modern[b-3cjdhct2lm] {
    padding: 2rem;
    min-height: 400px;
    max-height: 60vh;
    overflow-y: auto;
}

/* ========== INPUT PHASE ========== */

.ai-input-phase[b-3cjdhct2lm] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.input-card-modern[b-3cjdhct2lm] {
    background: var(--clr-primary);
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.input-card-header[b-3cjdhct2lm] {
    background: var(--clr-surface);
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--clr-text);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--clr-border);
}

    .input-card-header i[b-3cjdhct2lm] {
        color: var(--clr-accent);
        font-size: 1.125rem;
    }

.input-card-body[b-3cjdhct2lm] {
    padding: 1.5rem 1.25rem;
}

.form-group-modern[b-3cjdhct2lm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.label-modern[b-3cjdhct2lm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--clr-text);
    font-size: 0.95rem;
}

    .label-modern i[b-3cjdhct2lm] {
        color: var(--clr-accent);
    }

.required-badge[b-3cjdhct2lm] {
    color: var(--clr-danger);
    font-weight: 700;
}

.optional-badge[b-3cjdhct2lm] {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    font-weight: 400;
}

.btn-hint[b-3cjdhct2lm] {
    background: none;
    border: none;
    color: var(--clr-text-muted);
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    transition: var(--transition);
}

    .btn-hint:hover[b-3cjdhct2lm] {
        color: var(--clr-accent);
        transform: scale(1.1);
    }

.input-modern[b-3cjdhct2lm],
.select-modern[b-3cjdhct2lm],
.textarea-modern[b-3cjdhct2lm] {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--clr-secondary);
    border: 2px solid var(--clr-border);
    border-radius: var(--border-radius-sm);
    color: var(--clr-text);
    font-size: 1rem;
    transition: var(--transition);
}

.input-large[b-3cjdhct2lm] {
    padding: 1.125rem 1.25rem;
    font-size: 1.125rem;
    font-weight: 500;
}

.input-modern:focus[b-3cjdhct2lm],
.select-modern:focus[b-3cjdhct2lm],
.textarea-modern:focus[b-3cjdhct2lm] {
    outline: none;
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px var(--clr-accent-light);
    background: var(--clr-surface);
}

.input-modern:disabled[b-3cjdhct2lm],
.select-modern:disabled[b-3cjdhct2lm],
.textarea-modern:disabled[b-3cjdhct2lm] {
    opacity: 0.6;
    cursor: not-allowed;
}

.input-hint[b-3cjdhct2lm] {
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    margin-top: -0.25rem;
}

.textarea-modern[b-3cjdhct2lm] {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

.options-grid[b-3cjdhct2lm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.option-card[b-3cjdhct2lm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ========== ADVANCED OPTIONS ========== */

.advanced-options[b-3cjdhct2lm] {
    background: var(--clr-primary);
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.options-header[b-3cjdhct2lm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--clr-text);
    font-size: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--clr-border);
}

    .options-header i[b-3cjdhct2lm] {
        color: var(--clr-accent);
    }

.toggle-card[b-3cjdhct2lm] {
    background: var(--clr-surface);
    border: 2px solid var(--clr-border);
    border-radius: var(--border-radius-sm);
    padding: 1.25rem;
    transition: var(--transition);
}

    .toggle-card:hover[b-3cjdhct2lm] {
        border-color: var(--clr-accent);
        box-shadow: 0 4px 12px rgba(var(--clr-accent-rgb), 0.1);
    }

.toggle-content[b-3cjdhct2lm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.toggle-left[b-3cjdhct2lm] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
}

.toggle-icon[b-3cjdhct2lm] {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-sm);
    background: var(--clr-accent-light);
    color: var(--clr-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.toggle-info[b-3cjdhct2lm] {
    flex: 1;
}

.toggle-title[b-3cjdhct2lm] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--clr-text);
    margin: 0 0 0.25rem;
}

.toggle-description[b-3cjdhct2lm] {
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Custom Toggle Switch */
.toggle-switch-wrapper[b-3cjdhct2lm] {
    position: relative;
}

.toggle-switch-input[b-3cjdhct2lm] {
    appearance: none;
    width: 56px;
    height: 28px;
    background: var(--clr-border);
    border-radius: 28px;
    position: relative;
    cursor: pointer;
    transition: var(--transition);
}

    .toggle-switch-input:checked[b-3cjdhct2lm] {
        background: var(--clr-accent);
    }

    .toggle-switch-input[b-3cjdhct2lm]::before {
        content: '';
        position: absolute;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: white;
        top: 3px;
        left: 3px;
        transition: var(--transition);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .toggle-switch-input:checked[b-3cjdhct2lm]::before {
        transform: translateX(28px);
    }

    .toggle-switch-input:disabled[b-3cjdhct2lm] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ========== GENERATING PHASE ========== */

.generation-phase[b-3cjdhct2lm],
.importing-phase[b-3cjdhct2lm] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.generation-animation[b-3cjdhct2lm],
.importing-animation[b-3cjdhct2lm] {
    text-align: center;
    max-width: 400px;
}

.ai-brain-animation[b-3cjdhct2lm],
.import-icon-animation[b-3cjdhct2lm] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ai-brain-animation i[b-3cjdhct2lm],
    .import-icon-animation i[b-3cjdhct2lm] {
        font-size: 4rem;
        color: var(--clr-accent);
        position: relative;
        z-index: 2;
        animation: float-b-3cjdhct2lm 3s ease-in-out infinite;
    }

    .import-icon-animation i[b-3cjdhct2lm] {
        color: var(--clr-success);
    }

@keyframes float-b-3cjdhct2lm {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.pulse-ring[b-3cjdhct2lm] {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid var(--clr-accent);
    animation: pulse-ring-animation-b-3cjdhct2lm 2s ease-out infinite;
}

    .pulse-ring.success[b-3cjdhct2lm] {
        border-color: var(--clr-success);
    }

.pulse-ring-delay[b-3cjdhct2lm] {
    animation-delay: 1s;
}

@keyframes pulse-ring-animation-b-3cjdhct2lm {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.generation-animation h4[b-3cjdhct2lm],
.importing-animation h4[b-3cjdhct2lm] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: 0.75rem;
}

.generation-text[b-3cjdhct2lm],
.importing-text[b-3cjdhct2lm] {
    font-size: 1rem;
    color: var(--clr-text-muted);
    margin-bottom: 2rem;
}

.progress-bar-modern[b-3cjdhct2lm] {
    width: 100%;
    height: 8px;
    background: var(--clr-border);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    margin-top: 2rem;
}

.progress-fill-animated[b-3cjdhct2lm] {
    height: 100%;
    background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-hover));
    border-radius: 8px;
    animation: progress-animation-b-3cjdhct2lm 2s ease-in-out infinite;
}

    .progress-fill-animated.success[b-3cjdhct2lm] {
        background: linear-gradient(90deg, var(--clr-success), #10b981);
    }

@keyframes progress-animation-b-3cjdhct2lm {
    0% {
        width: 10%;
    }

    50% {
        width: 80%;
    }

    100% {
        width: 10%;
    }
}

/* ========== PREVIEW PHASE ========== */

.preview-phase[b-3cjdhct2lm] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Banners */
.success-banner[b-3cjdhct2lm],
.warning-banner[b-3cjdhct2lm],
.error-banner[b-3cjdhct2lm] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 2px solid;
}

.success-banner[b-3cjdhct2lm] {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--clr-success);
}

.warning-banner[b-3cjdhct2lm] {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--clr-warning);
}

.error-banner[b-3cjdhct2lm] {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--clr-danger);
}

.success-icon[b-3cjdhct2lm],
.warning-icon[b-3cjdhct2lm],
.error-icon[b-3cjdhct2lm] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.success-icon[b-3cjdhct2lm] {
    background: var(--clr-success);
    color: white;
}

.warning-icon[b-3cjdhct2lm] {
    background: var(--clr-warning);
    color: white;
}

.error-icon[b-3cjdhct2lm] {
    background: var(--clr-danger);
    color: white;
}

.success-content[b-3cjdhct2lm],
.warning-content[b-3cjdhct2lm],
.error-content[b-3cjdhct2lm] {
    flex: 1;
}

    .success-content h5[b-3cjdhct2lm],
    .warning-content h6[b-3cjdhct2lm],
    .error-content h5[b-3cjdhct2lm] {
        font-weight: 700;
        margin: 0 0 0.5rem;
    }

    .success-content p[b-3cjdhct2lm],
    .warning-content p[b-3cjdhct2lm],
    .error-content p[b-3cjdhct2lm] {
        margin: 0;
        color: var(--clr-text-secondary);
    }

.confidence-badge[b-3cjdhct2lm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.confidence-circle[b-3cjdhct2lm] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--clr-success);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.confidence-badge small[b-3cjdhct2lm] {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.duplicate-tags[b-3cjdhct2lm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.duplicate-tag[b-3cjdhct2lm] {
    padding: 0.25rem 0.75rem;
    background: var(--clr-warning);
    color: white;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Selection Controls */
.selection-controls[b-3cjdhct2lm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

    .selection-controls h6[b-3cjdhct2lm] {
        font-weight: 600;
        color: var(--clr-text);
        margin: 0;
    }

.control-buttons[b-3cjdhct2lm] {
    display: flex;
    gap: 0.5rem;
}

.btn-control[b-3cjdhct2lm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius-sm);
    color: var(--clr-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

    .btn-control:hover[b-3cjdhct2lm] {
        background: var(--clr-accent);
        color: white;
        border-color: var(--clr-accent);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(var(--clr-accent-rgb), 0.3);
    }

/* KPI Cards List */
.kpi-cards-list[b-3cjdhct2lm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kpi-card-modern[b-3cjdhct2lm] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--clr-surface);
    border: 2px solid var(--clr-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
}

    .kpi-card-modern:hover[b-3cjdhct2lm] {
        border-color: var(--clr-accent);
        box-shadow: 0 4px 12px rgba(var(--clr-accent-rgb), 0.15);
        transform: translateX(4px);
    }

    .kpi-card-modern.selected[b-3cjdhct2lm] {
        border-color: var(--clr-accent);
        background: var(--clr-accent-light);
        box-shadow: 0 4px 12px rgba(var(--clr-accent-rgb), 0.2);
    }

    .kpi-card-modern.duplicate[b-3cjdhct2lm] {
        border-color: var(--clr-warning);
    }

        .kpi-card-modern.duplicate.selected[b-3cjdhct2lm] {
            background: rgba(245, 158, 11, 0.1);
        }

.kpi-card-checkbox[b-3cjdhct2lm] {
    margin-top: 0.25rem;
}

    .kpi-card-checkbox input[type="checkbox"][b-3cjdhct2lm] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: var(--clr-accent);
    }

.kpi-card-icon[b-3cjdhct2lm] {
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius-sm);
    background: var(--clr-accent-light);
    color: var(--clr-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.kpi-card-modern.selected .kpi-card-icon[b-3cjdhct2lm] {
    background: var(--clr-accent);
    color: white;
}

.kpi-card-content[b-3cjdhct2lm] {
    flex: 1;
    min-width: 0;
}

.kpi-card-header[b-3cjdhct2lm] {
    margin-bottom: 0.5rem;
}

.kpi-name[b-3cjdhct2lm] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--clr-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.badge-duplicate[b-3cjdhct2lm] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: var(--clr-warning);
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.kpi-description[b-3cjdhct2lm] {
    font-size: 0.95rem;
    color: var(--clr-text-secondary);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.kpi-meta-tags[b-3cjdhct2lm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.meta-tag[b-3cjdhct2lm] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--clr-primary);
    border: 1px solid var(--clr-border);
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--clr-text-secondary);
}

    .meta-tag i[b-3cjdhct2lm] {
        font-size: 0.75rem;
    }

.meta-tag-target[b-3cjdhct2lm] {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--clr-success);
    color: var(--clr-success);
}

.meta-tag-category[b-3cjdhct2lm] {
    background: rgba(6, 182, 212, 0.1);
    border-color: var(--clr-info);
    color: var(--clr-info);
}

.meta-tag-confidence[b-3cjdhct2lm] {
    font-weight: 600;
}

    .meta-tag-confidence.high-confidence[b-3cjdhct2lm] {
        background: rgba(16, 185, 129, 0.1);
        border-color: var(--clr-success);
        color: var(--clr-success);
    }

    .meta-tag-confidence.medium-confidence[b-3cjdhct2lm] {
        background: rgba(245, 158, 11, 0.1);
        border-color: var(--clr-warning);
        color: var(--clr-warning);
    }

    .meta-tag-confidence.low-confidence[b-3cjdhct2lm] {
        background: rgba(239, 68, 68, 0.1);
        border-color: var(--clr-danger);
        color: var(--clr-danger);
    }

/* Import Summary Banner */
.import-summary-banner[b-3cjdhct2lm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--clr-accent-light), rgba(var(--clr-accent-rgb), 0.05));
    border: 2px solid var(--clr-accent);
    border-radius: var(--border-radius);
    gap: 1rem;
}

.summary-main[b-3cjdhct2lm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--clr-text);
}

    .summary-main i[b-3cjdhct2lm] {
        color: var(--clr-accent);
        font-size: 1.5rem;
    }

    .summary-main strong[b-3cjdhct2lm] {
        font-size: 1.5rem;
        color: var(--clr-accent);
    }

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

.summary-badge[b-3cjdhct2lm] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

    .summary-badge.badge-info[b-3cjdhct2lm] {
        background: var(--clr-info);
        color: white;
    }

    .summary-badge.badge-secondary[b-3cjdhct2lm] {
        background: var(--clr-text-muted);
        color: white;
    }

    .summary-badge.badge-success[b-3cjdhct2lm] {
        background: var(--clr-success);
        color: white;
    }

/* ========== COMPLETE PHASE ========== */

.complete-phase[b-3cjdhct2lm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
}

.complete-success[b-3cjdhct2lm],
.complete-error[b-3cjdhct2lm] {
    max-width: 600px;
    width: 100%;
}

.success-checkmark[b-3cjdhct2lm],
.error-icon-large[b-3cjdhct2lm] {
    width: 100px;
    height: 100px;
    margin: 0 auto 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scale-in-b-3cjdhct2lm 0.5s ease;
}

.success-checkmark[b-3cjdhct2lm] {
    background: rgba(16, 185, 129, 0.1);
}

.error-icon-large[b-3cjdhct2lm] {
    background: rgba(239, 68, 68, 0.1);
}

.success-checkmark i[b-3cjdhct2lm] {
    font-size: 4rem;
    color: var(--clr-success);
}

.error-icon-large i[b-3cjdhct2lm] {
    font-size: 4rem;
    color: var(--clr-danger);
}

@keyframes scale-in-b-3cjdhct2lm {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.1);
    }

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

.complete-success h4[b-3cjdhct2lm],
.complete-error h4[b-3cjdhct2lm] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: 1rem;
}

.complete-success p[b-3cjdhct2lm],
.complete-error p[b-3cjdhct2lm] {
    font-size: 1.125rem;
    color: var(--clr-text-secondary);
    margin-bottom: 2rem;
}

/* Statistics Cards */
.stats-cards-grid[b-3cjdhct2lm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.stat-card-modern[b-3cjdhct2lm] {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition);
}

    .stat-card-modern:hover[b-3cjdhct2lm] {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

.stat-icon[b-3cjdhct2lm] {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

    .stat-icon.success[b-3cjdhct2lm] {
        background: rgba(16, 185, 129, 0.1);
        color: var(--clr-success);
    }

    .stat-icon.info[b-3cjdhct2lm] {
        background: rgba(6, 182, 212, 0.1);
        color: var(--clr-info);
    }

    .stat-icon.primary[b-3cjdhct2lm] {
        background: var(--clr-accent-light);
        color: var(--clr-accent);
    }

.stat-value[b-3cjdhct2lm] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label[b-3cjdhct2lm] {
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Renamed Info Card */
.renamed-info-card[b-3cjdhct2lm],
.categories-info-card[b-3cjdhct2lm] {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin-top: 1.5rem;
}

.renamed-header[b-3cjdhct2lm],
.categories-header[b-3cjdhct2lm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--clr-text);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--clr-border);
}

    .renamed-header i[b-3cjdhct2lm],
    .categories-header i[b-3cjdhct2lm] {
        color: var(--clr-info);
    }

.renamed-list[b-3cjdhct2lm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.renamed-item[b-3cjdhct2lm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: var(--clr-primary);
    border-radius: var(--border-radius-sm);
    gap: 1rem;
}

.old-name[b-3cjdhct2lm] {
    color: var(--clr-text-muted);
    font-size: 0.9rem;
}

.renamed-item i[b-3cjdhct2lm] {
    color: var(--clr-info);
}

.new-name[b-3cjdhct2lm] {
    font-weight: 600;
    color: var(--clr-text);
    font-size: 0.9rem;
}

.categories-tags[b-3cjdhct2lm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.category-tag[b-3cjdhct2lm] {
    padding: 0.5rem 1rem;
    background: var(--clr-accent);
    color: white;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* ========== MODAL FOOTER ========== */

.modal-footer-modern[b-3cjdhct2lm] {
    background: var(--clr-primary);
    border-top: 2px solid var(--clr-border);
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.btn-modern[b-3cjdhct2lm] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn-secondary-modern[b-3cjdhct2lm] {
    background: var(--clr-surface);
    color: var(--clr-text);
    border: 1px solid var(--clr-border);
}

    .btn-secondary-modern:hover:not(:disabled)[b-3cjdhct2lm] {
        background: var(--clr-surface-hover);
        border-color: var(--clr-accent);
        color: var(--clr-accent);
    }

.btn-primary-modern[b-3cjdhct2lm] {
    background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-hover));
    color: white;
    box-shadow: 0 4px 12px rgba(var(--clr-accent-rgb), 0.3);
}

    .btn-primary-modern:hover:not(:disabled)[b-3cjdhct2lm] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(var(--clr-accent-rgb), 0.4);
    }

.btn-success-modern[b-3cjdhct2lm] {
    background: linear-gradient(135deg, var(--clr-success), #10b981);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

    .btn-success-modern:hover:not(:disabled)[b-3cjdhct2lm] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
    }

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

.spinner-modern[b-3cjdhct2lm] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-3cjdhct2lm 0.6s linear infinite;
}

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

/* ========== RESPONSIVE DESIGN ========== */

@media (max-width: 768px) {
    .modal-xl[b-3cjdhct2lm] {
        max-width: 95%;
        margin: 0.5rem;
    }

    .modal-header-content[b-3cjdhct2lm] {
        padding: 1rem 1.25rem;
    }

    .icon-wrapper-animated[b-3cjdhct2lm] {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .modal-title-modern[b-3cjdhct2lm] {
        font-size: 1.25rem;
    }

    .steps-indicator[b-3cjdhct2lm] {
        padding: 1rem;
        gap: 0.25rem;
    }

    .step-circle[b-3cjdhct2lm] {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }

    .step-label[b-3cjdhct2lm] {
        font-size: 0.65rem;
    }

    .step-line[b-3cjdhct2lm] {
        width: 40px;
    }

    .modal-body-modern[b-3cjdhct2lm] {
        padding: 1.25rem;
    }

    .options-grid[b-3cjdhct2lm] {
        grid-template-columns: 1fr;
    }

    .kpi-card-modern[b-3cjdhct2lm] {
        flex-direction: column;
        align-items: stretch;
    }

    .kpi-card-icon[b-3cjdhct2lm] {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .import-summary-banner[b-3cjdhct2lm] {
        flex-direction: column;
        text-align: center;
    }

    .stats-cards-grid[b-3cjdhct2lm] {
        grid-template-columns: 1fr;
    }

    .modal-footer-modern[b-3cjdhct2lm] {
        padding: 1rem 1.25rem;
        flex-direction: column;
    }

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

/* ========== RTL SUPPORT ========== */

[dir="rtl"] .kpi-card-modern:hover[b-3cjdhct2lm] {
    transform: translateX(-4px);
}

[dir="rtl"] .modal-icon-header[b-3cjdhct2lm] {
    flex-direction: row-reverse;
}

[dir="rtl"] .label-modern[b-3cjdhct2lm] {
    flex-direction: row-reverse;
}

[dir="rtl"] .btn-hint[b-3cjdhct2lm] {
    margin-left: 0;
    margin-right: auto;
}


/* ========== ANIMATED LOADING MESSAGES (8 MESSAGES - REALISTIC LOOP) ========== */

.loading-messages[b-3cjdhct2lm] {
    min-height: 80px;
    margin: 2rem 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-message[b-3cjdhct2lm] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    color: var(--clr-text-secondary);
    margin: 0;
    opacity: 0;
    font-weight: 500;
    width: 100%;
    text-align: center;
    pointer-events: none;
}

    .loading-message i[b-3cjdhct2lm] {
        color: var(--clr-accent);
        font-size: 1.25rem;
        flex-shrink: 0;
    }

/* Infinite loop - 24 seconds total (8 messages × 3 seconds each) */
@keyframes message-fade-b-3cjdhct2lm {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    4% {
        opacity: 1;
        transform: translateY(0);
    }

    10% {
        opacity: 1;
        transform: translateY(0);
    }

    12.5% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.loading-message[b-3cjdhct2lm] {
    animation: message-fade-b-3cjdhct2lm 24s ease-in-out infinite;
}

    /* Each message appears 3 seconds after the previous one */
    .loading-message:nth-child(1)[b-3cjdhct2lm] {
        animation-delay: 0s;
    }

    .loading-message:nth-child(2)[b-3cjdhct2lm] {
        animation-delay: 3s;
    }

    .loading-message:nth-child(3)[b-3cjdhct2lm] {
        animation-delay: 6s;
    }

    .loading-message:nth-child(4)[b-3cjdhct2lm] {
        animation-delay: 9s;
    }

    .loading-message:nth-child(5)[b-3cjdhct2lm] {
        animation-delay: 12s;
    }

    .loading-message:nth-child(6)[b-3cjdhct2lm] {
        animation-delay: 15s;
    }

    .loading-message:nth-child(7)[b-3cjdhct2lm] {
        animation-delay: 18s;
    }

    .loading-message:nth-child(8)[b-3cjdhct2lm] {
        animation-delay: 21s;
    }

/* Responsive loading messages */
@media (max-width: 768px) {
    .loading-messages[b-3cjdhct2lm] {
        min-height: 60px;
        margin: 1.5rem 0;
    }

    .loading-message[b-3cjdhct2lm] {
        font-size: 1rem;
        padding: 0 1rem;
    }

        .loading-message i[b-3cjdhct2lm] {
            font-size: 1.125rem;
        }
}

/* RTL Support */
[dir="rtl"] .loading-message[b-3cjdhct2lm] {
    direction: rtl;
}
/* _content/alkpi/Components/Pages/Projects/KPIs/categorymanagementmodal.razor.rz.scp.css */
.category-icon[b-paaxt11rw0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius);
    background: var(--clr-surface-hover);
    transition: var(--transition);
}

.category-icon i[b-paaxt11rw0] {
    transition: var(--transition);
}

/* List Group Enhancements */
.list-group-item[b-paaxt11rw0] {
    background: var(--clr-surface);
    border-color: var(--clr-border-light);
    transition: var(--transition);
}

.list-group-item:hover[b-paaxt11rw0] {
    background: var(--clr-surface-hover);
    transform: translateX(4px);
}

/* Button Group in List Items */
.list-group-item .d-flex.gap-2[b-paaxt11rw0] {
    gap: 0.5rem !important;
}

.list-group-item .btn-sm[b-paaxt11rw0] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    border-radius: var(--border-radius-sm);
}

/* Color Input Styling */
.form-control-color[b-paaxt11rw0] {
    width: 100%;
    height: 38px;
    border-radius: var(--border-radius);
    border: 1px solid var(--clr-border);
    background: var(--clr-surface);
}

.form-control-color:focus[b-paaxt11rw0] {
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 0.2rem var(--clr-accent-light);
}

/* Icon Select Styling */
.form-select option[b-paaxt11rw0] {
    padding: 0.5rem;
    background: var(--clr-surface);
    color: var(--clr-text);
}

/* Empty State */
.text-center.py-4[b-paaxt11rw0] {
    padding: 3rem 1rem !important;
    background: var(--clr-surface-hover);
    border-radius: var(--border-radius);
    margin: 1rem 0;
}

.text-center.py-4 i[b-paaxt11rw0] {
    opacity: 0.6;
    margin-bottom: 1rem;
}

/* Modal Specific Adjustments */
.modal-body .card[b-paaxt11rw0] {
    margin-bottom: 1.5rem;
}

.modal-body .card:last-child[b-paaxt11rw0] {
    margin-bottom: 0;
}

/* RTL Support for Category Modal */
[dir="rtl"] .list-group-item:hover[b-paaxt11rw0] {
    transform: translateX(-4px);
}

[dir="rtl"] .category-icon[b-paaxt11rw0] {
    margin-left: 0;
    margin-right: 1rem;
}

[dir="rtl"] .d-flex.gap-2[b-paaxt11rw0] {
    flex-direction: row-reverse;
}

[dir="rtl"] .modal-header[b-paaxt11rw0] {
    flex-direction: row-reverse;
}

[dir="rtl"] .modal-title[b-paaxt11rw0] {
    text-align: right;
}

[dir="rtl"] .modal-footer[b-paaxt11rw0] {
    flex-direction: row-reverse;
}

[dir="rtl"] .modal-footer>*:not(:first-child)[b-paaxt11rw0] {
    margin-left: 0.25rem;
    margin-right: 0;
}

[dir="rtl"] .modal-footer>*:first-child[b-paaxt11rw0] {
    margin-right: 0.25rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .list-group-item .d-flex.justify-content-between[b-paaxt11rw0] {
        flex-direction: column;
        gap: 1rem;
    }

    .list-group-item .d-flex.gap-2[b-paaxt11rw0] {
        justify-content: center;
    }

    .category-icon[b-paaxt11rw0] {
        width: 40px;
        height: 40px;
    }
}
/* _content/alkpi/Components/Pages/Projects/KPIs/datamanagementinterface.razor.rz.scp.css */
/* ===== DATA MANAGEMENT INTERFACE (FINAL REFINED) ===== */

.data-management-interface[b-la14x0qayi] {
    width: 100%;
    padding: 0;
    overflow-x: hidden; /* hard-stop any horizontal scrollbar for this screen */
}

/* Hide the global decorative line on this specific card (it sits off-screen to the left) */
.frequency-tabs .card[b-la14x0qayi]::before {
    content: none !important;
}

/* Prevent any accidental horizontal overflow in the tabs row */
.frequency-tabs[b-la14x0qayi],
.frequency-tab-buttons[b-la14x0qayi] {
    overflow-x: hidden;
}

/* ---------- Frequency Tabs ---------- */
.frequency-tabs[b-la14x0qayi] {
    background: var(--clr-surface);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    border: 1px solid var(--clr-border-light);
    padding: .75rem;
    margin-bottom: 1rem;
}

.frequency-tab-buttons[b-la14x0qayi] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.frequency-tab[b-la14x0qayi] {
    position: relative;
    padding: .5rem 1rem;
    border: 1px solid var(--clr-border);
    background: var(--clr-surface);
    color: var(--clr-text-secondary);
    border-radius: 6px;
    transition: .2s;
    cursor: pointer;
    font-weight: 500;
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
    min-width: 90px;
    justify-content: center;
}

    .frequency-tab:hover:not(:disabled)[b-la14x0qayi] {
        border-color: var(--project-color, var(--clr-accent));
        color: var(--project-color, var(--clr-accent));
        background: var(--project-color-light, color-mix(in srgb, var(--clr-accent) 3%, transparent));
    }

    .frequency-tab.active[b-la14x0qayi] {
        background: var(--project-color, var(--clr-accent));
        border-color: var(--project-color, var(--clr-accent));
        color: #fff;
        font-weight: 600;
        box-shadow: 0 2px 6px var(--project-color-light, color-mix(in srgb, var(--clr-accent) 25%, transparent));
    }

    .frequency-tab:disabled[b-la14x0qayi] {
        opacity: .5;
        cursor: not-allowed;
    }

    .frequency-tab .badge[b-la14x0qayi] {
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(35%,-35%);
        font-size: .6rem;
        padding: .15rem .35rem;
        background: var(--clr-warning);
        color: #fff;
        border-radius: 8px;
        min-width: 16px;
        text-align: center;
        font-weight: 600;
    }

    .frequency-tab.active .badge[b-la14x0qayi] {
        background: rgba(255,255,255,.9);
        color: var(--project-color, var(--clr-accent));
    }

/* ---------- Import / Export Actions ---------- */
.data-actions[b-la14x0qayi] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .data-actions .btn-group[b-la14x0qayi] {
        box-shadow: 0 2px 4px rgba(0,0,0,.1);
    }

    .data-actions .btn[b-la14x0qayi] {
        border-radius: 6px;
        font-weight: 500;
        font-size: .85rem;
        padding: .5rem 1rem;
        transition: .2s;
    }

        .data-actions .btn:hover[b-la14x0qayi] {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0,0,0,.15);
        }

    /* Ensure dropdown is not clipped and stacks above */
    .frequency-tabs .card[b-la14x0qayi],
    .frequency-tabs .card .card-body[b-la14x0qayi],
    .data-actions .btn-group[b-la14x0qayi] {
        overflow: visible;
    }

    .data-actions .dropdown-menu[b-la14x0qayi] {
        z-index: 2000; /* above cards/tables */
    }

/* ---------- Period Navigation ---------- */
.period-navigation[b-la14x0qayi] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

    .period-navigation .btn[b-la14x0qayi] {
        border-radius: 6px;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .85rem;
    }

        /* Bigger center period-display so month fits fully */
        .period-navigation .btn.period-display[b-la14x0qayi] {
            width: auto;
            height: auto;
            min-width: 180px;
            padding: .45rem .85rem;
            font-size: .95rem;
            white-space: nowrap;
        }

/* ---------- File Upload ---------- */
.file-upload-area[b-la14x0qayi] {
    position: relative;
    border: 2px dashed #dee2e6;
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    transition: .3s;
    background: #f8f9fa;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .file-upload-area:hover[b-la14x0qayi] {
        border-color: var(--bs-primary);
        background: rgba(var(--bs-primary-rgb),.05);
    }

.file-input[b-la14x0qayi] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-content[b-la14x0qayi] {
    pointer-events: none;
}

/* ---------- Table Container ---------- */
.data-table-container[b-la14x0qayi] {
    width: 100%;
    overflow-x: hidden; /* remove horizontal slide */
    margin-bottom: 1rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.data-table[b-la14x0qayi] {
    font-size: .8rem;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border-light);
    min-width: 0; /* allow table to shrink below 600px */
    width: 100%;
    table-layout: fixed; /* enable ellipsis and even column distribution */
}

    .data-table th[b-la14x0qayi] {
        font-weight: 600;
        background: color-mix(in srgb, var(--project-color, var(--clr-accent)) 4%, var(--clr-surface));
        border-bottom: 1px solid var(--clr-border);
        vertical-align: middle;
        padding: .75rem .5rem;
        text-transform: uppercase;
        letter-spacing: .3px;
        font-size: .7rem;
        white-space: nowrap;
    }

    .data-table td[b-la14x0qayi] {
        padding: .55rem .45rem;
        border-bottom: 1px solid var(--clr-border-light);
        vertical-align: middle;
        color: var(--clr-text);
        overflow: hidden;
        text-overflow: ellipsis; /* trim long content instead of causing scroll */
    }

    .data-table tbody tr[b-la14x0qayi] {
        transition: .2s;
    }

        .data-table tbody tr:hover[b-la14x0qayi] {
            background: var(--project-color-light, color-mix(in srgb, var(--clr-accent) 2%, transparent));
        }

/* ---------- Period Header ---------- */
.period-header[b-la14x0qayi] {
    text-align: center;
    background: var(--project-color-light, color-mix(in srgb, var(--clr-accent) 5%, var(--clr-surface)));
    border-radius: 4px;
    padding: .4rem;
    margin-bottom: .25rem;
    border: 1px solid var(--project-color-light, color-mix(in srgb, var(--clr-accent) 10%, transparent));
}

.period-month[b-la14x0qayi] {
    font-weight: 600;
    font-size: .75rem;
    margin-bottom: .15rem;
}

.period-details[b-la14x0qayi] {
    font-size: .65rem;
    color: var(--clr-text-secondary);
}

/* ---------- KPI Info ---------- */
.kpi-info[b-la14x0qayi] {
    max-width: 300px;
}

.kpi-name[b-la14x0qayi] {
    font-weight: 600;
    font-size: .85rem;
    line-height: 1.25;
    margin-bottom: .25rem;
}

.kpi-icon-small[b-la14x0qayi] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--project-color-light, color-mix(in srgb, var(--clr-accent) 8%, transparent));
    border-radius: 4px;
    font-size: .85rem;
    flex-shrink: 0;
}

/* ---------- Data Cells & Inputs ---------- */
.data-cell[b-la14x0qayi] {
    position: relative;
    text-align: center;
    padding: .6rem .6rem .6rem; /* no reserved bottom space; % now flows below */
    min-width: 100px; /* was 120px */
}

.data-input-container[b-la14x0qayi] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    margin: 0 auto;
    max-width: 160px; /* allow wider inputs */
}

.input-group-sm[b-la14x0qayi] {
    max-width: 140px; /* wider default */
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    border-radius: 6px;
    overflow: hidden;
}

.data-input[b-la14x0qayi] {
    text-align: center;
    font-size: .8rem;
    font-weight: 500;
    border: 1px solid var(--clr-border);
    background: var(--clr-surface);
    color: var(--clr-text);
    direction: ltr;
    padding: .38rem .45rem;
    transition: .2s;
    width: 100%;
}

    .data-input:focus[b-la14x0qayi] {
        border-color: var(--project-color, var(--clr-accent));
        box-shadow: 0 0 0 .15rem var(--project-color-light, color-mix(in srgb, var(--clr-accent) 20%, transparent));
        background: var(--clr-surface);
    }

    .data-input:hover[b-la14x0qayi] {
        background: var(--project-color-light, color-mix(in srgb, var(--clr-accent) 2%, transparent));
    }

/* Read-only input: match size, remove interactive look */
.readonly-value-group .data-input[readonly][b-la14x0qayi] {
    background: var(--clr-surface-hover);
    border-color: var(--clr-border);
    color: var(--clr-text);
    cursor: default;
}

/* Remove number input spinners */
.data-table input.no-spin[type=number][b-la14x0qayi]::-webkit-outer-spin-button,
.data-table input.no-spin[type=number][b-la14x0qayi]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.data-table input.no-spin[type=number][b-la14x0qayi] {
    -moz-appearance: textfield;
}

/* Unit pill */
.unit-display[b-la14x0qayi] {
    background: transparent !important; /* remove box background */
    border: 0 !important; /* remove box border */
    box-shadow: none !important;
    color: var(--project-color, var(--clr-accent));
    padding: 0 .35rem; /* tighter spacing */
    min-width: auto; /* allow natural width */
    display: inline-flex;
    align-items: center;
    height: auto; /* follow input height naturally */
    white-space: nowrap; /* never wrap unit text */
}

/* Display (read-only) value */
.data-value[b-la14x0qayi] {
    font-weight: 600;
    font-size: .78rem;
    color: var(--clr-text);
    padding: .4rem .5rem;
    border-radius: 4px;
    background: var(--clr-surface-hover);
    display: inline-block;
    min-width: 60px;
    direction: ltr;
}

/* ---------- Target Info (Slimmer) ---------- */
.target-info[b-la14x0qayi] {
    margin-top: 1px;
    padding: 0 3px;
    line-height: 1.1;
    font-size: .48rem; /* smaller */
    display: inline-block;
    background: var(--project-color-light, rgba(0,0,0,.04));
    border: 1px solid var(--project-color-light, rgba(0,0,0,.08));
    border-radius: 2px;
}

    .target-info i[b-la14x0qayi] {
        font-size: .55rem;
        margin-right: .2rem;
    }

/* ---------- Achievement Indicator (Flow under input) ---------- */
.achievement-indicator[b-la14x0qayi] {
    position: static; /* was absolute */
    left: auto;
    transform: none;
    bottom: auto;
    width: 100%;
    margin: 4px 0 0; /* minimal space below input */
    pointer-events: none;
    padding: 0;
}

.achievement-bar[b-la14x0qayi] {
    width: 100%;
    height: 3px;
    background: var(--clr-border);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 0 2px 0;
}

.achievement-fill[b-la14x0qayi] {
    height: 100%;
    transition: width .45s ease;
    border-radius: 2px;
}

    .achievement-fill.outstanding[b-la14x0qayi] {
        background: var(--project-color, var(--clr-success));
        box-shadow: 0 0 6px var(--project-color-light, color-mix(in srgb, var(--clr-success) 30%, transparent));
    }

    .achievement-fill.excellent[b-la14x0qayi] {
        background: var(--clr-success);
    }

    .achievement-fill.good[b-la14x0qayi] {
        background: #22c55e;
    }

    .achievement-fill.average[b-la14x0qayi] {
        background: var(--clr-warning);
    }

    .achievement-fill.poor[b-la14x0qayi] {
        background: var(--clr-danger);
    }

.achievement-text[b-la14x0qayi] {
    font-size: .6rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Direction-based emphasis */
.achievement-indicator.dir-up .achievement-text.outstanding[b-la14x0qayi],
.achievement-indicator.dir-up .achievement-text.excellent[b-la14x0qayi],
.achievement-indicator.dir-up .achievement-text.good[b-la14x0qayi] {
    font-weight: 600;
}

.achievement-indicator.dir-down .achievement-text.outstanding[b-la14x0qayi] {
    font-weight: 700;
    font-size: .65rem;
}

/* ---------- Saving / Saved Indicators ---------- */
.saving-indicator[b-la14x0qayi],
.saved-indicator[b-la14x0qayi] {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    z-index: 10;
}

.saving-indicator[b-la14x0qayi] {
    background: var(--clr-warning);
    color: #fff;
    animation: pulse-b-la14x0qayi 1s infinite;
}

.saved-indicator[b-la14x0qayi] {
    background: var(--project-color, var(--clr-success));
    color: #fff;
    animation: fadeInOut-b-la14x0qayi 2s ease-out;
}

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

    50% {
        opacity: .5;
    }
}

@keyframes fadeInOut-b-la14x0qayi {
    0% {
        opacity: 0;
        transform: scale(.5);
    }

    30% {
        opacity: 1;
        transform: scale(1);
    }

    70% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(.85);
    }
}

/* ---------- Empty State ---------- */
.empty-state[b-la14x0qayi] {
    padding: 2.2rem 1.5rem;
    text-align: center;
    background: var(--clr-surface);
    border-radius: 8px;
    border: 2px dashed var(--clr-border);
    color: var(--clr-text-secondary);
}

    .empty-state i[b-la14x0qayi] {
        font-size: 2.5rem;
        opacity: .7;
        margin-bottom: 1rem;
    }

    .empty-state h5[b-la14x0qayi] {
        font-weight: 600;
        font-size: 1.05rem;
        margin-bottom: .6rem;
    }

    .empty-state p[b-la14x0qayi] {
        font-size: .85rem;
        margin-bottom: 1.2rem;
        line-height: 1.4;
    }

/* ---------- Accessibility Focus ---------- */
.frequency-tab:focus-visible[b-la14x0qayi],
.data-input:focus-visible[b-la14x0qayi],
.period-navigation .btn:focus-visible[b-la14x0qayi],
.data-actions .btn:focus-visible[b-la14x0qayi] {
    outline: 2px solid var(--project-color, var(--clr-accent));
    outline-offset: 2px;
}

/* ---------- Responsive Tweaks (wider inputs & columns) ---------- */
@media (min-width:1400px) {
    .data-cell[b-la14x0qayi] {
        padding: .65rem .7rem .65rem;
        min-width: 140px;
    }

    .input-group-sm[b-la14x0qayi] {
        max-width: 150px;
    }
}

@media (min-width:1200px) and (max-width:1399px) {
    .data-cell[b-la14x0qayi] {
        padding: .6rem .6rem .6rem;
        min-width: 130px;
    }

    .input-group-sm[b-la14x0qayi] {
        max-width: 130px;
    }
}

@media (min-width:992px) and (max-width:1199px) {
    .data-cell[b-la14x0qayi] {
        padding: .55rem .55rem .55rem;
        min-width: 120px;
    }

    .input-group-sm[b-la14x0qayi] {
        max-width: 120px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    .data-cell[b-la14x0qayi] {
        padding: .5rem .5rem .5rem;
        min-width: 110px;
    }

    .input-group-sm[b-la14x0qayi] {
        max-width: 110px;
    }
}

@media (min-width:576px) and (max-width:767px) {
    .data-cell[b-la14x0qayi] {
        padding: .45rem .45rem .45rem;
        min-width: 95px;
    }

    .input-group-sm[b-la14x0qayi] {
        max-width: 95px;
    }

    .data-input[b-la14x0qayi] {
        font-size: .72rem;
    }

    .unit-display[b-la14x0qayi] {
        font-size: .65rem;
        min-width: 26px;
    }
}

@media (max-width:575px) {
    .data-cell[b-la14x0qayi] {
        padding: .4rem .4rem .4rem;
        min-width: 85px;
    }

    .input-group-sm[b-la14x0qayi] {
        max-width: 85px;
    }

    .data-input[b-la14x0qayi] {
        font-size: .68rem;
    }

    .unit-display[b-la14x0qayi] {
        font-size: .62rem;
        min-width: 24px;
    }

    .period-display[b-la14x0qayi] {
        font-size: .7rem;
        min-width: 100px;
        padding: .35rem .65rem;
    }

    .data-actions .btn[b-la14x0qayi] {
        font-size: .72rem;
        padding: .35rem .65rem;
    }
}

/* ---------- Dark Theme ---------- */
[data-theme="dark"] .frequency-tabs[b-la14x0qayi] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

[data-theme="dark"] .frequency-tab[b-la14x0qayi] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

[data-theme="dark"] .data-table th[b-la14x0qayi] {
    background: color-mix(in srgb, var(--project-color, var(--clr-accent)) 6%, var(--clr-surface));
}

[data-theme="dark"] .data-input[b-la14x0qayi] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

[data-theme="dark"] .unit-display[b-la14x0qayi] {
    background: var(--project-color-light, color-mix(in srgb, var(--clr-accent) 12%, var(--clr-surface)));
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .data-actions .btn:hover[b-la14x0qayi],
    .achievement-fill[b-la14x0qayi] {
        transition: none;
    }

    .saving-indicator[b-la14x0qayi], .saved-indicator[b-la14x0qayi] {
        animation: none;
    }
}

/* === Fix: keep unit on same line and remove box styling === */
.data-table .input-group[b-la14x0qayi] {
    flex-wrap: nowrap; /* prevent wrapping to next line */
    align-items: stretch;
}

/* === No horizontal scroll: let table compress and hide overflow === */
.data-management-interface .data-table-container[b-la14x0qayi] {
    overflow-x: hidden; /* remove horizontal slide */
}

.data-management-interface .data-table[b-la14x0qayi] {
    min-width: 0; /* allow table to shrink below 600px */
    width: 100%;
    table-layout: fixed; /* enable ellipsis and even column distribution */
}

    .data-management-interface .data-table th[b-la14x0qayi],
    .data-management-interface .data-table td[b-la14x0qayi] {
        overflow: hidden;
        text-overflow: ellipsis; /* trim long content instead of causing scroll */
    }

/* Allow cells to compress a bit more */
.data-management-interface .data-cell[b-la14x0qayi] {
    min-width: 100px; /* was 120px */
}

/* Keep unit on the same line (both editable and read-only groups) */
.data-table .input-group[b-la14x0qayi],
.readonly-value-group[b-la14x0qayi] {
    flex-wrap: nowrap;
    align-items: stretch;
}

/* Unit pill without box, same line */
.unit-display[b-la14x0qayi] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--project-color, var(--clr-accent));
    padding: 0 .35rem;
    min-width: auto;
    display: inline-flex;
    align-items: center;
    height: auto;
    white-space: nowrap;
}

/* Tighten read-only value + unit inline group (for formula KPIs) */
.readonly-value-group[b-la14x0qayi] {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

    .readonly-value-group .data-value[b-la14x0qayi] {
        padding-right: .25rem; /* slightly reduce spacing before the unit */
        min-width: auto; /* allow it to shrink naturally */
    }

    /* Remove Bootstrap input-group-text join offset since we removed borders */
    .readonly-value-group .unit-display[b-la14x0qayi] {
        margin-left: 0 !important;
        padding: 0 .25rem; /* compact unit pill */
    }

[dir="rtl"] .readonly-value-group .unit-display[b-la14x0qayi] {
    margin-right: 0 !important;
    margin-left: 0 !important;
}
/* _content/alkpi/Components/Pages/Projects/KPIs/kpiformmodal.razor.rz.scp.css */
/* ===== FORCE FONT AWESOME ICONS TO LOAD - MUST BE FIRST ===== */

/* Font Awesome Font Faces */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-solid-900.woff2') format('woff2'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-solid-900.ttf') format('truetype');
}

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-regular-400.woff2') format('woff2'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-regular-400.ttf') format('truetype');
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-brands-400.woff2') format('woff2'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-brands-400.ttf') format('truetype');
}

/* CRITICAL: Force Font Awesome icons to render with correct font */
i[class*="fa-"][b-8r6wqh2g6b],
i.fas[b-8r6wqh2g6b], i.far[b-8r6wqh2g6b], i.fab[b-8r6wqh2g6b], i.fa[b-8r6wqh2g6b],
.fas[b-8r6wqh2g6b], .far[b-8r6wqh2g6b], .fab[b-8r6wqh2g6b], .fa[b-8r6wqh2g6b],
.icon-option-inline i[b-8r6wqh2g6b],
.icon-btn i[b-8r6wqh2g6b],
.kpi-icon-ref i[b-8r6wqh2g6b],
.add-kpi-pill i[b-8r6wqh2g6b],
.options-toggle i[b-8r6wqh2g6b],
.formula-header i[b-8r6wqh2g6b],
.btn i[class*="fa-"][b-8r6wqh2g6b],
.dropdown-toggle i[class*="fa-"][b-8r6wqh2g6b],
.nav-link i[class*="fa-"][b-8r6wqh2g6b] {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    letter-spacing: normal !important;
}

.far[b-8r6wqh2g6b], i.far[b-8r6wqh2g6b] {
    font-weight: 400 !important;
}

.fab[b-8r6wqh2g6b], i.fab[b-8r6wqh2g6b] {
    font-family: 'Font Awesome 6 Brands' !important;
    font-weight: 400 !important;
}

/* Enhanced Arabic Font Support - AFTER Font Awesome */
*:not(i):not([class*="fa-"])[b-8r6wqh2g6b] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Cairo', 'Amiri', 'Tajawal', 'Arial', sans-serif;
}

[dir="rtl"] *:not(i):not([class*="fa-"])[b-8r6wqh2g6b] {
    font-family: 'Cairo', 'Amiri', 'Tajawal', 'Segoe UI', 'Roboto', 'Arial', sans-serif;
    letter-spacing: normal;
}

/* Modal sizing */
.kpi-modal-wide[b-8r6wqh2g6b] {
    max-width: 520px;
}

.kpi-modal-content[b-8r6wqh2g6b] {
    border-radius: 20px;
    background: #ffffff;
    padding-bottom: .5rem;
    border: none;
}

[data-theme="dark"] .kpi-modal-content[b-8r6wqh2g6b] {
    background: var(--clr-surface);
}

/* Input styling */
.kpi-name-input[b-8r6wqh2g6b] {
    font-weight: 600;
    font-size: 1.1rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}

    .kpi-name-input:focus[b-8r6wqh2g6b] {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

/* Icon button with dropdown */
.icon-btn[b-8r6wqh2g6b] {
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    transition: all 0.2s ease;
    font-size: 1.2rem;
}

    .icon-btn:hover[b-8r6wqh2g6b] {
        background: #ffffff;
        border-color: #6366f1;
        color: #6366f1;
        transform: translateY(-1px);
    }

/* Inline Icon Dropdown */
.icon-dropdown-menu[b-8r6wqh2g6b] {
    width: 320px;
    max-height: 450px;
    border-radius: 12px;
    padding: 0;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    z-index: 1100 !important; /* Higher than modal */
}

.icon-search-box[b-8r6wqh2g6b] {
    padding: 12px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

    .icon-search-box input[b-8r6wqh2g6b] {
        border-radius: 8px;
        border: 1px solid #cbd5e1;
        font-size: 0.875rem;
    }

.icon-grid-dropdown[b-8r6wqh2g6b] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    padding: 12px;
    max-height: 350px;
    overflow-y: auto;
}

.icon-option-inline[b-8r6wqh2g6b] {
    width: 42px;
    height: 42px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 1.1rem;
    color: #475569;
}

    .icon-option-inline:hover[b-8r6wqh2g6b] {
        background: #f1f5f9;
        border-color: #6366f1;
        color: #6366f1;
        transform: scale(1.05);
    }

    .icon-option-inline.selected[b-8r6wqh2g6b] {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        color: #ffffff;
        border-color: #6366f1;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    }

/* Section toggles */
.options-toggle[b-8r6wqh2g6b],
.formula-header[b-8r6wqh2g6b] {
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border: none;
    padding: .85rem 1rem;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
    color: #1e40af;
    transition: all 0.2s ease;
}

    .options-toggle:hover[b-8r6wqh2g6b],
    .formula-header:hover[b-8r6wqh2g6b] {
        background: linear-gradient(135deg, #bae6fd 0%, #bfdbfe 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    }

.options-body[b-8r6wqh2g6b] {
    padding: 1rem 0.5rem 0;
    animation: slideDown-b-8r6wqh2g6b 0.3s ease;
}

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

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

/* Form controls */
.form-label[b-8r6wqh2g6b] {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.form-select[b-8r6wqh2g6b],
.form-control[b-8r6wqh2g6b] {
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    padding: 0.6rem 0.875rem;
    transition: all 0.2s ease;
}

    .form-select:focus[b-8r6wqh2g6b],
    .form-control:focus[b-8r6wqh2g6b] {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

/* Threshold boxes */
.threshold-box[b-8r6wqh2g6b] {
    width: 90px;
    border-radius: 10px;
    font-weight: 600;
    border-width: 2px;
}

    .threshold-box[b-8r6wqh2g6b]::placeholder {
        color: #cbd5e1;
    }

.rag-row[b-8r6wqh2g6b] {
    gap: 8px;
}

/* Workday buttons */
.workday-btn[b-8r6wqh2g6b] {
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    padding: .45rem .65rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 8px;
    color: #475569;
    letter-spacing: .5px;
    transition: all 0.2s ease;
}

    .workday-btn:hover[b-8r6wqh2g6b] {
        background: #e0e7ff;
        border-color: #6366f1;
        color: #6366f1;
    }

    .workday-btn.active[b-8r6wqh2g6b] {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        color: #fff;
        border-color: #6366f1;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    }

/* Formula section */
.formula-wrapper[b-8r6wqh2g6b] {
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
    overflow: hidden;
}

.formula-body[b-8r6wqh2g6b] {
    padding: 1rem;
    border-top: 2px solid #e2e8f0;
    background: #ffffff;
}

/* Visual Formula Editor */
.formula-editor-visual[b-8r6wqh2g6b] {
    min-height: 130px;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    cursor: text;
    padding: 14px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    align-items: center;
    transition: all 0.2s ease;
}

    .formula-editor-visual:hover[b-8r6wqh2g6b] {
        border-color: #94a3b8;
        background: #ffffff;
    }

    .formula-editor-visual:focus-within[b-8r6wqh2g6b] {
        border-color: #6366f1;
        border-style: solid;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        background: #ffffff;
    }

/* KPI Chips */
.kpi-chip[b-8r6wqh2g6b] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    user-select: none;
    transition: all 0.2s ease;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

    .kpi-chip:hover[b-8r6wqh2g6b] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
    }

.kpi-chip-name[b-8r6wqh2g6b] {
    margin-right: 10px;
}

.kpi-chip-close[b-8r6wqh2g6b] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 0;
    margin: 0;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s ease;
}

    .kpi-chip-close:hover[b-8r6wqh2g6b] {
        background: rgba(255, 255, 255, 0.35);
        transform: scale(1.1);
    }

/* Operators */
.formula-editor-visual .operator[b-8r6wqh2g6b] {
    font-weight: 700;
    font-size: 1.1rem;
    color: #475569;
    padding: 6px 4px;
    font-family: 'Courier New', monospace !important;
}

/* Add KPI pill button */
.add-kpi-pill[b-8r6wqh2g6b] {
    border-radius: 24px;
    padding: .5rem 1rem;
    font-size: .8rem;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    font-weight: 600;
    color: #475569;
    transition: all 0.2s ease;
}

    .add-kpi-pill:hover[b-8r6wqh2g6b] {
        background: #f1f5f9;
        border-color: #6366f1;
        color: #6366f1;
        transform: translateY(-1px);
    }

.operator-group .btn[b-8r6wqh2g6b] {
    min-width: 38px;
    font-weight: 700;
    border-radius: 8px;
}

/* KPI picker dropdown */
.kpi-picker-wrapper[b-8r6wqh2g6b] {
    position: relative;
    z-index: 10;
}

.kpi-search-dropdown[b-8r6wqh2g6b] {
    position: absolute;
    top: 110%;
    left: 0;
    width: 480px;
    background: #fff;
    border: 2px solid #cbd5e1;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,.15);
    overflow: hidden;
    z-index: 1090 !important;
}

    .kpi-search-dropdown.dropdown-up[b-8r6wqh2g6b] {
        top: auto;
        bottom: 110%;
    }

[dir="rtl"] .kpi-search-dropdown[b-8r6wqh2g6b] {
    left: auto;
    right: 0;
}

.kpi-search-list[b-8r6wqh2g6b] {
    max-height: 340px;
    overflow-y: auto;
}

.kpi-search-item[b-8r6wqh2g6b] {
    width: 100%;
    border: none;
    text-align: left;
    background: transparent;
    padding: .7rem 1rem;
    display: flex;
    gap: .8rem;
    cursor: pointer;
    font-size: .75rem;
    transition: all 0.15s ease;
    border-bottom: 1px solid #f1f5f9;
}

    .kpi-search-item:hover[b-8r6wqh2g6b] {
        background: linear-gradient(90deg, #f1f5f9 0%, #e0e7ff 100%);
    }

.kpi-icon-ref[b-8r6wqh2g6b] {
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.kpi-search-name[b-8r6wqh2g6b] {
    font-weight: 700;
    font-size: .8rem;
    color: #1e293b;
}

.kpi-search-desc[b-8r6wqh2g6b] {
    font-size: .65rem;
    line-height: .9rem;
    color: #64748b;
    margin-top: 2px;
}

.kpi-search-text[b-8r6wqh2g6b] {
    flex: 1;
    min-width: 0;
}

/* Buttons */
.btn-primary[b-8r6wqh2g6b] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    border-radius: 12px;
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
    transition: all 0.2s ease;
}

    .btn-primary:hover:not(:disabled)[b-8r6wqh2g6b] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
    }

.btn-outline-secondary[b-8r6wqh2g6b] {
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    font-weight: 600;
    transition: all 0.2s ease;
}

    .btn-outline-secondary:hover[b-8r6wqh2g6b] {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

/* Learn link */
.learn-link[b-8r6wqh2g6b] {
    font-size: .75rem;
    color: #6366f1;
    font-weight: 600;
    transition: all 0.2s ease;
}

    .learn-link:hover[b-8r6wqh2g6b] {
        color: #4f46e5;
        transform: translateX(2px);
    }

/* Accent color */
.text-accent[b-8r6wqh2g6b] {
    color: #6366f1;
}

/* RTL Support */
[dir="rtl"] .learn-link:hover[b-8r6wqh2g6b] {
    transform: translateX(-2px);
}

[dir="rtl"] .modal-header .btn-close[b-8r6wqh2g6b] {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .kpi-chip-name[b-8r6wqh2g6b] {
    margin-right: 0;
    margin-left: 10px;
}

/* Dark theme */
[data-theme="dark"] .icon-btn[b-8r6wqh2g6b] {
    background: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}

[data-theme="dark"] .formula-editor-visual[b-8r6wqh2g6b] {
    background: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}

[data-theme="dark"] .kpi-search-dropdown[b-8r6wqh2g6b] {
    background: #2d3748;
    border-color: #4a5568;
}

[data-theme="dark"] .kpi-search-item:hover[b-8r6wqh2g6b] {
    background: #4a5568;
}

[data-theme="dark"] .icon-dropdown-menu[b-8r6wqh2g6b] {
    background: #2d3748;
    border-color: #4a5568;
}

[data-theme="dark"] .icon-search-box[b-8r6wqh2g6b] {
    background: #374151;
    border-color: #4a5568;
}

[data-theme="dark"] .icon-option-inline[b-8r6wqh2g6b] {
    background: #374151;
    border-color: #4a5568;
    color: #d1d5db;
}

/* Modal body overflow fix */
.modal-body[b-8r6wqh2g6b] {
    overflow: visible !important;
}

/* Smooth scrollbar */
.icon-grid-dropdown[b-8r6wqh2g6b]::-webkit-scrollbar,
.kpi-search-list[b-8r6wqh2g6b]::-webkit-scrollbar {
    width: 8px;
}

.icon-grid-dropdown[b-8r6wqh2g6b]::-webkit-scrollbar-track,
.kpi-search-list[b-8r6wqh2g6b]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.icon-grid-dropdown[b-8r6wqh2g6b]::-webkit-scrollbar-thumb,
.kpi-search-list[b-8r6wqh2g6b]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

    .icon-grid-dropdown[b-8r6wqh2g6b]::-webkit-scrollbar-thumb:hover,
    .kpi-search-list[b-8r6wqh2g6b]::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
/* _content/alkpi/Components/Pages/Projects/KPIs/kpimanagement.razor.rz.scp.css */
/* ===== KPI MANAGEMENT INTERFACE (COMPACT) ===== */

.kpi-management-interface[b-d7xtc3n6yv] {
    max-width: 100%;
    padding: 0;
    width: 100%;
}

/* COMPACT Header and Actions */
.management-header[b-d7xtc3n6yv] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

[dir="rtl"] .management-header[b-d7xtc3n6yv] {
    flex-direction: row-reverse;
}

.header-actions[b-d7xtc3n6yv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

[dir="rtl"] .header-actions[b-d7xtc3n6yv] {
    flex-direction: row-reverse;
}

/* COMPACT Selection Actions */
.selection-actions[b-d7xtc3n6yv] {
    background: color-mix(in srgb, var(--clr-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--clr-accent) 15%, transparent);
    border-radius: var(--border-radius);
    padding: 0.4rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    animation: slideInLeft-b-d7xtc3n6yv 0.3s ease;
    font-size: 0.9rem; /* was 0.85rem */
}

[dir="rtl"] .selection-actions[b-d7xtc3n6yv] {
    flex-direction: row-reverse;
    animation: slideInRight-b-d7xtc3n6yv 0.3s ease;
}

/* COMPACT Filter Controls */
.filter-controls[b-d7xtc3n6yv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

[dir="rtl"] .filter-controls[b-d7xtc3n6yv] {
    flex-direction: row-reverse;
}

.frequency-filter[b-d7xtc3n6yv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

[dir="rtl"] .frequency-filter[b-d7xtc3n6yv] {
    flex-direction: row-reverse;
}

/* COMPACT Search Container */
.search-container[b-d7xtc3n6yv] {
    position: relative;
    min-width: 200px;
}

    .search-container .fa-search[b-d7xtc3n6yv] {
        position: absolute;
        top: 50%;
        left: 0.75rem;
        transform: translateY(-50%);
        color: var(--clr-text-muted);
        z-index: 2;
        font-size: 0.8rem;
    }

    .search-container input[b-d7xtc3n6yv] {
        padding-left: 2.2rem;
        border-radius: 20px;
        border: 1px solid var(--clr-border);
        transition: all 0.3s ease;
        background: var(--clr-surface);
        color: var(--clr-text);
        font-size: 0.95rem; /* was 0.85rem */
        height: 38px;       /* a touch taller for the bigger font */
    }

        .search-container input:focus[b-d7xtc3n6yv] {
            border-color: var(--clr-accent);
            box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--clr-accent) 20%, transparent);
        }

[dir="rtl"] .search-container .fa-search[b-d7xtc3n6yv] {
    left: auto;
    right: 0.75rem;
}

[dir="rtl"] .search-container input[b-d7xtc3n6yv] {
    padding-left: 0.75rem;
    padding-right: 2.2rem;
    text-align: right;
}

/* COMPACT KPI Table */
.kpi-table[b-d7xtc3n6yv] {
    font-size: 0.9rem; /* was 0.8rem */
    background: var(--clr-surface);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

    .kpi-table th[b-d7xtc3n6yv] {
        background: color-mix(in srgb, var(--clr-accent) 4%, var(--clr-surface));
        border-bottom: 1px solid var(--clr-border);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        font-size: 0.8rem; /* was 0.7rem */
        padding: 0.85rem 0.6rem;
        white-space: nowrap;
        color: var(--clr-text);
    }

    .kpi-table td[b-d7xtc3n6yv] {
        padding: 0.75rem 0.5rem;
        border-bottom: 1px solid var(--clr-border-light);
        vertical-align: middle;
        color: var(--clr-text);
    }

    .kpi-table tbody tr[b-d7xtc3n6yv] {
        transition: var(--transition);
        cursor: pointer;
    }

        .kpi-table tbody tr:hover[b-d7xtc3n6yv] {
            background: color-mix(in srgb, var(--clr-accent) 2%, transparent);
        }

        .kpi-table tbody tr.selected[b-d7xtc3n6yv] {
            background: color-mix(in srgb, var(--clr-accent) 6%, transparent);
            border-left: 2px solid var(--clr-accent);
        }

[dir="rtl"] .kpi-table[b-d7xtc3n6yv] {
    direction: rtl;
}

    [dir="rtl"] .kpi-table th[b-d7xtc3n6yv],
    [dir="rtl"] .kpi-table td[b-d7xtc3n6yv] {
        text-align: right;
    }

        [dir="rtl"] .kpi-table th:first-child[b-d7xtc3n6yv],
        [dir="rtl"] .kpi-table td:first-child[b-d7xtc3n6yv],
        [dir="rtl"] .kpi-table th:last-child[b-d7xtc3n6yv],
        [dir="rtl"] .kpi-table td:last-child[b-d7xtc3n6yv] {
            text-align: center;
        }

    [dir="rtl"] .kpi-table tbody tr.selected[b-d7xtc3n6yv] {
        border-left: none;
        border-right: 2px solid var(--clr-accent);
    }

/* COMPACT KPI Content */
.kpi-content[b-d7xtc3n6yv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[dir="rtl"] .kpi-content[b-d7xtc3n6yv] {
    flex-direction: row-reverse;
    text-align: right;
}

.kpi-icon-small[b-d7xtc3n6yv] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--clr-accent) 8%, transparent);
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    flex-shrink: 0;
    color: var(--clr-accent);
}

.kpi-name[b-d7xtc3n6yv] {
    font-weight: 600;
    color: var(--clr-text);
    margin-bottom: 0.15rem;
    line-height: 1.3;
    cursor: pointer;
    transition: color 0.2s ease;
    font-size: 0.95rem; /* was 0.85rem */
}

    .kpi-name:hover[b-d7xtc3n6yv] {
        color: var(--clr-accent);
    }

.kpi-description[b-d7xtc3n6yv] {
    color: var(--clr-text-secondary);
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0;
}

/* COMPACT Frequency Badges */
.frequency-badge[b-d7xtc3n6yv] {
    padding: 0.2rem 0.6rem;
    border-radius: 16px;
    font-size: 0.7rem; /* was 0.65rem */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    direction: ltr;
    display: inline-block;
}

    .frequency-badge.frequency-daily[b-d7xtc3n6yv] {
        background: linear-gradient(135deg, #22c55e, #16a34a);
        color: white;
    }

    .frequency-badge.frequency-weekly[b-d7xtc3n6yv] {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: white;
    }

    .frequency-badge.frequency-monthly[b-d7xtc3n6yv] {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: white;
    }

    .frequency-badge.frequency-quarterly[b-d7xtc3n6yv] {
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        color: white;
    }

    .frequency-badge.frequency-yearly[b-d7xtc3n6yv] {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: white;
    }

/* COMPACT Direction Indicators */
.direction-indicator[b-d7xtc3n6yv] {
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem; /* was 0.7rem */
    font-weight: 500;
    padding: 0.2rem 0.4rem;
    border-radius: 12px;
    background: var(--clr-surface-hover);
}

[dir="rtl"] .direction-indicator[b-d7xtc3n6yv] {
    flex-direction: row-reverse;
}

.direction-indicator.higher-better[b-d7xtc3n6yv] {
    color: var(--clr-success);
    background: color-mix(in srgb, var(--clr-success) 8%, transparent);
}

.direction-indicator.lower-better[b-d7xtc3n6yv] {
    color: var(--clr-info);
    background: color-mix(in srgb, var(--clr-info) 8%, transparent);
}

.direction-indicator.target-exact[b-d7xtc3n6yv] {
    color: var(--clr-warning);
    background: color-mix(in srgb, var(--clr-warning) 8%, transparent);
}

/* COMPACT Action Buttons */
.btn-group-sm .btn[b-d7xtc3n6yv] {
    padding: 0.25rem 0.4rem;
    font-size: 0.8rem; /* was 0.7rem */
    border-radius: var(--border-radius-sm);
}

    .btn-group-sm .btn i[b-d7xtc3n6yv] {
        font-size: 0.65rem;
    }

[dir="rtl"] .btn-group[b-d7xtc3n6yv] {
    flex-direction: row-reverse;
}

/* COMPACT Form Elements */
.form-check-input[b-d7xtc3n6yv] {
    width: 16px;
    height: 16px;
}

/* COMPACT Responsive Design */
@media (max-width: 768px) {
    .kpi-management-interface .d-flex[b-d7xtc3n6yv] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .header-actions[b-d7xtc3n6yv] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .kpi-table[b-d7xtc3n6yv] {
        font-size: 0.75rem;
    }

        .kpi-table th[b-d7xtc3n6yv],
        .kpi-table td[b-d7xtc3n6yv] {
            padding: 0.6rem 0.4rem;
        }
}

/* Animations */
@keyframes slideInLeft-b-d7xtc3n6yv {
    from {
        opacity: 0;
        transform: translateX(-15px);
    }

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

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

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* _content/alkpi/Components/Pages/Projects/projectcard.razor.rz.scp.css */
.project-card[b-3k7r03dza6] {
    transition: all 0.2s ease-in-out;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}

    .project-card:hover[b-3k7r03dza6] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-color: var(--bs-primary);
    }

[data-theme="dark"] .project-card:hover[b-3k7r03dza6] {
    box-shadow: 0 4px 12px rgba(0, 173, 181, 0.2);
}

.project-icon[b-3k7r03dza6] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.stat-item[b-3k7r03dza6] {
    padding: 0.5rem 0;
}

.stat-number[b-3k7r03dza6] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-body-color);
    line-height: 1;
}

.stat-label[b-3k7r03dza6] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

.member-avatars[b-3k7r03dza6] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.member-avatar[b-3k7r03dza6] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    border: 2px solid var(--bs-body-bg);
    position: relative;
    cursor: pointer;
}

    .member-avatar:not(:first-child)[b-3k7r03dza6] {
        margin-left: -8px;
    }

    .member-avatar.more-members[b-3k7r03dza6] {
        background: var(--bs-secondary);
        font-size: 0.6rem;
    }

    .member-avatar:hover[b-3k7r03dza6] {
        z-index: 10;
        transform: scale(1.1);
    }

/* Role badge positioning */
.position-absolute .badge[b-3k7r03dza6] {
    font-size: 0.6rem;
    padding: 0.25rem 0.5rem;
}

/* Dropdown improvements */
.dropdown-toggle[b-3k7r03dza6]::after {
    display: none;
}

.dropdown-menu[b-3k7r03dza6] {
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
}

[data-theme="dark"] .dropdown-menu[b-3k7r03dza6] {
    background-color: var(--bs-dark);
    border-color: var(--bs-border-color);
}

.dropdown-item[b-3k7r03dza6] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

    .dropdown-item:hover[b-3k7r03dza6] {
        background-color: var(--bs-primary);
        color: white;
    }

    .dropdown-item.text-danger:hover[b-3k7r03dza6] {
        background-color: var(--bs-danger);
        color: white;
    }

/* Animation for loading states */
@keyframes fadeIn-b-3k7r03dza6 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.project-card[b-3k7r03dza6] {
    animation: fadeIn-b-3k7r03dza6 0.3s ease-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .stat-number[b-3k7r03dza6] {
        font-size: 1rem;
    }

    .stat-label[b-3k7r03dza6] {
        font-size: 0.7rem;
    }

    .member-avatar[b-3k7r03dza6] {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }

    .project-icon[b-3k7r03dza6] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}
/* _content/alkpi/Components/Pages/Projects/projects.razor.rz.scp.css */
/* ===== PROJECTS PAGE STYLES ===== */

/* Page Header */
.projects-page .page-header[b-iq1bspnyqi] {
    margin-bottom: 2rem;
}

.projects-page .page-title[b-iq1bspnyqi] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--clr-text);
    display: flex;
    align-items: center;
}

.projects-page .page-subtitle[b-iq1bspnyqi] {
    font-size: 1rem;
    color: var(--clr-text-muted);
}

.projects-page .create-btn[b-iq1bspnyqi] {
    background: var(--gradient-primary);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

    .projects-page .create-btn:hover[b-iq1bspnyqi] {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

/* Stats Cards */
.stat-card[b-iq1bspnyqi] {
    background: var(--clr-surface);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--transition);
    border: 1px solid var(--clr-border);
}

    .stat-card:hover[b-iq1bspnyqi] {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
        border-color: var(--clr-accent);
    }

.stat-icon[b-iq1bspnyqi] {
    width: 50px;
    height: 50px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

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

.stat-value[b-iq1bspnyqi] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1;
}

.stat-label[b-iq1bspnyqi] {
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    margin-top: 0.25rem;
}

/* ===== MODERN PROJECT CARD ===== */
.modern-project-card[b-iq1bspnyqi] {
    position: relative;
    background: var(--clr-surface);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
    box-shadow: var(--shadow-sm);
}

    /* Color accent border using CSS variable */
    .modern-project-card[b-iq1bspnyqi]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--project-color);
        transition: height 0.3s ease;
    }

    .modern-project-card:hover[b-iq1bspnyqi]::before {
        height: 6px;
    }

    .modern-project-card:hover[b-iq1bspnyqi] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: var(--project-color);
    }

/* Settings Menu - Positioned absolutely to not interfere with card clicks */
.project-settings-menu[b-iq1bspnyqi] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

.btn-settings[b-iq1bspnyqi] {
    background: var(--clr-surface-hover);
    border: 1px solid var(--clr-border);
    color: var(--clr-text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: var(--transition);
    opacity: 0.7;
}

    .btn-settings:hover[b-iq1bspnyqi] {
        background: var(--clr-accent);
        color: white;
        border-color: var(--clr-accent);
        opacity: 1;
        transform: rotate(90deg);
    }

.modern-project-card:hover .btn-settings[b-iq1bspnyqi] {
    opacity: 1;
}

/* Card Body */
.modern-project-card .card-body[b-iq1bspnyqi] {
    padding: 2rem 1.5rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Centered Project Header */
.project-header-centered[b-iq1bspnyqi] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.project-icon-large[b-iq1bspnyqi] {
    width: 80px;
    height: 80px;
    border-radius: var(--border-radius);
    background: linear-gradient(135deg, var(--project-color), color-mix(in srgb, var(--project-color) 70%, black 30%));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transition: var(--transition);
}

.modern-project-card:hover .project-icon-large[b-iq1bspnyqi] {
    transform: scale(1.05);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.project-title-centered[b-iq1bspnyqi] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-text);
    margin: 0;
    line-height: 1.4;
}

.project-description-centered[b-iq1bspnyqi] {
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    margin: 0.5rem 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

/* Divider */
.project-divider[b-iq1bspnyqi] {
    height: 1px;
    background: var(--clr-border);
    margin: 1rem 0 1.5rem;
}

/* KPI Stats Grid - Enhanced */
.kpi-stats-grid[b-iq1bspnyqi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.kpi-stat[b-iq1bspnyqi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--clr-primary);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--clr-border);
    transition: var(--transition);
}

    .kpi-stat:hover[b-iq1bspnyqi] {
        background: var(--clr-surface-hover);
        border-color: var(--clr-accent);
        transform: translateX(3px);
    }

.kpi-stat-icon[b-iq1bspnyqi] {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-sm);
    background: var(--clr-accent-light);
    color: var(--clr-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.kpi-stat-value[b-iq1bspnyqi] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1;
}

.kpi-stat-label[b-iq1bspnyqi] {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Enhanced Footer */
.card-footer-enhanced[b-iq1bspnyqi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    margin-top: auto;
    border-top: 1px solid var(--clr-border);
}

.footer-left[b-iq1bspnyqi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.footer-right[b-iq1bspnyqi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    white-space: nowrap;
}

/* AI Badge with Members */
.ai-badge-wrapper[b-iq1bspnyqi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.badge-ai-enabled[b-iq1bspnyqi] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: var(--clr-success);
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-ai-disabled[b-iq1bspnyqi] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: var(--clr-text-muted);
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Member Avatars - Inline beside AI badge */
.member-avatars-inline[b-iq1bspnyqi] {
    display: flex;
    align-items: center;
    margin-left: 0.25rem;
}

.member-avatar[b-iq1bspnyqi] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--clr-surface);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-accent);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: -8px;
    transition: var(--transition);
    position: relative;
}

    .member-avatar:first-child[b-iq1bspnyqi] {
        margin-left: 0;
    }

    .member-avatar:hover[b-iq1bspnyqi] {
        transform: translateY(-2px) scale(1.1);
        z-index: 5;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

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

.member-initials[b-iq1bspnyqi] {
    text-transform: uppercase;
}

.member-count[b-iq1bspnyqi] {
    background: var(--clr-text-muted);
    font-size: 0.65rem;
}

/* Hover Arrow - Only visible on hover, doesn't block clicks */
.card-hover-arrow[b-iq1bspnyqi] {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--clr-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.modern-project-card:hover .card-hover-arrow[b-iq1bspnyqi] {
    opacity: 1;
    transform: scale(1);
}

/* Empty State */
.empty-state[b-iq1bspnyqi] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--clr-surface);
    border-radius: var(--border-radius-lg);
    border: 2px dashed var(--clr-border);
}

.empty-icon-wrapper[b-iq1bspnyqi] {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--clr-accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--clr-accent);
}

.empty-state h3[b-iq1bspnyqi] {
    color: var(--clr-text);
    font-weight: 700;
    margin-bottom: 1rem;
}

.empty-state p[b-iq1bspnyqi] {
    color: var(--clr-text-muted);
    font-size: 1.1rem;
    max-width: 500px;
    margin: 0 auto 2rem;
}

/* Loading State */
.loading-state[b-iq1bspnyqi] {
    padding: 4rem 0;
}

    .loading-state .spinner-border[b-iq1bspnyqi] {
        color: var(--clr-accent);
    }

/* Modal Enhancements */
.modal-content[b-iq1bspnyqi] {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
}

.modal-icon-wrapper[b-iq1bspnyqi] {
    width: 50px;
    height: 50px;
    border-radius: var(--border-radius);
    background: var(--clr-accent-light);
    color: var(--clr-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.form-section[b-iq1bspnyqi] {
    background: var(--clr-primary);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--clr-border);
}

.form-section-header[b-iq1bspnyqi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--clr-text);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.form-section-body[b-iq1bspnyqi] {
    padding: 0;
}

.color-picker-wrapper[b-iq1bspnyqi] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.color-input[b-iq1bspnyqi] {
    width: 60px !important;
    height: 45px !important;
    padding: 0.25rem !important;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
}

.color-preview[b-iq1bspnyqi] {
    width: 45px;
    height: 45px;
    border-radius: var(--border-radius-sm);
    border: 2px solid var(--clr-border);
    display: inline-block;
}

/* Form Controls */
.form-control[b-iq1bspnyqi],
.form-select[b-iq1bspnyqi] {
    background: var(--clr-secondary);
    border: 1px solid var(--clr-border);
    color: var(--clr-text);
    transition: var(--transition);
}

    .form-control:focus[b-iq1bspnyqi],
    .form-select:focus[b-iq1bspnyqi] {
        background: var(--clr-secondary);
        border-color: var(--clr-accent);
        box-shadow: 0 0 0 0.2rem var(--clr-accent-light);
        color: var(--clr-text);
    }

/* Dropdown Menu */
.dropdown-menu[b-iq1bspnyqi] {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-lg);
    border-radius: var(--border-radius);
    padding: 0.5rem;
}

.dropdown-item[b-iq1bspnyqi] {
    color: var(--clr-text);
    border-radius: var(--border-radius-sm);
    padding: 0.5rem 1rem;
    transition: var(--transition);
}

    .dropdown-item:hover[b-iq1bspnyqi] {
        background: var(--clr-accent-light);
        color: var(--clr-accent);
    }

    .dropdown-item.text-danger:hover[b-iq1bspnyqi] {
        background: rgba(239, 68, 68, 0.1);
        color: var(--clr-danger);
    }

.dropdown-divider[b-iq1bspnyqi] {
    border-color: var(--clr-border);
}

/* Buttons */
.btn-primary[b-iq1bspnyqi] {
    background: var(--clr-accent);
    border-color: var(--clr-accent);
    color: white;
}

    .btn-primary:hover[b-iq1bspnyqi] {
        background: var(--clr-accent-hover);
        border-color: var(--clr-accent-hover);
    }

.btn-light[b-iq1bspnyqi] {
    background: var(--clr-secondary);
    border-color: var(--clr-border);
    color: var(--clr-text);
}

    .btn-light:hover[b-iq1bspnyqi] {
        background: var(--clr-surface-hover);
        border-color: var(--clr-accent);
        color: var(--clr-text);
    }

/* Dark theme placeholder colors - MUCH LIGHTER/WHITER */
:root[data-theme="dark"] .form-control[b-iq1bspnyqi]::placeholder,
:root[data-theme="dark"] input[b-iq1bspnyqi]::placeholder,
:root[data-theme="dark"] textarea[b-iq1bspnyqi]::placeholder,
:root[data-theme="dark"] select[b-iq1bspnyqi]::placeholder {
    color: #d1d5db !important;
    opacity: 0.85 !important;
}

/* Light theme placeholder colors */
:root[data-theme="light"] .form-control[b-iq1bspnyqi]::placeholder,
:root[data-theme="light"] input[b-iq1bspnyqi]::placeholder,
:root[data-theme="light"] textarea[b-iq1bspnyqi]::placeholder,
:root[data-theme="light"] select[b-iq1bspnyqi]::placeholder {
    color: #718096 !important;
    opacity: 0.7 !important;
}

/* RTL Support */
[dir="rtl"] .form-control[b-iq1bspnyqi]::placeholder,
[dir="rtl"] input[b-iq1bspnyqi]::placeholder,
[dir="rtl"] textarea[b-iq1bspnyqi]::placeholder {
    text-align: right !important;
}

[dir="rtl"] .member-avatar[b-iq1bspnyqi] {
    margin-left: 0;
    margin-right: -8px;
}

    [dir="rtl"] .member-avatar:first-child[b-iq1bspnyqi] {
        margin-right: 0;
    }

[dir="rtl"] .card-hover-arrow[b-iq1bspnyqi] {
    right: auto;
    left: 1rem;
}

[dir="rtl"] .project-settings-menu[b-iq1bspnyqi] {
    right: auto;
    left: 1rem;
}

[dir="rtl"] .kpi-stat:hover[b-iq1bspnyqi] {
    transform: translateX(-3px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .project-icon-large[b-iq1bspnyqi] {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .project-title-centered[b-iq1bspnyqi] {
        font-size: 1.1rem;
    }

    .modern-project-card .card-body[b-iq1bspnyqi] {
        padding: 1.5rem 1rem 1rem;
    }

    .kpi-stats-grid[b-iq1bspnyqi] {
        gap: 0.75rem;
    }

    .kpi-stat[b-iq1bspnyqi] {
        padding: 0.5rem;
    }

    .kpi-stat-value[b-iq1bspnyqi] {
        font-size: 1.25rem;
    }

    .member-avatar[b-iq1bspnyqi] {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }
}
/* _content/alkpi/Components/Pages/Projects/projectsettings.razor.rz.scp.css */
/* ========================================
   PROJECT SETTINGS - MODERN UI STYLES
   ======================================== */

/* Settings Icon Animation */
.settings-icon-wrapper[b-vaan6pmmr4] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

    .settings-icon-wrapper i[b-vaan6pmmr4] {
        font-size: 1.5rem;
        color: white;
        animation: rotate-b-vaan6pmmr4 8s linear infinite;
    }

@keyframes rotate-b-vaan6pmmr4 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Modal Enhancements */
.modal-content[b-vaan6pmmr4] {
    border-radius: 16px;
    background: var(--bs-body-bg);
}

[data-bs-theme="dark"] .modal-content[b-vaan6pmmr4] {
    background: #1a1d29;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Settings Cards */
.settings-card[b-vaan6pmmr4] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

[data-bs-theme="dark"] .settings-card[b-vaan6pmmr4] {
    background: #242837;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.settings-card:hover[b-vaan6pmmr4] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

[data-bs-theme="dark"] .settings-card:hover[b-vaan6pmmr4] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.settings-card-header[b-vaan6pmmr4] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[data-bs-theme="dark"] .settings-card-header[b-vaan6pmmr4] {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    color: #e8eaed;
}

.settings-card-body[b-vaan6pmmr4] {
    padding: 1.5rem;
}

/* Color Picker Wrapper */
.color-picker-wrapper[b-vaan6pmmr4] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.color-input[b-vaan6pmmr4] {
    width: 80px;
    height: 45px;
    border-radius: 8px;
    border: 2px solid var(--bs-border-color);
    cursor: pointer;
    padding: 0.25rem;
}

[data-bs-theme="dark"] .color-input[b-vaan6pmmr4] {
    border-color: rgba(255, 255, 255, 0.15);
    background: #1a1d29;
}

.color-preview[b-vaan6pmmr4] {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    border: 2px solid var(--bs-border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .color-preview[b-vaan6pmmr4] {
    border-color: rgba(255, 255, 255, 0.15);
}

/* Category Badges */
.category-badges[b-vaan6pmmr4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.category-badge[b-vaan6pmmr4] {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

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

.category-financial[b-vaan6pmmr4] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.category-operational[b-vaan6pmmr4] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.category-customer[b-vaan6pmmr4] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
}

.category-growth[b-vaan6pmmr4] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.category-quality[b-vaan6pmmr4] {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    color: white;
}

.category-efficiency[b-vaan6pmmr4] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
}

/* AI Status Badge */
.ai-status-badge[b-vaan6pmmr4] {
    display: flex;
    align-items: center;
}

    .ai-status-badge .badge[b-vaan6pmmr4] {
        padding: 0.5rem 0.875rem;
        font-size: 0.813rem;
        font-weight: 600;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
    }

.bg-success-subtle[b-vaan6pmmr4] {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

[data-bs-theme="dark"] .bg-success-subtle[b-vaan6pmmr4] {
    background-color: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.4);
}

.text-success[b-vaan6pmmr4] {
    color: #22c55e !important;
}

[data-bs-theme="dark"] .text-success[b-vaan6pmmr4] {
    color: #4ade80 !important;
}

.bg-danger-subtle[b-vaan6pmmr4] {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

[data-bs-theme="dark"] .bg-danger-subtle[b-vaan6pmmr4] {
    background-color: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.4);
}

.text-danger[b-vaan6pmmr4] {
    color: #ef4444 !important;
}

[data-bs-theme="dark"] .text-danger[b-vaan6pmmr4] {
    color: #f87171 !important;
}

.refresh-btn[b-vaan6pmmr4] {
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

    .refresh-btn:hover[b-vaan6pmmr4] {
        transform: rotate(180deg);
    }

/* AI Features Grid */
.ai-features-grid[b-vaan6pmmr4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .ai-features-grid.disabled[b-vaan6pmmr4] {
        opacity: 0.5;
        pointer-events: none;
    }

.ai-feature-item[b-vaan6pmmr4] {
    padding: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    transition: all 0.3s ease;
}

[data-bs-theme="dark"] .ai-feature-item[b-vaan6pmmr4] {
    background: #1a1d29;
    border-color: rgba(255, 255, 255, 0.08);
}

.ai-feature-item:hover[b-vaan6pmmr4] {
    border-color: var(--bs-primary);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    transform: translateX(4px);
}

[data-bs-theme="dark"] .ai-feature-item:hover[b-vaan6pmmr4] {
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
}

.feature-icon[b-vaan6pmmr4] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.25rem;
}

.bg-primary-subtle[b-vaan6pmmr4] {
    background-color: rgba(99, 102, 241, 0.15);
}

[data-bs-theme="dark"] .bg-primary-subtle[b-vaan6pmmr4] {
    background-color: rgba(99, 102, 241, 0.25);
}

.bg-success-subtle[b-vaan6pmmr4] {
    background-color: rgba(34, 197, 94, 0.15);
}

[data-bs-theme="dark"] .bg-success-subtle[b-vaan6pmmr4] {
    background-color: rgba(34, 197, 94, 0.25);
}

.bg-info-subtle[b-vaan6pmmr4] {
    background-color: rgba(6, 182, 212, 0.15);
}

[data-bs-theme="dark"] .bg-info-subtle[b-vaan6pmmr4] {
    background-color: rgba(6, 182, 212, 0.25);
}

.bg-warning-subtle[b-vaan6pmmr4] {
    background-color: rgba(245, 158, 11, 0.15);
}

[data-bs-theme="dark"] .bg-warning-subtle[b-vaan6pmmr4] {
    background-color: rgba(245, 158, 11, 0.25);
}

.text-purple[b-vaan6pmmr4] {
    color: #8b5cf6 !important;
}

/* Form Controls - Dark Mode Enhancement */
.form-control[b-vaan6pmmr4],
.form-select[b-vaan6pmmr4] {
    border-radius: 8px;
    border: 1px solid var(--bs-border-color);
    transition: all 0.3s ease;
}

[data-bs-theme="dark"] .form-control[b-vaan6pmmr4],
[data-bs-theme="dark"] .form-select[b-vaan6pmmr4] {
    background-color: #1a1d29;
    border-color: rgba(255, 255, 255, 0.15);
    color: #e8eaed;
}

    [data-bs-theme="dark"] .form-control:focus[b-vaan6pmmr4],
    [data-bs-theme="dark"] .form-select:focus[b-vaan6pmmr4] {
        background-color: #242837;
        border-color: #6366f1;
        color: #e8eaed;
        box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
    }

.form-control[b-vaan6pmmr4]::placeholder {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .form-control[b-vaan6pmmr4]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Form Labels - Better Visibility */
.form-label[b-vaan6pmmr4] {
    color: var(--bs-body-color);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

[data-bs-theme="dark"] .form-label[b-vaan6pmmr4] {
    color: #e8eaed;
}

/* Form Switch - Enhanced for Dark Mode */
.form-check-input[b-vaan6pmmr4] {
    width: 2.5rem;
    height: 1.25rem;
    border-radius: 2rem;
    border: 2px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    cursor: pointer;
    transition: all 0.3s ease;
}

[data-bs-theme="dark"] .form-check-input[b-vaan6pmmr4] {
    background-color: #1a1d29;
    border-color: rgba(255, 255, 255, 0.2);
}

.form-check-input:checked[b-vaan6pmmr4] {
    background-color: #6366f1;
    border-color: #6366f1;
    box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.15);
}

[data-bs-theme="dark"] .form-check-input:checked[b-vaan6pmmr4] {
    box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
}

.form-check-input:disabled[b-vaan6pmmr4] {
    opacity: 0.4;
    cursor: not-allowed;
}

.form-check-label[b-vaan6pmmr4] {
    cursor: pointer;
    width: 100%;
}

/* Text Colors for Dark Mode */
[data-bs-theme="dark"] .text-muted[b-vaan6pmmr4] {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-bs-theme="dark"] .text-primary[b-vaan6pmmr4] {
    color: #818cf8 !important;
}

[data-bs-theme="dark"] .text-info[b-vaan6pmmr4] {
    color: #22d3ee !important;
}

[data-bs-theme="dark"] .text-warning[b-vaan6pmmr4] {
    color: #fbbf24 !important;
}

/* Alerts - Dark Mode */
.alert[b-vaan6pmmr4] {
    border-radius: 10px;
    border: 1px solid transparent;
}

[data-bs-theme="dark"] .alert-info[b-vaan6pmmr4] {
    background-color: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
}

[data-bs-theme="dark"] .alert-warning[b-vaan6pmmr4] {
    background-color: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

/* Input Group */
.input-group-text[b-vaan6pmmr4] {
    border-radius: 0 8px 8px 0;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .input-group-text[b-vaan6pmmr4] {
    background-color: #1a1d29;
    border-color: rgba(255, 255, 255, 0.15);
    color: #e8eaed;
}

/* Advanced Settings Card Animation */
.advanced-settings-card[b-vaan6pmmr4] {
    animation: slideDown-b-vaan6pmmr4 0.3s ease-out;
}

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

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

/* Buttons Enhancement */
.btn[b-vaan6pmmr4] {
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary[b-vaan6pmmr4] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

    .btn-primary:hover[b-vaan6pmmr4] {
        background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
        box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
        transform: translateY(-2px);
    }

[data-bs-theme="dark"] .btn-primary[b-vaan6pmmr4] {
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.btn-light[b-vaan6pmmr4] {
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .btn-light[b-vaan6pmmr4] {
    background-color: #242837;
    border-color: rgba(255, 255, 255, 0.15);
    color: #e8eaed;
}

    [data-bs-theme="dark"] .btn-light:hover[b-vaan6pmmr4] {
        background-color: #2d3142;
        border-color: rgba(255, 255, 255, 0.25);
        color: #fff;
    }

.btn-outline-secondary[b-vaan6pmmr4] {
    border-radius: 6px;
}

[data-bs-theme="dark"] .btn-outline-secondary[b-vaan6pmmr4] {
    border-color: rgba(255, 255, 255, 0.15);
    color: #e8eaed;
}

    [data-bs-theme="dark"] .btn-outline-secondary:hover[b-vaan6pmmr4] {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.25);
        color: #fff;
    }

/* Close Button */
.btn-close[b-vaan6pmmr4] {
    opacity: 0.6;
}

[data-bs-theme="dark"] .btn-close[b-vaan6pmmr4] {
    filter: invert(1);
    opacity: 0.6;
}

.btn-close:hover[b-vaan6pmmr4] {
    opacity: 1;
}

/* Spinner */
.spinner-border[b-vaan6pmmr4] {
    color: var(--bs-primary);
}

/* Modal Footer */
.modal-footer[b-vaan6pmmr4] {
    padding: 1.5rem 0;
}

/* Responsive Design */
@media (max-width: 991px) {
    .settings-card[b-vaan6pmmr4] {
        margin-bottom: 1rem;
    }

    .category-badges[b-vaan6pmmr4] {
        gap: 0.5rem;
    }

    .category-badge[b-vaan6pmmr4] {
        font-size: 0.813rem;
        padding: 0.5rem 0.75rem;
    }
}

@media (max-width: 575px) {
    .settings-icon-wrapper[b-vaan6pmmr4] {
        width: 40px;
        height: 40px;
    }

        .settings-icon-wrapper i[b-vaan6pmmr4] {
            font-size: 1.25rem;
        }

    .ai-feature-item .feature-icon[b-vaan6pmmr4] {
        width: 35px;
        height: 35px;
        font-size: 1.1rem;
    }
}

/* Smooth Transitions */
*[b-vaan6pmmr4] {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
/* _content/alkpi/Components/Pages/Projects/projectworkspace.razor.rz.scp.css */
/* ===== PROJECT WORKSPACE - COMPLETE REWRITE ===== */
.project-workspace[b-i3y25ahq4b] {
    min-height: 100vh;
    background: var(--clr-primary);
    --project-color: var(--clr-accent);
}

/* ===== LOADING STATE ===== */
.workspace-loading[b-i3y25ahq4b] {
    position: fixed;
    inset: 0;
    background: var(--clr-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-content[b-i3y25ahq4b] {
    text-align: center;
}

.spinner[b-i3y25ahq4b] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--clr-border);
    border-top: 3px solid var(--clr-accent);
    border-radius: 50%;
    animation: spin-b-i3y25ahq4b 1s linear infinite;
    margin: 0 auto 1rem;
}

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

.loading-text[b-i3y25ahq4b] {
    color: var(--clr-text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
}

/* ===== ERROR STATE ===== */
.error-container[b-i3y25ahq4b] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.error-card[b-i3y25ahq4b] {
    background: var(--clr-surface);
    border-radius: var(--border-radius-lg);
    padding: 3rem 2rem;
    text-align: center;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--clr-border-light);
}

.error-icon[b-i3y25ahq4b] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 1.5rem;
    color: white;
}

    .error-icon.not-found[b-i3y25ahq4b] {
        background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
        color: #d63031;
    }

    .error-icon.access-denied[b-i3y25ahq4b] {
        background: linear-gradient(135deg, #ff7675, #fd79a8);
    }

.error-title[b-i3y25ahq4b] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--clr-text);
    margin-bottom: 1rem;
}

.error-message[b-i3y25ahq4b] {
    color: var(--clr-text-secondary);
    margin-bottom: 2rem;
    line-height: 1.5;
}

.error-card .btn[b-i3y25ahq4b] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ===== PROJECT HEADER - REDESIGNED FOR MOBILE ===== */
.project-header[b-i3y25ahq4b] {
    position: relative;
    background: var(--project-color);
    padding: 0.75rem 0;
    overflow: hidden;
}

.header-bg[b-i3y25ahq4b] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--project-color), color-mix(in srgb, var(--project-color) 80%, #000));
    opacity: 0.95;
}

    .header-bg[b-i3y25ahq4b]::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 25% 75%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
        background-size: 20px 20px;
        opacity: 0.3;
    }

/* MAIN HEADER LAYOUT */
.header-content[b-i3y25ahq4b] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "nav project actions";
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
}

/* RTL GRID LAYOUT */
[dir="rtl"] .header-content[b-i3y25ahq4b] {
    grid-template-areas: "actions project nav";
}

/* ===== NAVIGATION BUTTONS CONTAINER ===== */
.header-nav-buttons[b-i3y25ahq4b] {
    grid-area: nav;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[dir="rtl"] .header-nav-buttons[b-i3y25ahq4b] {
    flex-direction: row-reverse;
}

.back-btn[b-i3y25ahq4b], .settings-btn[b-i3y25ahq4b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: var(--transition);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.9rem;
}

    .back-btn:hover[b-i3y25ahq4b], .settings-btn:hover[b-i3y25ahq4b] {
        background: rgba(255, 255, 255, 0.25);
        color: white;
        transform: translateY(-1px);
        border-color: rgba(255, 255, 255, 0.3);
    }

    .back-btn:focus[b-i3y25ahq4b], .settings-btn:focus[b-i3y25ahq4b] {
        outline: 2px solid rgba(255, 255, 255, 0.6);
        outline-offset: 2px;
    }

/* Enhanced settings button styling */
.settings-btn[b-i3y25ahq4b] {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

    .settings-btn:hover[b-i3y25ahq4b] {
        background: rgba(255, 255, 255, 0.22);
        border-color: rgba(255, 255, 255, 0.35);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .settings-btn i[b-i3y25ahq4b] {
        font-size: 0.85rem;
        opacity: 0.95;
    }

    .settings-btn:hover i[b-i3y25ahq4b] {
        opacity: 1;
        transform: rotate(45deg);
        transition: transform 0.3s ease;
    }

.project-info[b-i3y25ahq4b] {
    grid-area: project;
    min-width: 0;
}

.project-main[b-i3y25ahq4b] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
}

[dir="rtl"] .project-main[b-i3y25ahq4b] {
    flex-direction: row-reverse;
}

/* FIXED PROJECT AVATAR */
.project-avatar[b-i3y25ahq4b] {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    line-height: 1;
    font-family: inherit;
    font-variant: small-caps;
    letter-spacing: -0.5px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.project-details[b-i3y25ahq4b] {
    flex: 1;
    min-width: 0;
    text-align: center;
}

[dir="rtl"] .project-details[b-i3y25ahq4b] {
    text-align: center;
}

.project-title[b-i3y25ahq4b] {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-description[b-i3y25ahq4b] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.3;
    display: none;
}

.project-meta[b-i3y25ahq4b] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

[dir="rtl"] .project-meta[b-i3y25ahq4b] {
    flex-direction: row-reverse;
}

.meta-item[b-i3y25ahq4b] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
}

[dir="rtl"] .meta-item[b-i3y25ahq4b] {
    flex-direction: row-reverse;
}

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

/* ===== COMPACT STATS ===== */
.stats[b-i3y25ahq4b] {
    display: flex;
    gap: 0.5rem;
}

.stat-item[b-i3y25ahq4b] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.4rem 0.6rem;
    border-radius: var(--border-radius-sm);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: var(--transition);
    min-width: 0;
}

[dir="rtl"] .stat-item[b-i3y25ahq4b] {
    flex-direction: row-reverse;
}

.stat-item:hover[b-i3y25ahq4b] {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.stat-icon[b-i3y25ahq4b] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    flex-shrink: 0;
}

    .stat-icon.kpis[b-i3y25ahq4b] {
        background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    }

    .stat-icon.members[b-i3y25ahq4b] {
        background: linear-gradient(135deg, #00b894, #00cec9);
    }

    .stat-icon.categories[b-i3y25ahq4b] {
        background: linear-gradient(135deg, #e17055, #fd79a8);
    }

.stat-content[b-i3y25ahq4b] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

[dir="rtl"] .stat-content[b-i3y25ahq4b] {
    text-align: right;
}

.stat-number[b-i3y25ahq4b] {
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
    line-height: 1;
    direction: ltr;
    text-align: left;
}

[dir="rtl"] .stat-number[b-i3y25ahq4b] {
    text-align: right;
}

.stat-label[b-i3y25ahq4b] {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 0.1rem;
    white-space: nowrap;
}

/* ===== USER INFO ===== */
.user-info[b-i3y25ahq4b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[dir="rtl"] .user-info[b-i3y25ahq4b] {
    flex-direction: row-reverse;
}

.user-avatar[b-i3y25ahq4b] {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    text-transform: uppercase;
    line-height: 1;
    font-family: inherit;
    font-variant: small-caps;
    letter-spacing: -0.5px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.role-badge[b-i3y25ahq4b] {
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    direction: ltr;
    white-space: nowrap;
}

    .role-badge.role-owner[b-i3y25ahq4b] {
        background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
        color: #2d3436;
    }

    .role-badge.role-admin[b-i3y25ahq4b] {
        background: linear-gradient(135deg, #ff7675, #fd79a8);
        color: white;
    }

    .role-badge.role-supervisor[b-i3y25ahq4b] {
        background: linear-gradient(135deg, #74b9ff, #0984e3);
        color: white;
    }

    .role-badge.role-user[b-i3y25ahq4b] {
        background: linear-gradient(135deg, #00b894, #00cec9);
        color: white;
    }

/* ===== NAVIGATION TABS - RESPONSIVE WIDTH BEHAVIOR ===== */
.tab-navigation[b-i3y25ahq4b] {
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border-light);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab-list[b-i3y25ahq4b] {
    display: flex;
    padding: 0;
    min-height: 60px;
    align-items: center;
    width: 100%;
}

.tab-item[b-i3y25ahq4b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: none;
    border: none;
    color: var(--clr-text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: var(--transition);
    justify-content: center;
    /* KEY: Use flex-grow to fill available space on large screens */
    flex: 1;
    min-width: 0;
}

[dir="rtl"] .tab-item[b-i3y25ahq4b] {
    flex-direction: row-reverse;
}

.tab-item:hover[b-i3y25ahq4b] {
    color: var(--clr-text);
    background: color-mix(in srgb, var(--project-color) 8%, transparent);
    border-bottom-color: var(--project-color);
}

.tab-item.active[b-i3y25ahq4b] {
    color: var(--project-color);
    background: color-mix(in srgb, var(--project-color) 12%, transparent);
    border-bottom-color: var(--project-color);
    font-weight: 600;
}

.tab-item.special-ai[b-i3y25ahq4b] {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.08), rgba(162, 155, 254, 0.08));
}

    .tab-item.special-ai:hover[b-i3y25ahq4b],
    .tab-item.special-ai.active[b-i3y25ahq4b] {
        background: linear-gradient(135deg, rgba(108, 92, 231, 0.15), rgba(162, 155, 254, 0.15));
        color: #6c5ce7;
        border-bottom-color: #6c5ce7;
    }

.tab-label[b-i3y25ahq4b] {
    font-weight: inherit;
}

.tab-count[b-i3y25ahq4b] {
    background: var(--project-color);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    direction: ltr;
}

[dir="rtl"] .tab-count[b-i3y25ahq4b] {
    order: -1;
}

.tab-badge[b-i3y25ahq4b] {
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    background: var(--clr-text-muted);
    color: white;
    direction: ltr;
}

[dir="rtl"] .tab-badge[b-i3y25ahq4b] {
    order: -1;
}

.tab-badge.special-badge[b-i3y25ahq4b] {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
}

/* ===== CONTENT AREA ===== */
.content-area[b-i3y25ahq4b] {
    padding: 1.5rem 0;
    min-height: 60vh;
}

.content-wrapper[b-i3y25ahq4b] {
    animation: fadeIn-b-i3y25ahq4b 0.3s ease-out;
}

@keyframes fadeIn-b-i3y25ahq4b {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ===== COMING SOON ===== */
.coming-soon[b-i3y25ahq4b] {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.coming-soon-card[b-i3y25ahq4b] {
    background: var(--clr-surface);
    border-radius: var(--border-radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    max-width: 500px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--clr-border-light);
    position: relative;
    overflow: hidden;
}

    .coming-soon-card[b-i3y25ahq4b]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--project-color), #6c5ce7, #a29bfe);
    }

    .coming-soon-card.ai-special[b-i3y25ahq4b]::before {
        background: linear-gradient(90deg, #6c5ce7, #a29bfe, #74b9ff);
    }

.icon[b-i3y25ahq4b] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    margin: 0 auto 1.5rem;
    position: relative;
}

    .icon.dashboards[b-i3y25ahq4b] {
        background: linear-gradient(135deg, #00b894, #00cec9);
    }

    .icon.reports[b-i3y25ahq4b] {
        background: linear-gradient(135deg, #e17055, #fd79a8);
    }

    .icon.analytics[b-i3y25ahq4b] {
        background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    }

    .icon.ai[b-i3y25ahq4b] {
        background: linear-gradient(135deg, #74b9ff, #0984e3);
    }

.icon-glow[b-i3y25ahq4b] {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.3;
    animation: pulse-b-i3y25ahq4b 2s infinite;
}

@keyframes pulse-b-i3y25ahq4b {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.1;
    }
}

.coming-soon-card h3[b-i3y25ahq4b] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--clr-text);
    margin-bottom: 0.75rem;
}

.coming-soon-card p[b-i3y25ahq4b] {
    color: var(--clr-text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.features[b-i3y25ahq4b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.feature[b-i3y25ahq4b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: color-mix(in srgb, var(--project-color) 8%, transparent);
    border-radius: var(--border-radius);
    color: var(--clr-text);
    font-weight: 500;
    font-size: 0.8rem;
}

[dir="rtl"] .feature[b-i3y25ahq4b] {
    flex-direction: row-reverse;
    text-align: right;
}

.feature i[b-i3y25ahq4b] {
    color: var(--project-color);
    font-size: 0.8rem;
}

.sprint-info[b-i3y25ahq4b] {
    margin-top: 1rem;
}

.sprint-badge[b-i3y25ahq4b] {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: white;
    direction: ltr;
}

    .sprint-badge.sprint-4[b-i3y25ahq4b] {
        background: linear-gradient(135deg, #74b9ff, #0984e3);
    }

    .sprint-badge.sprint-5[b-i3y25ahq4b] {
        background: linear-gradient(135deg, #00b894, #00cec9);
    }

    .sprint-badge.sprint-6[b-i3y25ahq4b] {
        background: linear-gradient(135deg, #e17055, #fd79a8);
    }

    .sprint-badge.ai-special[b-i3y25ahq4b] {
        background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    }

    .sprint-badge.default[b-i3y25ahq4b] {
        background: var(--clr-text-muted);
    }

/* ===== RESPONSIVE DESIGN ===== */
@media (min-width: 769px) {
    /* LARGE SCREENS: Tabs use full width, thicker tabs */
    .project-header[b-i3y25ahq4b] {
        padding: 1rem 0;
    }

    .header-content[b-i3y25ahq4b] {
        padding: 0 1.5rem;
        gap: 1rem;
    }

    .project-avatar[b-i3y25ahq4b] {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }

    .project-title[b-i3y25ahq4b] {
        font-size: 1.5rem;
    }

    .project-description[b-i3y25ahq4b] {
        display: block;
        font-size: 0.9rem;
    }

    .stat-item[b-i3y25ahq4b] {
        padding: 0.6rem 0.8rem;
        gap: 0.6rem;
    }

    .stat-icon[b-i3y25ahq4b] {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .stat-number[b-i3y25ahq4b] {
        font-size: 1.1rem;
    }

    .stat-label[b-i3y25ahq4b] {
        font-size: 0.7rem;
    }

    .back-btn[b-i3y25ahq4b], .settings-btn[b-i3y25ahq4b] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

        .settings-btn i[b-i3y25ahq4b] {
            font-size: 0.9rem;
        }

    .user-avatar[b-i3y25ahq4b] {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .role-badge[b-i3y25ahq4b] {
        padding: 0.3rem 0.7rem;
        font-size: 0.7rem;
    }

    .content-area[b-i3y25ahq4b] {
        padding: 2rem 0;
    }

    /* Ensure tabs use full width on large screens */
    .tab-list[b-i3y25ahq4b] {
        width: 100%;
    }

    .tab-item[b-i3y25ahq4b] {
        flex: 1; /* Each tab takes equal space */
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* ===== TABLET BREAKPOINT ===== */
@media (max-width: 768px) and (min-width: 481px) {
    .stats[b-i3y25ahq4b] {
        display: none;
    }

    .project-meta[b-i3y25ahq4b] {
        display: none;
    }

    /* TABLET: Smaller tabs but still try to fit */
    .tab-list[b-i3y25ahq4b] {
        overflow-x: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--clr-border) transparent;
        padding: 0 0.5rem;
    }

        .tab-list[b-i3y25ahq4b]::-webkit-scrollbar {
            height: 4px;
        }

        .tab-list[b-i3y25ahq4b]::-webkit-scrollbar-track {
            background: transparent;
        }

        .tab-list[b-i3y25ahq4b]::-webkit-scrollbar-thumb {
            background: var(--clr-border);
            border-radius: 2px;
        }

    .tab-item[b-i3y25ahq4b] {
        flex: none; /* Don't stretch, use natural width */
        padding: 0.75rem 1rem;
        font-size: 0.8rem;
        min-width: fit-content;
    }

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

/* ===== MOBILE BREAKPOINT ===== */
@media (max-width: 480px) {
    .header-content[b-i3y25ahq4b] {
        padding: 0 0.75rem;
        gap: 0.5rem;
    }

    .back-btn[b-i3y25ahq4b], .settings-btn[b-i3y25ahq4b] {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

        .settings-btn i[b-i3y25ahq4b] {
            font-size: 0.75rem;
        }

    .project-avatar[b-i3y25ahq4b] {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }

    .project-title[b-i3y25ahq4b] {
        font-size: 1rem;
    }

    .user-avatar[b-i3y25ahq4b] {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }

    .role-badge[b-i3y25ahq4b] {
        padding: 0.15rem 0.3rem;
        font-size: 0.55rem;
    }

    .stats[b-i3y25ahq4b] {
        display: none;
    }

    .project-meta[b-i3y25ahq4b] {
        display: none;
    }

    /* MOBILE: Very small tabs with scrolling */
    .tab-list[b-i3y25ahq4b] {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        scrollbar-color: var(--clr-border) transparent;
        padding: 0 0.25rem;
        min-height: 50px;
    }

        .tab-list[b-i3y25ahq4b]::-webkit-scrollbar {
            height: 3px;
        }

        .tab-list[b-i3y25ahq4b]::-webkit-scrollbar-track {
            background: transparent;
        }

        .tab-list[b-i3y25ahq4b]::-webkit-scrollbar-thumb {
            background: var(--clr-border);
            border-radius: 2px;
        }

    .tab-item[b-i3y25ahq4b] {
        flex: none; /* Don't stretch */
        padding: 0.5rem 0.75rem;
        font-size: 0.7rem;
        min-width: fit-content;
        flex-shrink: 0;
    }

    /* Hide tab labels on very small screens, keep only icons */
    .tab-label[b-i3y25ahq4b] {
        display: none;
    }

    .tab-count[b-i3y25ahq4b] {
        font-size: 0.6rem;
        padding: 0.1rem 0.3rem;
        min-width: 16px;
    }

    .tab-badge[b-i3y25ahq4b] {
        font-size: 0.5rem;
        padding: 0.1rem 0.3rem;
    }

    .content-area[b-i3y25ahq4b] {
        padding: 1rem 0;
    }

    .coming-soon-card[b-i3y25ahq4b] {
        padding: 1.5rem 1rem;
        margin: 0.5rem;
    }

    .icon[b-i3y25ahq4b] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }
}

/* ===== RTL ICON FIXES ===== */
[dir="rtl"] .back-btn .fa-arrow-left[b-i3y25ahq4b]:before {
    content: "\f061"; /* arrow-right */
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    *[b-i3y25ahq4b] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .settings-btn:hover i[b-i3y25ahq4b] {
        transform: none;
    }
}

.tab-item:focus-visible[b-i3y25ahq4b],
.back-btn:focus-visible[b-i3y25ahq4b],
.settings-btn:focus-visible[b-i3y25ahq4b] {
    outline: 2px solid var(--project-color);
    outline-offset: 2px;
}

/* ===== UTILITY CLASSES ===== */
[dir="rtl"] .stat-number[b-i3y25ahq4b],
[dir="rtl"] .tab-count[b-i3y25ahq4b],
[dir="rtl"] .tab-badge[b-i3y25ahq4b],
[dir="rtl"] .role-badge[b-i3y25ahq4b] {
    direction: ltr;
    unicode-bidi: embed;
}
/* _content/alkpi/Components/Pages/Projects/Reports/Report.razor.rz.scp.css */
/* ============================================================================
   Reports Page - Clean & Modern Styling
   ============================================================================ */

/* Page Container */
.reports-page[b-arix5a0jqy] {
    padding: 1.5rem;
    min-height: 100vh;
    background: var(--clr-primary);
    animation: fadeIn-b-arix5a0jqy 0.3s ease-out;
}

/* Header Section */
.reports-header[b-arix5a0jqy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem;
    background: var(--clr-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

.header-left[b-arix5a0jqy],
.header-right[b-arix5a0jqy] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Window Dropdown */
.reports-dropdown[b-arix5a0jqy]  .rz-dropdown {
    background: var(--clr-surface) !important;
    border-color: var(--clr-border) !important;
    color: var(--clr-text) !important;
}

    .reports-dropdown[b-arix5a0jqy]  .rz-dropdown:hover {
        border-color: var(--clr-accent) !important;
    }

/* Actions Menu */
.actions-menu-wrapper[b-arix5a0jqy] {
    position: relative;
}

.actions-menu-btn[b-arix5a0jqy] {
    min-width: 40px;
    height: 40px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius);
    background: var(--clr-surface);
    color: var(--clr-text);
    cursor: pointer;
    transition: var(--transition);
}

    .actions-menu-btn:hover[b-arix5a0jqy] {
        background: var(--clr-surface-hover);
        border-color: var(--clr-accent);
        transform: translateY(-1px);
        box-shadow: var(--shadow);
    }

    .actions-menu-btn i[b-arix5a0jqy] {
        font-size: 1.25rem;
    }

    .actions-menu-btn[b-arix5a0jqy]::after {
        display: none !important;
    }

/* Dropdown Menu Styling */
.actions-dropdown-menu[b-arix5a0jqy] {
    background: var(--clr-secondary);
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    padding: 0.5rem;
    margin-top: 0.5rem;
}

    .actions-dropdown-menu .dropdown-item[b-arix5a0jqy] {
        color: var(--clr-text);
        padding: 0.75rem 1rem;
        border-radius: var(--border-radius-sm);
        transition: background 0.15s ease, transform 0.15s ease;
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        font-weight: 500;
    }

        .actions-dropdown-menu .dropdown-item:hover[b-arix5a0jqy] {
            background: var(--clr-surface-hover);
            color: var(--clr-text);
            transform: translateX(4px);
        }

        .actions-dropdown-menu .dropdown-item i[b-arix5a0jqy] {
            font-size: 1.1rem;
            color: var(--clr-text-secondary);
            min-width: 20px;
        }

        .actions-dropdown-menu .dropdown-item.active[b-arix5a0jqy] {
            background: var(--clr-accent-light);
            color: var(--clr-accent);
        }

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

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

.menu-item[b-arix5a0jqy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    color: var(--clr-text);
    text-align: left;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    font-size: 0.9rem;
    font-weight: 500;
}

    .menu-item:hover[b-arix5a0jqy] {
        background: var(--clr-surface-hover);
        transform: translateX(4px);
    }

    .menu-item i[b-arix5a0jqy] {
        font-size: 1.1rem;
        color: var(--clr-text-secondary);
        min-width: 20px;
    }

.menu-item-danger:hover[b-arix5a0jqy] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--clr-danger);
}

    .menu-item-danger:hover i[b-arix5a0jqy] {
        color: var(--clr-danger);
    }

.menu-divider[b-arix5a0jqy] {
    border: none;
    border-top: 1px solid var(--clr-border);
    margin: 0.5rem 0;
    opacity: 0.5;
}

/* Edit Mode Toggle */
.edit-mode-toggle[b-arix5a0jqy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius);
}

.toggle-text[b-arix5a0jqy] {
    color: var(--clr-text);
    font-weight: 500;
    font-size: 0.9rem;
    user-select: none;
}

.toggle-label[b-arix5a0jqy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    color: var(--clr-text);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Time Range Section */
.time-range-section[b-arix5a0jqy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-group[b-arix5a0jqy] {
    display: flex;
    box-shadow: var(--shadow);
    border-radius: var(--border-radius);
    overflow: hidden;
}

    .btn-group .btn[b-arix5a0jqy] {
        border-radius: 0;
        border: none;
        border-right: 1px solid var(--clr-border);
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        font-weight: 600;
        transition: var(--transition);
    }

        .btn-group .btn:last-child[b-arix5a0jqy] {
            border-right: none;
        }

.btn-outline-primary[b-arix5a0jqy] {
    color: var(--clr-text);
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

    .btn-outline-primary:hover[b-arix5a0jqy] {
        background: var(--clr-accent);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(var(--clr-accent-rgb), 0.3);
    }

.btn-primary[b-arix5a0jqy] {
    background: var(--clr-accent);
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(var(--clr-accent-rgb), 0.4);
}

.custom-date-range[b-arix5a0jqy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-separator[b-arix5a0jqy] {
    color: var(--clr-text);
    font-weight: 500;
}

.reports-datepicker[b-arix5a0jqy]  .rz-datepicker {
    background: var(--clr-surface) !important;
    border-color: var(--clr-border) !important;
}

.clear-filter-btn[b-arix5a0jqy] {
    min-width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
}

    .clear-filter-btn:hover[b-arix5a0jqy] {
        background: var(--clr-danger);
        border-color: var(--clr-danger);
        color: white;
    }

/* Add Report Button */
.add-report-btn[b-arix5a0jqy] {
    box-shadow: 0 4px 12px rgba(var(--clr-accent-rgb), 0.3);
}

    .add-report-btn:hover[b-arix5a0jqy] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(var(--clr-accent-rgb), 0.4);
    }

/* Filter Badge */
.filter-badge-container[b-arix5a0jqy] {
    margin-bottom: 1rem;
}

/* Content Area */
.reports-content[b-arix5a0jqy] {
    min-height: 400px;
    position: relative;
    z-index: 1;
}

/* Loading State */
.loading-state[b-arix5a0jqy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 400px;
    padding: 3rem;
}

    .loading-state p[b-arix5a0jqy] {
        color: var(--clr-text-secondary);
        font-size: 1.1rem;
        font-weight: 500;
    }

/* Empty State */
.empty-state[b-arix5a0jqy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 500px;
    padding: 3rem;
    text-align: center;
}

.empty-icon[b-arix5a0jqy] {
    font-size: 5rem;
    color: var(--clr-text-muted);
    opacity: 0.3;
}

.empty-state h3[b-arix5a0jqy] {
    color: var(--clr-text);
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.empty-state p[b-arix5a0jqy] {
    color: var(--clr-text-secondary);
    font-size: 1.1rem;
    max-width: 500px;
    margin: 0;
}

.empty-state-btn[b-arix5a0jqy] {
    margin-top: 1rem;
}

/* Dialog Inputs */
.reports-input[b-arix5a0jqy] {
    background: var(--clr-surface) !important;
    border-color: var(--clr-border) !important;
    color: var(--clr-text) !important;
}

    .reports-input:focus[b-arix5a0jqy] {
        border-color: var(--clr-accent) !important;
        box-shadow: 0 0 0 0.2rem var(--clr-accent-light) !important;
    }

/* ============================================================================
   REPORTS PAGE - WIDGET FIXES
   ============================================================================ */

/* Fix Radzen theme conflicts */
.reports-content[b-arix5a0jqy]  .rz-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure widgets fill their containers */
.reports-content[b-arix5a0jqy]  .workspace-container {
    height: 100%;
}

/* Force edit mode buttons to be visible */
.reports-page[b-arix5a0jqy]  .report-actions {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1000 !important;
}

    .reports-page[b-arix5a0jqy]  .report-actions > * {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

/* Better card backgrounds */
.reports-content[b-arix5a0jqy]  .widget-wrapper {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

/* Ensure report content fills space */
.reports-content[b-arix5a0jqy]  .report-content {
    flex: 1;
    min-height: 0;
}

/* Better text visibility in reports */
.reports-content[b-arix5a0jqy]  .rz-text {
    color: var(--clr-text) !important;
}

/* Grid lines visibility */
.reports-content[b-arix5a0jqy]  .rz-datatable {
    background: var(--clr-surface);
}

.reports-content[b-arix5a0jqy]  .rz-datatable-thead {
    background: var(--clr-secondary);
}

.reports-content[b-arix5a0jqy]  .rz-datatable-data tr {
    border-bottom: 1px solid var(--clr-border);
}

    .reports-content[b-arix5a0jqy]  .rz-datatable-data tr:hover {
        background: var(--clr-surface-hover);
    }

/* ============================================================================
   DARK THEME OVERRIDES
   ============================================================================ */

:root[data-theme="dark"] .reports-header[b-arix5a0jqy] {
    background: var(--clr-surface);
}

:root[data-theme="dark"] .actions-menu-btn[b-arix5a0jqy] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

:root[data-theme="dark"] .actions-dropdown-menu[b-arix5a0jqy] {
    background: var(--clr-secondary);
    border-color: var(--clr-border);
}

:root[data-theme="dark"] .btn-group[b-arix5a0jqy] {
    box-shadow: var(--shadow);
}

:root[data-theme="dark"] .btn-outline-primary[b-arix5a0jqy] {
    background: var(--clr-surface);
    color: var(--clr-text);
}

/* ============================================================================
   LIGHT THEME OVERRIDES
   ============================================================================ */

:root[data-theme="light"] .reports-header[b-arix5a0jqy] {
    background: var(--clr-surface);
}

:root[data-theme="light"] .actions-menu-btn[b-arix5a0jqy] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

:root[data-theme="light"] .actions-dropdown-menu[b-arix5a0jqy] {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

:root[data-theme="light"] .btn-group[b-arix5a0jqy] {
    box-shadow: var(--shadow);
}

:root[data-theme="light"] .btn-outline-primary[b-arix5a0jqy] {
    background: var(--clr-surface);
    color: var(--clr-text);
}

/* ============================================================================
   RTL SUPPORT
   ============================================================================ */

[dir="rtl"] .actions-menu-dropdown[b-arix5a0jqy] {
    right: auto;
    left: 0;
}

[dir="rtl"] .menu-item[b-arix5a0jqy] {
    text-align: right;
}

    [dir="rtl"] .menu-item:hover[b-arix5a0jqy] {
        transform: translateX(-4px);
    }

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 1200px) {
    .reports-header[b-arix5a0jqy] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-left[b-arix5a0jqy],
    .header-right[b-arix5a0jqy] {
        width: 100%;
        justify-content: space-between;
    }
}

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

    .reports-header[b-arix5a0jqy] {
        padding: 0.75rem;
    }

    .btn-group .btn[b-arix5a0jqy] {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    .time-range-section[b-arix5a0jqy] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-group[b-arix5a0jqy] {
        width: 100%;
    }

        .btn-group .btn[b-arix5a0jqy] {
            flex: 1;
        }
}

@media (max-width: 480px) {
    .header-left[b-arix5a0jqy],
    .header-right[b-arix5a0jqy] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .reports-dropdown[b-arix5a0jqy] {
        width: 100%;
    }

    .btn-group[b-arix5a0jqy] {
        flex-direction: column;
    }

        .btn-group .btn[b-arix5a0jqy] {
            border-right: none;
            border-bottom: 1px solid var(--clr-border);
        }

            .btn-group .btn:last-child[b-arix5a0jqy] {
                border-bottom: none;
            }
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes fadeIn-b-arix5a0jqy {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    *[b-arix5a0jqy],
    .reports-page[b-arix5a0jqy],
    .actions-dropdown-menu[b-arix5a0jqy],
    .menu-item[b-arix5a0jqy],
    .btn[b-arix5a0jqy] {
        animation: none !important;
        transition: none !important;
    }
}

/* Focus states for keyboard navigation */
.actions-menu-btn:focus-visible[b-arix5a0jqy],
.menu-item:focus-visible[b-arix5a0jqy],
.btn:focus-visible[b-arix5a0jqy] {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .reports-header[b-arix5a0jqy],
    .actions-dropdown-menu[b-arix5a0jqy] {
        border-width: 2px;
    }

    .btn-group .btn[b-arix5a0jqy] {
        border-width: 2px;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .reports-header[b-arix5a0jqy] {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .actions-menu-btn[b-arix5a0jqy],
    .edit-mode-toggle[b-arix5a0jqy],
    .time-range-section[b-arix5a0jqy],
    .add-report-btn[b-arix5a0jqy] {
        display: none !important;
    }

    .reports-content[b-arix5a0jqy] {
        background: white;
    }
}
/* _content/alkpi/Components/Pages/Projects/Reports/ReportWidget.razor.rz.scp.css */
/* =============================================================================
   REPORT WIDGET - CORE STRUCTURE WITH PROPER SCROLLING
   ============================================================================= */

.report-widget[b-n4kt2mgj0w] {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    /* Force Radzen Card to be flex container with proper height */
    .report-widget-card[b-n4kt2mgj0w],
    .report-widget[b-n4kt2mgj0w]  .rz-card {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        background: var(--clr-surface) !important;
        border: 1px solid var(--clr-border) !important;
        border-radius: 12px !important;
        box-shadow: var(--shadow) !important;
        overflow: hidden !important;
    }

    /* Force Radzen Card Body to flex and take remaining space */
    .report-widget[b-n4kt2mgj0w]  .rz-card-body {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        overflow: hidden !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
    }

/* Report Header - Fixed at top */
.report-header[b-n4kt2mgj0w] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--clr-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--clr-surface);
    flex-shrink: 0;
    z-index: 10;
    min-height: 0;
}

    /* Fix Radzen Stack spacing in header */
    .report-header[b-n4kt2mgj0w]  .rz-stack {
        gap: 0.5rem !important;
    }

.report-icon[b-n4kt2mgj0w] {
    font-size: 1.25rem;
    color: var(--clr-accent);
    flex-shrink: 0;
}

.report-header h6[b-n4kt2mgj0w],
.report-header[b-n4kt2mgj0w]  .rz-text {
    color: var(--clr-text) !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.report-actions[b-n4kt2mgj0w] {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* Report Content - Scrollable */
.report-content[b-n4kt2mgj0w] {
    flex: 1 1 0%;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0.75rem;
    background: var(--clr-surface);
    min-height: 0 !important;
    position: relative;
}

.report-container[b-n4kt2mgj0w] {
    width: 100%;
    min-height: min-content;
}

/* =============================================================================
   RANKED REPORT (TOP/WORST PERFORMING) - RTL FIX
   ============================================================================= */

.ranked-report[b-n4kt2mgj0w] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    min-height: 0;
}

/* Podium Container */
.podium-container[b-n4kt2mgj0w] {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 0;
    flex-shrink: 0;
    min-height: 0;
}

/* Force Radzen Card in podium to proper size */
.podium-card[b-n4kt2mgj0w],
.podium-card[b-n4kt2mgj0w]  .rz-card {
    background: var(--clr-secondary) !important;
    border: 2px solid var(--clr-border) !important;
    border-radius: 8px !important;
    padding: 0.6rem !important;
    text-align: center;
    min-width: 70px !important;
    max-width: 110px !important;
    flex: 1 1 auto;
    transition: transform 0.3s ease;
    overflow: hidden !important;
    height: auto !important;
}

    .podium-card[b-n4kt2mgj0w]  .rz-card-body {
        padding: 0 !important;
    }

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

.podium-gold[b-n4kt2mgj0w] {
    border-color: #FFD700 !important;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.25) !important;
}

.podium-silver[b-n4kt2mgj0w] {
    border-color: #C0C0C0 !important;
}

.podium-bronze[b-n4kt2mgj0w] {
    border-color: #CD7F32 !important;
}

.podium-medal[b-n4kt2mgj0w] {
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: 0.3rem;
}

/* Fix text sizing in podium */
.podium-card[b-n4kt2mgj0w]  .rz-text,
.podium-card[b-n4kt2mgj0w]  h6 {
    font-size: 0.75rem !important;
    margin: 0.2rem 0 !important;
    line-height: 1.2 !important;
    word-break: break-word;
}

.podium-card[b-n4kt2mgj0w]  p {
    font-size: 0.7rem !important;
    margin: 0.1rem 0 !important;
}

/* Ranked List - Scrollable */
.ranked-list[b-n4kt2mgj0w] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    min-height: 0;
}

/* Force Radzen Card in ranked items */
.ranked-item[b-n4kt2mgj0w],
.ranked-item[b-n4kt2mgj0w]  .rz-card {
    background: var(--clr-secondary) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: 6px !important;
    padding: 0.65rem !important;
    transition: all 0.2s ease;
    flex-shrink: 0;
    min-height: 0;
    height: auto !important;
}

    .ranked-item[b-n4kt2mgj0w]  .rz-card-body {
        padding: 0 !important;
    }

    .ranked-item:hover[b-n4kt2mgj0w] {
        transform: translateX(3px);
        box-shadow: var(--shadow-md);
        border-color: var(--clr-accent) !important;
    }

    /* Main horizontal stack - force proper flex behavior */
    .ranked-item[b-n4kt2mgj0w]  .rz-stack {
        gap: 0.5rem !important;
        align-items: center !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }

    /* Badge - prevent shrinking */
    .ranked-item[b-n4kt2mgj0w]  .rz-badge {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
        flex-shrink: 0 !important;
        min-width: 35px !important;
        width: 35px !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* KPI Name Container - allow it to shrink but not overflow */
    .ranked-item[b-n4kt2mgj0w]  .rz-stack:not([class]) {
        flex: 1 1 auto !important;
        min-width: 80px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .ranked-item[b-n4kt2mgj0w]  .rz-stack > .rz-stack {
        flex: 1 1 auto !important;
        min-width: 80px !important;
        overflow: hidden !important;
    }

    /* Icon - fixed size */
    .ranked-item[b-n4kt2mgj0w]  i[class*="bi-"] {
        flex-shrink: 0 !important;
        width: 1.5rem !important;
        min-width: 1.5rem !important;
        font-size: 1.25rem !important;
        text-align: center !important;
        display: inline-block !important;
    }

    /* KPI Name text - must not overflow */
    .ranked-item[b-n4kt2mgj0w]  .rz-text {
        font-size: 0.85rem !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }

    /* Progress bar wrapper div - override inline style */
    .ranked-item[b-n4kt2mgj0w]  div[style*="width: 150px"],
    .ranked-item[b-n4kt2mgj0w]  div[style*="width:150px"] {
        flex-shrink: 0 !important;
        width: 120px !important;
        min-width: 90px !important;
        max-width: 150px !important;
    }

    /* Progress bar - ensure it fits container */
    .ranked-item[b-n4kt2mgj0w]  .rz-progressbar {
        width: 100% !important;
        height: 22px !important;
        flex-shrink: 0 !important;
    }

    /* Progress bar value label - ensure visibility */
    .ranked-item[b-n4kt2mgj0w]  .rz-progressbar-label {
        font-size: 0.7rem !important;
        line-height: 22px !important;
        padding: 0 0.35rem !important;
        z-index: 2 !important;
        position: relative !important;
        white-space: nowrap !important;
    }

    /* Value text - override inline min-width */
    .ranked-item[b-n4kt2mgj0w]  h6[style*="min-width"],
    .ranked-item[b-n4kt2mgj0w]  .rz-text[style*="min-width"] {
        font-size: 0.8rem !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        flex-shrink: 0 !important;
        min-width: 70px !important;
        width: auto !important;
        max-width: 100px !important;
        text-align: end !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

/* Podium Badge sizing */
.podium-card[b-n4kt2mgj0w]  .rz-badge {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.4rem !important;
}

/* =============================================================================
   TREND REPORT (MOST IMPROVED/DECLINED)
   ============================================================================= */

.trend-report[b-n4kt2mgj0w] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    min-height: 0;
}

.trend-card[b-n4kt2mgj0w],
.trend-card[b-n4kt2mgj0w]  .rz-card {
    background: var(--clr-secondary) !important;
    border: 1px solid var(--clr-border) !important;
    border-left: 3px solid var(--clr-accent) !important;
    border-radius: 6px !important;
    padding: 0.7rem !important;
    flex-shrink: 0;
    min-height: 0;
    height: auto !important;
}

    .trend-card[b-n4kt2mgj0w]  .rz-card-body {
        padding: 0 !important;
    }

    .trend-card[b-n4kt2mgj0w]  .rz-stack {
        gap: 0.5rem !important;
    }

    .trend-card[b-n4kt2mgj0w]  .rz-text {
        font-size: 0.85rem !important;
        margin: 0.2rem 0 !important;
    }

.comparison-bar[b-n4kt2mgj0w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--clr-surface);
    border-radius: 6px;
    margin-top: 0.5rem;
}

/* =============================================================================
   TREND ANALYSIS REPORT
   ============================================================================= */

.trend-analysis-report[b-n4kt2mgj0w] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    min-height: 0;
}

.trend-analysis-card[b-n4kt2mgj0w],
.trend-analysis-card[b-n4kt2mgj0w]  .rz-card {
    background: var(--clr-secondary) !important;
    border: 1px solid var(--clr-border) !important;
    border-left: 3px solid var(--clr-accent) !important;
    border-radius: 6px !important;
    padding: 0.8rem !important;
    flex-shrink: 0;
    min-height: 0;
    height: auto !important;
}

    .trend-analysis-card[b-n4kt2mgj0w]  .rz-card-body {
        padding: 0 !important;
    }

    .trend-analysis-card[b-n4kt2mgj0w]  .rz-stack {
        gap: 0.5rem !important;
    }

/* Metrics Grid */
.metrics-grid[b-n4kt2mgj0w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.metric-card[b-n4kt2mgj0w] {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    padding: 0.5rem;
    text-align: center;
    min-height: 0;
}

    .metric-card[b-n4kt2mgj0w]  .rz-text {
        font-size: 0.7rem !important;
        margin: 0.1rem 0 !important;
    }

/* Fix Progress Bar sizing */
.trend-analysis-card[b-n4kt2mgj0w]  .rz-progressbar {
    height: 20px !important;
}

/* =============================================================================
   CATEGORY SUMMARY REPORT
   ============================================================================= */

.category-summary-report[b-n4kt2mgj0w] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    min-height: 0;
}

.category-grid[b-n4kt2mgj0w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.5rem;
}

.category-card[b-n4kt2mgj0w],
.category-card[b-n4kt2mgj0w]  .rz-card {
    background: var(--clr-secondary) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: 6px !important;
    padding: 0.65rem !important;
    min-height: 0;
    height: auto !important;
}

    .category-card[b-n4kt2mgj0w]  .rz-card-body {
        padding: 0 !important;
    }

    .category-card[b-n4kt2mgj0w]  .rz-text {
        font-size: 0.8rem !important;
        margin: 0.15rem 0 !important;
    }

/* =============================================================================
   EMPTY STATE
   ============================================================================= */

.empty-state-report[b-n4kt2mgj0w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    text-align: center;
    padding: 1.5rem;
}

    .empty-state-report i[b-n4kt2mgj0w],
    .empty-state-report[b-n4kt2mgj0w]  .rz-icon {
        font-size: 3rem;
        opacity: 0.2;
        margin-bottom: 0.75rem;
        color: var(--clr-text-muted);
    }

/* =============================================================================
   SCROLLBAR STYLING
   ============================================================================= */

.report-content[b-n4kt2mgj0w]::-webkit-scrollbar {
    width: 6px;
}

.report-content[b-n4kt2mgj0w]::-webkit-scrollbar-track {
    background: var(--clr-secondary);
    border-radius: 3px;
}

.report-content[b-n4kt2mgj0w]::-webkit-scrollbar-thumb {
    background: var(--clr-border);
    border-radius: 3px;
}

    .report-content[b-n4kt2mgj0w]::-webkit-scrollbar-thumb:hover {
        background: var(--clr-accent);
    }

/* Firefox */
.report-content[b-n4kt2mgj0w] {
    scrollbar-width: thin;
    scrollbar-color: var(--clr-border) var(--clr-secondary);
}

/* =============================================================================
   DATA GRID STYLING
   ============================================================================= */

.report-summary[b-n4kt2mgj0w] {
    background: var(--clr-secondary);
    border-radius: 8px;
    border: 1px solid var(--clr-border);
    padding: 1rem;
    margin-bottom: 1rem;
}

.report-data-grid[b-n4kt2mgj0w]  .rz-datatable {
    background: transparent;
}

.report-data-grid[b-n4kt2mgj0w]  .rz-datatable-thead {
    background: var(--clr-secondary);
}

.report-data-grid[b-n4kt2mgj0w]  .rz-datatable-data tr {
    border-bottom: 1px solid var(--clr-border);
}

    .report-data-grid[b-n4kt2mgj0w]  .rz-datatable-data tr:hover {
        background: var(--clr-surface-hover);
    }

/* =============================================================================
   RTL SUPPORT IMPROVEMENTS
   ============================================================================= */

[dir="rtl"] .report-header[b-n4kt2mgj0w] {
    flex-direction: row-reverse;
}

[dir="rtl"] .report-actions[b-n4kt2mgj0w] {
    flex-direction: row-reverse;
}

/* RTL: Reverse hover direction */
[dir="rtl"] .ranked-item:hover[b-n4kt2mgj0w] {
    transform: translateX(-3px);
}

/* RTL: Fix main stack direction */
[dir="rtl"] .ranked-item[b-n4kt2mgj0w]  .rz-stack {
    flex-direction: row-reverse !important;
}

    /* RTL: Keep nested icon+text stack LTR for proper icon positioning */
    [dir="rtl"] .ranked-item[b-n4kt2mgj0w]  .rz-stack > .rz-stack {
        flex-direction: row !important;
    }

/* RTL: Fix text alignment - value should be on left */
[dir="rtl"] .ranked-item[b-n4kt2mgj0w]  h6[style*="text-align"],
[dir="rtl"] .ranked-item[b-n4kt2mgj0w]  .rz-text[style*="text-align"] {
    text-align: start !important;
}

/* RTL: Keep progress bar label centered */
[dir="rtl"] .ranked-item[b-n4kt2mgj0w]  .rz-progressbar-label {
    text-align: center !important;
}

/* RTL: Fix border positioning */
[dir="rtl"] .trend-card[b-n4kt2mgj0w],
[dir="rtl"] .trend-analysis-card[b-n4kt2mgj0w],
[dir="rtl"] .trend-card[b-n4kt2mgj0w]  .rz-card,
[dir="rtl"] .trend-analysis-card[b-n4kt2mgj0w]  .rz-card {
    border-left: 1px solid var(--clr-border) !important;
    border-right: 3px solid var(--clr-accent) !important;
}

[dir="rtl"] .category-card[style*="border-left"][b-n4kt2mgj0w],
[dir="rtl"] .category-card[b-n4kt2mgj0w]  .rz-card[style*="border-left"] {
    border-left: 1px solid var(--clr-border) !important;
    border-right-width: 4px !important;
}

[dir="rtl"] .comparison-bar[b-n4kt2mgj0w] {
    flex-direction: row-reverse;
}

/* Keep podium medals in consistent order for all languages */
[dir="rtl"] .podium-container[b-n4kt2mgj0w] {
    direction: ltr;
}

/* =============================================================================
   RESPONSIVE - BETTER SCALING FOR SMALL WIDGETS
   ============================================================================= */

@media (max-width: 768px), (max-height: 500px) {
    .report-header[b-n4kt2mgj0w] {
        padding: 0.5rem 0.75rem;
    }

        .report-header[b-n4kt2mgj0w]  .rz-text,
        .report-header h6[b-n4kt2mgj0w] {
            font-size: 0.85rem !important;
        }

    .report-content[b-n4kt2mgj0w] {
        padding: 0.5rem;
    }

    .podium-container[b-n4kt2mgj0w] {
        gap: 0.35rem;
    }

    .podium-card[b-n4kt2mgj0w],
    .podium-card[b-n4kt2mgj0w]  .rz-card {
        min-width: 60px !important;
        max-width: 85px !important;
        padding: 0.5rem !important;
    }

    .podium-medal[b-n4kt2mgj0w] {
        font-size: 1.5rem;
    }

    /* More compact ranked items */
    .ranked-item[b-n4kt2mgj0w]  .rz-badge {
        min-width: 28px !important;
        width: 28px !important;
        font-size: 0.65rem !important;
        padding: 0.2rem 0.3rem !important;
    }

    .ranked-item[b-n4kt2mgj0w]  i[class*="bi-"] {
        font-size: 1.1rem !important;
        width: 1.2rem !important;
        min-width: 1.2rem !important;
    }

    .ranked-item[b-n4kt2mgj0w]  .rz-text {
        font-size: 0.8rem !important;
    }

    .ranked-item[b-n4kt2mgj0w]  div[style*="width: 150px"],
    .ranked-item[b-n4kt2mgj0w]  div[style*="width:150px"] {
        width: 100px !important;
        min-width: 80px !important;
        max-width: 120px !important;
    }

    .ranked-item[b-n4kt2mgj0w]  h6[style*="min-width"],
    .ranked-item[b-n4kt2mgj0w]  .rz-text[style*="min-width"] {
        min-width: 55px !important;
        max-width: 80px !important;
        font-size: 0.75rem !important;
    }

    .ranked-report[b-n4kt2mgj0w],
    .trend-report[b-n4kt2mgj0w],
    .trend-analysis-report[b-n4kt2mgj0w],
    .category-summary-report[b-n4kt2mgj0w] {
        gap: 0.4rem;
    }

    .metrics-grid[b-n4kt2mgj0w] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.35rem;
    }

    .category-grid[b-n4kt2mgj0w] {
        grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
        gap: 0.35rem;
    }
}

/* For very small widgets - stack elements */
@media (max-width: 500px), (max-height: 450px) {
    .report-header[b-n4kt2mgj0w] {
        padding: 0.4rem 0.6rem;
    }

        .report-header[b-n4kt2mgj0w]  .rz-text,
        .report-header h6[b-n4kt2mgj0w] {
            font-size: 0.8rem !important;
        }

    .report-icon[b-n4kt2mgj0w] {
        font-size: 1rem;
    }

    .report-content[b-n4kt2mgj0w] {
        padding: 0.4rem;
    }

    .podium-container[b-n4kt2mgj0w] {
        display: none;
    }

    /* More aggressive size reduction */
    .ranked-item[b-n4kt2mgj0w] {
        padding: 0.5rem !important;
    }

        .ranked-item[b-n4kt2mgj0w]  .rz-stack {
            gap: 0.35rem !important;
        }

        .ranked-item[b-n4kt2mgj0w]  .rz-badge {
            min-width: 25px !important;
            width: 25px !important;
            font-size: 0.6rem !important;
        }

        .ranked-item[b-n4kt2mgj0w]  i[class*="bi-"] {
            font-size: 1rem !important;
            width: 1rem !important;
            min-width: 1rem !important;
        }

        .ranked-item[b-n4kt2mgj0w]  .rz-text {
            font-size: 0.75rem !important;
        }

        .ranked-item[b-n4kt2mgj0w]  div[style*="width: 150px"],
        .ranked-item[b-n4kt2mgj0w]  div[style*="width:150px"] {
            width: 85px !important;
            min-width: 70px !important;
            max-width: 100px !important;
        }

        .ranked-item[b-n4kt2mgj0w]  .rz-progressbar {
            height: 18px !important;
        }

        .ranked-item[b-n4kt2mgj0w]  .rz-progressbar-label {
            font-size: 0.6rem !important;
            line-height: 18px !important;
            padding: 0 0.25rem !important;
        }

        .ranked-item[b-n4kt2mgj0w]  h6[style*="min-width"],
        .ranked-item[b-n4kt2mgj0w]  .rz-text[style*="min-width"] {
            min-width: 50px !important;
            max-width: 70px !important;
            font-size: 0.7rem !important;
        }

    .trend-card[b-n4kt2mgj0w],
    .trend-analysis-card[b-n4kt2mgj0w],
    .category-card[b-n4kt2mgj0w],
    .trend-card[b-n4kt2mgj0w]  .rz-card,
    .trend-analysis-card[b-n4kt2mgj0w]  .rz-card,
    .category-card[b-n4kt2mgj0w]  .rz-card {
        padding: 0.5rem !important;
    }

    .metrics-grid[b-n4kt2mgj0w] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

/* =============================================================================
   TEXT OVERFLOW FIXES - PREVENT OVERLAPPING
   ============================================================================= */

.report-widget[b-n4kt2mgj0w]  .rz-text,
.report-widget[b-n4kt2mgj0w]  h1,
.report-widget[b-n4kt2mgj0w]  h2,
.report-widget[b-n4kt2mgj0w]  h3,
.report-widget[b-n4kt2mgj0w]  h4,
.report-widget[b-n4kt2mgj0w]  h5,
.report-widget[b-n4kt2mgj0w]  h6,
.report-widget[b-n4kt2mgj0w]  p {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
}

/* =============================================================================
   DARK THEME
   ============================================================================= */

[data-theme="dark"] .report-header[b-n4kt2mgj0w] {
    background: var(--clr-surface);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .report-content[b-n4kt2mgj0w] {
    background: var(--clr-surface);
}

[data-theme="dark"] .report-summary[b-n4kt2mgj0w] {
    background: var(--clr-secondary);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .podium-card[b-n4kt2mgj0w],
[data-theme="dark"] .ranked-item[b-n4kt2mgj0w],
[data-theme="dark"] .trend-card[b-n4kt2mgj0w],
[data-theme="dark"] .trend-analysis-card[b-n4kt2mgj0w],
[data-theme="dark"] .category-card[b-n4kt2mgj0w],
[data-theme="dark"] .podium-card[b-n4kt2mgj0w]  .rz-card,
[data-theme="dark"] .ranked-item[b-n4kt2mgj0w]  .rz-card,
[data-theme="dark"] .trend-card[b-n4kt2mgj0w]  .rz-card,
[data-theme="dark"] .trend-analysis-card[b-n4kt2mgj0w]  .rz-card,
[data-theme="dark"] .category-card[b-n4kt2mgj0w]  .rz-card {
    background: var(--clr-secondary) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .metric-card[b-n4kt2mgj0w] {
    background: var(--clr-surface);
    border-color: rgba(255, 255, 255, 0.1);
}

/* =============================================================================
   ANIMATIONS
   ============================================================================= */

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

    to {
        opacity: 1;
    }
}

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

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

.podium-card[b-n4kt2mgj0w],
.ranked-item[b-n4kt2mgj0w],
.trend-card[b-n4kt2mgj0w],
.trend-analysis-card[b-n4kt2mgj0w],
.category-card[b-n4kt2mgj0w] {
    animation: fadeIn-b-n4kt2mgj0w 0.3s ease-out;
}

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    *[b-n4kt2mgj0w] {
        animation: none !important;
        transition: none !important;
    }
}

/* Focus states */
.report-actions button:focus-visible[b-n4kt2mgj0w],
.report-actions[b-n4kt2mgj0w]  .rz-button:focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
    .report-header[b-n4kt2mgj0w] {
        border: 1px solid #000;
    }

    .report-actions[b-n4kt2mgj0w] {
        display: none !important;
    }

    .report-content[b-n4kt2mgj0w] {
        overflow: visible !important;
        background: white !important;
    }
}
/* _content/alkpi/Components/Pages/Projects/Shared/WorkspaceContainer.razor.rz.scp.css */
/* Edit mode styling */
.edit-mode-column .widget-wrapper[b-kdpl3y9oam] {
    border: 2px dashed var(--clr-accent) !important;
}

.widget-resize-overlay[b-kdpl3y9oam] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 200;
    background: var(--clr-surface);
    padding: 0.75rem;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--clr-border);
}

.resize-buttons[b-kdpl3y9oam] {
    display: flex;
    gap: 0.5rem;
}

/* RTL */
[dir="rtl"] .widget-resize-overlay[b-kdpl3y9oam] {
    right: auto;
    left: 12px;
}
/* _content/alkpi/Components/Pages/Projects/Users/acceptinvitation.razor.rz.scp.css */
/* Card container */
.inv-card[b-961qkrp8fc] {
    max-width: 720px;
    background: var(--clr-surface);
    color: var(--bs-body-color);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    padding: 1rem;
}

/* Header */
.inv-card-header[b-961qkrp8fc] {
    background: var(--clr-secondary);
    border-radius: var(--border-radius);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--clr-border-light);
}

.inv-card-header i[b-961qkrp8fc] {
    color: var(--clr-accent);
}

/* Body */
.inv-body[b-961qkrp8fc] {
    padding: .25rem .25rem .5rem;
}

/* Project dot */
.project-color-dot[b-961qkrp8fc] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--dot-color, var(--clr-accent));
    border: 2px solid var(--clr-border-light);
    flex-shrink: 0;
}

/* Message block */
.inv-message[b-961qkrp8fc] {
    background: var(--clr-surface-hover);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--border-radius);
    padding: .75rem .9rem;
}

.text-accent[b-961qkrp8fc] { color: var(--clr-accent); }

/* Actions */
.inv-actions[b-961qkrp8fc] {
    margin-top: 1rem;
}

/* Loading and invalid states */
.loading-state[b-961qkrp8fc],
.invalid-invitation[b-961qkrp8fc] {
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Utilities */
.shadow-soft[b-961qkrp8fc] { box-shadow: var(--shadow) !important; }
.min-w-0[b-961qkrp8fc] { min-width: 0; }

/* Responsive tweaks */
@media (max-width: 576px) {
    .inv-card[b-961qkrp8fc] { padding: .75rem; }
    .inv-card-header[b-961qkrp8fc] { padding: .65rem .75rem; }
    .inv-actions[b-961qkrp8fc] { flex-direction: column; }
}
/* _content/alkpi/Components/Pages/Projects/Users/invitemembermodal.razor.rz.scp.css */
/* Clean, token-based theming aligned with app.css */
/*.invite-modal {
    border-radius: 14px;
    border: 1px solid var(--clr-border-light);
    color: var(--clr-text);
    background: var(--clr-surface);*/
    /* Ensure Bootstrap modal uses themed colors */
    /*--bs-modal-bg: var(--clr-surface);
    --bs-modal-color: var(--clr-text);
    --bs-modal-border-color: var(--clr-border-light);
    --bs-modal-header-border-color: var(--clr-border-light);
    --bs-modal-footer-border-color: var(--clr-border-light);
}

    .invite-modal .modal-header {
        background: var(--clr-secondary);
        color: var(--clr-text);
        border-bottom: 1px solid var(--clr-border-light);
    }

    .invite-modal .modal-body {
        background: var(--clr-surface);
    }*/

/* Inputs follow global tokens */
/*.input-group-text {
    background: var(--clr-surface-hover);
    color: var(--clr-text-secondary);
    border-color: var(--clr-border);
}

.form-control, .form-select {
    background: var(--clr-surface);
    color: var(--clr-text);
    border-color: var(--clr-border);
}

    .form-control::placeholder, .form-select::placeholder {
        color: var(--clr-text-muted);
        opacity: 0.85;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--clr-accent);
        box-shadow: 0 0 0 0.2rem var(--clr-accent-light);
    }*/

/* Accents and buttons */
/*.text-accent {
    color: var(--clr-accent);
}

.btn-primary {
    background: var(--clr-accent);
    border-color: var(--clr-accent);
    color: #fff;
}

.btn-secondary {
    background: var(--clr-surface-hover);
    border-color: var(--clr-border);
    color: var(--clr-text);
}*/

/* Alerts and helpers */
/*.alert-success, .alert-danger {
    background: var(--clr-surface-hover);
    color: var(--clr-text);
    border-color: var(--clr-border);
}

.form-text.text-muted {
    color: var(--clr-text-muted) !important;
}*/

/* Mobile */
/*@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.75rem;
    }

    .invite-modal .modal-body {
        padding: 1rem;
    }
}*/

/* RTL: right-align only the placeholder; typed email stays LTR */
/*:global([dir="rtl"]) #inviteEmail {*/
    /* ensure placeholder can follow RTL without affecting typed text */
    /*unicode-bidi: plaintext;
}

    :global([dir="rtl"]) #inviteEmail:placeholder-shown {
        text-align: right;*/ /* or text-align: end; */
        /*direction: rtl;
    }

    :global([dir="rtl"]) #inviteEmail:not(:placeholder-shown) {
        text-align: left;*/ /* keep email natural LTR */
        /*direction: ltr;
    }*/
/* _content/alkpi/Components/Pages/Projects/Users/usersmanagement.razor.rz.scp.css */
/* Users Management Styles - Compact Version */
.users-management[b-128dyg1gx9] {
    padding: 0;
    background: var(--bs-body-bg);
    min-height: 100vh;
}

/* Compact Header */
.management-header[b-128dyg1gx9] {
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-info) 100%);
    color: white;
    padding: 1.25rem 0; /* Reduced from 2rem */
    margin-bottom: 1.5rem; /* Reduced from 2rem */
    border-radius: 0 0 1rem 1rem; /* Reduced from 1.5rem */
    position: relative;
    overflow: hidden;
}

    .management-header[b-128dyg1gx9]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M30 30c0-11.046-8.954-20-20-20s-20 8.954-20 20 8.954 20 20 20 20-8.954 20-20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
        opacity: 0.1;
    }

.header-content[b-128dyg1gx9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem; /* Reduced from 1.5rem */
    position: relative;
    z-index: 1;
}

.header-left[b-128dyg1gx9] {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Reduced from 1rem */
}

.page-icon[b-128dyg1gx9] {
    width: 48px; /* Reduced from 60px */
    height: 48px; /* Reduced from 60px */
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem; /* Reduced from 1.5rem */
    backdrop-filter: blur(10px);
}

.header-text[b-128dyg1gx9] {
    flex: 1;
}

.page-title[b-128dyg1gx9] {
    margin: 0;
    font-size: 1.5rem; /* Reduced from 2rem */
    font-weight: 700;
    color: white;
}

.page-subtitle[b-128dyg1gx9] {
    margin: 0.25rem 0 0 0;
    opacity: 0.9;
    font-size: 0.9rem; /* Reduced from 1.1rem */
}

.header-actions[b-128dyg1gx9] {
    display: flex;
    gap: 0.75rem; /* Reduced from 1rem */
    align-items: center;
}

.invite-btn[b-128dyg1gx9] {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-weight: 600;
    padding: 0.5rem 1rem; /* Reduced from 0.75rem 1.5rem */
    border-radius: 50px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

    .invite-btn:hover[b-128dyg1gx9] {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.5);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }

.refresh-btn[b-128dyg1gx9] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.5rem 0.75rem; /* Reduced from 0.75rem 1rem */
    border-radius: 50px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

    .refresh-btn:hover[b-128dyg1gx9] {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.4);
        color: white;
    }

/* Compact Statistics Cards */
.team-statistics[b-128dyg1gx9] {
    margin-bottom: 1.5rem; /* Reduced from 2rem */
    padding: 0 1rem; /* Reduced from 1.5rem */
}

.stat-card[b-128dyg1gx9] {
    background: var(--bs-card-bg);
    border-radius: 0.75rem; /* Reduced from 1rem */
    padding: 1rem; /* Reduced from 1.5rem */
    border: 1px solid var(--bs-border-color);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Reduced shadow */
}

    .stat-card:hover[b-128dyg1gx9] {
        transform: translateY(-3px); /* Reduced from -5px */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); /* Reduced shadow */
    }

.stat-decoration[b-128dyg1gx9] {
    position: absolute;
    top: -15px; /* Reduced from -20px */
    right: -15px; /* Reduced from -20px */
    width: 60px; /* Reduced from 80px */
    height: 60px; /* Reduced from 80px */
    border-radius: 50%;
    opacity: 0.1;
}

.members-card .stat-decoration[b-128dyg1gx9] {
    background: var(--bs-primary);
}

.invitations-card .stat-decoration[b-128dyg1gx9] {
    background: var(--bs-warning);
}

.roles-card .stat-decoration[b-128dyg1gx9] {
    background: var(--bs-info);
}

.activity-card .stat-decoration[b-128dyg1gx9] {
    background: var(--bs-success);
}

.stat-icon[b-128dyg1gx9] {
    width: 36px; /* Reduced from 50px */
    height: 36px; /* Reduced from 50px */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem; /* Reduced from 1.5rem */
    margin-bottom: 0.75rem; /* Reduced from 1rem */
    color: white;
}

.members-card .stat-icon[b-128dyg1gx9] {
    background: var(--bs-primary);
}

.invitations-card .stat-icon[b-128dyg1gx9] {
    background: var(--bs-warning);
}

.roles-card .stat-icon[b-128dyg1gx9] {
    background: var(--bs-info);
}

.activity-card .stat-icon[b-128dyg1gx9] {
    background: var(--bs-success);
}

.stat-number[b-128dyg1gx9] {
    font-size: 1.75rem; /* Reduced from 2.5rem */
    font-weight: 700;
    color: var(--bs-body-color);
    margin-bottom: 0.25rem; /* Reduced from 0.5rem */
}

.stat-label[b-128dyg1gx9] {
    font-size: 0.75rem; /* Reduced from 0.9rem */
    color: var(--bs-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-change[b-128dyg1gx9] {
    margin-top: 0.35rem; /* Reduced from 0.5rem */
    font-size: 0.7rem; /* Reduced from 0.85rem */
}

.capacity-bar[b-128dyg1gx9] {
    margin-top: 0.5rem; /* Reduced from 0.75rem */
}

    .capacity-bar .progress[b-128dyg1gx9] {
        height: 4px; /* Reduced from 6px */
        border-radius: 2px;
        background: rgba(var(--bs-primary-rgb), 0.1);
    }

    .capacity-bar .progress-bar[b-128dyg1gx9] {
        border-radius: 2px;
        background: linear-gradient(90deg, var(--bs-primary), var(--bs-info));
    }

/* Compact Navigation */
.users-navigation[b-128dyg1gx9] {
    padding: 0 1rem; /* Reduced from 1.5rem */
    margin-bottom: 1.5rem; /* Reduced from 2rem */
}

.nav-container[b-128dyg1gx9] {
    background: var(--bs-card-bg);
    border-radius: 0.75rem; /* Reduced from 1rem */
    padding: 0.35rem; /* Reduced from 0.5rem */
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* Reduced shadow */
}

.nav-pills .nav-link[b-128dyg1gx9] {
    background: transparent;
    border: none;
    border-radius: 0.5rem; /* Reduced from 0.75rem */
    padding: 0.65rem 1rem; /* Reduced from 1rem 1.5rem */
    color: var(--bs-text-muted);
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem; /* Reduced from 0.5rem */
    position: relative;
}

    .nav-pills .nav-link:hover[b-128dyg1gx9] {
        background: rgba(var(--bs-primary-rgb), 0.1);
        color: var(--bs-primary);
    }

    .nav-pills .nav-link.active[b-128dyg1gx9] {
        background: var(--bs-primary);
        color: white;
        box-shadow: 0 3px 10px rgba(var(--bs-primary-rgb), 0.25); /* Reduced shadow */
    }

.nav-text[b-128dyg1gx9] {
    font-size: 0.8rem; /* Reduced from 0.95rem */
}

.nav-badge[b-128dyg1gx9] {
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
    padding: 0.15rem 0.35rem; /* Reduced from 0.25rem 0.5rem */
    border-radius: 50px;
    font-size: 0.65rem; /* Reduced from 0.75rem */
    font-weight: 600;
    min-width: 1.25rem; /* Reduced from 1.5rem */
    text-align: center;
}

.nav-pills .nav-link:not(.active) .nav-badge[b-128dyg1gx9] {
    background: var(--bs-light);
    color: var(--bs-body-color);
}

.nav-badge-warning[b-128dyg1gx9] {
    background: var(--bs-warning) !important;
    color: var(--bs-dark) !important;
}

/* Loading States */
.loading-container[b-128dyg1gx9] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 250px; /* Reduced from 300px */
    padding: 1.5rem; /* Reduced from 2rem */
}

.loading-content[b-128dyg1gx9] {
    text-align: center;
}

.loading-spinner[b-128dyg1gx9] {
    margin-bottom: 0.75rem; /* Reduced from 1rem */
}

.loading-text[b-128dyg1gx9] {
    color: var(--bs-text-muted);
    font-size: 0.95rem; /* Reduced from 1.1rem */
}

/* Members Section */
.members-section[b-128dyg1gx9] {
    padding: 0 1rem; /* Reduced from 1.5rem */
}

.members-controls[b-128dyg1gx9] {
    background: var(--bs-card-bg);
    border-radius: 0.75rem; /* Reduced from 1rem */
    padding: 1rem; /* Reduced from 1.5rem */
    margin-bottom: 1.5rem; /* Reduced from 2rem */
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* Reduced shadow */
}

.search-container[b-128dyg1gx9] {
    position: relative;
}

.search-icon[b-128dyg1gx9] {
    position: absolute;
    left: 0.75rem; /* Reduced from 1rem */
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-text-muted);
    z-index: 2;
    font-size: 0.8rem; /* Reduced size */
}

.search-input[b-128dyg1gx9] {
    padding-left: 2rem; /* Reduced from 2.5rem */
    padding-right: 2.5rem; /* Reduced from 3rem */
    border-radius: 50px;
    border: 2px solid var(--bs-border-color);
    transition: all 0.3s ease;
    font-size: 0.85rem; /* Reduced font size */
    padding-top: 0.5rem; /* Reduced padding */
    padding-bottom: 0.5rem; /* Reduced padding */
}

    .search-input:focus[b-128dyg1gx9] {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
    }

.btn-clear[b-128dyg1gx9] {
    position: absolute;
    right: 0.4rem; /* Reduced from 0.5rem */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--bs-text-muted);
    padding: 0.2rem; /* Reduced from 0.25rem */
    border-radius: 50%;
    width: 1.5rem; /* Reduced from 2rem */
    height: 1.5rem; /* Reduced from 2rem */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem; /* Reduced font size */
}

.filter-select[b-128dyg1gx9] {
    border-radius: 50px;
    border: 2px solid var(--bs-border-color);
    transition: all 0.3s ease;
    font-size: 0.85rem; /* Reduced font size */
    padding: 0.5rem 0.75rem; /* Reduced padding */
}

    .filter-select:focus[b-128dyg1gx9] {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
    }

.view-options .btn[b-128dyg1gx9] {
    border-radius: 50px;
    padding: 0.4rem 0.6rem; /* Reduced from 0.5rem 0.75rem */
    font-size: 0.8rem; /* Reduced font size */
}

/* Compact Members Grid */
.members-grid[b-128dyg1gx9] {
    margin-bottom: 1.5rem; /* Reduced from 2rem */
}

.member-card[b-128dyg1gx9] {
    background: var(--bs-card-bg);
    border-radius: 0.75rem; /* Reduced from 1rem */
    border: 1px solid var(--bs-border-color);
    transition: all 0.3s ease;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* Reduced shadow */
}

    .member-card:hover[b-128dyg1gx9] {
        transform: translateY(-3px); /* Reduced from -5px */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); /* Reduced shadow */
        border-color: var(--bs-primary);
    }

.member-header[b-128dyg1gx9] {
    padding: 1rem 1rem 0 1rem; /* Reduced from 1.5rem */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.member-avatar-container[b-128dyg1gx9] {
    position: relative;
}

.member-avatar[b-128dyg1gx9] {
    width: 48px; /* Reduced from 60px */
    height: 48px; /* Reduced from 60px */
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem; /* Reduced from 1.25rem */
    font-weight: 600;
    border: 2px solid var(--bs-card-bg); /* Reduced from 3px */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); /* Reduced shadow */
}

.member-you-badge[b-128dyg1gx9] {
    position: absolute;
    top: -3px; /* Reduced from -5px */
    right: -3px; /* Reduced from -5px */
    background: var(--bs-success);
    color: white;
    font-size: 0.6rem; /* Reduced from 0.7rem */
    padding: 0.15rem 0.35rem; /* Reduced from 0.25rem 0.5rem */
    border-radius: 50px;
    font-weight: 600;
}

.member-actions-header .btn-ghost[b-128dyg1gx9] {
    background: none;
    border: none;
    color: var(--bs-text-muted);
    padding: 0.35rem; /* Reduced from 0.5rem */
    border-radius: 50%;
    transition: all 0.3s ease;
    font-size: 0.8rem; /* Reduced font size */
}

    .member-actions-header .btn-ghost:hover[b-128dyg1gx9] {
        background: var(--bs-light);
        color: var(--bs-body-color);
    }

.member-body[b-128dyg1gx9] {
    padding: 0.75rem 1rem; /* Reduced from 1rem 1.5rem */
}

.member-name[b-128dyg1gx9] {
    font-size: 0.95rem; /* Reduced from 1.1rem */
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 0.2rem; /* Reduced from 0.25rem */
}

.member-email[b-128dyg1gx9] {
    color: var(--bs-text-muted);
    font-size: 0.8rem; /* Reduced from 0.9rem */
    margin-bottom: 0.35rem; /* Reduced from 0.5rem */
}

.member-phone[b-128dyg1gx9] {
    color: var(--bs-text-muted);
    font-size: 0.75rem; /* Reduced from 0.85rem */
    margin-bottom: 0.75rem; /* Reduced from 1rem */
}

.member-meta[b-128dyg1gx9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem; /* Reduced from 1rem */
}

.member-joined[b-128dyg1gx9] {
    font-size: 0.7rem; /* Reduced from 0.8rem */
    color: var(--bs-text-muted);
    display: flex;
    align-items: center;
}

.tenure-badge[b-128dyg1gx9] {
    background: var(--bs-light);
    color: var(--bs-body-color);
    padding: 0.15rem 0.35rem; /* Reduced from 0.25rem 0.5rem */
    border-radius: 50px;
    font-size: 0.65rem; /* Reduced from 0.75rem */
    font-weight: 600;
}

.member-footer[b-128dyg1gx9] {
    padding: 0 1rem 1rem 1rem; /* Reduced from 1.5rem */
    border-top: 1px solid var(--bs-border-color);
    margin-top: auto;
}

.role-management[b-128dyg1gx9] {
    padding-top: 0.75rem; /* Reduced from 1rem */
    position: relative;
}

.role-select[b-128dyg1gx9] {
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--bs-border-color);
    padding: 0.4rem 0.6rem; /* Reduced from 0.5rem 0.75rem */
    font-size: 0.8rem; /* Reduced font size */
}

.role-loading[b-128dyg1gx9] {
    position: absolute;
    right: 0.6rem; /* Reduced from 0.75rem */
    top: 50%;
    transform: translateY(-50%);
}

.role-badge[b-128dyg1gx9] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem; /* Reduced from 0.5rem 1rem */
    border-radius: 50px;
    font-size: 0.75rem; /* Reduced from 0.85rem */
    font-weight: 600;
    width: 100%;
    justify-content: center;
    gap: 0.35rem; /* Reduced from 0.5rem */
}

    .role-badge.role-owner[b-128dyg1gx9] {
        background: rgba(var(--bs-warning-rgb), 0.1);
        color: var(--bs-warning);
        border: 1px solid rgba(var(--bs-warning-rgb), 0.3);
    }

    .role-badge.role-admin[b-128dyg1gx9] {
        background: rgba(var(--bs-danger-rgb), 0.1);
        color: var(--bs-danger);
        border: 1px solid rgba(var(--bs-danger-rgb), 0.3);
    }

    .role-badge.role-supervisor[b-128dyg1gx9] {
        background: rgba(var(--bs-info-rgb), 0.1);
        color: var(--bs-info);
        border: 1px solid rgba(var(--bs-info-rgb), 0.3);
    }

    .role-badge.role-user[b-128dyg1gx9] {
        background: rgba(var(--bs-success-rgb), 0.1);
        color: var(--bs-success);
        border: 1px solid rgba(var(--bs-success-rgb), 0.3);
    }

/* Compact Invitations Section */
.invitations-section[b-128dyg1gx9] {
    padding: 0 1rem; /* Reduced from 1.5rem */
}

.invitations-grid[b-128dyg1gx9] {
    margin-bottom: 1.5rem; /* Reduced from 2rem */
}

.invitation-card[b-128dyg1gx9] {
    background: var(--bs-card-bg);
    border-radius: 0.75rem; /* Reduced from 1rem */
    border: 1px solid var(--bs-border-color);
    transition: all 0.3s ease;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* Reduced shadow */
}

    .invitation-card:hover[b-128dyg1gx9] {
        transform: translateY(-2px); /* Reduced from -3px */
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Reduced shadow */
        border-color: var(--bs-primary);
    }

.invitation-header[b-128dyg1gx9] {
    padding: 1rem 1rem 0 1rem; /* Reduced from 1.5rem */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.invitation-avatar[b-128dyg1gx9] {
    width: 40px; /* Reduced from 50px */
    height: 40px; /* Reduced from 50px */
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-warning), var(--bs-orange, #fd7e14));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem; /* Reduced from 1.25rem */
}

.invitation-status[b-128dyg1gx9] {
    position: relative;
}

.status-badge[b-128dyg1gx9] {
    padding: 0.2rem 0.6rem; /* Reduced from 0.25rem 0.75rem */
    border-radius: 50px;
    font-size: 0.65rem; /* Reduced from 0.75rem */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .status-badge.status-pending[b-128dyg1gx9] {
        background: rgba(var(--bs-warning-rgb), 0.1);
        color: var(--bs-warning);
        border: 1px solid rgba(var(--bs-warning-rgb), 0.3);
    }

    .status-badge.status-expired[b-128dyg1gx9] {
        background: rgba(var(--bs-danger-rgb), 0.1);
        color: var(--bs-danger);
        border: 1px solid rgba(var(--bs-danger-rgb), 0.3);
    }

    .status-badge.status-cancelled[b-128dyg1gx9] {
        background: rgba(var(--bs-secondary-rgb), 0.1);
        color: var(--bs-secondary);
        border: 1px solid rgba(var(--bs-secondary-rgb), 0.3);
    }

.invitation-body[b-128dyg1gx9] {
    padding: 0.75rem 1rem; /* Reduced from 1rem 1.5rem */
}

.invitation-email[b-128dyg1gx9] {
    font-size: 0.95rem; /* Reduced from 1.1rem */
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 0.75rem; /* Reduced from 1rem */
}

.invitation-details[b-128dyg1gx9] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem; /* Reduced from 0.5rem */
    margin-bottom: 0.75rem; /* Reduced from 1rem */
}

.detail-item[b-128dyg1gx9] {
    display: flex;
    align-items: center;
    font-size: 0.75rem; /* Reduced from 0.85rem */
    color: var(--bs-text-muted);
}

.invitation-message[b-128dyg1gx9] {
    margin-top: 0.75rem; /* Reduced from 1rem */
}

.message-content[b-128dyg1gx9] {
    background: var(--bs-light);
    padding: 0.75rem; /* Reduced from 1rem */
    border-radius: 0.5rem;
    border-left: 3px solid var(--bs-primary);
    font-style: italic;
    color: var(--bs-text-muted);
    font-size: 0.8rem; /* Reduced font size */
}

.invitation-actions[b-128dyg1gx9] {
    padding: 0 1rem 1rem 1rem; /* Reduced from 1.5rem */
    border-top: 1px solid var(--bs-border-color);
    margin-top: auto;
    display: flex;
    gap: 0.4rem; /* Reduced from 0.5rem */
    justify-content: flex-end;
}

    .invitation-actions .btn[b-128dyg1gx9] {
        font-size: 0.75rem; /* Reduced font size */
        padding: 0.35rem 0.75rem; /* Reduced padding */
    }

/* Compact Insights Section */
.insights-section[b-128dyg1gx9] {
    padding: 0 1rem; /* Reduced from 1.5rem */
}

.insight-card[b-128dyg1gx9] {
    background: var(--bs-card-bg);
    border-radius: 0.75rem; /* Reduced from 1rem */
    border: 1px solid var(--bs-border-color);
    transition: all 0.3s ease;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* Reduced shadow */
}

    .insight-card:hover[b-128dyg1gx9] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Reduced shadow */
    }

.insight-header[b-128dyg1gx9] {
    padding: 1rem 1rem 0 1rem; /* Reduced from 1.5rem */
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 1rem; /* Reduced from 1.5rem */
}

.insight-title[b-128dyg1gx9] {
    margin: 0;
    font-size: 0.95rem; /* Reduced from 1.1rem */
    font-weight: 600;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
}

.insight-body[b-128dyg1gx9] {
    padding: 0 1rem 1rem 1rem; /* Reduced from 1.5rem */
}

.role-distribution[b-128dyg1gx9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Reduced from 1rem */
}

.role-stat[b-128dyg1gx9] {
    background: var(--bs-light);
    border-radius: 0.5rem; /* Reduced from 0.75rem */
    padding: 0.75rem; /* Reduced from 1rem */
    transition: all 0.3s ease;
}

    .role-stat:hover[b-128dyg1gx9] {
        background: rgba(var(--bs-primary-rgb), 0.05);
    }

.role-stat-header[b-128dyg1gx9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem; /* Reduced from 0.75rem */
}

.role-count[b-128dyg1gx9] {
    font-size: 0.8rem; /* Reduced from 0.9rem */
    font-weight: 600;
    color: var(--bs-body-color);
}

.role-progress[b-128dyg1gx9] {
    height: 6px; /* Reduced from 8px */
    border-radius: 3px;
    background: var(--bs-border-color);
    overflow: hidden;
}

    .role-progress .progress-bar[b-128dyg1gx9] {
        border-radius: 3px;
        transition: width 0.6s ease;
    }

.activity-timeline[b-128dyg1gx9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Reduced from 1rem */
}

.activity-item[b-128dyg1gx9] {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Reduced from 1rem */
    padding: 0.75rem; /* Reduced from 1rem */
    background: var(--bs-light);
    border-radius: 0.5rem; /* Reduced from 0.75rem */
    transition: all 0.3s ease;
}

    .activity-item:hover[b-128dyg1gx9] {
        background: rgba(var(--bs-primary-rgb), 0.05);
    }

.activity-avatar[b-128dyg1gx9] {
    width: 32px; /* Reduced from 40px */
    height: 32px; /* Reduced from 40px */
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem; /* Reduced from 0.9rem */
    font-weight: 600;
    flex-shrink: 0;
}

.activity-content[b-128dyg1gx9] {
    flex: 1;
}

.activity-text[b-128dyg1gx9] {
    font-size: 0.8rem; /* Reduced from 0.9rem */
    color: var(--bs-body-color);
    margin-bottom: 0.15rem; /* Reduced from 0.25rem */
}

.activity-time[b-128dyg1gx9] {
    font-size: 0.7rem; /* Reduced from 0.8rem */
    color: var(--bs-text-muted);
}

.activity-role[b-128dyg1gx9] {
    flex-shrink: 0;
}

.role-badge-sm[b-128dyg1gx9] {
    padding: 0.15rem 0.35rem; /* Reduced from 0.25rem 0.5rem */
    border-radius: 50px;
    font-size: 0.6rem; /* Reduced from 0.7rem */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .role-badge-sm.role-owner[b-128dyg1gx9] {
        background: rgba(var(--bs-warning-rgb), 0.1);
        color: var(--bs-warning);
    }

    .role-badge-sm.role-admin[b-128dyg1gx9] {
        background: rgba(var(--bs-danger-rgb), 0.1);
        color: var(--bs-danger);
    }

    .role-badge-sm.role-supervisor[b-128dyg1gx9] {
        background: rgba(var(--bs-info-rgb), 0.1);
        color: var(--bs-info);
    }

    .role-badge-sm.role-user[b-128dyg1gx9] {
        background: rgba(var(--bs-success-rgb), 0.1);
        color: var(--bs-success);
    }

.metrics-grid[b-128dyg1gx9] {
    margin-top: 0.75rem; /* Reduced from 1rem */
}

.metric-card[b-128dyg1gx9] {
    background: var(--bs-light);
    border-radius: 0.5rem; /* Reduced from 0.75rem */
    padding: 1rem; /* Reduced from 1.5rem */
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
}

    .metric-card:hover[b-128dyg1gx9] {
        background: rgba(var(--bs-primary-rgb), 0.05);
        transform: translateY(-2px);
    }

.metric-icon[b-128dyg1gx9] {
    width: 36px; /* Reduced from 50px */
    height: 36px; /* Reduced from 50px */
    border-radius: 50%;
    background: var(--bs-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem; /* Reduced from 1.25rem */
    margin: 0 auto 0.75rem auto; /* Reduced from 1rem */
}

.metric-content[b-128dyg1gx9] {
    text-align: center;
}

.metric-value[b-128dyg1gx9] {
    font-size: 1.25rem; /* Reduced from 1.75rem */
    font-weight: 700;
    color: var(--bs-body-color);
    margin-bottom: 0.35rem; /* Reduced from 0.5rem */
}

.metric-label[b-128dyg1gx9] {
    font-size: 0.7rem; /* Reduced from 0.85rem */
    color: var(--bs-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Empty States */
.empty-state[b-128dyg1gx9] {
    text-align: center;
    padding: 3rem 1.5rem; /* Reduced from 4rem 2rem */
    color: var(--bs-text-muted);
}

.empty-icon[b-128dyg1gx9] {
    font-size: 3rem; /* Reduced from 4rem */
    margin-bottom: 1rem; /* Reduced from 1.5rem */
    opacity: 0.3;
}

.empty-state h5[b-128dyg1gx9] {
    color: var(--bs-body-color);
    font-weight: 600;
    margin-bottom: 0.75rem; /* Reduced from 1rem */
    font-size: 1.1rem; /* Reduced font size */
}

.empty-state p[b-128dyg1gx9] {
    font-size: 0.95rem; /* Reduced from 1.1rem */
    margin-bottom: 1.5rem; /* Reduced from 2rem */
}

/* Responsive Design */
@media (max-width: 768px) {
    .management-header[b-128dyg1gx9] {
        padding: 1rem 0; /* Reduced from 1.5rem */
    }

    .header-content[b-128dyg1gx9] {
        flex-direction: column;
        gap: 0.75rem; /* Reduced from 1rem */
        text-align: center;
    }

    .header-actions[b-128dyg1gx9] {
        flex-direction: column;
        width: 100%;
        gap: 0.4rem; /* Reduced from 0.5rem */
    }

    .invite-btn[b-128dyg1gx9],
    .refresh-btn[b-128dyg1gx9] {
        width: 100%;
        justify-content: center;
        padding: 0.4rem 0.8rem; /* Reduced padding */
    }

    .page-title[b-128dyg1gx9] {
        font-size: 1.25rem; /* Reduced from 1.5rem */
    }

    .page-subtitle[b-128dyg1gx9] {
        font-size: 0.85rem; /* Reduced from 1rem */
    }

    .team-statistics[b-128dyg1gx9],
    .members-section[b-128dyg1gx9],
    .invitations-section[b-128dyg1gx9],
    .insights-section[b-128dyg1gx9] {
        padding: 0 0.75rem; /* Reduced from 1rem */
    }

    .members-controls[b-128dyg1gx9] {
        padding: 0.75rem; /* Reduced from 1rem */
    }

        .members-controls .row[b-128dyg1gx9] {
            flex-direction: column;
        }

        .members-controls .col-md-6[b-128dyg1gx9],
        .members-controls .col-md-4[b-128dyg1gx9],
        .members-controls .col-md-2[b-128dyg1gx9] {
            margin-bottom: 0.75rem; /* Reduced from 1rem */
        }

    .nav-container[b-128dyg1gx9] {
        padding: 0.2rem; /* Reduced from 0.25rem */
    }

    .nav-pills .nav-link[b-128dyg1gx9] {
        padding: 0.5rem 0.75rem; /* Reduced from 0.75rem 1rem */
        font-size: 0.75rem; /* Reduced from 0.9rem */
    }

    .nav-text[b-128dyg1gx9] {
        display: none;
    }

    .member-card[b-128dyg1gx9] {
        margin-bottom: 0.75rem; /* Reduced from 1rem */
    }

    .stat-card[b-128dyg1gx9] {
        margin-bottom: 0.75rem; /* Reduced from 1rem */
    }

    .metric-card[b-128dyg1gx9] {
        margin-bottom: 0.75rem; /* Reduced from 1rem */
    }
}

@media (max-width: 576px) {
    .page-icon[b-128dyg1gx9] {
        width: 40px; /* Reduced from 50px */
        height: 40px; /* Reduced from 50px */
        font-size: 1rem; /* Reduced from 1.25rem */
    }

    .stat-number[b-128dyg1gx9] {
        font-size: 1.5rem; /* Reduced from 2rem */
    }

    .member-avatar[b-128dyg1gx9] {
        width: 40px; /* Reduced from 50px */
        height: 40px; /* Reduced from 50px */
        font-size: 0.85rem; /* Reduced from 1rem */
    }

    .member-header[b-128dyg1gx9] {
        padding: 0.75rem 0.75rem 0 0.75rem; /* Reduced from 1rem */
    }

    .member-body[b-128dyg1gx9],
    .member-footer[b-128dyg1gx9] {
        padding-left: 0.75rem; /* Reduced from 1rem */
        padding-right: 0.75rem; /* Reduced from 1rem */
    }

    .invitation-header[b-128dyg1gx9],
    .invitation-body[b-128dyg1gx9],
    .invitation-actions[b-128dyg1gx9] {
        padding-left: 0.75rem; /* Reduced from 1rem */
        padding-right: 0.75rem; /* Reduced from 1rem */
    }

    .insight-header[b-128dyg1gx9],
    .insight-body[b-128dyg1gx9] {
        padding-left: 0.75rem; /* Reduced from 1rem */
        padding-right: 0.75rem; /* Reduced from 1rem */
    }
}

/* Dark Theme Adjustments */
[data-theme="dark"] .management-header[b-128dyg1gx9] {
    background: linear-gradient(135deg, #222831 0%, #393E46 100%);
}

[data-theme="dark"] .stat-card[b-128dyg1gx9],
[data-theme="dark"] .member-card[b-128dyg1gx9],
[data-theme="dark"] .invitation-card[b-128dyg1gx9],
[data-theme="dark"] .insight-card[b-128dyg1gx9] {
    background: #393E46;
    border-color: #4a5568;
}

[data-theme="dark"] .members-controls[b-128dyg1gx9],
[data-theme="dark"] .nav-container[b-128dyg1gx9] {
    background: #393E46;
    border-color: #4a5568;
}

[data-theme="dark"] .search-input[b-128dyg1gx9],
[data-theme="dark"] .filter-select[b-128dyg1gx9] {
    background: #222831;
    border-color: #4a5568;
    color: #EEEEEE;
}

[data-theme="dark"] .role-stat[b-128dyg1gx9],
[data-theme="dark"] .activity-item[b-128dyg1gx9],
[data-theme="dark"] .metric-card[b-128dyg1gx9] {
    background: #222831;
}

[data-theme="dark"] .message-content[b-128dyg1gx9] {
    background: #222831;
    border-left-color: #00ADB5;
}

[data-theme="dark"] .tenure-badge[b-128dyg1gx9] {
    background: #222831;
    color: #EEEEEE;
}

/* Animation Classes */
.fade-in[b-128dyg1gx9] {
    animation: fadeIn-b-128dyg1gx9 0.3s ease-in;
}

@keyframes fadeIn-b-128dyg1gx9 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.slide-up[b-128dyg1gx9] {
    animation: slideUp-b-128dyg1gx9 0.3s ease-out;
}

@keyframes slideUp-b-128dyg1gx9 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Loading Animations */
.loading-shimmer[b-128dyg1gx9] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-128dyg1gx9 1.5s infinite;
}

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

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

[data-theme="dark"] .loading-shimmer[b-128dyg1gx9] {
    background: linear-gradient(90deg, #393E46 25%, #4a5568 50%, #393E46 75%);
    background-size: 200% 100%;
}

/* Accessibility Improvements */
.nav-link:focus[b-128dyg1gx9],
.btn:focus[b-128dyg1gx9],
.form-control:focus[b-128dyg1gx9],
.form-select:focus[b-128dyg1gx9] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .management-header[b-128dyg1gx9],
    .header-actions[b-128dyg1gx9],
    .members-controls[b-128dyg1gx9],
    .users-navigation[b-128dyg1gx9],
    .invitation-actions[b-128dyg1gx9],
    .member-actions-header[b-128dyg1gx9] {
        display: none;
    }

    .stat-card[b-128dyg1gx9],
    .member-card[b-128dyg1gx9],
    .invitation-card[b-128dyg1gx9],
    .insight-card[b-128dyg1gx9] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .users-management[b-128dyg1gx9] {
        padding: 0;
    }
}
/* _content/alkpi/Components/Pages/Subscription/Plans.razor.rz.scp.css */
/* ===== MODERN SUBSCRIPTION PLANS DESIGN ===== */

.subscription-plans-modern[b-088s5lfgiw] {
    min-height: 100vh;
    background: var(--clr-primary);
}

/* ===== HERO SECTION - COMPACT ===== */
.hero-section-modern[b-088s5lfgiw] {
    position: relative;
    padding: 2rem 0 1.5rem; /* Further reduced */
    background: linear-gradient(135deg, var(--clr-accent) 0%, color-mix(in srgb, var(--clr-accent) 70%, var(--clr-primary)) 100%);
    overflow: hidden;
}

.hero-animated-bg[b-088s5lfgiw] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.hero-circle[b-088s5lfgiw] {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float-b-088s5lfgiw 20s infinite ease-in-out;
}

.hero-circle-1[b-088s5lfgiw] {
    width: 250px; /* Further reduced */
    height: 250px;
    top: -60px;
    left: -60px;
    animation-delay: 0s;
}

.hero-circle-2[b-088s5lfgiw] {
    width: 150px; /* Further reduced */
    height: 150px;
    top: 50%;
    right: -30px;
    animation-delay: 7s;
}

.hero-circle-3[b-088s5lfgiw] {
    width: 120px; /* Further reduced */
    height: 120px;
    bottom: -30px;
    left: 30%;
    animation-delay: 14s;
}

@keyframes float-b-088s5lfgiw {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -30px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

.hero-content[b-088s5lfgiw] {
    position: relative;
    z-index: 1;
}

.hero-badge[b-088s5lfgiw] {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.875rem; /* Reduced */
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    color: white;
    font-weight: 600;
    font-size: 0.75rem; /* Smaller */
    animation: slideDown-b-088s5lfgiw 0.6s ease-out;
}

.hero-title-modern[b-088s5lfgiw] {
    font-size: 2rem; /* Further reduced */
    font-weight: 800;
    color: white;
    margin-bottom: 0.5rem; /* Reduced */
    animation: slideUp-b-088s5lfgiw 0.6s ease-out;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.hero-subtitle-modern[b-088s5lfgiw] {
    font-size: 0.9rem; /* Further reduced */
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto 1rem; /* Reduced */
    animation: slideUp-b-088s5lfgiw 0.6s ease-out 0.1s both;
}

.current-plan-badge-modern[b-088s5lfgiw] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem; /* Reduced */
    padding: 0.625rem 1.25rem; /* Reduced */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    animation: slideUp-b-088s5lfgiw 0.6s ease-out 0.2s both;
}

.badge-icon[b-088s5lfgiw] {
    width: 35px; /* Reduced */
    height: 35px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem; /* Reduced */
    color: #1a202c;
}

.badge-content[b-088s5lfgiw] {
    text-align: left;
    color: white;
}

.badge-label[b-088s5lfgiw] {
    display: block;
    font-size: 0.75rem; /* Reduced */
    opacity: 0.9;
    margin-bottom: 0.125rem;
}

.badge-plan[b-088s5lfgiw] {
    display: block;
    font-size: 0.9rem; /* Reduced */
    font-weight: 700;
}

.badge-period[b-088s5lfgiw] {
    font-size: 0.75rem; /* Reduced */
    opacity: 0.8;
}

@keyframes slideDown-b-088s5lfgiw {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

@keyframes slideUp-b-088s5lfgiw {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ===== LOADING STATE ===== */
.loading-state[b-088s5lfgiw] {
    text-align: center;
    padding: 3rem 0; /* Reduced */
}

.loading-spinner[b-088s5lfgiw] {
    position: relative;
    width: 60px; /* Reduced */
    height: 60px;
    margin: 0 auto 1.5rem; /* Reduced */
}

.spinner-ring[b-088s5lfgiw] {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: var(--clr-accent);
    border-radius: 50%;
    animation: spin-b-088s5lfgiw 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

    .spinner-ring:nth-child(2)[b-088s5lfgiw] {
        width: 70%;
        height: 70%;
        top: 15%;
        left: 15%;
        border-top-color: rgba(var(--clr-accent-rgb), 0.5);
        animation-delay: 0.3s;
    }

    .spinner-ring:nth-child(3)[b-088s5lfgiw] {
        width: 40%;
        height: 40%;
        top: 30%;
        left: 30%;
        border-top-color: rgba(var(--clr-accent-rgb), 0.3);
        animation-delay: 0.6s;
    }

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

.loading-text[b-088s5lfgiw] {
    color: var(--clr-text-secondary);
    font-size: 1rem;
}

/* ===== BILLING TOGGLE - IMPROVED VISIBILITY ===== */
.billing-toggle-container[b-088s5lfgiw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.5rem; /* Reduced */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.billing-toggle-modern[b-088s5lfgiw] {
    position: relative;
    display: inline-flex;
    background: var(--clr-surface);
    border: 3px solid var(--clr-accent);
    border-radius: 18px;
    padding: 0.5rem; /* Slightly reduced */
    box-shadow: 0 8px 24px rgba(var(--clr-accent-rgb), 0.2);
}

.toggle-slider[b-088s5lfgiw] {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: calc(50% - 0.5rem);
    height: calc(100% - 1rem);
    background: linear-gradient(135deg, var(--clr-accent) 0%, color-mix(in srgb, var(--clr-accent) 80%, #000) 100%);
    border-radius: 14px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(var(--clr-accent-rgb), 0.5);
}

.toggle-option[b-088s5lfgiw] {
    position: relative;
    z-index: 1;
    padding: 0.875rem 2.5rem; /* Slightly reduced */
    border: none;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 700;
    font-size: 1rem; /* Reduced */
    transition: all 0.3s;
    cursor: pointer;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .toggle-option.active[b-088s5lfgiw] {
        color: white;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    }

    .toggle-option:not(.active):hover[b-088s5lfgiw] {
        color: var(--clr-accent);
        transform: scale(1.02);
    }

/* Light theme adjustments - IMPROVED CONTRAST */
[data-theme="light"] .toggle-option[b-088s5lfgiw] {
    color: #475569; /* Darker for better contrast */
    font-weight: 700;
}

    [data-theme="light"] .toggle-option.active[b-088s5lfgiw] {
        color: white;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

[data-theme="light"] .billing-toggle-modern[b-088s5lfgiw] {
    background: #f8fafc;
    border-color: var(--clr-accent);
    box-shadow: 0 8px 24px rgba(113, 201, 206, 0.25);
}

[data-theme="light"] .toggle-slider[b-088s5lfgiw] {
    background: linear-gradient(135deg, var(--clr-accent) 0%, color-mix(in srgb, var(--clr-accent) 85%, #000) 100%);
    box-shadow: 0 4px 16px rgba(var(--clr-accent-rgb), 0.6);
}

/* Dark theme improvements */
[data-theme="dark"] .toggle-option[b-088s5lfgiw] {
    color: #94a3b8; /* Lighter for dark background */
}

    [data-theme="dark"] .toggle-option.active[b-088s5lfgiw] {
        color: white;
    }

.savings-highlight[b-088s5lfgiw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem; /* Reduced */
    padding: 0.75rem 1.5rem; /* Reduced */
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.08) 100%);
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 14px;
    color: #059669;
    font-size: 0.9rem; /* Reduced */
    font-weight: 700;
    animation: pulse-glow-b-088s5lfgiw 2s ease-in-out infinite;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

[data-theme="light"] .savings-highlight[b-088s5lfgiw] {
    color: #047857;
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
    border-color: rgba(5, 150, 105, 0.4);
}

@keyframes pulse-glow-b-088s5lfgiw {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25);
    }
}

.savings-highlight i[b-088s5lfgiw] {
    font-size: 1.125rem;
}

.savings-highlight strong[b-088s5lfgiw] {
    color: #10b981;
    font-size: 1.125rem;
}

[data-theme="light"] .savings-highlight strong[b-088s5lfgiw] {
    color: #059669;
}

/* ===== PLANS GRID - COMPACT ===== */
.plans-grid-modern[b-088s5lfgiw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem; /* Reduced */
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 1400px) {
    .plans-grid-modern[b-088s5lfgiw] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1200px) {
    .plans-grid-modern[b-088s5lfgiw] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .plans-grid-modern[b-088s5lfgiw] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* ===== PLAN CARD - COMPACT WITH ALIGNED BUTTONS ===== */
.plan-card-modern[b-088s5lfgiw] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--clr-surface);
    border: 2px solid var(--clr-border);
    border-radius: 20px;
    padding: 1.25rem; /* Reduced from 1.5rem */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    height: 100%; /* Ensure full height */
}

    .plan-card-modern:hover[b-088s5lfgiw] {
        transform: translateY(-8px);
        box-shadow: 0 20px 50px rgba(var(--clr-accent-rgb), 0.15);
        border-color: var(--clr-accent);
    }

    .plan-card-modern.popular[b-088s5lfgiw] {
        border-color: var(--clr-accent);
        box-shadow: 0 8px 32px rgba(var(--clr-accent-rgb), 0.2);
    }

        .plan-card-modern.popular:hover[b-088s5lfgiw] {
            box-shadow: 0 20px 50px rgba(var(--clr-accent-rgb), 0.3);
        }

    .plan-card-modern.current[b-088s5lfgiw] {
        border-color: #10b981;
        background: linear-gradient(135deg, var(--clr-surface) 0%, rgba(16, 185, 129, 0.05) 100%);
    }

    .plan-card-modern.enterprise[b-088s5lfgiw] {
        border-color: #f59e0b;
        background: linear-gradient(135deg, var(--clr-surface) 0%, rgba(245, 158, 11, 0.05) 100%);
    }

/* ===== BADGES - COMPACT ===== */
.popular-ribbon[b-088s5lfgiw] {
    position: absolute;
    top: 15px; /* Reduced */
    right: -30px;
    background: linear-gradient(135deg, var(--clr-accent) 0%, color-mix(in srgb, var(--clr-accent) 80%, #000) 100%);
    color: white;
    padding: 0.375rem 2.5rem; /* Reduced */
    transform: rotate(45deg);
    font-size: 0.75rem; /* Reduced */
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(var(--clr-accent-rgb), 0.4);
    z-index: 10;
}

    .popular-ribbon i[b-088s5lfgiw] {
        margin-right: 0.25rem;
        font-size: 0.7rem;
    }

.current-badge-modern[b-088s5lfgiw] {
    position: absolute;
    top: 15px; /* Reduced */
    right: -30px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 0.375rem 2.5rem; /* Reduced */
    transform: rotate(45deg);
    font-size: 0.75rem; /* Reduced */
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    z-index: 10;
}

    .current-badge-modern i[b-088s5lfgiw] {
        margin-right: 0.25rem;
        font-size: 0.7rem;
    }

.savings-badge-modern[b-088s5lfgiw] {
    position: absolute;
    top: 10px; /* Reduced */
    left: 10px;
    z-index: 10;
}

.savings-badge-inner[b-088s5lfgiw] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 0.375rem 0.75rem; /* Reduced */
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    min-width: 50px; /* Reduced */
}

    .savings-badge-inner i[b-088s5lfgiw] {
        font-size: 0.875rem; /* Reduced */
        margin-bottom: 0.125rem;
    }

    .savings-badge-inner span[b-088s5lfgiw] {
        font-size: 1rem; /* Reduced */
        font-weight: 800;
        line-height: 1;
    }

.savings-badge-text[b-088s5lfgiw] {
    font-size: 0.625rem; /* Reduced */
    font-weight: 600;
    opacity: 0.95;
    margin-top: 0.125rem;
}

/* ===== PLAN CARD CONTENT - WITH FLEXBOX FOR BUTTON ALIGNMENT ===== */
.plan-card-content[b-088s5lfgiw] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.875rem; /* Reduced */
}

/* ===== PLAN HEADER - COMPACT ===== */
.plan-header-modern[b-088s5lfgiw] {
    text-align: center;
}

.plan-icon[b-088s5lfgiw] {
    width: 50px; /* Reduced */
    height: 50px;
    margin: 0 auto 0.75rem; /* Reduced */
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* Reduced */
    color: white;
}

.plan-card-modern.enterprise .plan-icon[b-088s5lfgiw] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.plan-name-modern[b-088s5lfgiw] {
    font-size: 1.25rem; /* Reduced */
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: 0.375rem; /* Reduced */
}

.plan-description-modern[b-088s5lfgiw] {
    font-size: 0.8rem; /* Reduced */
    color: var(--clr-text-secondary);
    line-height: 1.4;
    margin: 0;
}

/* ===== PLAN PRICING - COMPACT ===== */
.plan-pricing-modern[b-088s5lfgiw] {
    text-align: center;
    padding: 0.875rem 0; /* Reduced */
}

.price-display-modern[b-088s5lfgiw] {
    margin-bottom: 0.75rem; /* Reduced */
}

.price-main[b-088s5lfgiw] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem; /* Reduced */
}

    .price-main .currency[b-088s5lfgiw] {
        font-size: 1.5rem; /* Reduced */
        font-weight: 700;
        color: var(--clr-text-secondary);
        margin-top: 0.5rem;
    }

    .price-main .amount[b-088s5lfgiw] {
        font-size: 3rem; /* Reduced */
        font-weight: 800;
        color: var(--clr-text);
        line-height: 1;
    }

    .price-main .period[b-088s5lfgiw] {
        font-size: 0.875rem; /* Reduced */
        color: var(--clr-text-secondary);
        font-weight: 600;
        align-self: flex-end;
        margin-bottom: 0.625rem;
    }

.price-subtitle[b-088s5lfgiw] {
    font-size: 0.8rem; /* Reduced */
    color: var(--clr-text-secondary);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

    .price-subtitle i[b-088s5lfgiw] {
        font-size: 0.75rem;
    }

.price-yearly-info[b-088s5lfgiw] {
    margin-top: 0.75rem; /* Reduced */
    padding: 0.625rem; /* Reduced */
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Reduced */
}

[data-theme="light"] .price-yearly-info[b-088s5lfgiw] {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.12) 0%, rgba(5, 150, 105, 0.06) 100%);
    border-color: rgba(5, 150, 105, 0.3);
}

.yearly-total[b-088s5lfgiw],
.yearly-savings[b-088s5lfgiw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.85rem; /* Reduced */
    color: #059669;
    font-weight: 600;
}

[data-theme="light"] .yearly-total[b-088s5lfgiw],
[data-theme="light"] .yearly-savings[b-088s5lfgiw] {
    color: #047857;
}

.yearly-total i[b-088s5lfgiw],
.yearly-savings i[b-088s5lfgiw] {
    font-size: 0.875rem;
}

.price-hint-modern[b-088s5lfgiw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.75rem; /* Reduced */
    background: rgba(var(--clr-accent-rgb), 0.1);
    border: 1px solid rgba(var(--clr-accent-rgb), 0.2);
    border-radius: 10px;
    font-size: 0.8rem; /* Reduced */
    color: var(--clr-accent);
    font-weight: 600;
}

.price-custom-modern[b-088s5lfgiw] {
    padding: 1.5rem 0; /* Reduced */
}

.price-custom-icon[b-088s5lfgiw] {
    width: 60px; /* Reduced */
    height: 60px;
    margin: 0 auto 0.75rem; /* Reduced */
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem; /* Reduced */
    color: white;
}

.price-custom-text[b-088s5lfgiw] {
    font-size: 1.25rem; /* Reduced */
    font-weight: 700;
    color: #f59e0b;
}

.price-free-modern[b-088s5lfgiw] {
    padding: 1.5rem 0; /* Reduced */
}

.price-value[b-088s5lfgiw] {
    font-size: 2.5rem; /* Reduced */
    font-weight: 800;
    color: #10b981;
    margin-bottom: 0.375rem;
}

.price-label[b-088s5lfgiw] {
    font-size: 0.9rem; /* Reduced */
    color: var(--clr-text-secondary);
    font-weight: 600;
}

/* ===== PLAN FEATURES - COMPACT ===== */
.plan-features-modern[b-088s5lfgiw] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.features-list[b-088s5lfgiw] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* Reduced */
    flex: 1;
}

.feature-item-modern[b-088s5lfgiw] {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Reduced */
    padding: 0.625rem; /* Reduced */
    background: var(--clr-surface-hover);
    border-radius: 10px;
    transition: all 0.3s;
}

    .feature-item-modern:hover[b-088s5lfgiw] {
        transform: translateX(4px);
        background: rgba(var(--clr-accent-rgb), 0.1);
    }

    .feature-item-modern.disabled[b-088s5lfgiw] {
        opacity: 0.5;
    }

.feature-icon[b-088s5lfgiw] {
    width: 32px; /* Reduced */
    height: 32px;
    background: var(--gradient-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem; /* Reduced */
    color: white;
    flex-shrink: 0;
}

.feature-item-modern.disabled .feature-icon[b-088s5lfgiw] {
    background: var(--clr-border);
    color: var(--clr-text-muted);
}

.feature-content[b-088s5lfgiw] {
    flex: 1;
    color: var(--clr-text);
    font-size: 0.85rem; /* Reduced */
    line-height: 1.3;
}

/* ===== PLAN CTA - ALIGNED AT BOTTOM ===== */
.plan-card-modern .btn-modern[b-088s5lfgiw] {
    margin-top: auto; /* Push button to bottom */
    width: 100%;
    padding: 0.875rem 1.5rem; /* Reduced */
    border: none;
    border-radius: 12px;
    font-size: 1rem; /* Reduced */
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary[b-088s5lfgiw] {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 16px rgba(var(--clr-accent-rgb), 0.3);
}

    .btn-primary:hover:not(:disabled)[b-088s5lfgiw] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(var(--clr-accent-rgb), 0.4);
    }

    .btn-primary:active:not(:disabled)[b-088s5lfgiw] {
        transform: scale(0.98);
    }

.btn-current[b-088s5lfgiw] {
    background: #10b981;
    color: white;
    cursor: not-allowed;
    opacity: 0.8;
}

.btn-enterprise[b-088s5lfgiw] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

    .btn-enterprise:hover[b-088s5lfgiw] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    }

.btn-spinner[b-088s5lfgiw] {
    width: 18px; /* Reduced */
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-088s5lfgiw 0.8s linear infinite;
}

/* ===== USAGE STATS - COMPACT ===== */
.usage-stats-modern[b-088s5lfgiw] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem; /* Reduced */
    background: var(--clr-surface);
    border: 2px solid var(--clr-border);
    border-radius: 20px;
}

.usage-header h3[b-088s5lfgiw] {
    font-size: 1.5rem; /* Reduced */
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: 1.5rem; /* Reduced */
}

.usage-grid[b-088s5lfgiw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem; /* Reduced */
}

.usage-card[b-088s5lfgiw] {
    display: flex;
    gap: 1.25rem; /* Reduced */
    padding: 1.25rem; /* Reduced */
    background: var(--clr-surface-hover);
    border-radius: 14px;
    transition: all 0.3s;
}

    .usage-card:hover[b-088s5lfgiw] {
        transform: translateY(-3px);
        box-shadow: var(--shadow);
    }

.usage-icon[b-088s5lfgiw] {
    width: 50px; /* Reduced */
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* Reduced */
    color: white;
    flex-shrink: 0;
}

    .usage-icon.projects[b-088s5lfgiw] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .usage-icon.kpis[b-088s5lfgiw] {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }

    .usage-icon.ai[b-088s5lfgiw] {
        background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    }

.usage-content[b-088s5lfgiw] {
    flex: 1;
}

.usage-label[b-088s5lfgiw] {
    font-size: 0.8rem; /* Reduced */
    color: var(--clr-text-secondary);
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.usage-value[b-088s5lfgiw] {
    font-size: 1.75rem; /* Reduced */
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: 0.625rem;
}

    .usage-value span[b-088s5lfgiw] {
        font-size: 1.125rem; /* Reduced */
        color: var(--clr-text-secondary);
        font-weight: 500;
    }

.usage-progress[b-088s5lfgiw] {
    height: 6px; /* Reduced */
    background: var(--clr-border);
    border-radius: 3px;
    overflow: hidden;
}

.usage-progress-bar[b-088s5lfgiw] {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== EMPTY STATE ===== */
.empty-state-modern[b-088s5lfgiw] {
    text-align: center;
    padding: 3rem 1.5rem; /* Reduced */
}

.empty-icon[b-088s5lfgiw] {
    font-size: 4rem; /* Reduced */
    color: var(--clr-border);
    margin-bottom: 1.5rem; /* Reduced */
}

.empty-state-modern h3[b-088s5lfgiw] {
    font-size: 1.25rem; /* Reduced */
    color: var(--clr-text-secondary);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .hero-section-modern[b-088s5lfgiw] {
        padding: 1.5rem 0 1rem;
    }

    .hero-title-modern[b-088s5lfgiw] {
        font-size: 1.5rem;
    }

    .hero-subtitle-modern[b-088s5lfgiw] {
        font-size: 0.85rem;
    }

    .plans-grid-modern[b-088s5lfgiw] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .price-main .amount[b-088s5lfgiw] {
        font-size: 2.75rem;
    }

    .usage-grid[b-088s5lfgiw] {
        grid-template-columns: 1fr;
    }

    .billing-toggle-modern[b-088s5lfgiw] {
        width: 100%;
    }

    .toggle-option[b-088s5lfgiw] {
        flex: 1;
        padding: 0.75rem 0.875rem;
        font-size: 0.9rem;
    }

    .billing-toggle-container[b-088s5lfgiw] {
        margin-bottom: 2rem;
    }

    .savings-highlight[b-088s5lfgiw] {
        font-size: 0.8rem;
        padding: 0.625rem 1.25rem;
    }
}

/* ===== CONTAINER ADJUSTMENTS ===== */
.container[b-088s5lfgiw] {
    max-width: 1600px !important;
}

.subscription-plans-modern .container[b-088s5lfgiw] {
    padding-left: 2rem;
    padding-right: 2rem;
}

@media (max-width: 768px) {
    .subscription-plans-modern .container[b-088s5lfgiw] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ===== ADDITIONAL IMPROVEMENTS ===== */
.container.py-5[b-088s5lfgiw] {
    padding-top: 2rem !important; /* Reduced */
    padding-bottom: 2rem !important;
}